在Ember集成测试期间调试呈现的HTML和代码

Question

我想在一个页面中呈现组件的测试，以便我可以看到我在某些方法中插入的调试。

出于某种原因，我的测试似乎没有正确加载数据，我想看看它是什么加载。

不幸的是，QUnit只能说明我什么，我放在asserts，我想知道是否有办法看到我的测试隔离在一个页面上，所以我可以看到控制台日志。

这是测试的骨架：

import { moduleForComponent, test } from 'ember-qunit'; 
import hbs from 'htmlbars-inline-precompile'; 
import { clickTrigger } from 'frontend/tests/helpers/ember-power-select'; 

moduleForComponent('dynamic-input-field', 'Integration | Component | dynamic input field', { 
    integration: true 
}); 

test('it renders', function(assert) { 
    // Set any properties with this.set('myProperty', 'value'); 
    this.set(...); 

    // render the component 
    this.render(hbs`{{my-component myProperty}}`); 

    // actions of user here 
    clickTrigger(); //this opens the ember-power-select 
    assert.equal($('.ember-power-select-dropdown').length, 1, 'Dropdown is rendered'); 
    // check if it is rendering the elements and if it is excluding one element 
    assert.equal('Field Four',$($('.ember-power-select-option')[2]).text().trim()); 
}); 

编辑：我只用assert.equal()想通了什么问题。它缺少一个$()（jQuery函数）。例如：

assert.equal('Field Four',$($('.ember-power-select-option')[2]).text().trim()); 

它仍然是非常高兴看到渲染组件，而不是与assert.equal()

Answer 1

玩尝试使用您的组件的didRender lifecycle hook内debugger; statement，就像这样：

export default Ember.Component.extend({ 
    didRender() { 
    /* jshint ignore:start */ 
    debugger; 
    /* jshint ignore:end */ 
    }, 

    // the rest of your code... 
}); 

它将在集成测试中暂停代码执行，并且您可以在控制台中处理代码。如果您在浏览器中使用QUnit Runner，则HTML渲染将在跑步者的显示区域中暂停，您也可以检查该渲染。

我创建了一个Ember Twiddle example来演示此解决方案。