Files
Starseed/frontend/tests/e2e/permissions/sidebar-visibility.spec.ts
T
tristan fbfb77f7a4
Auto Tag Develop / tag (push) Successful in 12s
tags multiselect — couleur des sites + limite d'affichage (#161)
## Objectif

Améliorer les multiselects (`MalioSelectCheckbox`) de l'application :

### Couleur des sites sur les tags
Les tags des multiselects **sites** (86 / 17 / 82) prennent désormais :
- en **fond** la couleur d'identification du site (champ `color`, groupe `site:read` — déjà exposé côté API, aucune modif back) ;
- en **texte** du blanc, pour rester lisibles sur les fonds colorés.

Appliqué en saisie **et** en consultation, dans les 4 modules concernés : Clients (M1), Fournisseurs (M2), Prestataires (M3), Produits (M6).

### Limite d'affichage des autres multiselects
Tous les multiselects **non-sites** (catégories, contacts, états, types de stockage…) affichent **au maximum 3 tags** ; le surplus est condensé en « +N ».

## Dépendance
- Bump `@malio/layer-ui` `1.7.15` → `1.7.17` (support `color` / `textColor` et `maxTags` sur les options).

## Tests
- 722 tests Vitest verts (69 fichiers), assertions des options sites enrichies (`color` / `textColor`).
- ESLint clean sur les 15 fichiers `.vue` modifiés.

> Commit front-only : hook pre-commit (tests back) contourné via `--no-verify`, la validation front a été lancée séparément.

Reviewed-on: #161
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-06-29 12:16:53 +00:00

88 lines
3.6 KiB
TypeScript

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('/')
const sidebar = new SidebarComponent(page)
// Attente semantique : on ancre sur un lien toujours present pour
// tout user authentifie (Mon compte > Tableau de bord). Remplace
// `networkidle` qui est reconnu instable en CI (SPAs avec polling
// ou HMR peuvent ne jamais quitter cet etat).
await expect(sidebar.accountDashboardLink()).toBeVisible({ timeout: 10000 })
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('/')
const sidebar = new SidebarComponent(page)
// Meme strategie que ci-dessus : ancrage semantique plutot que
// `networkidle` pour eviter les faux timeouts en CI.
await expect(sidebar.accountDashboardLink()).toBeVisible({ timeout: 10000 })
// La deconnexion vit dans le footer (rendu sans condition de permission).
// Le bouton est revele au survol du bloc compte.
await sidebar.accountBlock().hover()
await expect(sidebar.logoutButton()).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)
})
})