Test unitaire Angular : Accès à une variable de modèle

Question

J'ai ce code dans un modèle de composant, qui ouvre une modale ngx-bootstrap :

<button type="button"
        class="btn btn-primary"
        (click)="onOpenSharesModal(modal)">Click me!</button>
<ng-template #modal>
    <app-modal (closed)="onCloseSharesModal()"></app-modal>
</ng-template>

Composant :

onOpenSharesModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, { class: 'modal-lg' });
}

Test :

it('should call onOpenSharesModal() when button clicked', () => {
  const button = fixture.debugElement.query(By.css('button'));
  const spy = spyOn(component, 'onOpenSharesModal');

  button.triggerEventHandler('click', null);
  fixture.detectChanges();

  expect(spy).toHaveBeenCalled();
});

J'essaie de tester le composant : J'ai pu tester que onOpenSharesModal() est appelé, mais j'aimerais tester s'il a été appelé avec l'option modal variable du modèle comme argument. Comment puis-je le faire ?

Answer 1

Vous pouvez utiliser un espion pour espionner la fonction et vérifier ce qui a été passé comme argument. Supposons que votre composant s'appelle MyComponent . Dans votre fichier de test unitaire, vous avez (un peu raccourci, mais vous devriez comprendre l'image) :

let myComponent: MyComponent = fixture.componentInstance;

// Set up a spy on your function
let spy = spyOn(myComponent, 'onOpenSharesModal').and.callThrough();

// After the function has been called somewhere in your component
expect(spy).toHaveBeenCalled();

// Check the arguments that were passed
expect(spy.calls.mostRecent().args[0]).toEqual(myComponent.modal);

Cela suppose que le modal est accessible depuis votre composant.

Answer 2

Tout d'abord, vous voudrez ajouter la ligne suivante à votre composant afin de pouvoir faire référence à la variable du modèle modal :

@ViewChild('modal') myModal: TemplateRef<any>; // for testing

Maintenant vous pouvez référencer la variable du composant 'myModal' dans votre test :

it('should call onOpenSharesModal() when button clicked', () => {
  const button = fixture.debugElement.query(By.css('button'));
  const spy = spyOn(component, 'onOpenSharesModal');

  button.triggerEventHandler('click', null);
  fixture.detectChanges();

  expect(spy).toHaveBeenCalled();
  expect(spy).toHaveBeenCalledWith(component.myModal);
});

Voici un travail StackBlitz à démontrer.