| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié --------- Co-authored-by: admin malio <malio@yuno.malio.fr> Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr> Co-authored-by: matthieu <matthieu@yuno.malio.fr> Reviewed-on: #82 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #82.
This commit is contained in:
@@ -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', () => {
|
||||
|
||||
Reference in New Issue
Block a user