Aller au contenu principal

Simuler (mock) les retours d'API

Comme on veut exécuter les tests dans un environnement contrôlé, sans utiliser le lien réel avec l'API, on simulera les retours d'API. Il serait possible de faire des tests bouts-en-bouts avec l'API qui roule en arrière-plan, mais si un test échoue, est-ce que c'est l'API ou le projet client qui ne fonctionne pas?

Pour l'instant, on cherche à tester les deux blocs indépendamment: la portion client et ensuite, la portion API.

Simuler du contenu, comme des retours d'API, s'appelle faire des mocks. On créera des fichiers qui auront comme seul rôle de retourner des données JSON statiques.

Créer un mock pour la liste de projets​

  1. Sous le dossier tests, créez un dossier mocks
  2. Sous le dossier mocks, créez un fichier projets.mock.ts
  3. Ensuite, entrez-y un contenu équivalent à ce qui devrait être retourné par l'API
    tests/mocks/projets.mock.ts
    export const mockProjets = [
      {
        id: 1,
        nom: 'Projet 1',
        description: 'Description 1',
        date_creation: new Date().toJSON(),
        date_modification: new Date().toJSON(),
      },
      {
        id: 2,
        nom: 'Projet 2',
        description: 'Description 2',
        image_url: "https://placehold.co/400.png",
        date_creation: new Date().toJSON(),
        date_modification: new Date().toJSON(),
      },
    ];

Intercepter les requêtes d'API et remplacer le retour​

Au début de l'exécution du test, il faudra intercepter la requête d'API et remplacer par un retour fictif. Pour ce faire, on peut utiliser la fonction route de Playwright pour retourner notre mock.

  1. Créons un deuxième test qui vérifiera si la page contient des projets
    tests/projets.spec.ts
    //...

    test('une liste de projets est affichée', async ({ page }) => {
      await page.goto('http://localhost:4200/projets');
    })

    //...
  2. Avant, le chargement de la page, interceptons la requête d'API 
    test('une liste de projets est affichée', async ({ page }) => {
      await page.route('http://localhost:3000/projets', (route) => {
        route.fulfill({
          json: mockProjets,
        });
      });

      await page.goto('http://localhost:4200/projets');

    })
  3. Effectuer la ou les vérifications souhaitées. On pourrait, par exemple, vérifier qu'il y a bien 2 éléments dans la liste. Pour cela, on peut utiliser page.locator pour sélectionner les li qui constituent les items de la liste et vérifier leur nombre avec toHaveCount().
    tests/projets.spec.ts
    test('une liste de projets est affichée', async ({ page }) => {
      await page.route('http://localhost:3000/projets', (route) => {
        route.fulfill({
          json: mockProjets,
        });
      });

      await page.goto('http://localhost:4200/projets');

      await expect(page.locator('ul.list-group li')).toHaveCount(mockProjets.length);
    })
info

page.locator accepte un sélecteur CSS, vous pouvez donc sélectionner n'importe quel élément ou groupe d'éléments à l'aide d'un sélecteur adapté.