余烬测试组件与产量

Question

我无法通过 yield 块表达式将编译后的 html 输入到组件中。见测试：

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

moduleForComponent('pro-tab-link', 'Unit | Component | pro tab link', {
  // Specify the other units that are required for this test
  // needs: ['component:foo', 'helper:bar'],
  unit: true
});

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

  // Creates the component instance
  var component = this.subject({
    template: Ember.Handlebars.compile(
      "<h1>Hello world</h1>"
    )
  });

  console.log(component);
  assert.equal(component._state, 'preRender');

  var $component = this.append();

  Ember.run(function() {
   component.set('isOpen', true);
 });

  console.log(component);
  console.log($component.html());

  assert.equal(component._state, 'inDOM');
  assert.ok(component.isOpen);
});

还有模板：

if isOpen
  == yield

由于某种原因，h1 标记没有被传递到组件的产量中。我如何让这个工作？

Answer 1

您应该按照fantastic article 关于该主题的内容从对组件进行单元测试切换到为它们编写集成测试。

您找不到 h1 的原因是这是一个单元测试（即，我们只测试 component.js），我们应该期望在单元测试中无法访问 DOM - 因此切换到集成测试的建议，一个高于单元但低于验收测试的测试水平。

通过这种方式，您将能够在 DOM 中测试组件及其与模板的交互。