test

frontend/src/test/fonctionnel/Inscription.test.jsx

@@ -0,0 +1,120 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Inscription from '../../pages/Inscription'
+import { renderWithProviders } from '../renderWithProviders'
+import { registerApi, verifyCodeApi } from '../../services/auth'
+
+vi.mock('../../services/auth', () => ({
+  registerApi: vi.fn(),
+  verifyCodeApi: vi.fn(),
+}))
+
+// Remplit et soumet le formulaire d'inscription (étape 1).
+async function remplirEtSoumettre() {
+  await userEvent.type(screen.getByPlaceholderText(/votre email/i), 'jean@example.com')
+  await userEvent.type(screen.getByPlaceholderText(/votre nom/i), 'Dupont')
+  await userEvent.type(screen.getByPlaceholderText(/votre prénom/i), 'Jean')
+  await userEvent.type(screen.getByPlaceholderText(/votre mot de passe/i), 'MotDePasse123!')
+  await userEvent.click(screen.getByRole('checkbox'))
+  await userEvent.click(screen.getByRole('button', { name: /s'inscrire/i }))
+}
+
+// Saisit le code à 4 chiffres de l'étape de vérification.
+async function saisirCode(code) {
+  const inputs = screen.getAllByRole('textbox')
+  for (let i = 0; i < 4; i++) {
+    await userEvent.type(inputs[i], code[i])
+  }
+}
+
+describe('Inscription', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it("affiche le formulaire d'inscription", () => {
+    renderWithProviders(<Inscription />, { route: '/inscription' })
+
+    expect(screen.getByRole('heading', { name: /s'inscrire/i })).toBeInTheDocument()
+    expect(screen.getByPlaceholderText(/votre email/i)).toBeInTheDocument()
+    expect(screen.getByPlaceholderText(/votre nom/i)).toBeInTheDocument()
+    expect(screen.getByPlaceholderText(/votre prénom/i)).toBeInTheDocument()
+    expect(screen.getByPlaceholderText(/votre mot de passe/i)).toBeInTheDocument()
+  })
+
+  it("désactive le bouton tant que les conditions ne sont pas acceptées", async () => {
+    renderWithProviders(<Inscription />, { route: '/inscription' })
+
+    const bouton = screen.getByRole('button', { name: /s'inscrire/i })
+    expect(bouton).toBeDisabled()
+
+    await userEvent.click(screen.getByRole('checkbox'))
+    expect(bouton).toBeEnabled()
+  })
+
+  it("passe à l'étape de vérification après une inscription réussie", async () => {
+    registerApi.mockResolvedValue({ message: 'ok' })
+
+    renderWithProviders(<Inscription />, { route: '/inscription' })
+    await remplirEtSoumettre()
+
+    expect(registerApi).toHaveBeenCalledWith({
+      email: 'jean@example.com',
+      firstname: 'Jean',
+      lastname: 'Dupont',
+      password: 'MotDePasse123!',
+    })
+    expect(await screen.findByRole('heading', { name: /vérifiez votre email/i })).toBeInTheDocument()
+    expect(screen.getByText('jean@example.com')).toBeInTheDocument()
+  })
+
+  it("affiche l'erreur de l'API si l'inscription échoue", async () => {
+    registerApi.mockRejectedValue(new Error('Cet email est déjà utilisé.'))
+
+    renderWithProviders(<Inscription />, { route: '/inscription' })
+    await remplirEtSoumettre()
+
+    expect(await screen.findByText('Cet email est déjà utilisé.')).toBeInTheDocument()
+    expect(screen.queryByRole('heading', { name: /vérifiez votre email/i })).not.toBeInTheDocument()
+  })
+
+  it('connecte et redirige vers /saisir-code-unique quand le code est valide', async () => {
+    registerApi.mockResolvedValue({ message: 'ok' })
+    verifyCodeApi.mockResolvedValue({
+      token: 'jwt-token',
+      user: { id: 1, email: 'jean@example.com', role: 'CLIENT' },
+    })
+
+    renderWithProviders(<Inscription />, {
+      route: '/inscription',
+      routes: { '/saisir-code-unique': <p>Page Saisir Code</p> },
+    })
+    await remplirEtSoumettre()
+    await screen.findByRole('heading', { name: /vérifiez votre email/i })
+
+    await saisirCode('1234')
+    await userEvent.click(screen.getByRole('button', { name: /valider le code/i }))
+
+    expect(verifyCodeApi).toHaveBeenCalledWith({ email: 'jean@example.com', code: '1234' })
+    expect(await screen.findByText('Page Saisir Code')).toBeInTheDocument()
+    expect(localStorage.getItem('token')).toBe('jwt-token')
+  })
+
+  it("affiche l'erreur et vide les champs quand le code est invalide", async () => {
+    registerApi.mockResolvedValue({ message: 'ok' })
+    verifyCodeApi.mockRejectedValue(new Error('Code invalide.'))
+
+    renderWithProviders(<Inscription />, { route: '/inscription' })
+    await remplirEtSoumettre()
+    await screen.findByRole('heading', { name: /vérifiez votre email/i })
+
+    await saisirCode('0000')
+    await userEvent.click(screen.getByRole('button', { name: /valider le code/i }))
+
+    expect(await screen.findByText('Code invalide.')).toBeInTheDocument()
+    for (const input of screen.getAllByRole('textbox')) {
+      expect(input).toHaveValue('')
+    }
+  })
+})