unit-testing - 单元测试组件

Question

在过去的 24 小时里，我一直在尝试围绕我的一个 EmberJS 组件构建单元测试。我正在使用 qunit。我想将整个组件( Handlebars 模板和所有)作为一个不同的单元进行测试。

我的组件如下所示:

App.MyAwesomeComponent = Ember.Component.extend({
  someAttribute: null
  someComputedValue: function() {
    this.get('someAttribute') + ' some extra piece of text ';
  }.property('someAttribute')
});

components/my-awesome-component.handlebars 文件如下所示:

{{someComputedValue}}

...测试看起来像这样:

test("When passed a string after rendering, renders the computed value as its content", function() {
  component = App.MyAwesomeComponent.create({
    templateName: "components/my-awesome"
  });
  appendComponentToView();
  component.set('someAttribute', 'an exciting value');
  var result = view.$().text().trim();
  equal(result, "an exciting value some extra piece of text ", "contents are rendered with the new value in place");
});

问题是我不断收到各种错误，例如“'null'不是对象(评估'depth0 ['my-awesome']')等。

我正在为单元测试组件寻找某种黄金路径。我不想使用集成测试(出于希望显而易见的原因 - 它是一个组件，我不想在我的应用程序中构建一个虚拟页面，以便我可以从各个角度对其进行测试)。

当涉及到单元测试时，ember 站点上的文档严重缺乏，而且我所有的网络搜索对于我看来是单元测试组件的标准案例都没有任何用处。

提前致谢! :)

朱利安

Answer 1

我通过使用运行循环得到了这个工作。

test("When passed a string after rendering, renders the computed value as its content", function() {
  component = App.MyAwesomeComponent.create({
    layoutName: "components/my-awesome"
  });
  appendComponentToView();
  Ember.run(function() {
    component.set('someAttribute', 'an exciting value');
  });
  var result = view.$().text().trim();
  equal(result, "an exciting value some extra piece of text ", "contents are rendered with the new value in place");
});

它起作用的原因是运行循环强制内部位在代码中的那个点精确计算，以便绑定(bind)在 var result = ... 行执行时更新了模板。

希望这可以减轻其他人的痛苦。