mercredi 1 juin 2016

angular-jasmine: testing component that draws dom using timeout

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?

Aucun commentaire:

Enregistrer un commentaire