Écrire des tests unitaires intégrés pour vos pipes Angular

Dans mon billet de blog précédent, nous avions appris qu’il existait deux types de tests unitaires pour les pipes Angular :

• les tests unitaires isolés (sans TestBed),
• les tests unitaires intégrés (avec TestBed).

Nous avions mis l’accent sur des tests unitaires isolés. Dans cet article, nous allons mettre le focus sur la manière d’écrire des tests unitaires intégrés pour les pipes Angular.

On parle de tests unitaires intégrés lorsque nous testons le pipe dans les mêmes conditions que celles dans lesquelles il sera utilisé, c’est-à-dire dans le contexte d’un composant Angular.

Le pipe à tester

Au cas où vous n’auriez pas lu mon article précédent billet, voici le code du pipe que nous allons tester. Son but est de prendre en entrée un tableau d’entier et de retourner en sortie la moyenne des éléments qui le constituent.

1import { Pipe, PipeTransform } from '@angular/core';
2
3@Pipe({
4  name: 'mean',
5})
6export class MeanPipe implements PipeTransform {
7  transform(value: number[]): number {
8    if (!Array.isArray(value)) {
9      return value;
10    }
11    if (value.length === 0) {
12      return undefined;
13    }
14    const sum = value.reduce((n: number, m: number) => n + m, 0);
15    return sum / value.length;
16  }
17}

On voit dans ce bout de code que:

1. La classe MeanPipe implémente l’interface PipeTransform.
2. La méthode transform retourne la moyenne des éléments du tableau value qui lui est passé en entrée.

Nous avons besoin d’un composant hôte

Vu que nous voulons écrire des tests intégrés pour notre pipe, nous avons besoin d’un composant hôte. Un composant hôte est comme tout autre composant Angular. Il n’a rien de spécial. C’est juste une façon d’utiliser le pipe dans un composant Angular.

Voici le code du composant hôte :

1@Component({
2  template: '<div>{{ values | mean }}</div>',
3})
4export class MeanPipeHostComponent {
5  values: number[];
6}

Ce composant hôte :

• déclare une propriété values qui va contenir les valeurs à transmettre à notre pipe,
• affiche le résultat de la transformation de ces valeurs par le pipe

Mise en place des tests unitaires intégrés

La mise en place des tests unitaires intégrés est un peu complexe.

1describe('MeanPipe inside a host component', () => {
2  beforeEach(async(() => {
3    TestBed.configureTestingModule({
4      declarations: [MeanPipe, MeanPipeHostComponent],
5    }).compileComponents();
6  }));
7});

On commence avec un premier beforeEach dans lequel on appelle la méthode TestBed.configureTestingModule(). Cette dernière nous permet de configurer un module à des fins de tests. Elle accepte à peu les mêmes paramètres que le décorateur @NgModule.

1describe('MeanPipe inside a host component', () => {
2  beforeEach(async(() => {
3    TestBed.configureTestingModule({
4      declarations: [MeanPipe, MeanPipeHostComponent],
5    }).compileComponents();
6  }));
7});

Le corps de notre beforeEach est “wrappé” dans une zone Angular spéciale à travers l’appel à la fonction async. La fonction async est l’une des nombreuses utilitaires de tests fournis par Angular. Nous en avons besoin, car la méthode TestBet.compileComponents() est asynchrone. Cela garantit que le template d’un composant défini via un templateUrl est compilé au préalable.

1describe('MeanPipe inside a host component', () => {
2  beforeEach(async(() => {
3    TestBed.configureTestingModule({
4      declarations: [MeanPipe, MeanPipeHostComponent],
5    }).compileComponents();
6  }));
7});

Une fois la mise en place de notre module de test effectué, nous allons utiliser un autre bloc beforeEach. Nous commençons par utiliser la méthode TestBed.createComponent à qui on passe en paramètre notre composant hôte MeanPipeHostComponent. Cela nous retourne un ComponentFixture. Ce dernier est un “wrapper” autour de notre composant hôte. Il nous permet entre autres de gérer son “change detection” et d’avoir accès à son injecteur.

1describe('MeanPipe inside a host component', () => {
2  let fixture: ComponentFixture<MeanPipeHostComponent>;
3
4  beforeEach(async(() => {
5    TestBed.configureTestingModule({
6      declarations: [MeanPipe, MeanPipeHostComponent],
7    }).compileComponents();
8  }));
9
10  beforeEach(() => {
11    fixture = TestBed.createComponent(MeanPipeHostComponent);
12  });
13});

À partir de notre ComponentFixture, nous pouvons obtenir un DebugElement. Le DebugElement est un “wrapper” autour de l’élément HTML natif associé à notre composant. Il offre plus de fonctionnalités que l’élément HTMLElement natif.

1describe('MeanPipe inside a host component', () => {
2  let fixture: ComponentFixture<MeanPipeHostComponent>;
3  let debugElement: DebugElement;
4
5  beforeEach(async(() => {
6    TestBed.configureTestingModule({
7      declarations: [MeanPipe, MeanPipeHostComponent],
8    }).compileComponents();
9  }));
10
11  beforeEach(() => {
12    fixture = TestBed.createComponent(MeanPipeHostComponent);
13    debugElement = fixture.debugElement;
14  });
15});

Nous pouvons aussi obtenir une référence vers l’instance de notre composant hôte. Cela nous permettra de modifier des attributs du composant.

1describe('MeanPipe inside a host component', () => {
2  let fixture: ComponentFixture<MeanPipeHostComponent>;
3  let debugElement: DebugElement;
4  let component: MeanPipeHostComponent;
5
6  beforeEach(async(() => {
7    TestBed.configureTestingModule({
8      declarations: [MeanPipe, MeanPipeHostComponent],
9    }).compileComponents();
10  }));
11
12  beforeEach(() => {
13    fixture = TestBed.createComponent(MeanPipeHostComponent);
14    debugElement = fixture.debugElement;
15    component = fixture.componentInstance;
16  });
17});

Les vrais tests

Maintenant, nous pouvons à écrire nos assertions.

1it('should display 1', () => {
2  component.values = [1, 1];
3  fixture.detectChanges();
4
5  const divDebugElement: DebugElement = debugElement.query(By.css('div'));
6  const div: HTMLDivElement = divDebugElement.nativeElement;
7
8  expect(div.textContent.trim()).toEqual('1');
9});

Nous commençons par mettre à jour la propriété values de notre composant.

1it('should display 1', () => {
2  component.values = [1, 1];
3  fixture.detectChanges();
4
5  const divDebugElement: DebugElement = debugElement.query(By.css('div'));
6  const div: HTMLDivElement = divDebugElement.nativeElement;
7
8  expect(div.textContent.trim()).toEqual('1');
9});

Puis, nous appelons la méthode fixture.detectChanges() qui va déclencher un “change detection”. Cela aura pour effet la mise à jour du DOM pour refléter le changement opéré sur la propriété values de notre composant hôte.

1it('should display 1', () => {
2  component.values = [1, 1];
3  fixture.detectChanges();
4
5  const divDebugElement: DebugElement = debugElement.query(By.css('div'));
6  const div: HTMLDivElement = divDebugElement.nativeElement;
7
8  expect(div.textContent.trim()).toEqual('1');
9});

Ensuite nous utilisons la méthode query de notre DebugElement en lui passant en paramètre un prédicat By.css('div'). Cela nous permet de cibler l’élément HTML div grâce à un sélecteur CSS.

1it('should display 1', () => {
2  component.values = [1, 1];
3  fixture.detectChanges();
4
5  const divDebugElement: DebugElement = debugElement.query(By.css('div'));
6  const div: HTMLDivElement = divDebugElement.nativeElement;
7
8  expect(div.textContent.trim()).toEqual('1');
9});

Nous pouvons finir par une assertion vérifiant que la valeur qui est dans le DOM est bien celle qui est attendue.

1it('should display 1', () => {
2  component.values = [1, 1];
3  fixture.detectChanges();
4
5  const divDebugElement: DebugElement = debugElement.query(By.css('div'));
6  const div: HTMLDivElement = divDebugElement.nativeElement;
7
8  expect(div.textContent.trim()).toEqual('1');
9});

Conclusion

Dans cet article, nous avons appris à écrire des tests unitaires intégrés pour nos pipes Angular. La mise en place de ce type de tests est plus compliquée que pour des tests unitaires isolés. Beaucoup de concepts sont en jeu notamment les utilitaires de tests Angular. Mais le jeu en vaut la chandelle, car les tests unitaires intégrés peuvent détecter des bogues que les tests unitaires isolés ne peuvent pas révéler.