Angular window.parent.postMessage 茉莉花单元测试答案

【问题标题】：Angular window.parent.postMessage jasmine unit testingAngular window.parent.postMessage 茉莉花单元测试
【发布时间】：2022-01-23 03:30:37
【问题描述】：

如何使用 postMessage 测试此方法

navigateTo = (): void => {
    window.parent.postMessage('NESTED_NAVIGATION', 'target_origin');
}

我想检查当我调用navigateTo 方法时是否触发了 postMessage 事件

我试过了，但没用

it('should post message on click', async () => {
   spyOn(component, 'navigateTo');
   let postMessageSpy = spyOn(window.parent, 'postMessage');
   component.navigateTo();
   expect(postMessageSpy).toHaveBeenCalled();
});

【问题讨论】：

您是否尝试过注入窗口以便您可以监视它？ stackoverflow.com/a/52620181/973651（答案中有几个选项）
当您在方法 (navigateTo) 上应用 spyOn 而不调用 .and.callThrough() 时，该方法将成为存根，这意味着在您的示例中未调用其实际内容。除此之外，您根本不需要监视navigateTo，您需要按原样调用它（毕竟，这是您要测试的方法）。

标签： angular typescript unit-testing jasmine karma-jasmine

【解决方案1】：

您正在测试component.navigateTo() 方法，因此您不应该使用spyOn。否则，window.parent.postMessage() 将永远不会被调用。对于window.parent.postMessage() 方法，您应该使用spyOn。

来自Default Spy Strategy

通常，默认策略是.and.stub()，如果调用spy，则返回undefined。

所以正确的测试代码应该是：

example.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'example',
})
export class ExampleComponent implements OnInit {
  ngOnInit() {}
  navigateTo = (): void => {
    window.parent.postMessage('NESTED_NAVIGATION', 'target_origin');
  };
}

example.component.test.ts:

import { ExampleComponent } from './example.component';

describe('70440045', () => {
  it('should post message on click', async () => {
    const component = new ExampleComponent();
    let postMessageSpy: jasmine.Spy<(message: any, targetOrigin: string, transfer?: Transferable[]) => void> = spyOn(
      window.parent,
      'postMessage',
    );
    component.navigateTo();
    expect(postMessageSpy).toHaveBeenCalledWith('NESTED_NAVIGATION', 'target_origin');
  });
});

我们指定postMessage的重载签名以避免TS类型错误。

测试结果：

Chrome Headless 95.0.4638.69 (Mac OS 10.15.7): Executed 1 of 1 SUCCESS (0.008 secs / 0.004 secs)
TOTAL: 1 SUCCESS

=============================== Coverage summary ===============================
Statements   : 94.12% ( 16/17 )
Branches     : 100% ( 0/0 )
Functions    : 62.5% ( 5/8 )
Lines        : 100% ( 13/13 )
================================================================================

包版本：

"@angular/core": "~11.0.3",
"@angular/cli": "~11.0.3",
"karma-jasmine": "~4.0.0",
"karma": "~5.1.0",
"jasmine-core": "^3.10.1"

【讨论】：