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

Posted 2023-02-23

【中文标题】Ember 验收测试没有看到更新的 DOM

【英文标题】：Ember acceptance test not seeing updated 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('[e-mail]', '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 与第一个内联。没有区别。

【参考方案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 中提到的步骤后，我遇到了类似的问题