Testez vos applications Front End avec JavaScript

Découvrez les outils pour réaliser des tests d’intégration

Dans ce chapitre, nous allons voir comment mettre en place des tests d’intégration. Si vous vous souvenez de ce que je vous ai dit dans les précédentes parties, les tests d’intégration :

• Sont plus complexes à mettre en place que les tests unitaires ;

• Requièrent des outils et librairies complémentaires par rapport aux tests unitaires.

Alors, oui et non. :)

Oui, parce que nous allons nous servir d’un deuxième framework en plus de Jest : DOM Testing Library. Vous n’avez pas besoin de l’installer, vous l’avez déjà fait lors du  npm install   au début du cours. Ce nouveau framework utilise des notations complémentaires à Jest.

Non, parce que si vous avez compris et savez vous servir de Jest, vous saurez vous servir de DOM Testing Library. En fait, ce deuxième framework va nous aider à sélectionner des éléments sur le DOM.

Vous n’êtes pas encore convaincu ? Regardez le code ci-dessous, je pense que vous allez comprendre assez vite ce qu’il fait. ;)

/**
* @jest-environment jsdom
*/

// Ici j'importe DOM Test Library
import {
    getByTestId
} from '@testing-library/dom'

 
// Je crée ma suite de test
describe('Sample 1 Integration Test Suites', () => {
    // Je crée mon test
    it('should display "Hello, Thomas"', () => {
        // Je crée un nouveau noeud
        const $wrapper = document.createElement('div')

        // Je lui injecte du HTML
        $wrapper.innerHTML = `
            <div id="root">
                <h1 data-testid="hello">Hello, Thomas</h1>
            </div>
        `

        // Je teste le resultat
    expect(getByTestId($wrapper, "hello").textContent).toEqual("Hello, Thomas")
    })

})

Dans le code ci-dessus, je crée un nouveau nœud, je lui injecte mon HTML et je regarde si le résultat du noeud contient bien le texte “Hello, Thomas”. Comme vous pouvez le constater, toute la logique de Jest reste la même et ça, c’est une super nouvelle. :)

Si on décompose un peu le code ci-dessus, voici les éléments importants :

•  @jest-environment jsdom : ce commentaire est à mettre dès le début du fichier. Il permet d’indiquer qu’on va utiliser un environnement DOM. Si vous l’oubliez ou l’écrivez ailleurs dans le fichier, les tests ne vont pas passer.

•  import { getByTestId } from '@testing-library/dom' : importe la fonction getByTestId que vous allez utiliser pour récupérer un élément du DOM que vous avez créé.

•  <h1 data-testid="hello">Hello, Thomas</h1> : ajoute un attribut data-testid .  Nous allons nous servir de ce dernier avec getByTestId .

•  expect(getByTestId($wrapper, "hello").textContent).toEqual("Hello, Thomas")  : récupère le nœud contenant le data-testid sur le nœud $wrapper, puis teste si le nœud comprend bien le texte “Hello, Thomas”.

Oui !

Vous devrez vous servir des méthodes telles que textContent  ou innerHTML  , ainsi que de nombreuses autres méthodes du JavaScript. Cela va vous permettre de continuer à pratiquer du Vanilla JavaScript. :)

En fait, Jest sait simuler un DOM grâce au commentaire  @jest-environment jsdom   . L’apport principal de testing-library est de faciliter la sélection des nœuds sur le DOM pour réaliser ces tests. Nous aurions tout à fait pu nous passer de cette librairie. Cela dit, cette solution présente de nombreux avantages :

• Si vous travaillez sur des applications React ou Vue, vous allez passer par “React Testing Library" ou “Vue Testing Library", qui s’utilisent de la même façon que “DOM Testing Library". Autrement dit, les commandes et outils que vous apprenez ici vont vous être utiles après. :)

• Elle facilite grandement la sélection des éléments sur le DOM pour réaliser des tests. On gagne énormément de lignes de code grâce à cette librairie.

• Enfin, cette librairie est très légère ; elle prend peu de place sur votre projet, et nécessite peu de ressources.

Le projet Testing Library vise à simplifier la configuration des tests quel que soit le framework, et à uniformiser les tests.

Maintenant que vous y voyez plus clair, on va plonger plus en détail dans cette librairie. ;)

Prenez en main Jest Test DOM/Testing Library

Découvrez Testing Library

Comme vous l’avez lu un peu plus tôt, Testing Library fournit une API qui facilite la sélection d’éléments sur le DOM. Elle ne teste pas les résultats (c’est le rôle de Jest). Elle se compose des Queries et des Events.

Les Queries sont des fonctions qui récupèrent des nœuds sur la page. Il en existe environ une vingtaine :

• getByRole  vous permet de récupérer des nœuds via leur attribut rôle ; par exemple, le rôle   submit  pour  les boutons. Si vous souhaitez en récupérer plusieurs, vous pouvez utiliser la méthode getAllByRole  .

• getByLabelText   est particulièrement utile pour les formulaires où on utilise les balises label  avec les balises input  . Là encore, si vous souhaitez en récupérer plusieurs, vous pouvez utiliser la méthode getAllByLabelText  .

• getByAltText  est à utiliser pour les images qui ont des attributs alt  . 

• getByTestId  récupère des éléments via l’attribut data-testid  . Si vous souhaitez en récupérer plusieurs, il existe la méthode getAllByTestId  .

Enfin, en plus des méthodes getBy…, vous pouvez utiliser les méthodes queryBy et findBy. Ces dernières ne traitent pas de la même façon les cas d’erreur ; par exemple, quand aucun nœud n’est trouvé. Comme pour Jest, je vous invite à réaliser vos tests avec la documentation des queries sous les yeux. :)

Les Events correspondent aux événements que vous pouvez simuler sur le DOM, par exemple un clic de souris. Ici, vous passerez le plus souvent par la méthode fireEvent  ou click  .

Découvrez Jest Test DOM

Bonne nouvelle : Testing Library s’occupe de l’intégration de Jest Test DOM pour nous. :) Jest Test DOM nous fournit des matchers de base de Jest, tels que :

1. toBeDisabled  qui vérifie si un bouton a l’attribut disabled  ou non.

2. toBeRequired  qui vérifie si un nœud a l’attribut required  .

3. toHaveAttribute  qui teste si un nœud a un attribut.

Voici le lien vers la documentation complète de ces matchers : https://github.com/testing-library/jest-dom.

On va tester ici notre routeur ! Et quoi de mieux qu’une issue pour connaître les tests que nous allons réaliser ? Voici l’issue 8 

Vous pouvez vous mettre sur la branche partie-3/chapitre-2-a.

La solution se trouve sur la branche partie-3/chapitre-2-a-solution .

Écrivez vos premiers tests d’intégration

C’est maintenant à votre tour de jouer !

Pour ce cas pratique, nous allons repartir sur l’issue 7 que nous avons créée tout à l’heure avec le formulaire de connexion.

À l'aide des éléments que nous avons vus dans ce chapitre, ainsi que de la documentation de Testing Library et Jest Test DOM, essayez de réaliser les tests. :)

Vous pouvez vous mettre sur la branche partie-3/chapitre-2-b  .

C’est bon ?

Je vous invite à regarder le screencast ci-dessous pour voir ma correction.

La solution se trouve sur la branche partie-3/chapitre-2-b-solution  .

En résumé

• Testing Library vous fournit une bibliothèque de sélecteurs. Ces derniers vont vous permettre de sélectionner facilement des nœuds au moment de la réalisation des tests.

• Jest DOM met à disposition de nouveaux matchers pour tester des éléments spécifiques sur le DOM.

• Le commentaire  @jest-environment jsdom   précise à Jest que vous allez réaliser des tests dans un environnement incluant le DOM. Il doit être écrit en premier dans le fichier.

• Vous allez pouvoir simuler des clics de souris et d’autres types d’events avec l’API de Testing Library.

Vous savez maintenant comment réaliser des tests unitaires et des tests d’intégration, il est temps de s’intéresser à la fiabilité de votre produit.