Unit testing 单元测试组件

我花了24小时试图围绕我的一个EmberJS组件构建一个单元测试。我用的是qunit。我想将整个组件（把手模板和所有组件）作为一个不同的单元进行测试

我的组件如下所示：

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

{{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");
});

components/my-awesome-component.handlebar文件如下所示：

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

{{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");
});

…测试结果如下所示：

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

{{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站点上的文档严重缺乏，我所有的WebSearch对于单元测试组件的标准案例都没有任何用处

提前感谢！：）

---

Julian

我通过使用runloop实现了这一点

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");
});

它工作的原因是runloop强制内部的位在代码中的该点上精确求值，以便在执行var result=…行时绑定已经更新了模板

---

希望这能为其他人省去一些痛苦。

确实是

组件/my awesome组件。把手

实际上插入了名为

components/my awesome

的模板，还是将其作为

组件/my awesome组件

插入？我不知道。我不确定如何判断。这与您刚才回答的问题类似。。。我不知道如何使用模板简单地测试组件（我最初不知道您必须指定模板，而且测试环境没有像正常的非测试余烬那样自动将其粘合在一起）.我可能可以结束这个问题，尽管它仍然提出了一个问题，即他们很少或没有关于如何在ember站点上进行单元测试的记录黄金路径。不确定当我不再需要回答问题时该怎么做？好主意。现在就做。