@cnamts/synapse 1.0.26 → 1.1.0

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/HeaderToolbar.visual.cy.ts

@@ -0,0 +1,25 @@
+import HeaderToolbar from '../HeaderToolbar.vue'
+
+describe('HeaderToolbar - Visual regression tests', () => {
+	it('displays the toolbar with default menu items', () => {
+		cy.mountWithVuetify(HeaderToolbar)
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('header-toolbar-default', cy.get('.v-application'))
+	})
+
+	it('displays the toolbar with custom left menu', () => {
+		cy.mountWithVuetify(HeaderToolbar, {
+			props: {
+				leftMenu: [
+					{ title: 'Assuré', href: 'https://www.ameli.fr/assure', openInNewTab: true },
+					{ title: 'Professionnel de santé', href: 'https://www.ameli.fr/pro' },
+				],
+				currentPageIndex: 0,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('header-toolbar-custom', cy.get('.v-application'))
+	})
+})

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/LangBtn/tests/LangBtn.visual.cy.ts

@@ -0,0 +1,33 @@
+import LangBtn from '../LangBtn.vue'
+
+describe('LangBtn - Visual regression tests', () => {
+	it('displays the language button by default', () => {
+		cy.mountWithVuetify(LangBtn, {
+			props: { modelValue: 'fr' },
+		})
+
+		cy.get('.vd-lang-btn').should('be.visible')
+		cy.matchImageSnapshot('lang-btn-default', cy.get('.vd-lang-btn'))
+	})
+
+	it('displays the language button with English selected', () => {
+		cy.mountWithVuetify(LangBtn, {
+			props: { modelValue: 'en' },
+		})
+
+		cy.get('.vd-lang-btn').should('be.visible')
+		cy.matchImageSnapshot('lang-btn-english', cy.get('.vd-lang-btn'))
+	})
+
+	it('displays the language button without down arrow', () => {
+		cy.mountWithVuetify(LangBtn, {
+			props: {
+				modelValue: 'fr',
+				hideDownArrow: true,
+			},
+		})
+
+		cy.get('.vd-lang-btn').should('be.visible')
+		cy.matchImageSnapshot('lang-btn-no-arrow', cy.get('.vd-lang-btn'))
+	})
+})

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/LogoBrandSection.visual.cy.ts

@@ -0,0 +1,43 @@
+import LogoBrandSection from '../LogoBrandSection.vue'
+
+describe('LogoBrandSection - Visual regression tests', () => {
+	it('displays the brand section by default', () => {
+		cy.mountWithVuetify(LogoBrandSection)
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('logo-brand-section-default', cy.get('.v-application'))
+	})
+
+	it('displays the brand section with service title', () => {
+		cy.mountWithVuetify(LogoBrandSection, {
+			props: {
+				serviceTitle: 'Ameli',
+				serviceSubTitle: 'Assurance Maladie',
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('logo-brand-section-with-title', cy.get('.v-application'))
+	})
+
+	it('displays the brand section in mobile version', () => {
+		cy.mountWithVuetify(LogoBrandSection, {
+			props: {
+				serviceTitle: 'Ameli',
+				mobileVersion: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('logo-brand-section-mobile', cy.get('.v-application'))
+	})
+
+	it('displays the brand section with reduced logo', () => {
+		cy.mountWithVuetify(LogoBrandSection, {
+			props: { reduceLogo: true },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('logo-brand-section-reduced', cy.get('.v-application'))
+	})
+})

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/LunarCalendar.visual.cy.ts

@@ -0,0 +1,36 @@
+import LunarCalendar from '../LunarCalendar.vue'
+
+describe('LunarCalendar - Visual regression tests', () => {
+	it('displays the lunar calendar field by default', () => {
+		cy.mountWithVuetify(LunarCalendar, {
+			props: { label: 'Date de naissance (calendrier lunaire)' },
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('lunar-calendar-default', cy.get('.v-text-field'))
+	})
+
+	it('displays the lunar calendar field as required', () => {
+		cy.mountWithVuetify(LunarCalendar, {
+			props: {
+				label: 'Date de naissance',
+				required: true,
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('lunar-calendar-required', cy.get('.v-text-field'))
+	})
+
+	it('displays the lunar calendar with a value', () => {
+		cy.mountWithVuetify(LunarCalendar, {
+			props: {
+				label: 'Date de naissance',
+				modelValue: '15/08/1990',
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('lunar-calendar-with-value', cy.get('.v-text-field'))
+	})
+})