在Ember组件的Yielding上下文中测试属性

Posted 2021-05-06

有时我会处理需要产生数据传输对象（DTO）的组件，以便分解问题。例如，如果我有某种UI组件，我想在多个上下文中重用。我会将这个表示组件提取为非异步的东西，留下一个在需要时处理异步调用的包装器。然后，异步组件将产生调用的数据。一个示例用法是：

{{#call-ajax as |data|}}
  {{presentation-component title=data.title}}
{{/call-ajax}}

现在，对于测试，我不想在presentation-component组件的测试中使用call-ajax，但我需要一些方法来对作为data的ajax调用的结果进行断言。

我最初的想法是某种组件/帮助器只能用于公开用于检查用法以及它们被调用的API的测试。也许在测试中有这样的东西：

this.render(hbs`
  {{#call-ajax as |data|}}
    {{test-inspector data}}
  {{/call-ajax}}
`);

虽然，我不知道如何实现这一目标。

有没有关于如何在不打印所有原始字段并进行DOM查找的情况下测试data对象的建议？

答案

您可以通过在Ember.js中的集成测试中向this上下文注册一个帮助程序，并将其作为参数传递给某些机制来存储它们以供以后检查。

我在下面的例子中通过sinon使用ember-sinon，但如果需要，它可以以更香草的方式完成：

const stub = sinon.stub();
const helper = Ember.Helper.helper(stub);
this.register('helper:test-inspector', helper);

this.render(hbs`
  {{#call-ajax as |data|}}
    {{test-inspector data}}
  {{/call-ajax}}
`);

assert.deepEqual(stub.getCall(0).args[0][0], expectedData);