@cnamts/synapse 1.0.26 → 1.0.27

package/src/components/HeaderToolbar/tests/HeaderToolBar.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { expect, describe, it } from 'vitest'
+import { expect, describe, it, vi, afterEach } from 'vitest'
 import HeaderToolbar from '../HeaderToolbar.vue'
 
 describe('HeaderToolbar', () => {
@@ -183,4 +183,156 @@ describe('HeaderToolbar', () => {
 		await wrapper.vm.handleLink(1)
 		expect(wrapper.vm.highlightMenu).toBe(false)
 	})
+
+	describe('getLinkComponent', () => {
+		it('retourne "a" pour un item avec href', () => {
+			const wrapper = mount(HeaderToolbar)
+			const result = wrapper.vm.getLinkComponent({ title: 'Test', href: 'https://example.com' })
+			expect(result).toBe('a')
+		})
+
+		it('retourne "RouterLink" pour un item avec to', () => {
+			const wrapper = mount(HeaderToolbar)
+			const result = wrapper.vm.getLinkComponent({ title: 'Test', to: '/home' } as unknown as Parameters<typeof wrapper.vm.getLinkComponent>[0])
+			expect(result).toBe('RouterLink')
+		})
+
+		it('retourne "a" pour un item sans href ni to', () => {
+			const wrapper = mount(HeaderToolbar)
+			const result = wrapper.vm.getLinkComponent({ title: 'Test' })
+			expect(result).toBe('a')
+		})
+	})
+
+	describe('getCurrentPageIndex', () => {
+		it('retourne currentPageIndex si défini', async () => {
+			const wrapper = mount(HeaderToolbar, {
+				props: { currentPageIndex: 2 },
+			})
+			expect(wrapper.vm.activeIndex).toBeNull()
+		})
+
+		it('retourne activeIndex si currentPageIndex est null', async () => {
+			const wrapper = mount(HeaderToolbar)
+			await wrapper.vm.checkActiveLink(1)
+			expect(wrapper.vm.activeIndex).toBe(1)
+		})
+	})
+
+	describe('handleKeyboardEnter', () => {
+		it('appelle checkActiveLink et hideOverlay pour un item avec href', async () => {
+			const wrapper = mount(HeaderToolbar)
+			const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null)
+			const item = { title: 'Test', href: 'https://example.com', openInNewTab: true }
+			wrapper.vm.handleKeyboardEnter(item, 0)
+			expect(openSpy).toHaveBeenCalledWith('https://example.com', '_blank', 'noopener,noreferrer')
+			openSpy.mockRestore()
+		})
+
+		it('appelle checkActiveLink pour un item avec to', async () => {
+			const wrapper = mount(HeaderToolbar)
+			const item = { title: 'Test', to: '/home' } as unknown as Parameters<typeof wrapper.vm.handleKeyboardEnter>[0]
+			wrapper.vm.handleKeyboardEnter(item, 0)
+			expect(wrapper.vm.showOverlay).toBe(false)
+		})
+
+		it('ouvre le menu pour index=1', async () => {
+			const wrapper = mount(HeaderToolbar)
+			const item = { title: 'Professionnel de santé' }
+			wrapper.vm.handleKeyboardEnter(item, 1)
+			await wrapper.vm.$nextTick()
+			expect(wrapper.vm.showOverlay).toBe(true)
+		})
+	})
+
+	describe('handleSubMenuItemClick', () => {
+		it('met à jour dropdownMenuTitle et ferme l\'overlay', async () => {
+			const wrapper = mount(HeaderToolbar, {
+				props: {
+					itemsSelectMenu: [{ text: 'Médecin', value: 'medecin' }],
+				},
+			})
+			const subItem = { text: 'Médecin', value: 'medecin' }
+			wrapper.vm.handleSubMenuItemClick(subItem)
+			await wrapper.vm.$nextTick()
+			expect(wrapper.vm.showOverlay).toBe(false)
+		})
+
+		it('ouvre dans un nouvel onglet si openInNewTab=true', async () => {
+			const wrapper = mount(HeaderToolbar)
+			const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null)
+			const subItem = { text: 'Médecin', value: 'medecin', href: 'https://example.com', openInNewTab: true }
+			wrapper.vm.handleSubMenuItemClick(subItem)
+			expect(openSpy).toHaveBeenCalledWith('https://example.com', '_blank', 'noopener,noreferrer')
+			openSpy.mockRestore()
+		})
+	})
+
+	describe('handleMenuKeydown', () => {
+		function makeMenuContainer(count: number): HTMLElement {
+			const container = document.createElement('div')
+			for (let i = 0; i < count; i++) {
+				const item = document.createElement('div')
+				item.setAttribute('role', 'menuitem')
+				item.id = `menu-item-${i}`
+				container.appendChild(item)
+			}
+			document.body.appendChild(container)
+			return container
+		}
+
+		afterEach(() => {
+			document.body.innerHTML = ''
+		})
+
+		it('ArrowDown ne plante pas avec des items dans le conteneur', async () => {
+			const wrapper = mount(HeaderToolbar)
+			const container = makeMenuContainer(3)
+			const event = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true })
+			Object.defineProperty(event, 'currentTarget', { value: container, writable: false })
+			expect(() => wrapper.vm.handleMenuKeydown(event)).not.toThrow()
+		})
+
+		it('Escape ferme le menu et l\'overlay', async () => {
+			const wrapper = mount(HeaderToolbar)
+			const container = makeMenuContainer(2)
+			wrapper.vm.showOverlay = true
+			const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })
+			Object.defineProperty(event, 'currentTarget', { value: container, writable: false })
+			wrapper.vm.handleMenuKeydown(event)
+			expect(wrapper.vm.showOverlay).toBe(false)
+		})
+
+		it('Home ne plante pas avec des items dans le conteneur', async () => {
+			const wrapper = mount(HeaderToolbar)
+			const container = makeMenuContainer(3)
+			const event = new KeyboardEvent('keydown', { key: 'Home', bubbles: true, cancelable: true })
+			Object.defineProperty(event, 'currentTarget', { value: container, writable: false })
+			expect(() => wrapper.vm.handleMenuKeydown(event)).not.toThrow()
+		})
+
+		it('End ne plante pas avec des items dans le conteneur', async () => {
+			const wrapper = mount(HeaderToolbar)
+			const container = makeMenuContainer(3)
+			const event = new KeyboardEvent('keydown', { key: 'End', bubbles: true, cancelable: true })
+			Object.defineProperty(event, 'currentTarget', { value: container, writable: false })
+			expect(() => wrapper.vm.handleMenuKeydown(event)).not.toThrow()
+		})
+
+		it('Enter ne plante pas sans item actif', () => {
+			const wrapper = mount(HeaderToolbar)
+			const container = makeMenuContainer(2)
+			const event = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true })
+			Object.defineProperty(event, 'currentTarget', { value: container, writable: false })
+			expect(() => wrapper.vm.handleMenuKeydown(event)).not.toThrow()
+		})
+	})
+
+	describe('openMenuWithKeyboard', () => {
+		it('ouvre le menu et l\'overlay', async () => {
+			const wrapper = mount(HeaderToolbar)
+			wrapper.vm.openMenuWithKeyboard()
+			expect(wrapper.vm.showOverlay).toBe(true)
+		})
+	})
 })

package/src/components/HeaderToolbar/tests/useMobileRightMenu.spec.ts

@@ -0,0 +1,258 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { nextTick } from 'vue'
+import { useMobileRightMenu } from '../useMobileRightMenu'
+
+function makeContainerWithItems(count: number): { container: HTMLElement, items: HTMLElement[] } {
+	const container = document.createElement('div')
+	const items = Array.from({ length: count }, (_, i) => {
+		const el = document.createElement('button')
+		el.setAttribute('role', 'menuitem')
+		el.id = `mobile-item-${i}`
+		container.appendChild(el)
+		return el
+	})
+	document.body.appendChild(container)
+	return { container, items }
+}
+
+describe('useMobileRightMenu', () => {
+	afterEach(() => {
+		document.body.innerHTML = ''
+		vi.useRealTimers()
+	})
+
+	describe('état initial', () => {
+		it('mobileMenuOpen est false par défaut', () => {
+			const { mobileMenuOpen } = useMobileRightMenu()
+			expect(mobileMenuOpen.value).toBe(false)
+		})
+
+		it('mobileActiveIndex est null par défaut', () => {
+			const { mobileActiveIndex } = useMobileRightMenu()
+			expect(mobileActiveIndex.value).toBeNull()
+		})
+
+		it('mobileActiveDescendantId est null par défaut', () => {
+			const { mobileActiveDescendantId } = useMobileRightMenu()
+			expect(mobileActiveDescendantId.value).toBeNull()
+		})
+
+		it('mobileBurgerButtonRef est null par défaut', () => {
+			const { mobileBurgerButtonRef } = useMobileRightMenu()
+			expect(mobileBurgerButtonRef.value).toBeNull()
+		})
+	})
+
+	describe('openMobileMenuAndFocus', () => {
+		it('ouvre le menu', async () => {
+			vi.useFakeTimers()
+			const { mobileMenuOpen, openMobileMenuAndFocus } = useMobileRightMenu()
+			openMobileMenuAndFocus()
+			expect(mobileMenuOpen.value).toBe(true)
+		})
+
+		it('définit mobileActiveIndex à 0', () => {
+			vi.useFakeTimers()
+			const { mobileActiveIndex, openMobileMenuAndFocus } = useMobileRightMenu()
+			openMobileMenuAndFocus()
+			expect(mobileActiveIndex.value).toBe(0)
+		})
+
+		it('définit mobileActiveDescendantId à "mobile-item-0"', () => {
+			vi.useFakeTimers()
+			const { mobileActiveDescendantId, openMobileMenuAndFocus } = useMobileRightMenu()
+			openMobileMenuAndFocus()
+			expect(mobileActiveDescendantId.value).toBe('mobile-item-0')
+		})
+	})
+
+	describe('onMobileMenuModel', () => {
+		it('quand val=true, définit activeIndex=0 et activeDescendantId="mobile-item-0"', async () => {
+			vi.useFakeTimers()
+			const { mobileActiveIndex, mobileActiveDescendantId, onMobileMenuModel } = useMobileRightMenu()
+			onMobileMenuModel(true)
+			expect(mobileActiveIndex.value).toBe(0)
+			expect(mobileActiveDescendantId.value).toBe('mobile-item-0')
+		})
+
+		it('quand val=false, tente de focus le burger button', async () => {
+			const { mobileBurgerButtonRef, onMobileMenuModel } = useMobileRightMenu()
+			const btn = document.createElement('button')
+			btn.id = 'burger-btn'
+			document.body.appendChild(btn)
+			mobileBurgerButtonRef.value = btn
+			const focusSpy = vi.spyOn(btn, 'focus')
+
+			onMobileMenuModel(false)
+			await nextTick()
+
+			expect(focusSpy).toHaveBeenCalled()
+		})
+	})
+
+	describe('handleMobileMenuKeydown', () => {
+		it('ne fait rien si aucun item [role="menuitem"] dans le conteneur', () => {
+			const { mobileRightMenuRef, handleMobileMenuKeydown, mobileActiveIndex } = useMobileRightMenu()
+			const container = document.createElement('div')
+			document.body.appendChild(container)
+			;(mobileRightMenuRef as unknown as { value: unknown }).value = { $el: container }
+
+			const event = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
+			vi.spyOn(event, 'preventDefault')
+			handleMobileMenuKeydown(event)
+
+			expect(mobileActiveIndex.value).toBeNull()
+		})
+
+		it('ArrowDown navigue vers l\'élément suivant', () => {
+			const { mobileRightMenuRef, mobileActiveDescendantId, handleMobileMenuKeydown, mobileActiveIndex } = useMobileRightMenu()
+			const { container, items } = makeContainerWithItems(3)
+			;(mobileRightMenuRef as unknown as { value: unknown }).value = { $el: container }
+
+			mobileActiveDescendantId.value = items[0]!.id
+
+			const event = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true })
+			handleMobileMenuKeydown(event)
+
+			expect(mobileActiveIndex.value).toBe(1)
+			expect(mobileActiveDescendantId.value).toBe(items[1]!.id)
+		})
+
+		it('ArrowDown sur le dernier item revient au premier (wrap)', () => {
+			const { mobileRightMenuRef, mobileActiveDescendantId, handleMobileMenuKeydown, mobileActiveIndex } = useMobileRightMenu()
+			const { container, items } = makeContainerWithItems(3)
+			;(mobileRightMenuRef as unknown as { value: unknown }).value = { $el: container }
+
+			mobileActiveDescendantId.value = items[2]!.id
+
+			const event = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true })
+			handleMobileMenuKeydown(event)
+
+			expect(mobileActiveIndex.value).toBe(0)
+		})
+
+		it('ArrowUp navigue vers l\'élément précédent', () => {
+			const { mobileRightMenuRef, mobileActiveDescendantId, handleMobileMenuKeydown, mobileActiveIndex } = useMobileRightMenu()
+			const { container, items } = makeContainerWithItems(3)
+			;(mobileRightMenuRef as unknown as { value: unknown }).value = { $el: container }
+
+			mobileActiveDescendantId.value = items[2]!.id
+
+			const event = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true, cancelable: true })
+			handleMobileMenuKeydown(event)
+
+			expect(mobileActiveIndex.value).toBe(1)
+		})
+
+		it('ArrowUp sur le premier item revient au dernier (wrap)', () => {
+			const { mobileRightMenuRef, mobileActiveDescendantId, handleMobileMenuKeydown, mobileActiveIndex } = useMobileRightMenu()
+			const { container, items } = makeContainerWithItems(3)
+			;(mobileRightMenuRef as unknown as { value: unknown }).value = { $el: container }
+
+			mobileActiveDescendantId.value = items[0]!.id
+
+			const event = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true, cancelable: true })
+			handleMobileMenuKeydown(event)
+
+			expect(mobileActiveIndex.value).toBe(2)
+		})
+
+		it('Home navigue vers le premier item', () => {
+			const { mobileRightMenuRef, mobileActiveDescendantId, handleMobileMenuKeydown, mobileActiveIndex } = useMobileRightMenu()
+			const { container, items } = makeContainerWithItems(3)
+			;(mobileRightMenuRef as unknown as { value: unknown }).value = { $el: container }
+
+			mobileActiveDescendantId.value = items[2]!.id
+
+			const event = new KeyboardEvent('keydown', { key: 'Home', bubbles: true, cancelable: true })
+			handleMobileMenuKeydown(event)
+
+			expect(mobileActiveIndex.value).toBe(0)
+		})
+
+		it('End navigue vers le dernier item', () => {
+			const { mobileRightMenuRef, mobileActiveDescendantId, handleMobileMenuKeydown, mobileActiveIndex } = useMobileRightMenu()
+			const { container, items } = makeContainerWithItems(3)
+			;(mobileRightMenuRef as unknown as { value: unknown }).value = { $el: container }
+
+			mobileActiveDescendantId.value = items[0]!.id
+
+			const event = new KeyboardEvent('keydown', { key: 'End', bubbles: true, cancelable: true })
+			handleMobileMenuKeydown(event)
+
+			expect(mobileActiveIndex.value).toBe(2)
+		})
+
+		it('Escape ferme le menu', async () => {
+			const { mobileRightMenuRef, mobileMenuOpen, handleMobileMenuKeydown } = useMobileRightMenu()
+			const { container } = makeContainerWithItems(2)
+			;(mobileRightMenuRef as unknown as { value: unknown }).value = { $el: container }
+
+			mobileMenuOpen.value = true
+
+			const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })
+			handleMobileMenuKeydown(event)
+
+			expect(mobileMenuOpen.value).toBe(false)
+		})
+
+		it('Escape focus le burger button', async () => {
+			const { mobileRightMenuRef, mobileBurgerButtonRef, handleMobileMenuKeydown } = useMobileRightMenu()
+			const { container } = makeContainerWithItems(2)
+			;(mobileRightMenuRef as unknown as { value: unknown }).value = { $el: container }
+
+			const btn = document.createElement('button')
+			document.body.appendChild(btn)
+			mobileBurgerButtonRef.value = btn
+			const focusSpy = vi.spyOn(btn, 'focus')
+
+			const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })
+			handleMobileMenuKeydown(event)
+			await nextTick()
+
+			expect(focusSpy).toHaveBeenCalled()
+		})
+
+		it('Enter clique sur l\'item actif', () => {
+			const { mobileRightMenuRef, mobileActiveDescendantId, handleMobileMenuKeydown } = useMobileRightMenu()
+			const { container, items } = makeContainerWithItems(2)
+			;(mobileRightMenuRef as unknown as { value: unknown }).value = { $el: container }
+
+			mobileActiveDescendantId.value = items[0]!.id
+			const clickSpy = vi.spyOn(items[0]!, 'click')
+
+			const event = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true })
+			handleMobileMenuKeydown(event)
+
+			expect(clickSpy).toHaveBeenCalled()
+		})
+
+		it('Space clique sur l\'item actif', () => {
+			const { mobileRightMenuRef, mobileActiveDescendantId, handleMobileMenuKeydown } = useMobileRightMenu()
+			const { container, items } = makeContainerWithItems(2)
+			;(mobileRightMenuRef as unknown as { value: unknown }).value = { $el: container }
+
+			mobileActiveDescendantId.value = items[1]!.id
+			const clickSpy = vi.spyOn(items[1]!, 'click')
+
+			const event = new KeyboardEvent('keydown', { key: ' ', bubbles: true, cancelable: true })
+			handleMobileMenuKeydown(event)
+
+			expect(clickSpy).toHaveBeenCalled()
+		})
+
+		it('une touche non gérée ne modifie pas l\'état', () => {
+			const { mobileRightMenuRef, mobileActiveDescendantId, handleMobileMenuKeydown, mobileActiveIndex } = useMobileRightMenu()
+			const { container, items } = makeContainerWithItems(2)
+			;(mobileRightMenuRef as unknown as { value: unknown }).value = { $el: container }
+
+			mobileActiveDescendantId.value = items[0]!.id
+			mobileActiveIndex.value = 0
+
+			const event = new KeyboardEvent('keydown', { key: 'Tab', bubbles: true })
+			handleMobileMenuKeydown(event)
+
+			expect(mobileActiveIndex.value).toBe(0)
+		})
+	})
+})

package/src/components/LogoBrandSection/tests/LogoBrandSection.spec.ts

@@ -122,7 +122,7 @@ describe('LogoBrandSection', () => {
 		})
 
 		const divider = wrapper.find('.vd-divider')
-		expect(divider.attributes('fill')).toBe('#0c419a')
+		expect(divider.attributes('fill')).toBe('#0C419A')
 	})
 
 	it('renders correctly with cnam theme', () => {
@@ -156,7 +156,7 @@ describe('LogoBrandSection', () => {
 		})
 
 		const divider = wrapper.find('.vd-divider')
-		expect(divider.attributes('fill')).toBe('#cd545b')
+		expect(divider.attributes('fill')).toBe('#CD545B')
 	})
 
 	it('renders correctly with risquePro if no reduceLogo', () => {

package/src/components/LogoBrandSection/tests/__snapshots__/LogoBrandSection.spec.ts.snap

@@ -27,7 +27,7 @@ exports[`LogoBrandSection > renders correctly 1`] = `
   <svg
     aria-hidden="true"
     class="vd-divider"
-    fill="#0c419a"
+    fill="#0C419A"
     focusable="false"
     viewBox="0 0 22 64"
     width="22"

package/src/components/LunarCalendar/tests/useLunarCalendarRules.spec.ts

@@ -0,0 +1,184 @@
+import { describe, it, expect } from 'vitest'
+import { ref } from 'vue'
+import { useLunarCalendarRules } from '../useLunarCalendarRules'
+
+function getRules(opts: {
+	successMessage?: string
+	required?: boolean
+	minYear?: number
+	maxYear?: number
+}) {
+	const { rules } = useLunarCalendarRules(
+		ref(opts.successMessage),
+		ref(opts.required),
+		ref(opts.minYear),
+		ref(opts.maxYear),
+	)
+	return rules.value
+}
+
+type CustomRule = { type: 'custom', options: { validate: (v: string) => boolean, message: string } }
+
+describe('useLunarCalendarRules', () => {
+	describe('règle required', () => {
+		it('n\'ajoute pas de règle required si required est false', () => {
+			const rules = getRules({ required: false })
+			expect(rules.some(r => r.type === 'required')).toBe(false)
+		})
+
+		it('ajoute une règle required si required est true', () => {
+			const rules = getRules({ required: true })
+			expect(rules.some(r => r.type === 'required')).toBe(true)
+		})
+
+		it('la règle required contient le bon message', () => {
+			const rules = getRules({ required: true })
+			const req = rules.find(r => r.type === 'required')
+			expect(req?.options.message).toBe('Ce champ est requis.')
+		})
+
+		it('la règle required contient le successMessage si fourni', () => {
+			const rules = getRules({ required: true, successMessage: 'Bravo' })
+			const req = rules.find(r => r.type === 'required')
+			expect(req?.options.successMessage).toBe('Bravo')
+		})
+	})
+
+	describe('règle format DD/MM/YYYY', () => {
+		it('valide une date au format DD/MM/YYYY', () => {
+			const rules = getRules({})
+			const fmt = rules.find(r => r.type === 'custom') as CustomRule
+			expect(fmt.options.validate('25/12/2000')).toBe(true)
+		})
+
+		it('rejette une date sans slashs', () => {
+			const rules = getRules({})
+			const fmt = rules.find(r => r.type === 'custom') as CustomRule
+			expect(fmt.options.validate('25122000')).toBe(false)
+		})
+
+		it('rejette une date incomplète', () => {
+			const rules = getRules({})
+			const fmt = rules.find(r => r.type === 'custom') as CustomRule
+			expect(fmt.options.validate('25/12/200')).toBe(false)
+		})
+
+		it('rejette une chaîne vide', () => {
+			const rules = getRules({})
+			const fmt = rules.find(r => r.type === 'custom') as CustomRule
+			expect(fmt.options.validate('')).toBe(false)
+		})
+	})
+
+	describe('règle minYear seulement', () => {
+		it('retourne true si le format est invalide (year null)', () => {
+			const rules = getRules({ minYear: 2000 })
+			const minRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(minRule.options.validate('invalid')).toBe(true)
+		})
+
+		it('retourne true si l\'année >= minYear', () => {
+			const rules = getRules({ minYear: 2000 })
+			const minRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(minRule.options.validate('25/12/2000')).toBe(true)
+		})
+
+		it('retourne false si l\'année < minYear', () => {
+			const rules = getRules({ minYear: 2000 })
+			const minRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(minRule.options.validate('25/12/1999')).toBe(false)
+		})
+
+		it('contient le bon message', () => {
+			const rules = getRules({ minYear: 2000 })
+			const minRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(minRule.options.message).toBe('L\'année doit être supérieure ou égale à 2000.')
+		})
+	})
+
+	describe('règle maxYear seulement', () => {
+		it('retourne true si le format est invalide (year null)', () => {
+			const rules = getRules({ maxYear: 2020 })
+			const maxRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(maxRule.options.validate('invalid')).toBe(true)
+		})
+
+		it('retourne true si l\'année <= maxYear', () => {
+			const rules = getRules({ maxYear: 2020 })
+			const maxRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(maxRule.options.validate('25/12/2020')).toBe(true)
+		})
+
+		it('retourne false si l\'année > maxYear', () => {
+			const rules = getRules({ maxYear: 2020 })
+			const maxRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(maxRule.options.validate('25/12/2021')).toBe(false)
+		})
+
+		it('contient le bon message', () => {
+			const rules = getRules({ maxYear: 2020 })
+			const maxRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(maxRule.options.message).toBe('L\'année doit être inférieure ou égale à 2020.')
+		})
+	})
+
+	describe('règle minYear ET maxYear', () => {
+		it('retourne true si le format est invalide (year null)', () => {
+			const rules = getRules({ minYear: 2000, maxYear: 2020 })
+			const rangeRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(rangeRule.options.validate('invalid')).toBe(true)
+		})
+
+		it('retourne true si l\'année est dans la plage', () => {
+			const rules = getRules({ minYear: 2000, maxYear: 2020 })
+			const rangeRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(rangeRule.options.validate('25/12/2010')).toBe(true)
+		})
+
+		it('retourne false si l\'année est avant minYear', () => {
+			const rules = getRules({ minYear: 2000, maxYear: 2020 })
+			const rangeRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(rangeRule.options.validate('25/12/1999')).toBe(false)
+		})
+
+		it('retourne false si l\'année est après maxYear', () => {
+			const rules = getRules({ minYear: 2000, maxYear: 2020 })
+			const rangeRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(rangeRule.options.validate('25/12/2021')).toBe(false)
+		})
+
+		it('contient le bon message', () => {
+			const rules = getRules({ minYear: 2000, maxYear: 2020 })
+			const rangeRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(rangeRule.options.message).toBe('L\'année doit être comprise entre 2000 et 2020.')
+		})
+	})
+
+	describe('getYearFromModel (via les règles)', () => {
+		it('retourne null si le modèle n\'a pas 3 parties', () => {
+			const rules = getRules({ minYear: 2000 })
+			const minRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(minRule.options.validate('25/12')).toBe(true)
+		})
+
+		it('retourne null si l\'année n\'a pas 4 chiffres', () => {
+			const rules = getRules({ minYear: 2000 })
+			const minRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(minRule.options.validate('25/12/200')).toBe(true)
+		})
+
+		it('retourne null si l\'année n\'est pas un nombre', () => {
+			const rules = getRules({ minYear: 2000 })
+			const minRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(minRule.options.validate('25/12/abcd')).toBe(true)
+		})
+	})
+
+	describe('aucune règle year si minYear et maxYear sont undefined', () => {
+		it('ne génère que 1 règle custom (format) sans min/max', () => {
+			const rules = getRules({})
+			const customRules = rules.filter(r => r.type === 'custom')
+			expect(customRules.length).toBe(1)
+		})
+	})
+})

package/src/components/MonthPicker/MonthPickerVisual/MonthSelector.vue

@@ -121,17 +121,17 @@
 
 .month-selector__month--selected {
 	/* stylelint-disable-next-line custom-property-pattern */
-	background-color: rgb(var(--v-theme-accentPrimary, 12, 65, 154));
+	background-color: rgb(var(--v-theme-primary, 12, 65, 154));
 	color: white;
 
 	&:hover {
 		/* stylelint-disable-next-line custom-property-pattern */
-		background-color: rgb(var(--v-theme-accentPrimaryContrasted, 7, 39, 92));
+		background-color: rgb(var(--v-theme-primaryVariant, 7, 39, 92));
 	}
 }
 
 .month-selector__month--active:focus {
 	/* stylelint-disable-next-line custom-property-pattern */
-	outline: 2px solid rgb(var(--v-theme-accentPrimary, 12, 65, 154));
+	outline: 2px solid rgb(var(--v-theme-primary, 12, 65, 154));
 }
 </style>

package/src/components/MonthPicker/MonthPickerVisual/VisualPickerFooter.vue

@@ -54,7 +54,7 @@
 
 	&:focus-visible {
 		/* stylelint-disable-next-line custom-property-pattern */
-		outline: 2px solid rgb(var(--v-theme-accentPrimary, 12, 65, 154));
+		outline: 2px solid rgb(var(--v-theme-primary, 12, 65, 154));
 	}
 }
 </style>

package/src/components/MonthPicker/MonthPickerVisual/VisualPickerHeader.vue

@@ -103,7 +103,7 @@
 .visual-picker-header {
 	padding-block: 16px;
 	background-color: rgb(var(--v-theme-primary, '12, 65, 154'));
-	color: rgb(var(--v-theme-textOnDark));
+	color: rgb(var(--v-theme-onPrimary));
 }
 
 .visual-picker-header__title {
@@ -143,7 +143,7 @@
 
 	&:focus-visible {
 		/* stylelint-disable-next-line custom-property-pattern */
-		outline: 2px solid rgb(var(--v-theme-accentPrimary, 12, 65, 154));
+		outline: 2px solid rgb(var(--v-theme-primary, 12, 65, 154));
 	}
 }
 </style>