Files
Coltura/frontend/shared/composables/__tests__/useSidebar.test.ts
tristan 03c761eed4 feat(sites) : barre de selection de site (ticket 3/4)
Barre horizontale en haut de l'app qui liste les sites autorises de
l'utilisateur et permet de switcher d'un click. Consomme le composant
MalioSiteSelector de @malio/layer-ui 1.4.0 (upgrade depuis 1.3.0).

Composables :
- useModules (shared) : consomme /api/modules, expose isModuleActive.
  Pattern aligne sur useSidebar.
- useCurrentSite (layer sites) : singleton state, switchSite optimistic
  avec rollback sur erreur, garde anti-double-submit, propagation au
  store auth via action setCurrentSite dediee.

Composant :
- SiteSelector.vue : wrapper thin autour de MalioSiteSelector. Texte
  blanc uniforme (conforme maquette Figma) avec taille 24px forcee via
  labelClass="text-2xl". aria-label du group via ariaGroupLabel i18n.

Integration :
- Middleware auth.global.ts : chargement parallele sidebar + modules.
- layouts/default.vue : render conditionnel si module Sites actif ET
  user.sites.length > 0.
- logout.vue : reset des 3 composables (sidebar, modules, currentSite)
  dans un try/finally.
- nuxt.config.ts : auto-detection des composables/ de chaque layer
  module (necessaire car imports.dirs explicite override les defaults
  Nuxt).

Couleurs fixtures finales : Chatellerault #056CF2, Saint-Jean #F3CB00,
Pommevic #74BF04. Charge aux admins de choisir des teintes foncees
(texte blanc non contrastable via calcul WCAG, design choisi).

Tests : 40 Vitest (color, useModules, useSidebar, useCurrentSite,
SiteSelector) incluant garde anti-regression pour useI18n hors setup.
182/182 PHPUnit backend, avec et sans module actif.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-20 11:45:48 +02:00

72 lines
2.5 KiB
TypeScript

import { describe, it, expect, vi, beforeEach } from 'vitest'
import { useSidebar } from '../useSidebar'
const mockApiGet = vi.hoisted(() => vi.fn())
vi.stubGlobal('useApi', () => ({ get: mockApiGet }))
/**
* Tests de l'invariant "loadSidebar ne reject jamais".
*
* Garantie utilisee par le middleware auth.global.ts qui fait un
* Promise.all([loadSidebar(), loadModules()]) — si l'un throw, le
* middleware echoue et toute l'app avec. Le swallow interne est donc
* load-bearing et ce test le verrouille.
*/
describe('useSidebar', () => {
beforeEach(() => {
mockApiGet.mockReset()
const { resetSidebar } = useSidebar()
resetSidebar()
})
it('charge sections et disabledRoutes depuis /api/sidebar', async () => {
mockApiGet.mockResolvedValueOnce({
sections: [{ label: 's', icon: 'i', items: [] }],
disabledRoutes: ['/foo'],
})
const { loadSidebar, sections, disabledRoutes, loaded } = useSidebar()
await loadSidebar()
expect(sections.value).toHaveLength(1)
expect(disabledRoutes.value).toEqual(['/foo'])
expect(loaded.value).toBe(true)
})
it('swallow les erreurs reseau sans rejeter (invariant middleware)', async () => {
mockApiGet.mockRejectedValueOnce(new Error('boom'))
const { loadSidebar, sections, disabledRoutes, loaded } = useSidebar()
// Assertion principale : la promise resout normalement meme sur erreur.
await expect(loadSidebar()).resolves.toBeUndefined()
expect(sections.value).toEqual([])
expect(disabledRoutes.value).toEqual([])
expect(loaded.value).toBe(true)
})
it('isRouteDisabled matche exactement un chemin', async () => {
mockApiGet.mockResolvedValueOnce({ sections: [], disabledRoutes: ['/foo'] })
const { loadSidebar, isRouteDisabled } = useSidebar()
await loadSidebar()
expect(isRouteDisabled('/foo')).toBe(true)
expect(isRouteDisabled('/foo/bar')).toBe(true)
expect(isRouteDisabled('/other')).toBe(false)
})
it('resetSidebar vide l\'etat', async () => {
mockApiGet.mockResolvedValueOnce({
sections: [{ label: 's', icon: 'i', items: [] }],
disabledRoutes: ['/foo'],
})
const { loadSidebar, resetSidebar, sections, loaded } = useSidebar()
await loadSidebar()
expect(loaded.value).toBe(true)
resetSidebar()
expect(sections.value).toEqual([])
expect(loaded.value).toBe(false)
})
})