Тест на приемку Ember не видел обновленного DOM

Question

Я все еще попадаю в глубину приемочного тестирования 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. Я сделал console.log на обёртках в меню для в HTML-до последнего assert, она по-прежнему видит #menu элемента с class=hide

Есть ли что-то очевидно, что я делаю неправильно? Я не могу найти много примеров людей с несколькими звонками andThen в приемочных тестах, поэтому я попробовал, чтобы он был вложен - как указано выше - и вытащил второй 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