window.addEventListener関数内のコードをテストする

Question

次のangularjsコンポーネントは正常に動作しますが、window.addEventListener('message',以降のテスト対象は何も見ていません。

windowオブジェクトを模擬して、addEventListenerのための独自の実装を提供する必要がありますか？またはスパイして、それが呼ばれていることを確認しますか？

my.component.controller.ts

export class MyComponentController { 
    constructor() {} 

    public theEventOccurred(e: any) { 
    let json = JSON.parse(e.data); 
    console.log(json.document); 
    } 

    public $onInit() { 
    window.addEventListener('message', (event) => { 
     this.theEventOccurred(event); 
    }, false); 
    } 
} 

my.component.spec.ts

describe('Component: my',() => { 

    let $componentController: angular.IComponentControllerService; 
    let scope: angular.IScope; 

    beforeEach(inject(
    ($rootScope: angular.IScope, 
     _$componentController_: angular.IComponentControllerService) => { 
     scope = $rootScope.$new(); 
     $componentController = _$componentController_; 
    })); 

    describe('Controller: MyComponentController',() => { 
    it('should log json.document',() => { 
     let ctrl: any = $componentController('my', { $scope: scope }); 
     ctrl.$onInit(); 
    }); 
    }); 
}); 

Answer 1

私はそれがコンポーネントのコードから直接windowかdocumentオブジェクトにアクセスするための良好なパターンではないと思います。

私が見るように、より良い方法は、windowを別のサービスに入れてから、依存関係注入を使用してコンポーネントをサービスに入れることです。

たとえば、thisをチェックします。

サービスのメソッドをスパイするか、テストにモックサービスを注入するだけです。