Question

我有以下内容 -

window.addEventListener( "orientationchange", () => {
    // Code to test
});

如何在Jasmine中触发此事件？我尝试了以下内容并且它没有工作 -

event = document.createEvent("HTMLEvents");
event.initEvent("orientationchange", true, true);

这是班级 -

export class AvailabilityComponent {

    changed: boolean = false;

    constructor(  ) {
        window.addEventListener( "orientationchange", () => {
            this.changed = !this.changed;
        } );
    }

}

由于

Answer 1

您可以直接使用window.dispatchEvent(new Event("orientationchange"))代替

event = document.createEvent("HTMLEvents");
event.initEvent("orientationchange", true, true);

Answer 2

可以使用

测试

orientationchange事件侦听器

window.dispatchEvent(new Event('orientationchange'));

问题是这是功能测试，而不是单元测试。通常这种东西在E2E测试中进行测试，这是我们想要检查应用程序与浏览器和真实DOM一起很好地运行的地方。此外，无法删除匿名侦听器，它们可能会影响后续测试并导致内存泄漏。

单元测试的正确策略是逐行测试编写的代码。角度指南是specific on test isolation：

但是，使用不依赖于Angular的独立单元测试来探索应用程序类的内部逻辑通常会更有效率。这些测试通常更小，更易于阅读，编写和维护。

为了对测试友好，可以将类重构为

export const WINDOW = new OpaqueToken();

... providers: [..., { provide: WINDOW, useFactory: () => window }];

export class AvailabilityComponent {
    changed: boolean = false;

    constructor(@Inject(WINDOW) window: Window) {        
        window.addEventListener( "orientationchange",  this.orientationChangeListener);
    }

    orientationChangeListener = () => {
         this.changed = !this.changed;
    }
}

因此可以使用

轻松测试

const windowMock = jasmine.createSpyObj(['addEventListener']);
const comp = new AvailabilityComponent(windowMock);
expect(windowMock.addEventListener).toHaveBeenCalledWith("orientationchange",
  comp.orientationChangeListener);

expect(comp.changed).toBe(false);
comp.orientationChangeListener.call(null); // unbind method
expect(comp.changed).toBe(true);

已经builtin DOCUMENT service，WINDOW服务遵循相同的方式，配方类似于AngularJS中的$window。对模拟服务执行操作可以为单元测试提供隔离，而不会污染全局范围，必须在afterEach中清除更改。

由于AvailabilityComponent是一个组件，无论如何都将使用TestBed进行测试，因此将测试合并到TestBed中可能是有意义的。另请参阅isolated vs TestBed unit tests上的此答案。

Answer 3

我已经设法使用以下内容 -

it( 'expect orientationchange to update changed to be truthy', () => {
    event = new Event('orientationchange');
    component.ngOnInit();
    window.dispatchEvent(event);
   // ...
});

在addEventHandler中测试代码

3 个答案: