Écrire des tests unitaires isolés pour vos pipes Angular

Les pipes Angular nous permettent de transformer des données avant de les afficher. Angular nous fournit une large gamme de pipes de base, mais nous devons parfois implémenter nos propres pipes. Dans ce cas, il faut aussi écrire des tests unitaires pour nos pipes.

Le pipe fait partie des concepts Angular les plus simples. Il s’agit d’une classe TypeScript munie du décorateur @Pipe et qui implémente l’interface PipeTransform. Cette interface comporte uniquement une méthode, la méthode transform comme le montre le bout de code suivant :

1interface PipeTransform {
2  transform(value: any, ...args: any[]): any;
3}

La méthode transform prend une donnée en entrée, la transforme, et la retourne pour qu’on puisse l’afficher dans nos templates avec un bon formatage.

Les pipes Angular sont faciles à tester, car ils n’interagissent que très rarement avec le DOM. Techniquement, nous pouvons donc les tester sans nous servir des utilitaires de test fournis par Angular ou TestBed.

On peut écrire deux types de tests unitaires pour nos pipes Angular :

• des tests unitaires en isolation (sans TestBed),
• des tests unitaires en intégration (avec TestBed).

Dans cet article, nous allons apprendre à écrire des tests unitaires isolés pour nos pipes Angular. Dans un prochain article, nous verrons comment écrire des tests unitaires en intégration avec TestBed.

On parle de test unitaire isolé lorsqu’on teste le pipe comme si c’était une banale classe TypeScript. On fait fi du fait qu’un pipe est utilisé dans des templates Angular. En un mot, on ne teste que la méthode transform du pipe.

Le code utilisé pour l’exemple (mean.pipe.ts)

Pour le reste de l’article, on va utiliser un pipe dont le but est de prendre en entrée un tableau d’entier et de retourner en sortie la moyenne des éléments qui le constituent. En voici le code :

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.

Testons cet pipe en isolation (mean.pipe.spec.ts)

Lorsque nous utilisons le Angular CLI pour générer un notre pipe, le CLI génère aussi un squelette de test se présentant comme suit :

1describe('MeanPipe', () => {
2  it('create an instance', () => {
3    const pipe = new MeanPipe();
4    expect(pipe).toBeTruthy();
5  });
6});

Cette exemple de code :

1. crée une nouvelle instance de MeanPipe,
2. vérifie que le pipe est correctement instancié.

Ce test unitaire ne sert pas vraiment à grand-chose, mais c’est un bon point de départ. À partir de là, nous pouvons écrire des tests unitaires qui font plus sens.

Testons le comportement de notre pipe avec de mauvais inputs

La suite de tests Bad inputs teste le pipe lorsque nous lui passons des valeurs incorrectes comme un object {a: 'a'}, null ou un tableau vide.

1describe('MeanPipe', () => {
2  const pipe = new MeanPipe();
3  // ...
4
5  describe('Bad inputs', () => {
6    it('should return the object without modification', () => {
7      expect(pipe.transform({ a: 'a' } as any)).toEqual({ a: 'a' } as any);
8    });
9
10    it('should return null ', () => {
11      expect(pipe.transform(null)).toEqual(null);
12    });
13
14    it('should return undefined', () => {
15      expect(pipe.transform([])).toEqual(undefined);
16    });
17  });
18});

Testons le comportement de notre pipe avec de bons inputs

La suite de tests Good inputs teste le pipe lorsque nous lui passons des valeurs correctes.

1describe('MeanPipe', () => {
2  const pipe = new MeanPipe();
3  // ...
4
5  describe('Good inputs', () => {
6    it('should return 1', () => {
7      expect(pipe.transform([1])).toEqual(1);
8    });
9
10    it('should return 0', () => {
11      expect(pipe.transform([1, -1])).toEqual(0);
12    });
13
14    it('should return 1', () => {
15      expect(pipe.transform([1, 1])).toEqual(1);
16    });
17
18    it('should return -1', () => {
19      expect(pipe.transform([-1, -1])).toEqual(-1);
20    });
21  });
22});

Conclusion

Dans cet article, nous avons appris qu’il y avait deux types de tests unitaires pour les pipes Angular : les tests unitaires isolés et les tests unitaires intégrés. Nous avons mis l’accent sur les tests unitaires isolés et vu à quel point c’était facile d’en écrire. Dans un prochain article, nous allons apprendre à écrire des tests unitaires intégrés pour nos pipes Angular.