Ember Redactor 구성 요소 테스트 - 준비 대기

Question

필자가 작성한 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}} 구성 요소가 시간에 초기화 작업을 완료하지 않습니다 그것의 가치. 이 문제를 해결할 수있는 방법이 있습니까 (또는 테스트를 작성하는 더 좋은 방법)?

Answer 1

변경 내용이 변경되었음을 Ember에 알리기 위해 triggerEvent을 사용해야했습니다. 이는 비동기식이며 어설 션에 도달했을 때 플러그인이 준비되었음을 보장합니다. 여기

은 내가 먼저 무슨 짓을했는지 :

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