testing - 如何断言 Ember 测试中的运行循环 DOM 更改

Question

我正在为用 Ember 1.6 编写的 Ember 应用编写测试。

在 Controller 中，我有一个函数在 promise 成功时执行:

var me = this;

function onSuccess(result) {

    printSuccessMessage();

    Ember.RSVP.all(promises).then(function(value) {
        Ember.run.later(this, function() {
            clearMessages();
        }, 5000);
    });
}

然后，在测试中，我试图断言出现了成功消息:

    fillIn('#MyInputField', 'Some text');
    click('#MyButton');

    andThen(function() {
        strictEqual(find('[data-output="info-message"]').text().trim().indexOf('Done!') >= 0, true, 'Expected success message!');
    });

但问题是，在点击之后，andThen 正在等待运行循环完成。所以在点击之后，andThen 等待 5 秒，然后执行断言。

此时 clearMessages() 已经执行，消息 div 被清除，测试失败。

知道如何断言此消息包含特定文本吗？

Answer 1

如果您愿意在您的代码中设置一个条件，即检查 Ember 是否处于测试模式，您可以在您的代码中切换 Ember.testing 值测试，然后根据该值清除或不清除 Controller 中的消息。然后，您的测试可以断言消息在一个实例中被清除，并在另一个实例中显示。

在 Controller 的 onSuccess 调用中，观察 Ember.testing 条件:

onSuccess(message) {
  this.printSuccessMessage(message);

  if (Ember.testing) { // <-- HERE
    // during testing
    return; // don't clear the message and assert that it's there
  } else {
    // during dev, live in production, or Ember.testing === false
    this.clearMessages(); // clear the message, and assert that it's gone
  }  
},

在设置消息的验收测试中，由于Ember.testing默认为true，controller不会清除消息，下面的测试会成功:

test('setting the message', function(assert) { 
  visit('/messages');
  fillIn('input.text-input', 'Some text');
  click('button.clicker');

  // while Ember.testing is `true` (default), do not remove message
  andThen(() => {
    assert.equal(find('div.info-message').text(),
                 'Done!',
                 'The message was set properly.'); 
  });
});

在接下来的测试中，观察 Ember.testing 的 false 切换，这将“模拟” Controller 的实时开发或生产条件。 Controller 将像往常一样清除消息，并且此测试也会成功:

test('clearing the message', function(assert) { 
  visit('/messages');
  fillIn('input.text-input', 'Some text');

  andThen(() => {
    Ember.testing = false;
  });

  click('button.clicker');

  // while Ember.testing is `false`, remove message, as normal, as in dev or prod
  andThen(() => {
    assert.equal(find('div.info-message').text(), 
                 '', 
                 'The message has been cleared.'); 
  });

  // reset Ember.testing to its default
  andThen(() => {
    Ember.testing = true;
  });
});

请注意，一旦不再需要 false 条件，Ember.testing 就会重置为其默认值 true。这很重要，因为 Ember run loop behavior is different during testing by design .

在这个解决方案中，一些代码已经过重构，以隔离问题并使单元测试更容易。这是一个 Ember Twiddle演示，这在一定程度上受到了这个 article on Medium 的启发.