Ember 验收测试没有看到更新的 DOM答案

【问题标题】：Ember acceptance test not seeing updated DOMEmber 验收测试没有看到更新的 DOM
【发布时间】：2016-09-20 07:20:26
【问题描述】：

我仍在深入了解 Ember 的验收测试。我似乎一直遇到的一个问题是 DOM 在事件发生后没有得到更新。例如，我的页面有一个侧边菜单。一个简单的切换会更改其组件中的属性，然后切换菜单本身的“隐藏”类：

组件

import Ember from 'ember';

export default Ember.Component.extend({
  menuHidden: true,
  actions: {
    toggleMenu(){
      this.set('menuHidden', !this.get('menuHidden'));
    },
  }
});

模板

<a id="menu-toggle" class="{{unless menuHidden 'open'}}" {{ action 'toggleMenu' }}>
  <span></span><span></span><span></span>
</a>
<div id="menu" class="{{if menuHidden 'hide'}}">
  {{#link-to 'dashboard' invokeAction='closeMenu'}}Dashboard{{/link-to}}
  {{#each menu as |child|}}
    {{menu-child child=child createCase=(action 'createCase') menuHidden=menuHidden}}
  {{/each}}
  <a href="javascript:void(0)" {{ action 'logout' }}>Logout</a>
</div>

验收测试

import { test } from 'ember-qunit';
import moduleForAcceptance from '../helpers/module-for-acceptance';

moduleForAcceptance('Acceptance | side menu');

test('side menu opens and closes', assert=>{

  logIn('my@email.com', 'password');

  andThen(()=>{
    assert.equal(find('#menu').attr('class'), 'hide', 'Hidden by default');

    click('#menu-toggle');

    andThen(()=>{
      assert.equal(find('#menu').attr('class'), '', 'Now visible');
    });
  });

});

现在它在浏览器中运行良好。测试使用我的自定义帮助程序正常登录（菜单仅在登录时可见），如果我将console.log 放入toggleMenu()，它就会被测试触发。但它失败了最后一个assert。我在最后一个assert 之前对菜单的包装器的HTML 做了一个console.log，它仍然看到带有class=hide 的#menu 元素

有什么明显的我做错了吗？我在验收测试中找不到很多有多个andThen 调用的示例，所以我尝试将它嵌套 - 如上所述 - 并将第二个andThen 与第一个内联。没有区别。

【问题讨论】：

标签： ember.js acceptance-testing

【解决方案1】：

如果您在测试浏览器窗口中打开开发者控制台，您可能会看到以下错误：

Assertion failed: You have turned on testing mode, which disabled the run-loop's autorun. You will need to wrap any code with asynchronous side-effects in an Ember.run

组件中的以下行被视为具有异步副作用的代码：

this.set('menuHidden', !this.get('menuHidden'));

相反，为了使测试正常工作，您需要手动将这一行添加到运行循环中，这是通过在Ember.run 中添加该行代码来实现的，如下所示：

import Ember from 'ember';

export default Ember.Component.extend({
  menuHidden: true,
  actions: {
    toggleMenu(){
      Ember.run(this, function(){
        this.set('menuHidden', !this.get('menuHidden'));
      });
    },
  }
});

这不会影响实际运行的代码，因为Ember.run 中的操作将被合并到主运行循环中。

在完成here 中提到的步骤后，我遇到了类似的问题

【讨论】：