@cnamts/synapse 1.0.26 → 1.1.0

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

@@ -0,0 +1,205 @@
+import { computed, watch, type Ref } from 'vue'
+import { useValidation, type ValidationResult, type ValidationRule } from '@/composables/validation/useValidation'
+import { DATE_PICKER_MESSAGES } from '../constants/messages'
+import { useDateValidation } from './useDateValidation'
+import type { DateObjectValue } from '../types'
+
+export type DatePickerValidationRule = {
+	type: string
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- DatePicker rules are still legacy-shaped during migration.
+	options: any
+}
+
+export type DatePickerValidationBridgeOptions = {
+	showSuccessMessages: boolean
+	disableErrorHandling: boolean
+	noCalendar: boolean
+	required: boolean
+	displayRange: boolean
+	customRules: Ref<DatePickerValidationRule[]>
+	customWarningRules: Ref<DatePickerValidationRule[]>
+	selectedDates: Ref<DateObjectValue>
+	isUpdatingFromInternal: Ref<boolean>
+	currentRangeIsValid: Ref<boolean>
+	getRangeValidationError: Ref<string>
+	readonly?: Ref<boolean>
+	skipValidationWhenReadonly?: boolean
+	useCalendarModeRequiredFlow?: boolean
+	isInitialValidation?: Ref<boolean>
+	isValidateOnBlur?: Ref<boolean>
+	onblur?: Ref<boolean>
+	fieldIdentifier?: string
+	revalidateOnCustomRulesChange?: boolean
+}
+
+const emptyValidationResult = (): ValidationResult => ({
+	hasError: false,
+	hasWarning: false,
+	hasSuccess: false,
+	state: {
+		errors: [],
+		warnings: [],
+		successes: [],
+	},
+})
+
+export function useDatePickerValidationBridge(options: DatePickerValidationBridgeOptions) {
+	const validation = useValidation({
+		showSuccessMessages: options.showSuccessMessages,
+		fieldIdentifier: options.fieldIdentifier ?? 'Date',
+		disableErrorHandling: options.disableErrorHandling,
+	})
+
+	const {
+		errors,
+		warnings,
+		successes,
+		validateField: baseValidateField,
+		clearValidation: baseClearValidation,
+	} = validation
+
+	const clearValidation = () => baseClearValidation()
+
+	if (options.skipValidationWhenReadonly && options.readonly) {
+		watch(options.readonly, () => {
+			errors.value = []
+			warnings.value = []
+			successes.value = []
+		})
+	}
+
+	const validateField = (
+		value: unknown,
+		rules: ValidationRule[] = [],
+		warningRules: ValidationRule[] = [],
+		successRules: ValidationRule[] = [],
+	): Promise<ValidationResult> | ValidationResult => {
+		if (options.skipValidationWhenReadonly && options.readonly?.value) {
+			return emptyValidationResult()
+		}
+
+		return baseValidateField(value, rules, warningRules, successRules)
+	}
+
+	const validateFieldForDateValidation = (
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Compatibility signature for legacy useDateValidation.
+		value: any,
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Compatibility signature for legacy useDateValidation.
+		rules: any[] = [],
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Compatibility signature for legacy useDateValidation.
+		warningRules: any[] = [],
+	): ValidationResult | Promise<ValidationResult> => {
+		return validateField(value, rules, warningRules, [])
+	}
+
+	const { validateDates: coreValidateDates } = useDateValidation({
+		noCalendar: options.noCalendar,
+		required: options.useCalendarModeRequiredFlow ? false : options.required,
+		displayRange: options.displayRange,
+		disableErrorHandling: options.disableErrorHandling,
+		customRules: computed(() => options.customRules.value),
+		customWarningRules: computed(() => options.customWarningRules.value),
+		selectedDates: options.selectedDates,
+		isUpdatingFromInternal: options.isUpdatingFromInternal,
+		currentRangeIsValid: options.currentRangeIsValid,
+		getRangeValidationError: options.getRangeValidationError,
+		clearValidation,
+		validateField: validateFieldForDateValidation,
+		errors,
+		warnings,
+		successes,
+	})
+
+	if (options.revalidateOnCustomRulesChange) {
+		watch(options.customRules, () => {
+			if (options.selectedDates.value === null) {
+				return
+			}
+
+			queueMicrotask(async () => {
+				clearValidation()
+
+				const datesToValidate = Array.isArray(options.selectedDates.value)
+					? options.selectedDates.value
+					: [options.selectedDates.value]
+
+				for (const date of datesToValidate) {
+					await Promise.resolve(validateField(
+						date,
+						options.customRules.value,
+						options.customWarningRules.value,
+					))
+				}
+			})
+		}, { deep: true })
+	}
+
+	const validateCalendarModeDates = async (forceValidation = false) => {
+		if (!options.useCalendarModeRequiredFlow) {
+			return await Promise.resolve(coreValidateDates(forceValidation))
+		}
+
+		if (options.noCalendar) {
+			return
+		}
+
+		clearValidation()
+
+		const shouldDisplayErrors = !options.disableErrorHandling
+		const hasNoSelection = !options.selectedDates.value || (Array.isArray(options.selectedDates.value) && options.selectedDates.value.length === 0)
+
+		if ((forceValidation || !options.isUpdatingFromInternal.value) && options.required && hasNoSelection) {
+			if (options.readonly?.value) {
+				return
+			}
+			if (options.onblur?.value && !options.isValidateOnBlur?.value) {
+				return
+			}
+			if (shouldDisplayErrors && (!options.isInitialValidation?.value || forceValidation)) {
+				errors.value.push(DATE_PICKER_MESSAGES.ERROR_REQUIRED)
+			}
+			return
+		}
+
+		if (!options.selectedDates.value) {
+			if (!options.customRules.value || options.customRules.value.length === 0) return
+
+			if (shouldDisplayErrors && (!options.isInitialValidation?.value || forceValidation)) {
+				await validateField(
+					options.selectedDates.value,
+					options.customRules.value,
+					options.customWarningRules.value,
+				)
+				errors.value = [...new Set(errors.value)]
+				warnings.value = [...new Set(warnings.value)]
+				successes.value = [...new Set(successes.value)]
+			}
+			return
+		}
+
+		if (shouldDisplayErrors && (!options.isInitialValidation?.value || forceValidation)) {
+			return await Promise.resolve(coreValidateDates(forceValidation))
+		}
+	}
+
+	const validateDates = (forceValidation = false) => {
+		if (!options.useCalendarModeRequiredFlow) {
+			return coreValidateDates(forceValidation)
+		}
+
+		return validateCalendarModeDates(forceValidation)
+	}
+
+	return {
+		validation,
+		errors,
+		warnings,
+		successes,
+		errorMessages: errors,
+		warningMessages: warnings,
+		successMessages: validation.displaySuccesses,
+		clearValidation,
+		validateField,
+		validateDates,
+	}
+}

package/src/components/DatePicker/docExamples/BidirectionalComplexValidation.vue

@@ -210,7 +210,7 @@
 
 			<v-btn
 				size="small"
-				color="success"
+				color="onSuccessVariant"
 				class="mr-2"
 				@click="setTestDates"
 			>

package/src/components/DatePicker/docExamples/DatePickerBidirectionalValidation.vue

@@ -207,7 +207,7 @@
 
 			<v-btn
 				size="small"
-				color="success"
+				color="onSuccessVariant"
 				class="mr-2"
 				@click="setTestDates"
 			>

package/src/components/DatePicker/tests/exposed-methods.coverage.spec.ts

@@ -0,0 +1,75 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import DateTextInput from '../DateTextInput/DateTextInput.vue'
+
+/**
+ * Tests pour couvrir les méthodes exposées (focus, blur)
+ * Zones non couvertes : DateTextInput.vue lignes 1138-1144
+ */
+describe('Exposed Methods Coverage Tests', () => {
+	/**
+	 * Test 1 : Méthode focus() exposée
+	 * Couvre ligne 1138-1140
+	 */
+	it('expose la méthode focus() pour le focus programmatique', async () => {
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+			},
+			attachTo: document.body,
+		})
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect(typeof (wrapper.vm as any).focus).toBe('function')
+		// Appel réel pour couvrir le corps de la méthode (ligne 1139)
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect(() => (wrapper.vm as any).focus()).not.toThrow()
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 2 : Méthode blur() exposée
+	 * Couvre ligne 1142-1144
+	 */
+	it('expose la méthode blur() pour le blur programmatique', async () => {
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+			},
+			attachTo: document.body,
+		})
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect(typeof (wrapper.vm as any).blur).toBe('function')
+		// Appel réel pour couvrir le corps de la méthode (ligne 1142-1143)
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect(() => (wrapper.vm as any).blur()).not.toThrow()
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 3 : validateOnSubmit exposé
+	 */
+	it('expose validateOnSubmit pour validation externe', async () => {
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+				required: true,
+			},
+		})
+
+		// La méthode doit exister
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect((wrapper.vm as any).validateOnSubmit).toBeDefined()
+
+		wrapper.unmount()
+	})
+})

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/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.vue

@@ -253,7 +253,7 @@
 }
 
 .v-btn--icon {
-	color: rgb(var(--v-theme-iconBase));
+	color: rgb(var(--v-theme-primary));
 	position: absolute;
 	right: 24px;
 }

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

@@ -8,6 +8,8 @@ import {
 import DownloadBtn from '../DownloadBtn.vue'
 import { downloadFile } from '@/utils/functions/downloadFile'
 
+vi.mock('@/utils/functions/downloadFile', () => ({ downloadFile: vi.fn() }))
+
 describe('DownloadBtn', () => {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	let wrapper: any
@@ -38,8 +40,6 @@ describe('DownloadBtn', () => {
 	})
 
 	it('works correctly', async () => {
-		vi.mock('@/utils/functions/downloadFile', () => ({ downloadFile: vi.fn() }))
-
 		await element.trigger('click')
 
 		expect(downloadFile).toHaveBeenCalledTimes(1)

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

@@ -0,0 +1,38 @@
+import type { AxiosResponse } from 'axios'
+import DownloadBtn from '../DownloadBtn.vue'
+import { h } from 'vue'
+import { VSheet } from 'vuetify/components'
+
+function fakeFilePromise(): Promise<AxiosResponse<Blob>> {
+	return Promise.resolve({
+		data: new Blob(['content'], { type: 'application/pdf' }),
+		headers: { 'content-disposition': 'attachment; filename="test.pdf"' },
+		status: 200,
+		statusText: 'OK',
+		config: {} as AxiosResponse['config'],
+	})
+}
+
+describe('DownloadBtn - Visual regression tests', () => {
+	it('displays the download button in idle state', () => {
+		cy.mountWithVuetify(DownloadBtn, {
+			props: {
+				filePromise: fakeFilePromise,
+			},
+		})
+
+		cy.get('.v-btn').should('be.visible')
+		cy.matchImageSnapshot('download-btn-idle', cy.get('.v-btn'))
+	})
+
+	it('displays the download button in dark mode', () => {
+		cy.mountWithVuetify(
+			h(VSheet, { color: 'primary', class: 'pa-4', style: 'display: inline-block;' }, () => [
+				h(DownloadBtn, { filePromise: fakeFilePromise, dark: true }, () => 'Télécharger'),
+			]),
+		)
+
+		cy.get('.sy-download-btn').should('be.visible')
+		cy.matchImageSnapshot('download-btn-dark', cy.get('.v-sheet'))
+	})
+})

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

@@ -0,0 +1,32 @@
+import ErrorPage from '../ErrorPage.vue'
+
+describe('ErrorPage - Visual regression tests', () => {
+	it('displays the error page by default', () => {
+		cy.mountWithVuetify(ErrorPage)
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('error-page-default', cy.get('.v-application'))
+	})
+
+	it('displays the error page with custom message', () => {
+		cy.mountWithVuetify(ErrorPage, {
+			props: {
+				pageTitle: 'Erreur technique',
+				message: 'Une erreur inattendue s\'est produite.',
+				code: '500',
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('error-page-custom', cy.get('.v-application'))
+	})
+
+	it('displays the error page without button', () => {
+		cy.mountWithVuetify(ErrorPage, {
+			props: { hideBtn: true },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('error-page-no-btn', cy.get('.v-application'))
+	})
+})

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

@@ -0,0 +1,30 @@
+import ExternalLinks from '../ExternalLinks.vue'
+
+const defaultItems = [
+	{ text: 'Ameli.fr', href: 'https://www.ameli.fr' },
+	{ text: 'Service-public.fr', href: 'https://www.service-public.fr' },
+]
+
+describe('ExternalLinks - Visual regression tests', () => {
+	it('displays the external links button', () => {
+		cy.mountWithVuetify(ExternalLinks, {
+			props: { items: defaultItems },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('external-links-default', cy.get('.v-application'))
+	})
+
+	it('displays the external links in fixed position', () => {
+		cy.mountWithVuetify(ExternalLinks, {
+			props: {
+				items: defaultItems,
+				fixed: true,
+				position: 'bottom right',
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('external-links-fixed', cy.get('.v-application'))
+	})
+})

package/src/components/FileList/UploadItem/UploadItem.vue

@@ -97,7 +97,7 @@
 							v-else-if="state === 'success'"
 							:icon="mdiCheckCircle"
 							:size="cnamContextualTokens.iconSize.default"
-							color="success"
+							color="onSuccessVariant"
 							decorative
 						/>
 
@@ -211,7 +211,7 @@
 	flex-direction: column;
 	gap: var(--v-gap-3);
 	padding-block: var(--v-padding-4);
-	border-bottom: 1px solid rgb(var(--v-theme-borderSubdued));
+	border-bottom: 1px solid rgb(var(--v-theme-disabled));
 
 	&:first-child:last-child {
 		border-bottom: none;
@@ -224,7 +224,7 @@
 
 .file-item__name {
 	font-size: 0.875rem;
-	color: rgb(var(--v-theme-textBase));
+	color: rgb(var(--v-theme-onSurface));
 }
 
 .file-item__description {
@@ -278,7 +278,7 @@
 
 .file-item__message {
 	font-size: 0.875rem;
-	color: rgb(var(--v-theme-textSubdued));
+	color: rgb(var(--v-theme-onSurfaceVariant));
 }
 
 .file-item__message-success,

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

@@ -0,0 +1,31 @@
+import FileList from '../FileList.vue'
+
+const defaultUploadList = [
+	{ id: '1', title: 'Carte vitale', state: 'initial', showUploadBtn: true },
+	{ id: '2', title: 'Justificatif de domicile', state: 'success', fileName: 'justificatif.pdf' },
+	{ id: '3', title: 'Ordonnance', state: 'error' },
+]
+
+describe('FileList - Visual regression tests', () => {
+	it('displays the file list with mixed states', () => {
+		cy.mountWithVuetify(FileList, {
+			props: { uploadList: defaultUploadList },
+		})
+
+		cy.get('.upload-list').should('be.visible')
+		cy.matchImageSnapshot('file-list-default', cy.get('.upload-list'))
+	})
+
+	it('displays the file list with delete buttons', () => {
+		cy.mountWithVuetify(FileList, {
+			props: {
+				uploadList: [
+					{ id: '1', title: 'Document', state: 'success', fileName: 'doc.pdf', showDeleteBtn: true },
+				],
+			},
+		})
+
+		cy.get('.upload-list').should('be.visible')
+		cy.matchImageSnapshot('file-list-with-delete', cy.get('.upload-list'))
+	})
+})