typescript - Angular window.parent.postMessage jasmine enhetstestning

Hur kan jag testa denna metod med postMessage

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

Jag vill kontrollera om postMessage-händelsen utlöses när jag anropar navigateTo-metoden

Jag försökte detta men det fungerade inte

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

Svar #1

Du testar component.navigateTo()-metoden, så du bör INTE använda spyOn för den. Annars kommer window.parent.postMessage() aldrig att anropas. Du bör använda spyOn för window.parent.postMessage()-metoden.

Från standard spionstrategi

Normalt är standardstrategin .and.stub(), vilket returnerar undefined om spionen anropas.

Så den korrekta testkoden bör vara:

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');
  });
});

Vi specificerar överbelastningssignaturen för postMessage för att undvika TS-typfel.

Testresultat:

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 )
================================================================================

paketversion:

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