@cnamts/synapse 1.0.27 → 1.1.1

package/src/components/DataList/tests/DataList.visual.cy.ts

@@ -0,0 +1,85 @@
+import DataList from '../DataList.vue'
+import { mdiAccount, mdiEmail, mdiBriefcase } from '@mdi/js'
+
+const defaultItems = [
+	{ key: 'Nom', value: 'Dupont' },
+	{ key: 'Prénom', value: 'Jean' },
+	{ key: 'Date de naissance', value: '01/01/1980' },
+]
+
+const itemsWithIcons = [
+	{ key: 'Nom', value: 'Dupont', icon: 'person' },
+	{ key: 'Email', value: 'jean.dupont@example.com', icon: 'email' },
+	{ key: 'Profession', value: 'Développeur', icon: 'job' },
+]
+
+const iconsMap = {
+	person: mdiAccount,
+	email: mdiEmail,
+	job: mdiBriefcase,
+}
+
+describe('DataList - Visual regression tests', () => {
+	it('displays the data list by default', () => {
+		cy.mountWithVuetify(DataList, {
+			props: { items: defaultItems },
+		})
+
+		cy.get('.sy-data-list').should('be.visible')
+		cy.get('.sy-data-list-item').should('have.length', 3)
+		cy.matchImageSnapshot('data-list-default', cy.get('.sy-data-list'))
+	})
+
+	it('displays the data list with a title', () => {
+		cy.mountWithVuetify(DataList, {
+			props: {
+				items: defaultItems,
+				listTitle: 'Informations personnelles',
+			},
+		})
+
+		cy.get('.sy-data-list').should('be.visible')
+		cy.get('.sy-data-list-item').should('have.length', 3)
+		cy.matchImageSnapshot('data-list-with-title', cy.get('.sy-data-list'))
+	})
+
+	it('displays the data list in loading state', () => {
+		cy.mountWithVuetify(DataList, {
+			props: {
+				items: defaultItems,
+				loading: true,
+			},
+		})
+
+		cy.get('.sy-data-list-loading').should('be.visible')
+		cy.get('.v-skeleton-loader').should('be.visible')
+		cy.matchImageSnapshot('data-list-loading', cy.get('.sy-data-list-loading'))
+	})
+
+	it('displays the data list in row layout', () => {
+		cy.mountWithVuetify(DataList, {
+			props: {
+				items: defaultItems,
+				row: true,
+			},
+		})
+
+		cy.get('.sy-data-list').should('be.visible')
+		cy.get('.sy-data-list-item').should('have.length', 3)
+		cy.matchImageSnapshot('data-list-row', cy.get('.sy-data-list'))
+	})
+
+	it('displays the data list with icons', () => {
+		cy.mountWithVuetify(DataList, {
+			props: {
+				items: itemsWithIcons,
+				icons: iconsMap,
+			},
+		})
+
+		cy.get('.sy-data-list').should('be.visible')
+		cy.get('.sy-data-list-item').should('have.length', 3)
+		cy.get('.sy-data-list-item .v-icon').should('have.length', 3)
+		cy.matchImageSnapshot('data-list-with-icons', cy.get('.sy-data-list'))
+	})
+})

package/src/components/DataListGroup/DataListGroup.mdx

@@ -71,7 +71,6 @@ import * as DataListGroup from './DataListGroup.stories';
 		},
 	]
 </script>
-import '../../stories/styles/shared.css';
 
 <template>
 	<DataListGroup :items="items" />

package/src/components/DataListGroup/tests/DataListGroup.visual.cy.ts

@@ -0,0 +1,51 @@
+import DataListGroup from '../DataListGroup.vue'
+import { mdiAccount, mdiCalendar, mdiEmail, mdiPhone } from '@mdi/js'
+
+const defaultItems = [
+	{
+		title: 'Identité',
+		items: [
+			{ key: 'Nom', value: 'Dupont', icon: 'person' },
+			{ key: 'Prénom', value: 'Jean', icon: 'person' },
+			{ key: 'Date de naissance', value: '01/01/1980', icon: 'calendar' },
+		],
+	},
+	{
+		title: 'Contact',
+		items: [
+			{ key: 'Email', value: 'jean.dupont@example.com', icon: 'email' },
+			{ key: 'Téléphone', value: '0102030405', icon: 'phone' },
+		],
+	},
+]
+
+const iconsMap = {
+	person: mdiAccount,
+	calendar: mdiCalendar,
+	email: mdiEmail,
+	phone: mdiPhone,
+}
+
+describe('DataListGroup - Visual regression tests', () => {
+	it('displays the data list group by default', () => {
+		cy.mountWithVuetify(DataListGroup, {
+			props: { items: defaultItems, icons: iconsMap },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('data-list-group-default', cy.get('.v-application'))
+	})
+
+	it('displays the data list group in loading state', () => {
+		cy.mountWithVuetify(DataListGroup, {
+			props: {
+				items: defaultItems,
+				icons: iconsMap,
+				loading: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('data-list-group-loading', cy.get('.v-application'))
+	})
+})

package/src/components/DataListItem/tests/DataListItem.visual.cy.ts

@@ -0,0 +1,53 @@
+import DataListItem from '../DataListItem.vue'
+
+describe('DataListItem - Visual regression tests', () => {
+	it('displays the item with label and value', () => {
+		cy.mountWithVuetify(DataListItem, {
+			props: {
+				label: 'Nom',
+				value: 'Dupont',
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('data-list-item-default', cy.get('.v-application'))
+	})
+
+	it('displays the item as a chip', () => {
+		cy.mountWithVuetify(DataListItem, {
+			props: {
+				label: 'Statut',
+				value: 'Actif',
+				chip: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('data-list-item-chip', cy.get('.v-application'))
+	})
+
+	it('displays the item in row layout', () => {
+		cy.mountWithVuetify(DataListItem, {
+			props: {
+				label: 'Date',
+				value: '01/01/2025',
+				row: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('data-list-item-row', cy.get('.v-application'))
+	})
+
+	it('displays the item with placeholder when value is empty', () => {
+		cy.mountWithVuetify(DataListItem, {
+			props: {
+				label: 'Remarque',
+				value: undefined,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('data-list-item-placeholder', cy.get('.v-application'))
+	})
+})

package/src/components/DatePicker/CalendarMode/DatePicker.stories.ts

@@ -256,7 +256,7 @@ const meta = {
 		'showSuccessMessages': {
 			control: 'boolean',
 			description: 'Affiche les messages de succès quand la validation est passée avec succès',
-			defaultValue: true,
+			defaultValue: false,
 		},
 		'bgColor': {
 			control: 'text',

package/src/components/DatePicker/CalendarMode/DatePicker.vue

@@ -115,7 +115,7 @@
 		placeholder: undefined,
 		readonly: false,
 		required: false,
-		showSuccessMessages: true,
+		showSuccessMessages: false,
 		showWeekNumber: false,
 		textFieldActivator: false,
 		title: false,
@@ -264,7 +264,7 @@
 		clearValidation,
 		validateDates,
 	} = useDatePickerValidationBridge({
-		showSuccessMessages: props.showSuccessMessages,
+		showSuccessMessages: true,
 		disableErrorHandling: props.disableErrorHandling,
 		noCalendar: props.noCalendar,
 		required: props.required,
@@ -958,7 +958,7 @@
 							:class="[getMessageClasses(), 'label-hidden-on-focus']"
 							:error-messages="errorMessages"
 							:warning-messages="warningMessages"
-							:success-messages="successMessages"
+							:success-messages="props.showSuccessMessages ? successMessages : []"
 							:has-success="isOnSuccess"
 							:disabled="props.disabled"
 							:disable-click-button="false"
@@ -1225,12 +1225,12 @@
 }
 
 :deep(.weekend .v-date-picker-month__day--week-end .v-btn) {
-	background-color: #b0b1b1;
+	background-color: rgb(var(--v-theme-grey-lighten60));
 }
 
 /* div avant la class .v-date-picker-month__day--week-end */
 :deep(.weekend .v-date-picker-month__day:has(+ .v-date-picker-month__day--week-end) .v-btn) {
-	background-color: #b0b1b1;
+	background-color: rgb(var(--v-theme-grey-lighten60));
 }
 
 :deep(.v-date-picker-controls__mode-btn) {
@@ -1247,7 +1247,7 @@
 }
 
 :deep(.custom-year-btn::after) {
-	background-color: #b0b1b1;
+	background-color: rgb(var(--v-theme-grey-lighten60));
 	padding: 10px 40px;
 	text-decoration: none;
 	display: inline-block;
@@ -1257,7 +1257,7 @@
 }
 
 :deep(.custom-month-btn::after) {
-	background-color: #b0b1b1;
+	background-color: rgb(var(--v-theme-grey-lighten60));
 	text-decoration: none;
 	display: inline-block;
 	cursor: pointer;

package/src/components/DatePicker/ComplexDatePicker/ComplexDatePicker.stories.ts

@@ -260,7 +260,7 @@ const meta = {
 		'showSuccessMessages': {
 			control: 'boolean',
 			description: 'Affiche les messages de succès quand la validation est passée avec succès',
-			defaultValue: true,
+			defaultValue: false,
 		},
 		'bgColor': {
 			control: 'text',

package/src/components/DatePicker/ComplexDatePicker/ComplexDatePicker.vue

@@ -203,7 +203,7 @@
 			placeholder: undefined,
 			readonly: false,
 			required: false,
-			showSuccessMessages: true,
+			showSuccessMessages: false,
 			showWeekNumber: false,
 			textFieldActivator: false,
 			title: false,
@@ -266,7 +266,7 @@
 		clearValidation,
 		validateDates,
 	} = useDatePickerValidationBridge({
-		showSuccessMessages: props.showSuccessMessages,
+		showSuccessMessages: true,
 		disableErrorHandling: props.disableErrorHandling,
 		noCalendar: props.noCalendar,
 		required: props.required,
@@ -1322,8 +1322,7 @@
 }
 
 :deep(.v-date-picker-month__day .v-btn:hover) {
-	// background-color: rgb(var(--v-theme-background));
-	background: green !important;
+	background-color: rgb(var(--v-theme-background));
 }
 
 :deep(.v-date-picker-month__day--selected, .v-date-picker-month__day--adjacent) {
@@ -1335,12 +1334,12 @@
 }
 
 :deep(.weekend .v-date-picker-month__day--week-end .v-btn) {
-	background-color: #b0b1b1;
+	background-color: rgb(var(--v-theme-grey-lighten60));
 }
 
 /* day before weekend */
 :deep(.weekend .v-date-picker-month__day:has(+ .v-date-picker-month__day--week-end) .v-btn) {
-	background-color: #b0b1b1;
+	background-color: rgb(var(--v-theme-grey-lighten60));
 }
 
 :deep(.v-date-picker-controls__mode-btn) {
@@ -1358,7 +1357,7 @@
 
 /* Style de base du ::after */
 :deep(.custom-year-btn::after) {
-	background-color: #b0b1b1;
+	background-color: rgb(var(--v-theme-grey-lighten60));
 	padding: 10px 40px;
 	text-decoration: none;
 	display: inline-block;
@@ -1368,7 +1367,7 @@
 }
 
 :deep(.custom-month-btn::after) {
-	background-color: #b0b1b1;
+	background-color: rgb(var(--v-theme-grey-lighten60));
 	text-decoration: none;
 	display: inline-block;
 	cursor: pointer;

package/src/components/DatePicker/DateTextInput/DateRange.stories.ts

@@ -145,7 +145,7 @@ const meta = {
 		showSuccessMessages: {
 			control: 'boolean',
 			description: 'Affiche les messages de succès',
-			defaultValue: true,
+			defaultValue: false,
 		},
 		bgColor: {
 			control: 'color',

package/src/components/DatePicker/DateTextInput/DateTextInput.vue

@@ -75,7 +75,7 @@
 		placeholder: undefined,
 		readonly: false,
 		required: false,
-		showSuccessMessages: true,
+		showSuccessMessages: false,
 		title: false,
 		skipInternalValidation: false,
 	})
@@ -115,7 +115,7 @@
 	const shouldUseInternalValidation = computed(() => !props.skipInternalValidation && !readonly.value)
 
 	const bridgeValidation = useDatePickerValidationBridge({
-		showSuccessMessages: props.showSuccessMessages,
+		showSuccessMessages: true,
 		disableErrorHandling: props.disableErrorHandling,
 		noCalendar: true,
 		required: props.required,

package/src/components/DatePicker/DateTextInput/NoCalendar.stories.ts

@@ -167,7 +167,7 @@ const meta = {
 		'showSuccessMessages': {
 			control: 'boolean',
 			description: 'Affiche les messages de succès quand la validation est passée avec succès',
-			defaultValue: true,
+			defaultValue: false,
 		},
 		'bgColor': {
 			control: 'color',

package/src/components/DatePicker/composables/tests/useTodayButton.spec.ts

@@ -50,10 +50,10 @@ describe('useTodayButton', () => {
 
 	describe('selectToday', () => {
 		it('devrait définir selectedDates à la date du jour en mode date unique', () => {
-			// Créer une date fixe pour le test
+			// Figer l'horloge système sur une date fixe pour le test
 			const fixedDate = new Date('2023-01-01')
-			// Espionner le constructeur Date pour qu'il retourne notre date fixe
-			vi.spyOn(global, 'Date').mockImplementation(() => fixedDate)
+			vi.useFakeTimers()
+			vi.setSystemTime(fixedDate)
 
 			const { selectToday } = useTodayButton({
 				displayRange: false,
@@ -65,15 +65,15 @@ describe('useTodayButton', () => {
 			expect(selectedDates.value).toBeDefined()
 			expect(selectedDates.value).toEqual(fixedDate)
 
-			// Restaurer le mock
-			vi.restoreAllMocks()
+			// Restaurer l'horloge réelle
+			vi.useRealTimers()
 		})
 
 		it('devrait définir selectedDates à un tableau avec deux fois la date du jour en mode plage', () => {
-			// Créer une date fixe pour le test
+			// Figer l'horloge système sur une date fixe pour le test
 			const fixedDate = new Date('2023-01-01')
-			// Espionner le constructeur Date pour qu'il retourne notre date fixe
-			vi.spyOn(global, 'Date').mockImplementation(() => fixedDate)
+			vi.useFakeTimers()
+			vi.setSystemTime(fixedDate)
 
 			const { selectToday } = useTodayButton({
 				displayRange: true,
@@ -90,8 +90,8 @@ describe('useTodayButton', () => {
 				expect(selectedDates.value[1]).toEqual(fixedDate)
 			}
 
-			// Restaurer le mock
-			vi.restoreAllMocks()
+			// Restaurer l'horloge réelle
+			vi.useRealTimers()
 		})
 	})
 })

package/src/components/DatePicker/composables/useCalendarKeyboardNavigation.ts

@@ -34,6 +34,7 @@ export const useCalendarKeyboardNavigation = (options: CalendarKeyboardNavigatio
 	const toISO = (date: Date) => dayjs(date).format('YYYY-MM-DD')
 
 	let isListenerAttached = false
+	let attachTimeoutId: ReturnType<typeof setTimeout> | undefined
 
 	const focusMonthButton = (button: HTMLButtonElement | undefined | null) => {
 		button?.focus({ preventScroll: true })
@@ -506,11 +507,19 @@ export const useCalendarKeyboardNavigation = (options: CalendarKeyboardNavigatio
 			}
 		}
 
-		// Attendre plusieurs ticks pour être sûr que le focusTrap est déjà attaché
-		setTimeout(tryAttach, 100)
+		// Attendre plusieurs ticks pour être sûr que le focusTrap est déjà attaché.
+		// L'id est conservé pour pouvoir annuler le timer au démontage et éviter que
+		// tryAttach ne s'exécute après la destruction du composant (accès à `document`).
+		attachTimeoutId = setTimeout(tryAttach, 100)
 	}
 
 	const detachListeners = () => {
+		// Annuler une éventuelle attache différée encore en attente.
+		if (attachTimeoutId !== undefined) {
+			clearTimeout(attachTimeoutId)
+			attachTimeoutId = undefined
+		}
+
 		if (!isListenerAttached) return
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- sorry
 		const rootEl = (datePickerRef.value as any)?.$el as HTMLElement | undefined

package/src/components/DeclarationAccessibilityPage/tests/DeclarationAccessibilityPage.visual.cy.ts

@@ -0,0 +1,35 @@
+import DeclarationAccessibilityPage from '../DeclarationAccessibilityPage.vue'
+
+describe('DeclarationAccessibilityPage - Visual regression tests', () => {
+	it('displays the declaration page with required props', () => {
+		cy.mountWithVuetify(DeclarationAccessibilityPage, {
+			props: {
+				entityName: 'Assurance Maladie',
+				siteName: 'Ameli',
+				siteUrl: 'https://www.ameli.fr',
+				contactEmail: 'accessibilite@assurance-maladie.fr',
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('declaration-a11y-page-default', cy.get('.v-application'))
+	})
+
+	it('displays the declaration page with full information', () => {
+		cy.mountWithVuetify(DeclarationAccessibilityPage, {
+			props: {
+				entityName: 'Assurance Maladie',
+				siteName: 'Ameli',
+				siteUrl: 'https://www.ameli.fr',
+				contactEmail: 'accessibilite@assurance-maladie.fr',
+				rgaaVersion: '4.1',
+				overallComplianceRate: 85,
+				declarationDate: '2024-01-01',
+				technologies: ['HTML', 'CSS', 'JavaScript', 'Vue.js'],
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('declaration-a11y-page-full', cy.get('.v-application'))
+	})
+})

package/src/components/DiacriticPicker/DiacriticPicker.mdx

@@ -90,7 +90,6 @@ Vous pouvez personnaliser la liste des caractères diacritiques affichés dans l
   import { ref } from 'vue'
   
   const text = ref('')
-import '../../stories/styles/shared.css';
   const caracteres = ['é', 'è', 'ê', 'à', 'ç', 'ù']
 </script>
 

package/src/components/DiacriticPicker/tests/DiacriticPicker.visual.cy.ts

@@ -0,0 +1,24 @@
+import DiacriticPicker from '../DiacriticPicker.vue'
+
+describe('DiacriticPicker - Visual regression tests', () => {
+	it('displays the diacritic picker button', () => {
+		cy.mountWithVuetify(DiacriticPicker, {
+			props: { modelValue: '' },
+		})
+
+		cy.get('.sy-diacritic-wrapper').should('be.visible')
+		cy.matchImageSnapshot('diacritic-picker-default', cy.get('.sy-diacritic-wrapper'))
+	})
+
+	it('displays the diacritic picker with custom button title', () => {
+		cy.mountWithVuetify(DiacriticPicker, {
+			props: {
+				modelValue: '',
+				btnTitle: 'àÀ',
+			},
+		})
+
+		cy.get('.sy-diacritic-wrapper').should('be.visible')
+		cy.matchImageSnapshot('diacritic-picker-custom-title', cy.get('.sy-diacritic-wrapper'))
+	})
+})

package/src/components/DialogBox/DialogBox.mdx

@@ -22,7 +22,6 @@ import * as DialogBoxStories from './DialogBox.stories';
     import { ref } from 'vue'
 
     const dialogOpen = ref(false)
-import '../../stories/styles/shared.css';
 </script>
 
 <template>