Tester le front : React Testing Library et Playwright (E2E)

// front/FormulaireReservation.jsx
import { useState } from 'react';

export default function FormulaireReservation({ reserver }) {
  const [message, setMessage] = useState(null);

  async function envoyer(formData) {
    const resultat = await reserver({
      materiel: formData.get('materiel'),
      debut: formData.get('debut'),
      fin: formData.get('fin'),
    });
    setMessage(resultat.ok ? 'Réservation enregistrée.' : resultat.erreur);
  }

  return (
    <form action={envoyer}>
      <label>
        Matériel
        <select name="materiel" defaultValue="PC-07">
          <option value="PC-07">PC-07 (portable)</option>
          <option value="VP-02">VP-02 (vidéoprojecteur)</option>
        </select>
      </label>
      <label>
        Du
        <input type="date" name="debut" required />
      </label>
      <label>
        Au
        <input type="date" name="fin" required />
      </label>
      <button type="submit">Réserver</button>
      {message && <p role="status">{message}</p>}
    </form>
  );
}

npm install --save-dev @testing-library/react @testing-library/dom @testing-library/user-event jsdom

// front/FormulaireReservation.test.jsx
// @vitest-environment jsdom
import { test, expect, vi, afterEach } from 'vitest';
import { render, screen, cleanup } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import FormulaireReservation from './FormulaireReservation.jsx';

afterEach(cleanup);

test('envoie la demande saisie et affiche la confirmation', async () => {
  const reserver = vi.fn().mockResolvedValue({ ok: true });
  const utilisateur = userEvent.setup();
  render(<FormulaireReservation reserver={reserver} />);

  await utilisateur.selectOptions(screen.getByLabelText('Matériel'), 'VP-02');
  await utilisateur.type(screen.getByLabelText('Du'), '2027-03-15');
  await utilisateur.type(screen.getByLabelText('Au'), '2027-03-18');
  await utilisateur.click(screen.getByRole('button', { name: 'Réserver' }));

  expect(reserver).toHaveBeenCalledWith({ materiel: 'VP-02', debut: '2027-03-15', fin: '2027-03-18' });
  expect((await screen.findByRole('status')).textContent).toBe('Réservation enregistrée.');
});

test("affiche le motif du refus renvoyé par l'API", async () => {
  const reserver = vi.fn().mockResolvedValue({ ok: false, erreur: 'PC-07 est déjà réservé du 10/03/2027 au 14/03/2027.' });
  const utilisateur = userEvent.setup();
  render(<FormulaireReservation reserver={reserver} />);

  await utilisateur.type(screen.getByLabelText('Du'), '2027-03-12');
  await utilisateur.type(screen.getByLabelText('Au'), '2027-03-18');
  await utilisateur.click(screen.getByRole('button', { name: 'Réserver' }));

  expect((await screen.findByRole('status')).textContent).toBe('PC-07 est déjà réservé du 10/03/2027 au 14/03/2027.');
});

npm install --save-dev @playwright/test
npx playwright install chromium

// playwright.config.js
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  retries: process.env.CI ? 2 : 0,
  reporter: [['list'], ['html', { open: 'never' }]],
  use: {
    baseURL: 'http://localhost:3100',
    trace: 'on-first-retry',
  },
  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
  webServer: {
    command: 'node src/serveur-recette.js',
    url: 'http://localhost:3100',
    reuseExistingServer: !process.env.CI,
  },
});

// src/serveur-recette.js : l'API et le front compilé, sur une base de démonstration
import express from 'express';
import { creerApp } from './app.js';
import { creerDepotMemoire } from './depot-memoire.js';
import { AUJOURDHUI, UTILISATEURS, jeuDeTest } from './jeu-de-test.js';

const app = creerApp({
  depot: creerDepotMemoire(jeuDeTest()),
  authentifier: async (jeton) => UTILISATEURS[jeton] ?? null,
  aujourdhui: () => AUJOURDHUI,
});
app.use(express.static('dist'));
app.listen(3100, () => console.log('Prêt\'Matos (recette) sur http://localhost:3100'));

// e2e/reservation.spec.js
import { test, expect } from '@playwright/test';

test.describe('Réserver un matériel', () => {
  test('Julie réserve le vidéoprojecteur libre', async ({ page }) => {
    await page.goto('/');

    await page.getByLabel('Matériel').selectOption('VP-02');
    await page.getByLabel('Du').fill('2027-03-15');
    await page.getByLabel('Au').fill('2027-03-18');
    await page.getByRole('button', { name: 'Réserver' }).click();

    await expect(page.getByRole('status')).toHaveText('Réservation enregistrée.');
  });

  test('Julie voit pourquoi PC-07 est refusé', async ({ page }) => {
    await page.goto('/');

    await page.getByLabel('Matériel').selectOption('PC-07');
    await page.getByLabel('Du').fill('2027-03-12');
    await page.getByLabel('Au').fill('2027-03-18');
    await page.getByRole('button', { name: 'Réserver' }).click();

    await expect(page.getByRole('status')).toHaveText('PC-07 est déjà réservé du 10/03/2027 au 14/03/2027.');
  });
});

$ npx playwright test

Running 2 tests using 1 worker

  ✓  1 [chromium] › e2e/reservation.spec.js:5:3 › Réserver un matériel › Julie réserve le vidéoprojecteur libre (708ms)
  ✓  2 [chromium] › e2e/reservation.spec.js:16:3 › Réserver un matériel › Julie voit pourquoi PC-07 est refusé (256ms)

  2 passed (3.9s)

npm install --save-dev @axe-core/playwright

// e2e/accessibilite.spec.js
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test("la page de réservation n'a pas de défaut d'accessibilité détectable", async ({ page }) => {
  await page.goto('/');

  const resultats = await new AxeBuilder({ page }).analyze();

  expect(resultats.violations).toEqual([]);
});