2016-06-01 9 views
1

を使用して、DOMを描画コンポーネント私は私のカスタムディレクティブで以下の機能を持っているテスト:角度-ジャスミン:タイムアウト

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

を私はディレクティブがリンクされ、エディタがCKEDITOR.inline方法を使用してelementの下に作成されていることをテストしたいです。だから私はこのテストを持っている:

it('should compile', function() { 

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

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

問題は非同期CKEDITORアップデートDOMということである:要素が追加されている間、それは、同期的に実行されますので、

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

だから私のテストは、クラスを持つ要素を見つけることができません内部inline方法の後にテストsetTimeoutのため。どうすればテストできますか?

答えて

2

仕様はasynchronousになることができます:

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

以上、jasmine.clockを使用することができます。

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

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


it('should compile', function() { 
    ... 
    jasmine.clock().tick(10); 
    expect(element.find('.ckeditor')).toExist(); 
}); 
関連する問題