2016-12-06 5 views
0

私はビューでシンプルな崩壊のカスタム要素をテストしています:ユニットテストアウレリアのカスタム要素

<template> <button click.delegate="toggle()"></button> <div show.bind="collapsed"> <slot></slot> </div> </template>

とビューモデル:

export class Collapse { collapsed: boolean; toggle() { this.collapsed = !this.collapsed; } }

私のテストは、以下のようになります。

it('should show content on flag change', done => { component.create(bootstrap).then(() => { const div = <Element> document.getElementsByTagName('div')[1]; const style = window.getComputedStyle(div);
expect(style.display).toBe('none');
component.viewModel.toggle();
setTimeout(() => { expect(style.display).toBe('block'); done(); }, 0); }); });

何らかの方法でsetTimeoutを取り除くことはできますか?

答えて

3
it('should show content on flag change', done => { 
    let div: HTMLDivElement; 
    component.create(bootstrap) 
     .then(() => { 
     div = <HTMLDivElement>document.querySelector('div'); 
     const style = window.getComputedStyle(div); 
     expect(style.display).toBe('none'); 
     component.viewModel.toggle(); 
     }) 
     .then(() => { 
     const style = window.getComputedStyle(div); 
     expect(style.display).toBe('block'); 
     }) 
     .then(done); 
    }); 
    }); 
+0

これは機能しません。 setTimeoutでラップされている場合のみ: .then(()=> { setTimeout()=> { const style = window.getComputedStyle(div); expect(style.display).toBe( 'block'); }、0); }) –

関連する問題