test(e2e) : initialise la suite Playwright (login + sidebar RBAC)

- 11 tests couvrant le login (3) et la visibilite sidebar par RBAC (8)
- 6 personas seedes via la commande app:seed-e2e, miroir cote front
  dans frontend/tests/e2e/_fixtures/personas.ts
- Page Objects (LoginPage, SidebarComponent) avec selecteurs stables
  par href + loginAs programmatique via cookie BEARER
- Targets Makefile : seed-e2e, test-e2e, test-e2e-ui, install-e2e-deps
- CLAUDE.md + README.md : workflow E2E + regle d'or "un E2E par bug
  prod uniquement" pour garder la suite maintenable dans la duree

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/tests/e2e/_fixtures/personas.ts

@@ -0,0 +1,112 @@
+/**
+ * Definition des 6 personas utilises dans les tests E2E.
+ *
+ * Source de verite unique partagee entre :
+ *   - le seed backend (`bin/console app:seed-e2e`)
+ *   - les tests Playwright (via `loginAs`)
+ *
+ * Regle : chaque persona cible une case precise de la matrice RBAC.
+ * Si tu ajoutes une permission au domaine, tu NE crees pas un nouveau
+ * persona par reflexe — tu ajustes un persona existant si possible.
+ * L'objectif est de garder ce set petit et comprehensible a 6 mois.
+ *
+ * IMPORTANT : ces personas sont recrees a chaque `app:seed-e2e`. Ne jamais
+ * reutiliser les users dev (admin/alice/bob) dans les tests : ils evoluent
+ * au gre des fixtures de demo et casseraient la suite E2E.
+ */
+
+export type PersonaKey =
+    | 'super-admin'
+    | 'user-full'
+    | 'user-readonly'
+    | 'user-users-only'
+    | 'user-audit-only'
+    | 'user-nothing'
+
+export interface Persona {
+    key: PersonaKey
+    username: string
+    password: string
+    isAdmin: boolean
+    // Permissions directes attribuees en dur (on bypasse les roles pour
+    // garder le seed simple et la correspondance test<->permission directe).
+    permissions: string[]
+    // Contenu attendu de la sidebar (admin links). Utilise par le test
+    // sidebar-visibility pour driver la matrice. Les valeurs correspondent
+    // aux slugs de route (`/admin/<slug>`), volontairement stables quand
+    // la copie/i18n change.
+    expectedAdminLinks: Array<'users' | 'roles' | 'sites' | 'audit-log'>
+}
+
+const SHARED_PASSWORD = 'e2e-secret'
+
+export const personas: Record<PersonaKey, Persona> = {
+    'super-admin': {
+        key: 'super-admin',
+        username: 'e2e.super-admin',
+        password: SHARED_PASSWORD,
+        isAdmin: true,
+        permissions: [],
+        expectedAdminLinks: ['users', 'roles', 'sites', 'audit-log'],
+    },
+    'user-full': {
+        key: 'user-full',
+        username: 'e2e.user-full',
+        password: SHARED_PASSWORD,
+        isAdmin: false,
+        permissions: [
+            'core.users.view',
+            'core.users.manage',
+            'core.roles.view',
+            'core.roles.manage',
+            'core.audit_log.view',
+            'sites.view',
+            'sites.manage',
+            'sites.bypass_scope',
+        ],
+        expectedAdminLinks: ['users', 'roles', 'sites', 'audit-log'],
+    },
+    'user-readonly': {
+        key: 'user-readonly',
+        username: 'e2e.user-readonly',
+        password: SHARED_PASSWORD,
+        isAdmin: false,
+        permissions: [
+            'core.users.view',
+            'core.roles.view',
+            'core.audit_log.view',
+            'sites.view',
+        ],
+        expectedAdminLinks: ['users', 'roles', 'sites', 'audit-log'],
+    },
+    'user-users-only': {
+        key: 'user-users-only',
+        username: 'e2e.user-users-only',
+        password: SHARED_PASSWORD,
+        isAdmin: false,
+        permissions: ['core.users.view', 'core.users.manage'],
+        expectedAdminLinks: ['users'],
+    },
+    'user-audit-only': {
+        key: 'user-audit-only',
+        username: 'e2e.user-audit-only',
+        password: SHARED_PASSWORD,
+        isAdmin: false,
+        permissions: ['core.audit_log.view'],
+        expectedAdminLinks: ['audit-log'],
+    },
+    'user-nothing': {
+        key: 'user-nothing',
+        username: 'e2e.user-nothing',
+        password: SHARED_PASSWORD,
+        isAdmin: false,
+        permissions: [],
+        expectedAdminLinks: [],
+    },
+}
+
+export function getPersona(key: PersonaKey): Persona {
+    return personas[key]
+}
+
+export const ALL_ADMIN_LINKS = ['users', 'roles', 'sites', 'audit-log'] as const

frontend/tests/e2e/auth/login.spec.ts

@@ -0,0 +1,65 @@
+import { expect, test } from '@playwright/test'
+import { LoginPage } from '../helpers/pages/LoginPage'
+import { getPersona } from '../_fixtures/personas'
+
+/**
+ * Tests du flow login/logout via l'UI.
+ *
+ * C'est le SEUL fichier qui traverse le formulaire pour de vrai. Les autres
+ * specs utilisent `loginAs()` qui pose directement le cookie BEARER via API,
+ * 10x plus rapide et decouple du form HTML.
+ */
+test.describe('Login', () => {
+    test('login valide pose le cookie BEARER et redirige vers /', async ({ page, context }) => {
+        const superAdmin = getPersona('super-admin')
+        const loginPage = new LoginPage(page)
+
+        await loginPage.goto()
+        await loginPage.fillAndSubmit(superAdmin.username, superAdmin.password)
+
+        // La redirection se fait apres un `navigateTo('/')` dans login.vue.
+        await page.waitForURL('/')
+        await expect(page).toHaveURL('/')
+
+        // Le cookie BEARER (HTTP-only) doit etre pose par Symfony.
+        const cookies = await context.cookies()
+        const bearer = cookies.find(c => c.name === 'BEARER')
+        expect(bearer, 'Le cookie BEARER doit etre pose apres un login valide').toBeDefined()
+        expect(bearer?.httpOnly).toBe(true)
+    })
+
+    test('login invalide reste sur /login et n\'emet pas de cookie', async ({ page, context }) => {
+        const loginPage = new LoginPage(page)
+
+        await loginPage.goto()
+        await loginPage.fillAndSubmit('e2e.super-admin', 'wrong-password')
+
+        // On ne doit PAS etre redirige — le handleSubmit swallow la 401 via toast,
+        // le user reste sur /login pour corriger.
+        await page.waitForTimeout(500)
+        await expect(page).toHaveURL(/\/login$/)
+
+        const cookies = await context.cookies()
+        const bearer = cookies.find(c => c.name === 'BEARER')
+        expect(bearer, 'Aucun cookie BEARER ne doit etre pose apres un login invalide').toBeUndefined()
+    })
+
+    test('logout efface le cookie et redirige vers /login', async ({ page, context }) => {
+        const superAdmin = getPersona('super-admin')
+        const loginPage = new LoginPage(page)
+
+        // 1. Login d'abord
+        await loginPage.goto()
+        await loginPage.fillAndSubmit(superAdmin.username, superAdmin.password)
+        await page.waitForURL('/')
+
+        // 2. Navigation vers /logout (il y a un lien "Deconnexion" dans la sidebar)
+        await page.goto('/logout')
+        await page.waitForURL(/\/login$/)
+
+        // 3. Le cookie BEARER doit avoir ete supprime par le firewall de logout
+        const cookies = await context.cookies()
+        const bearer = cookies.find(c => c.name === 'BEARER')
+        expect(bearer, 'Le cookie BEARER doit etre supprime apres logout').toBeUndefined()
+    })
+})

frontend/tests/e2e/helpers/loginAs.ts

@@ -0,0 +1,45 @@
+import type { BrowserContext, Page } from '@playwright/test'
+import { type PersonaKey, getPersona } from '../_fixtures/personas'
+
+/**
+ * Login programmatique : pose le cookie BEARER via l'API sans passer par le
+ * formulaire de login.
+ *
+ * Utilise ce helper dans TOUS les tests qui ne testent pas le flow login
+ * lui-meme (sidebar visibility, route guards, etc.). Ca evite de payer 2s
+ * par test sur le form HTML et ca isole les tests : si le form login casse,
+ * seul `login.spec.ts` est rouge, pas toute la suite.
+ *
+ * Impl : on issue une requete POST /api/login_check avec les creds du persona.
+ * Nginx reecrit vers /login_check, Symfony pose le cookie BEARER sur le
+ * context du browser. Apres ca, n'importe quelle navigation est authentifiee.
+ */
+export async function loginAs(context: BrowserContext, persona: PersonaKey, baseURL?: string): Promise<void> {
+    const { username, password } = getPersona(persona)
+    const base = baseURL ?? 'http://localhost:3004'
+
+    const response = await context.request.post(`${base}/api/login_check`, {
+        data: { username, password },
+    })
+
+    if (!response.ok()) {
+        const body = await response.text()
+        throw new Error(
+            `loginAs(${persona}) a echoue : ${response.status()} ${body}. `
+            + 'Verifier que le backend tourne et que `make seed-e2e` a ete lance.',
+        )
+    }
+}
+
+/**
+ * Helper d'appoint quand on veut tester VIA l'UI (login.spec.ts uniquement).
+ * Passe par le formulaire rendu, clique sur le bouton. A ne PAS utiliser
+ * dans les autres tests — preferer `loginAs()`.
+ */
+export async function loginViaForm(page: Page, persona: PersonaKey): Promise<void> {
+    const { username, password } = getPersona(persona)
+    await page.goto('/login')
+    await page.getByLabel("Nom d'utilisateur").fill(username)
+    await page.getByLabel('Mot de passe').fill(password)
+    await page.getByRole('button', { name: 'Se connecter' }).click()
+}

frontend/tests/e2e/helpers/pages/LoginPage.ts

@@ -0,0 +1,32 @@
+import type { Locator, Page } from '@playwright/test'
+
+/**
+ * Page Object du formulaire de login (/login).
+ *
+ * Selecteurs : on s'appuie sur les labels/roles accessibles (stable vs les
+ * changements de CSS/Tailwind). Le jour ou on veut un selecteur plus dur,
+ * on ajoute des `data-testid` sur login.vue.
+ */
+export class LoginPage {
+    readonly page: Page
+    readonly usernameInput: Locator
+    readonly passwordInput: Locator
+    readonly submitButton: Locator
+
+    constructor(page: Page) {
+        this.page = page
+        this.usernameInput = page.getByLabel("Nom d'utilisateur")
+        this.passwordInput = page.getByLabel('Mot de passe')
+        this.submitButton = page.getByRole('button', { name: 'Se connecter' })
+    }
+
+    async goto(): Promise<void> {
+        await this.page.goto('/login')
+    }
+
+    async fillAndSubmit(username: string, password: string): Promise<void> {
+        await this.usernameInput.fill(username)
+        await this.passwordInput.fill(password)
+        await this.submitButton.click()
+    }
+}

frontend/tests/e2e/helpers/pages/SidebarComponent.ts

@@ -0,0 +1,33 @@
+import type { Locator, Page } from '@playwright/test'
+
+export type AdminLinkSlug = 'users' | 'roles' | 'sites' | 'audit-log'
+
+/**
+ * Page Object de la sidebar (MalioSidebar), scope sur les items "admin".
+ *
+ * Strategie selecteur : `a[href=...]` plutot que le texte i18n. Le slug de
+ * route ne change pas quand on retraduit ou renomme une entree — c'est le
+ * selecteur le plus stable pour cette suite.
+ *
+ * Si un jour la sidebar change et les slugs bougent, on met a jour CE
+ * fichier uniquement ; les specs continuent de passer.
+ */
+export class SidebarComponent {
+    readonly page: Page
+
+    constructor(page: Page) {
+        this.page = page
+    }
+
+    adminLink(slug: AdminLinkSlug): Locator {
+        return this.page.locator(`a[href="/admin/${slug}"]`)
+    }
+
+    accountDashboardLink(): Locator {
+        return this.page.locator('a[href="/"]').first()
+    }
+
+    logoutLink(): Locator {
+        return this.page.locator('a[href="/logout"]')
+    }
+}

frontend/tests/e2e/permissions/sidebar-visibility.spec.ts

@@ -0,0 +1,82 @@
+import { expect, test } from '@playwright/test'
+import { loginAs } from '../helpers/loginAs'
+import { SidebarComponent } from '../helpers/pages/SidebarComponent'
+import { ALL_ADMIN_LINKS, type PersonaKey, getPersona, personas } from '../_fixtures/personas'
+
+/**
+ * Test strategique : la matrice persona <-> liens admin visibles.
+ *
+ * Valide que `SidebarProvider` (back) + `useSidebar` (front) filtrent bien
+ * les items admin selon les permissions RBAC de chaque user.
+ *
+ * Regle d'evolution : ajouter une permission ou un persona = 1 ligne a
+ * modifier dans `personas.ts` et cote back (`SeedE2ECommand`) + `sidebar.php`.
+ * Ce fichier ne bouge pas.
+ */
+test.describe('Sidebar visibility', () => {
+    const personaKeys: PersonaKey[] = [
+        'super-admin',
+        'user-full',
+        'user-readonly',
+        'user-users-only',
+        'user-audit-only',
+        'user-nothing',
+    ]
+
+    for (const key of personaKeys) {
+        const persona = getPersona(key)
+
+        test(`${persona.key} ne voit que ses liens admin autorises`, async ({ page, context }) => {
+            await loginAs(context, persona.key)
+            await page.goto('/')
+
+            // Attendre que la sidebar soit chargee (le middleware auth fetch /api/sidebar
+            // apres login). Les liens presents apparaissent alors ; les absents ne
+            // seront jamais attaches au DOM.
+            await page.waitForLoadState('networkidle')
+
+            const sidebar = new SidebarComponent(page)
+
+            for (const link of ALL_ADMIN_LINKS) {
+                const locator = sidebar.adminLink(link)
+                const shouldBeVisible = persona.expectedAdminLinks.includes(link)
+
+                if (shouldBeVisible) {
+                    await expect(
+                        locator,
+                        `${persona.key} doit voir le lien /admin/${link}`,
+                    ).toBeVisible()
+                } else {
+                    await expect(
+                        locator,
+                        `${persona.key} ne doit PAS voir le lien /admin/${link}`,
+                    ).toHaveCount(0)
+                }
+            }
+        })
+    }
+
+    test('user-nothing voit toujours le dashboard et le logout (section Mon compte sans permission)', async ({
+        page,
+        context,
+    }) => {
+        // La section "Mon compte" n'est gardee par aucune permission : tout user
+        // authentifie voit le dashboard et peut se deconnecter. Ce test protege
+        // contre une regression qui mettrait un gate RBAC par inadvertance
+        // dessus — ca bloquerait le logout de users sans permissions.
+        await loginAs(context, 'user-nothing')
+        await page.goto('/')
+        await page.waitForLoadState('networkidle')
+
+        const sidebar = new SidebarComponent(page)
+        await expect(sidebar.accountDashboardLink()).toBeVisible()
+        await expect(sidebar.logoutLink()).toBeVisible()
+    })
+
+    test('la liste des personas dans personas.ts couvre toutes les combinaisons admin attendues', () => {
+        // Test meta : si quelqu'un ajoute un persona dans personas.ts sans le
+        // seeder cote back (SeedE2ECommand), le test sidebar pour ce persona
+        // echouera (loginAs 401). Ce test rappelle la coherence attendue.
+        expect(Object.keys(personas)).toEqual(personaKeys)
+    })
+})