Appearance
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.