CODEWITHSUNDEEP
ember.js
Sam Selikoff
Sam Selikoff

Reputation: 12694

Testing an Ember redactor component - wait to ready

I'm writing an acceptance test which has an Ember component I wrote. The component wraps the redactor plugin.

The relevant part of the template is

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

and the test looks something like this:

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>');
  });
});

The {{x-redactor}} component doesn't finish its initialization work in time for the test to change its value. Is there a way to fix this (or a better way to write the test)?

Upvotes: 2

Views: 70

Answers (1)

Sam Selikoff
Sam Selikoff

Reputation: 12694

I needed to use triggerEvent to let Ember know the content had changed. This is async and ensured the plugin was ready when the assertion was reached.

Here's what I did first:

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>');
});

Then I wrapped the redactor logic into a helper:

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 {};

and now my test looks like this:

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>');
  });
});

Upvotes: 1

Related Questions