Angular est-il vraiment plus compliqué que React ?

Quand on débute avec Angular, il est facile de se sentir découragé face à la multitude de concepts à assimiler. Cette complexité peut inciter à se tourner vers des frameworks comme React, qui semblent plus simples à première vue. Mais est-ce vraiment le cas ?

Abonnez-vous à notre chaîne

Pour profiter des prochaines vidéos sur Angular, abonnez-vous à la nouvelle chaîne YouTube !

Skip to content

Vous souhaitez recevoir de l'aide sur ce sujet ? rejoignez la communauté Angular.fr sur Discord.

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 !