具有计算属性的简单 Ember 组件测试答案

【问题标题】：Simple Ember component test with computed properties具有计算属性的简单 Ember 组件测试
【发布时间】：2015-06-30 18:34:05
【问题描述】：

我知道这应该很简单，我只是做的不对，还没有找到可以模仿的例子，我想我也不完全理解 Ember.run() 中应该包含什么

这是我的组件代码：

import Ember from 'ember';
export default Ember.Component.extend({
  isGreen: function() {
    if (!status) { return ''; }
    return status.toUpperCase() === 'G';
  }.property('status')
});

我的组件模板：

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-green {{if isGreen 'active'}}">
    <input checked="checked" name="status" value="G" type="radio"/> Green
  </label>
  <label class="btn btn-yellow {{if isYellow 'active'}}">
      <input name="status" value="Y" type="radio"/> Yellow
  </label>
  <label class="btn btn-red {{if isRed 'active'}}">
      <input name="status" value="R" type="radio"/> Red
  </label>
</div>

在我的测试中：

test('status sets active class on the correct button', function(assert) {
  expect(3);
  var component = this.subject();

  //Green status
  Ember.run(function() {
    component.set('status', 'G');
  })
  equal(this.$().find('.btn-green.active').length, 1, 'When status is green, the green button has the active class');

我进行了其中三个测试，针对三种不同状态中的每一种进行测试。如果我只有一个测试，我不需要将component.set() 包装在Ember.run() 中以使测试通过。但是如果我有所有三个测试，我会得到这个错误：

您已打开测试模式，这会禁用运行循环的自动运行。您将需要使用异步副作用包装任何代码在运行中

但是，如果我确实将每个 component.set() 调用放入运行循环中，那么我的测试会由于 equal 断言期望 1 并得到 0 而失败。我确信这是由于缺乏对我的部分，但要么 set() 没有运行，要么组件在断言中重新渲染，因此不知道状态属性已经设置。我已经阅读了一个小时的文档和谷歌搜索，但还没有找到解决方案（更有利的是，一个解释）。

【问题讨论】：

不应该是this.get('status')吗？就您的代码而言，它很可能会导致 status 未定义的运行时错误。

标签： unit-testing ember.js ember-qunit ember-testing

【解决方案1】：

@torazaburo：Facepalm 出于某种原因，当它只是一个测试时就通过了，我认为这可能是由于模板中的某些内容而导致的误报。但你当然是对的。

我应该一直使用this.get(status)。新手错误！

【讨论】：