在 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

尝试使用 debugger; statement inside your component's didRender lifecycle hook，像这样：

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

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

它会在您的集成测试中暂停代码执行，您可以在控制台中使用您的代码。如果您在浏览器中使用 QUnit Runner，HTML 渲染将在运行器的显示区域暂停，您也可以检查它。

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

在 Ember 集成测试期间调试渲染 HTML 和代码

Debug rendered HTML and code during an Ember integration test

javascript

ember.js

integration-testing

qunit

ember-testing