Ember受け入れテストで更新されたDOMが表示されない

Question

Emberの受け入れテストの深みにはまだ迷っています。私が持っていると思う1つの問題は、イベント後に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

明らかに間違っていますか？私は受け入れテストで複数のandThenコールを持つ人の例を見つけることができないので、上記のように入れ子にしてみて、最初のものとインラインで2番目のandThenを引き出しました。変わりはない。

Answer 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

に記載されている手順を経て解決した同様の問題がありました。