通过 add on 安装 Ember 助手然后在组件中使用它会破坏测试

installing an Ember helper through add on then using it in a component breaks the tests

我正在安装 'ember-moment' 助手,然后在组件中使用它。一旦我这样做,那些组件的测试就会中断,几乎什么也没说:

not ok 120 PhantomJS 1.9 - StatusCardComponent: it renders
---
    actual: >
        null
    message: >
        Died on test #2     at http://localhost:7357/assets/test-support.js:2779
            at test (http://localhost:7357/assets/test-support.js:1796)
            at http://localhost:7357/assets/client.js:11190
            at http://localhost:7357/assets/vendor.js:150
            at tryFinally (http://localhost:7357/assets/vendor.js:30)
            at http://localhost:7357/assets/vendor.js:156
            at http://localhost:7357/assets/test-loader.js:29
            at http://localhost:7357/assets/test-loader.js:21
            at http://localhost:7357/assets/test-loader.js:40
            at http://localhost:7357/assets/test-support.js:5545: Assertion Failed: A helper named 'moment' could not be found
    Log: >
...

这里是测试本身的代码,它只是自动生成:

import {
  moduleForComponent,
  test
} from 'ember-qunit';

moduleForComponent('event-card', {
  // Specify the other units that are required for this test
  // needs: ['component:foo', 'helper:bar']
});

test('it renders', function(assert) {
  assert.expect(2);

  // Creates the component instance
  var component = this.subject();
  assert.equal(component._state, 'preRender');

  // Renders the component to the page
  this.render();
  assert.equal(component._state, 'inDOM');
});

我尝试了很多方法将此助手作为依赖项添加到测试中,例如 needs: ['helper:moment'] 并将其初始化程序签名添加到 moduleForComponent 函数的参数中,但没有任何效果,我找不到任何相关信息它。非常感谢帮助。

你看到被注释掉的那一行了吗: // needs: ['component:foo', 'helper:bar']

您需要取消注释并将其改为:

needs: ['helper:moment']

如果您的 moment 助手注册正确,那应该会有帮助

编辑:根据这个PR,你应该可以指定{ integration: true }将你现有的单元测试变成集成测试,这样就消除了needs: 的需要。

 moduleForComponent('post', { integration: true }); 

可以在此处找到更多背景信息:https://github.com/rwjblue/ember-qunit/issues/108。本质上,集成标志禁用测试的隔离容器,以便它可以访问应用程序的解析器。

注意:需要 ember-qunit@0.2.11.

旧答案:看看这个 PR:https://github.com/switchfly/ember-test-helpers/pull/21 添加了 moduleForIntegration。这是相关的位:

This adds a new kind of test module that fills a gap in the current set of possible tests. So far we have:

• unit tests that are good for testing algorithmic correctness in isolation.

• acceptance tests that are good for testing within a complete application.

But we're missing the ability to integration test a unit smaller than whole-application. This PR adds a new TestModuleForIntegration that lets you drive an integration test with a template. I think this is often a more appropriate way to test Ember Components than a unit test, because interesting components tend to have rich dependence on other components.

您可以在liquid-fire tests中看到它的使用:

/* global sinon */
import Ember from "ember";
import moduleForIntegration from "../../helpers/module-for-integration";
import { test } from "ember-qunit";

moduleForIntegration('Integration: liquid-if');

test('it should render', function(assert) {
  this.set('person', 'Tom');
  this.render(`
    {{#liquid-if isReady}}
      {{person}} is ready
    {{else}}
      {{person}} is not ready
    {{/liquid-if}}
  `); // }}`)

  assert.equal(this.$().text().trim(), 'Tom is not ready');
  this.set('person', 'Yehuda');
  assert.equal(this.$().text().trim(), 'Yehuda is not ready');
  this.set('isReady', true);
  assert.equal(this.$().text().trim(), 'Yehuda is ready');
});

这就是最终的效果:

import {
    moduleForComponent,
    test
} from 'ember-qunit';

import Ember from 'ember';

import { initialize } from '../../../../../initializers/ember-moment';

moduleForComponent('event-card', {
    // Specify the other units that are required for this test
    // needs: ['helper:moment'],
    setup: function (container) {
        Ember.run(function () {
            // these two arguments are not used
            // but probably still good to pass them in
            // in the event we leverage them in the future
            initialize(container);
        });
    }
});

test('it renders', function (assert) {
    assert.expect(2);

    // Creates the component instance
    var component = this.subject();
    assert.equal(component._state, 'preRender');

    // Renders the component to the page
    this.render();
    assert.equal(component._state, 'inDOM');
});