角1 - テストでのトリガーウィンドウのサイズ変更イベント

Question

ウィンドウの幅からの計算に基づいてレンダリングされたHTMLにCSSクラスを条件付きで適用する指示があります。このディレクティブはうまくいきます...このページのウィンドウのサイズを変更すると、項目がオーバーフロードロップダウンにどのように置かれるかがわかります：http://ngofficeuifabric.com/demos/uifBreadcrumb。ディレクティブのコントローラのコードは、https://github.com/ngOfficeUIFabric/ng-officeuifabric/blob/master/src/components/breadcrumb/breadcrumbDirective.ts#L119-L164です。

私たちが抱える課題は、信頼性の高いテストを作成することです。テストの中で、ウィンドウのサイズ変更に基づいてオーバーフロークラスが追加/削除されていることを確認する必要があります。私たちは運が無ければ、これを行うためのさまざまな方法を試しました...サイズ変更イベントが発生するようですが、テストが評価された後にします。 window.innerWidthプロパティの値を設定してこの作業を行っていますが、これは読み取り専用になっているはずです。

我々は出発点として、すべてのテストの前に値を設定しようとしました

：その後、

beforeAll(() => { 
    originalWidth = jQuery(document.body).css('width'); 
    jQuery(document.body).css('width', '800px'); 
    jQuery(window).trigger('resize'); 
}); 

と、このようにテストをしよう：

it('should not have is-overflow class',() => { 
    expect(element).not.toHaveClass('is-overflow'); 
}); 

PhantomJSは幅から始まるので、これは失敗= 400ピクセルクラスは追加されますが、beforeAll()には800pxに設定されています...このテストが&で実行された後、resizeイベントハンドラが起動し、エラーがスローされます。 setTimeout()で遅延を追加することは助けにはなりません（それは望ましいことでもありません）。

他のテストでは、必要に応じて更新されるようにブラウザを複数回リサイズする必要があります。

it('should change breadcrumb count on resize', inject(($window: ng.IWindowService) => { 
    let startingWidth: string = jQuery(document.body).css('width'); 

    let visibleLinks: JQuery = element.find('.ms-Breadcrumb-list li'); 
    expect(visibleLinks.length).toBe(4); 

    let overflowLinks: JQuery = element.find('.ms-ContextualMenu li'); 
    expect(overflowLinks.length).toBe(2); 

    // narrow down window 
    jQuery(document.body).css('width', '620px'); // must be less than break point 
    jQuery(window).trigger('resize'); 

    visibleLinks = element.find('.ms-Breadcrumb-list li'); 
    expect(visibleLinks.length).toBe(2); 

    overflowLinks = element.find('.ms-ContextualMenu li'); 
    expect(overflowLinks.length).toBe(4); 

    // back to normal 
    jQuery(document.body).css('width', startingWidth); 
    jQuery(window).trigger('resize'); 

    visibleLinks = element.find('.ms-Breadcrumb-list li'); 
    expect(visibleLinks.length).toBe(4); 

    overflowLinks = element.find('.ms-ContextualMenu li'); 
    expect(overflowLinks.length).toBe(2); 
})); 

手動ディレクティブは、それは私たちが望む正確に何を示してテストしたが、数多くの console.log()ステートメントを追加した後、それは我々がそれを呼び出すようにしようとすると...むしろそれが遅れたのresizeイベントはすぐに発射されていないことは明らかですテストが実行された後に実行します。

resizeイベントを実行してテストから完了するための信頼できる方法はありますか？

Answer 1

私は、サイズ変更とスクロールが単体テストの境界にないと思います。 インテグレーションテスト（すなわち、分度器を使って）の中で、そのような種類のイベントをチェックするのは簡単に実行できます。

たとえば、プロジェクトの1つでスクロールトップを開発しなければならず、テストする唯一の方法は統合テストでした。