angular-jasmine: testing component that draws dom using timeout

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?

Estus Flask · Accepted Answer · 2016-06-01 11:38:31Z

2

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

answered Jun 1, 2016 at 11:38

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular-jasmine: testing component that draws dom using timeout

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related