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

我仍在深入Ember的验收测试。我似乎要面对的一个问题是在事件发生后DOM没有得到更新。例如，我的页面有一个侧面菜单。简单的切换改变属性，在它的组件，然后在菜单本身上切换一个 “隐藏” 类：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('[email protected]', '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。我已经做了菜单的包装的HTML中的console.log最后assert之前，它仍然能看到有class=hide

的#menu元素是否有什么明显的，我做错了什么？在验收测试中，我找不到多个具有多个andThen调用的示例，因此我尝试将它嵌套 - 如上所述 - 并将第二个andThen与第一个内联对齐。没有不同。

来源

2016-09-20 Scott Fyfe

如果打开测试浏览器窗口中的开发者控制台，你可能会看到这样的错误：

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

来源

2016-11-22 16:34:41

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

回答

相关问题