Angular

Appearance

Comment tester les Outputs d'un composant ? ​

Voici un composant:

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

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

  onButtonClick() {
    this.myEvent.emit('some data');
  }
}
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-my-component',
  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({
      declarations: [ 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');
  });
});
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({
      declarations: [ 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.