在window.addEventListener函数中测试代码

时间:2017-07-20 21:20:54

标签: javascript angularjs events mocking

我有以下基于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();
    });
  });
});

1 个答案:

答案 0 :(得分:0)

我认为从组件代码中直接访问180 * 24 * 60 * 60 * 1000window对象并不是一个好的模式。

我认为更好的方法是将document放在一个单独的服务中,然后使用依赖注入将服务放入组件中。

例如,检查this

然后你可以监视服务的方法,或者只是在你的测试中注入一个模拟服务。