Ember 组件测试——当它不调用外部操作时如何对组件的操作进行单元测试？答案

【问题标题】：Ember component test -- how unit test component's action when it doesn't invoke an external action?Ember 组件测试——当它不调用外部操作时如何对组件的操作进行单元测试？
【发布时间】：2017-04-12 21:06:23
【问题描述】：

我对 Ember 有点陌生，正在尝试测试一个寻呼机组件。简化后的组件如下所示：

export default Ember.Component.extend({
    index: 0,
    actions: {
        next() {
            this.incrementProperty('index');
        }
    }
});

我正在尝试测试 next() 操作是否确实按预期增加了 index 属性。我写了一个这样的单元测试：

test('next should increment the index by 1', function (assert) {
  const component = this.subject();

  assert.equal(component.get('index'), 0, 'Index should be 0');

  component.get('actions').next();
  assert.equal(component.get('index'), 1, 'index should be 1');
});

但它失败并出现错误“this.incrementProperty is not a function”。调试，测试中的“this”，当在 next() 函数中时，不是组件的上下文——它是一个以 next() 作为其唯一属性的对象。

我想知道这是否是因为我在测试中调用 nextPlace 操作的方式。我知道我可以编写一个集成测试，单击触发此操作的按钮并比较一些 UI 以确保它已更改，但是当我试图测试的只是函数本身按预期执行时，这似乎非常令人费解。如果它是传递给该组件的操作（关闭操作），我知道我可以在集成测试中设置一个虚拟函数，将其传递给组件，然后查看它如何响应。但是这个动作不会调用传递给它的动作。

我意识到我正在测试的功能非常基础，但部分原因是为了了解如何在不调用外部（对组件）操作的组件中测试操作。

【问题讨论】：

标签： javascript testing ember.js ember-testing

【解决方案1】：

如果您没有表达不编写集成测试的动机，我只会建议您编写集成测试。 IMO，您的理由是有效的。对于您的案例，我有 3 条启动单元测试的建议。

首先：不起作用的原因是“component.get('actions').next 在没有任何上下文的情况下获取对next 函数的引用。所以this 在该调用中无效。要使其有效，只需绑定组件如下图所示：

component.get('actions').next.bind(component)();

但我不喜欢这样，因为它会从上下文中提取next 并再次绑定它。我们正在做这个bind 的事情，因为我们知道next 函数在其代码中引用了this。

所以我的第二个建议是“以某种方式触发事件”。要触发它，请查看以下代码：

component.send('next');

IMO，这更好。我们不需要知道“接下来要做什么”。我们只是在触发一个事件。

但这涉及到 ember 组件的生命周期。我们接受这种情况：有一个名为actions 的特定哈希，我们可以通过send 触发它。（这完全没问题。）我们可以将doing something 与action handling 分开，而不是处理actions。所以你可以定义另一个函数来做你需要的事情，然后简单地从你的动作处理程序中调用它。（好吧，在这种情况下，我们再次需要知道动作处理程序调用了什么函数。但这对我来说似乎更清楚。）如下所示：

next(){
  this.incrementProperty('index');
},
actions:{
  next(){
    this.next();
  }
}

您可以在 this twiddle 查看所有三个选项。

【讨论】：