测试 Ember 编辑器组件 - 等待准备就绪答案

【问题标题】：Testing an Ember redactor component - wait to ready测试 Ember 编辑器组件 - 等待准备就绪
【发布时间】：2014-12-10 23:27:00
【问题描述】：

我正在编写一个验收测试，其中包含我编写的 Ember 组件。该组件包装了redactor 插件。

模板的相关部分是

<label>Let's begin</label>
{{x-redactor value=lesson.intro}}

测试看起来像这样：

test('I can edit the lesson title', function() {
  visit('/');
  $('.Lesson-intro [contenteditable="true"]').html('<p>Blah</p>');

  andThen(() => {
    var lesson = App.__container__.lookup('controller:application').get('attrs.lesson');
    equal(lesson.get('intro'), '<p>Blah</p>');
  });
});

{{x-redactor}} 组件没有及时完成其初始化工作，以便测试更改其值。有没有办法解决这个问题（或编写测试的更好方法）？

【问题讨论】：

标签： ember.js

【解决方案1】：

我需要使用 triggerEvent 让 Ember 知道内容已更改。这是异步的，并确保在达到断言时插件已准备就绪。

这是我首先做的：

visit('/');

andThen(() => {
  $('.Lesson-intro [contenteditable="true"]').html('<p>Blah</p>');
  triggerEvent('.Lesson-intro [contenteditable="true"]', 'keyup');
});

andThen(() => {
  var lesson = App.__container__.lookup('controller:application').get('attrs.lesson');
  equal(lesson.get('intro'), '<p>Blah</p>');
});

然后我将编辑器逻辑包装到一个助手中：

import Ember from 'ember';

Ember.Test.registerAsyncHelper('fillInRedactor', function(app, selector, content) {
  var el = `${selector} [contenteditable='true']`;
  $(el).html(content);
  return triggerEvent(el, 'keyup');
});

export default {};

现在我的测试看起来像这样：

test('I can edit the lesson', function() {
  visit('/');
  fillInRedactor('.Lesson-intro', '<p>Blah</p>');

  andThen(() => {
    var lesson = App.__container__.lookup('controller:application').get('attrs.lesson');
    equal(lesson.get('intro'), '<p>Blah</p>');
  });
});

【讨论】：