Simulation d’autres composants

Objectifs de formation

Une fois cette unité terminée, vous pourrez :

• Décrire les stubs fournis par le package sfdx-lwc-jest
• Comprendre comment remplacer la configuration Jest
• Tester les composants en dehors de votre environnement de développement
• Créer des stubs pour les composants externes

Création de composants de base fictifs

Le package sfdx-lwc-jest nous permet d’exécuter Jest dans les composants Web Lightning. Il met en place toutes les configurations Jest nécessaires pour exécuter des tests sans aucune modification supplémentaire. Nous l’avons beaucoup utilisé dans les modules précédents. Ce package comprend un ensemble de stubs (programmes qui simulent les composants dont dépend un module faisant l’objet de tests) pour tous les composants de l’espace de noms Lightning, y compris tous les composants de base Lightning. Cela nous permet d’exécuter les tests dans notre environnement sans être dans un environnement Lightning. Les stubs sont installés dans le répertoire src/lightning-stubs du répertoire node-modules/@salesforce/sfdx-lwc-jest.

Il peut arriver que vous deviez remplacer les stubs fournis par défaut. Pour ce faire, il est nécessaire de remplacer les configurations Jest, puis de créer des stubs personnalisés. Passons en revue les étapes à suivre pour lightning-button.

Commencez par configurer les répertoires pour les stubs personnalisés dans Visual Studio Code.

1. Cliquez avec le bouton droit de la souris sur le répertoire force-app et sélectionnez Nouveau dossier.
2. Saisissez test pour nommer le nouveau répertoire.
3. Cliquez avec le bouton droit de la souris sur le nouveau répertoire test et sélectionnez Nouveau dossier.
4. Saisissez jest-mocks pour nommer le nouveau répertoire.
5. Cliquez avec le bouton droit de la souris sur le nouveau répertoire jest-mocks et sélectionnez Nouveau dossier.
6. Saisissez lightning pour nommer le nouveau répertoire.

Il s’agit de la racine des stubs pour les composants de base Lightning.

Ensuite, remplacez la configuration Jest en mettant à jour le fichier nommé jest.config.js situé à la racine de votre projet Salesforce DX.

1. Ouvrez le fichier jest.config.js.
2. Saisissez le bloc de code suivant après la ligne …jestConfig :

     moduleNameMapper: {
       '^lightning/button$': '<rootDir>/force-app/test/jest-mocks/lightning/button'
     },

   Prêtez attention à l’élément moduleNameMapper. Cet élément indique à Jest où trouver le stub de lightning-button. Le premier tiret est converti en une barre oblique et le reste du nom passe d’une convention où les mots sont séparés par des tirets à une casse mixte. Une barre oblique est utilisée, car le résolveur de module traite tout ce qui se trouve avant le premier tiret comme l’espace de noms. Ici, <rootDir> correspond à la racine de l’espace de travail Salesforce DX.

   Votre fichier doit se présenter comme suit :

   const { jestConfig } = require('@salesforce/sfdx-lwc-jest/config');
     
   module.exports = {
       ...jestConfig,
       moduleNameMapper: {
           '^lightning/button$': '/force-app/test/jest-mocks/lightning/button'
       },
       modulePathIgnorePatterns: ['/.localdevserver']
   };
     

3. Enregistrez le fichier.

Ajoutons maintenant le stub button au répertoire lightning que nous venons de créer.

1. Cliquez avec le bouton droit de la souris sur le répertoire lightning que nous avons créé au cours des dernières étapes et sélectionnez Nouveau fichier.
2. Saisissez button.html pour nommer le nouveau fichier.
3. Saisissez le bloc de code suivant dans le nouveau fichier :

   <template></template>

4. Enregistrez le fichier.
5. Cliquez avec le bouton droit de la souris sur le répertoire lightning et sélectionnez Nouveau fichier.
6. Saisissez button.js pour nommer le nouveau fichier.
7. Saisissez le bloc de code suivant dans le nouveau fichier :

   import { LightningElement, api } from 'lwc';
       
   export default class Button extends LightningElement {
     @api disabled;
     @api iconName;
     @api iconPosition;
     @api label;
     @api name;
     @api type;
     @api value;
     @api variant;
   }

8. Enregistrez le fichier.

Ces deux fichiers sont des copies des fichiers lightning-button du dossier lightning-stubs. Ils permettent de remplacer l’élément lightning-button de base pour les tests Jest si nécessaire.

Nous pouvons maintenant remplacer les stubs par défaut fournis par sfdx-lwc-jest. Qu’en est-il des composants issus d’autres espaces de noms ? Nous pouvons traiter ces cas avec quelques ajustements seulement. Abordons-les maintenant.

Création d’autres composants fictifs

Commençons par créer des composants fictifs avec un espace de noms différent. Pour ce faire, vous devez configurer un composant Web Lightning avec un test Jest qui échoue. Nous simulerons ensuite un correctif.

1. Créez un composant Web Lightning dans Visual Studio Code.
2. Définissez le nom sur otherComponents.

Ajoutons maintenant un composant avec un espace de noms différent au LWC.

1. Ouvrez le fichier otherComponents.html et ajoutez le code suivant entre les balises « template » :

   <thunder-hammer-button onclick={makeNoise}></thunder-hammer-button>

2. Enregistrez le fichier et exécutez le test.
3. Le test échoue pour une nouvelle raison :

   Test suite failed to run
       
     Cannot find module 'thunder/hammerButton' from 'otherComponents.html'

puisque le composant <thunder-hammer-button> provient d’un autre espace de noms, et non du répertoire lwc local, vous devez créer un stub et mettre à jour la configuration Jest pour mapper le nom de ces composants au fichier fictif.

Vous devez d’abord ajouter un répertoire Thunder pour représenter l’espace de noms. Vous ajoutez ensuite les fichiers pour le remplacer.

1. Cliquez avec le bouton droit de la souris sur le répertoire jest-mocks dans le répertoire force-app/test/ et sélectionnez Nouveau dossier.
2. Saisissez thunder pour nommer le nouveau répertoire.
3. Cliquez avec le bouton droit de la souris sur le répertoire thunder et sélectionnez Nouveau fichier.
4. Saisissez hammerButton.html pour nommer le nouveau fichier.
5. Saisissez le bloc de code suivant dans le nouveau fichier :

   <template></template>

6. Enregistrez le fichier.
7. Cliquez avec le bouton droit de la souris sur le nouveau répertoire thunder et sélectionnez Nouveau fichier.
8. Saisissez hammerButton.js pour nommer le nouveau fichier.
9. Saisissez le bloc de code suivant dans le nouveau fichier :

   import { LightningElement, api } from 'lwc';
       
   export default class HammerButton extends LightningElement {
     @api label;
     // any other implementation you may want to expose here
   }

10. Enregistrez le fichier et exécutez le test.
11. Le test échoue. Nous devons mettre à jour le fichier de configuration Jest.
12. Ouvrez jest.config.js et ajoutez cette ligne juste en dessous de la ligne moduleNameMapper: { :

    '^thunder/hammerButton$': '<rootDir>/force-app/test/jest-mocks/thunder/hammerButton',

13. Enregistrez le fichier et exécutez le test.
14. Impeccable ! Le test réussit.

Il arrive que le LWC avec lequel vous travaillez importe un autre LWC qui ne se trouve pas dans le répertoire LWC local de votre projet Salesforce DX, Sans stub, ils feront échouer Jest. Testons ce cas.

1. Ouvrez le fichier otherComponents.html et ajoutez le code suivant après la première balise « template » :

   <c-display-panel errors={error} notes={messages}></c-display-panel>

2. Enregistrez le fichier et exécutez le test.
3. Le test échoue, car il ne trouve pas le composant.

Vous pouvez résoudre ce problème à l’aide d’un stub. Vous devez commencer par créer le stub, puis mettre à jour la configuration Jest.

1. Cliquez avec le bouton droit de la souris sur le répertoire jest-mocks dans le répertoire force-app/test/ et sélectionnez Nouveau dossier.
2. Saisissez c pour nommer le nouveau répertoire.
3. Cliquez avec le bouton droit de la souris sur le répertoire c et sélectionnez Nouveau fichier.
4. Saisissez displayPanel.html pour nommer le nouveau fichier.
5. Saisissez le bloc de code suivant dans le nouveau fichier :

   <template></template>

6. Enregistrez le fichier.
7. Cliquez avec le bouton droit de la souris sur le nouveau répertoire c et sélectionnez Nouveau fichier.
8. Saisissez displayPanel.js pour nommer le nouveau fichier.
9. Saisissez le bloc de code suivant dans le nouveau fichier :

   import { LightningElement, api } from 'lwc';
       
   export default class DisplayPanel extends LightningElement {
     @api errors;
     @api notes;
     // any other implementation you may want to expose here
   }

   Notez qu’il existe un décorateur d’API pour chaque paramètre transmis à l’appel de composant.
10. Enregistrez le fichier.
11. Ouvrez jest.config.js et ajoutez cette ligne juste en dessous de la ligne moduleNameMapper: { :

    '^c/displayPanel$': '<rootDir>/force-app/test/jest-mocks/c/displayPanel',

12. Enregistrez le fichier et exécutez le test.
13. Le test réussit.

Bravo ! Vous êtes maintenant prêt à écrire des tests pour tous vos composants Web Lightning. Vous êtes également capable de réaliser des implémentations de stubs aussi sophistiquées ou simples que vous le souhaitez.

Ressources

• Site externe : GitHub : salesforce/sfdx-lwc-jest : résolution des composants Web Lightning externes
• Site externe : GitHub : trailheadapps/lwc-recipes