fix(sidebar) : lien actif sur les sous-routes (match préfixe) + option exact

L'actif reposait sur l'active-class de NuxtLink, qui dépend de l'imbrication des
routes Vue Router : sur un routing plat, /supplier n'était plus actif sur
/supplier/1/edit. On calcule désormais l'actif côté composant via useRoute().path :
actif si path === item.to OU path commence par item.to + '/'. Nouvelle option
`exact: true` par item pour forcer le match strict.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-19 15:55:58 +02:00
parent 5a06cf642f
commit 61e1925ccd
4 changed files with 73 additions and 9 deletions
+52 -7
View File
@@ -1,12 +1,14 @@
import {describe, expect, it} from 'vitest'
import {mount} from '@vue/test-utils'
import type {DefineComponent} from 'vue'
import {createMemoryHistory, createRouter} from 'vue-router'
import {Icon as IconifyIcon} from '@iconify/vue'
import Sidebar from './Sidebar.vue'
type SidebarItem = {
label: string
to: string
exact?: boolean
}
type SidebarSection = {
@@ -50,14 +52,30 @@ const stubs = {
},
}
function makeRouter(path = '/') {
const router = createRouter({
history: createMemoryHistory(),
routes: [{path: '/:all(.*)*', component: {template: '<div />'}}],
})
router.push(path)
return router
}
function mountComponent(props: SidebarProps, slots?: Record<string, string>) {
return mount(SidebarForTest, {
props,
slots,
global: {stubs},
global: {stubs, plugins: [makeRouter()]},
})
}
// Monte avec le router positionné sur `path` (pour tester l'état actif).
async function mountAt(path: string, props: SidebarProps = {sections}) {
const router = makeRouter(path)
await router.isReady()
return mount(SidebarForTest, {props, global: {stubs, plugins: [router]}})
}
describe('MalioSidebar', () => {
it('renders expanded by default', () => {
const wrapper = mountComponent({sections})
@@ -104,12 +122,39 @@ describe('MalioSidebar', () => {
expect(wrapper.find('a').classes()).not.toContain('hover:text-m-primary')
})
it('actif : texte primary + semi-bold, sans fond, via active-class', () => {
const wrapper = mountComponent({sections})
const activeClass = wrapper.find('a').attributes('active-class') ?? ''
expect(activeClass).toContain('text-m-primary')
expect(activeClass).toContain('font-semibold')
expect(activeClass).not.toContain('bg-')
it('actif : route exacte → lien en primary + semi-bold, sans fond', () => {
return mountAt('/reception').then((wrapper) => {
const link = wrapper.findAll('a')[0]
expect(link.classes()).toContain('font-semibold')
expect(link.classes()).toContain('!text-m-primary')
expect(link.classes().some(c => c.startsWith('bg-'))).toBe(false)
})
})
it('actif : reste actif sur une sous-route (match par préfixe)', async () => {
const wrapper = await mountAt('/reception/1/edit')
expect(wrapper.findAll('a')[0].classes()).toContain('font-semibold')
})
it('actif : les autres liens ne sont pas actifs sur une sous-route', async () => {
const wrapper = await mountAt('/reception/1/edit')
expect(wrapper.findAll('a')[1].classes()).not.toContain('font-semibold')
})
it('exact : pas actif sur une sous-route', async () => {
const exactSections: SidebarSection[] = [
{label: 'S', icon: 'mdi:home', items: [{label: 'R', to: '/reception', exact: true}]},
]
const wrapper = await mountAt('/reception/1/edit', {sections: exactSections})
expect(wrapper.find('a').classes()).not.toContain('font-semibold')
})
it('exact : actif sur la route exacte', async () => {
const exactSections: SidebarSection[] = [
{label: 'S', icon: 'mdi:home', items: [{label: 'R', to: '/reception', exact: true}]},
]
const wrapper = await mountAt('/reception', {sections: exactSections})
expect(wrapper.find('a').classes()).toContain('font-semibold')
})
it('renders section icons via IconifyIcon', () => {