📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structurĂ© en trois niveaux : dĂ©butant, intermĂ©diaire et avancĂ©
  • 3) traite des pratiques les plus rĂ©centes d'Angular, comme les signaux, les vues diffĂ©rĂ©es, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

Comment tester les Outputs d'un composant ? ​

Voici un composant:

ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-my-component',
  standalone: true,
  template: `
    <button (click)="onButtonClick()">Click me</button>
  `
})
export class MyComponent {
  @Output() myEvent = new EventEmitter<string>();

  onButtonClick() {
    this.myEvent.emit('some data');
  }
}

Nous avons déclaré un output myEvent en utilisant la décoration @Output(). Nous avons également défini une méthode onButtonClick() qui est liée à l'événement click d'un bouton dans le template. Lorsque le bouton est cliqué, la méthode onButtonClick() est appelée et l'EventEmitter émet les données "some data".

Et le test unitaire:

ts
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { Component } from '@angular/core';
import { MyComponent } from './my.component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async() => {
    await TestBed.configureTestingModule({
      imports: [ MyComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should emit data when the button is clicked', () => {
    const button = fixture.nativeElement.querySelector('button');
    let emittedData;
    component.myEvent.subscribe(data => emittedData = data);
    button?.triggerEventHandler('click', null);
    expect(emittedData).toEqual('some data');
  });
});

Dans cet exemple, nous souscrivons à l'événement output myEvent en utilisant la méthode .subscribe().

A savoir

EventEmitter est en effet une classe qui implémente la classe Subject de RxJS. Cela signifie qu'il peut être utilisé pour émettre des événements asynchrones à partir d'un composant et que ces événements peuvent être observés à l'aide de la méthode .subscribe().

Nous stockons les données émises dans la variable emittedData. Ensuite, nous déclenchons l'événement en utilisant button.triggerEventHandler('click', null) pour simuler un clic sur le bouton. Enfin, nous utilisons expect(emittedData).toEqual('some data') pour vérifier que les données attendues ont été émises.

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !