角茉莉花：使用超时绘制dom的测试组件

Question

I have the following functionality in my custom directive:

link: function (scope, element) {
    var editor = CKEDITOR.inline(element.find('div[contenteditable]')[0], {}

I want to test that the directive is linked and the editor is created under element using CKEDITOR.inline method. So I have this test:

it('should compile', function () {  

    var element = angular.element('<directive></directive>');
    var compiled = $compile(element)(scope);
    $('body').append(compiled);

    expect(element.find('.ckeditor')).toExist();
});

The problem is that CKEDITOR updates DOM asynchronously:

CKEDITOR.inline = function(element) {
    setTimeout(function() {
        element.append('<div class=ckeditor></div>');
    },0);
}

So my test fails to find the element with the class because it's executed synchronously, while the element is added inside inline method after the test because of setTimeout . How do I test it?

Answer 1

Specs can become asynchronous :

it('should compile', function (done) {  
    ...
    setTimeout(() => {
        expect(element.find('.ckeditor')).toExist();
        done();
    }, 10);
});

Or better, jasmine.clock can be used:

beforeEach(function() {
    jasmine.clock().install();
});

afterEach(function() {
    jasmine.clock().uninstall();
});


it('should compile', function () {  
    ...
    jasmine.clock().tick(10);
    expect(element.find('.ckeditor')).toExist();
});