@cnamts/synapse 1.0.9 → 1.0.11

package/src/components/DatePicker/tests/archiTest.md

@@ -0,0 +1,33 @@
+datePicker/tests
+├── core/                           # Tests des fonctionnalités de base
+│   ├── validation.core.spec.ts     # Validation de base (required, format)
+│   ├── formats.core.spec.ts        # Formats d'entrée/sortie standards
+│   └── events.core.spec.ts         # Événements de base (update, focus, blur)
+├── components/                     # Tests spécifiques par composant
+│   ├── CalendarMode.spec.ts        # Tests CalendarMode complets
+│   ├── ComplexDatePicker.spec.ts   # Tests ComplexDatePicker complets
+│   └── DateTextInput.spec.ts       # Tests DateTextInput complets
+├── features/                       # Tests des fonctionnalités avancées
+│   ├── customRules.spec.ts         # Custom rules et règles complexes
+│   ├── reactivity.spec.ts          # Réactivité Vue 3 et computed
+│   ├── combinedMode.spec.ts        # Mode combined spécifique
+│   └── accessibility.spec.ts       # Tests A11y et navigation clavier
+├── integration/                    # Tests d'intégration
+│   ├── forms.integration.spec.ts   # Intégration Vuetify forms
+│   ├── validation.integration.spec.ts # Intégration validation complexe
+│   └── multiComponent.integration.spec.ts # Interactions multi-composants
+├── performance/                    # Tests de performance
+│   ├── stress.performance.spec.ts  # Tests de charge et stress
+│   ├── memory.performance.spec.ts  # Memory leaks et cleanup
+│   └── rendering.performance.spec.ts # Performance de rendu
+├── regression/                     # Tests de régression des bugs
+│   ├── clearInput.regression.spec.ts     # Bug croix suppression (Mémoire 1f50fe1b)
+│   ├── reactiveRules.regression.spec.ts  # Bug règles réactives (Mémoire 2196b67a)
+│   ├── combinedMode.regression.spec.ts   # Bug combined-mode (Mémoire a60921cf)
+│   ├── messagePriority.regression.spec.ts # Bug priorité messages (Mémoire 36e3ba09)
+│   └── immediateValidation.regression.spec.ts # Bug validation immédiate (Mémoire 36a3ff57)
+└── edge-cases/                     # Tests des cas limites
+    ├── formats.edge.spec.ts        # Formats exotiques et edge cases
+    ├── dates.edge.spec.ts          # Dates limites (1900-2100, bissextiles)
+    ├── browser.edge.spec.ts        # Compatibilité navigateurs
+    └── corruption.edge.spec.ts     # Données corrompues et robustesse

package/src/components/DatePicker/tests/setup.ts

@@ -0,0 +1,243 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick, ref, computed } from 'vue'
+import { vuetify } from '../../../../tests/unit/setup'
+import DatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
+
+/**
+ * Setup centralisé pour tous les tests DatePicker
+ * Fournit des helpers réutilisables et une configuration commune
+ */
+
+// Types communs
+export type WrapperType = ReturnType<typeof mount>
+export type CustomRule = {
+	type: string
+	options: Record<string, unknown>
+}
+
+// Configuration de base commune
+export const baseConfig = {
+	global: {
+		plugins: [vuetify],
+	},
+}
+
+// Props par défaut pour différents modes
+export const defaultProps = {
+	calendar: {
+		modelValue: null,
+		label: 'Date Test',
+	},
+	combined: {
+		useCombinedMode: true,
+		modelValue: null,
+		label: 'Date Combined Test',
+	},
+	textInput: {
+		noCalendar: true,
+		modelValue: null,
+		label: 'Date Text Test',
+	},
+}
+
+/**
+ * Helper pour monter un composant DatePicker avec configuration de base
+ */
+export function mountDatePicker(props: Record<string, unknown> = {}, config: Record<string, unknown> = {}) {
+	return mount(DatePicker, {
+		...baseConfig,
+		...config,
+		props: {
+			...defaultProps.calendar,
+			...props,
+		},
+	})
+}
+
+/**
+ * Helper pour monter un DatePicker en mode calendrier
+ */
+export function mountCalendarMode(props: Record<string, unknown> = {}) {
+	return mountDatePicker({
+		...defaultProps.calendar,
+		...props,
+	})
+}
+
+/**
+ * Helper pour monter un DatePicker en mode combiné
+ */
+export function mountCombinedMode(props: Record<string, unknown> = {}) {
+	return mountDatePicker({
+		...defaultProps.combined,
+		...props,
+	})
+}
+
+/**
+ * Helper pour monter un DatePicker en mode saisie texte
+ */
+export function mountTextInputMode(props: Record<string, unknown> = {}) {
+	return mountDatePicker({
+		...defaultProps.textInput,
+		...props,
+	})
+}
+
+/**
+ * Helper pour créer une règle personnalisée de test
+ */
+export function createTestRule(validate: () => boolean, message: string = 'Test error'): CustomRule {
+	return {
+		type: 'custom',
+		options: {
+			validate,
+			message,
+		},
+	}
+}
+
+/**
+ * Helper pour créer une règle de warning de test
+ */
+export function createTestWarningRule(validate: () => boolean, message: string = 'Test warning'): CustomRule {
+	return {
+		type: 'custom',
+		options: {
+			validate,
+			message,
+		},
+	}
+}
+
+/**
+ * Helper pour créer des règles réactives basées sur une date de référence
+ */
+export function createReactiveRules(referenceDate: { value: string }) {
+	return computed(() => [
+		{
+			type: 'notBeforeDate',
+			options: {
+				date: referenceDate.value,
+				message: `Date ne peut pas être avant le ${referenceDate.value}`,
+			},
+		},
+	])
+}
+
+/**
+ * Helper pour attendre que le composant soit monté et stable
+ */
+export async function expectComponentMounted(wrapper: WrapperType) {
+	await nextTick()
+	expect(wrapper.exists()).toBe(true)
+	expect(wrapper.find('input').exists()).toBe(true)
+}
+
+/**
+ * Helper pour simuler une saisie utilisateur
+ */
+export async function simulateUserInput(wrapper: WrapperType, value: string) {
+	const input = wrapper.find('input')
+	await input.setValue(value)
+	await input.trigger('blur')
+	await nextTick()
+}
+
+/**
+ * Helper pour déclencher la validation
+ */
+export async function triggerValidation(wrapper: WrapperType) {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	await (wrapper.vm as any).validateOnSubmit()
+	await nextTick()
+}
+
+/**
+ * Helper pour vérifier qu'un événement a été émis
+ */
+export function expectEventEmitted(wrapper: WrapperType, eventName: string) {
+	expect(wrapper.emitted(eventName)).toBeTruthy()
+}
+
+/**
+ * Helper pour vérifier les messages d'erreur
+ */
+export function expectErrorMessages(wrapper: WrapperType, expectedCount: number = 1) {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	expect((wrapper.vm as any).errorMessages.length).toBeGreaterThanOrEqual(expectedCount)
+}
+
+/**
+ * Helper pour vérifier les messages de warning
+ */
+export function expectWarningMessages(wrapper: WrapperType, expectedCount: number = 1) {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	expect((wrapper.vm as any).warningMessages.length).toBe(expectedCount)
+}
+
+/**
+ * Helper pour vérifier les messages de succès
+ */
+export function expectSuccessMessages(wrapper: WrapperType, expectedCount: number = 1) {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	expect((wrapper.vm as any).successMessages.length).toBe(expectedCount)
+}
+
+/**
+ * Helper pour nettoyer après chaque test
+ */
+export function setupTestCleanup() {
+	let wrapper: WrapperType | null = null
+
+	beforeEach(() => {
+		wrapper = null
+	})
+
+	afterEach(() => {
+		if (wrapper) {
+			wrapper.unmount()
+			wrapper = null
+		}
+	})
+
+	return {
+		getWrapper: () => wrapper,
+		setWrapper: (w: WrapperType) => { wrapper = w },
+	}
+}
+
+/**
+ * Constantes pour les tests
+ */
+export const TEST_DATES = {
+	VALID: '15/06/2024',
+	INVALID: '32/13/2024',
+	ANCIENT: '01/01/1900',
+	FUTURE: '31/12/2100',
+	LEAP_YEAR: '29/02/2024',
+	NON_LEAP_YEAR: '29/02/2023',
+}
+
+export const TEST_FORMATS = {
+	DD_MM_YYYY: 'DD/MM/YYYY',
+	YYYY_MM_DD: 'YYYY/MM/DD',
+	MM_DD_YYYY: 'MM/DD/YYYY',
+	DD_MM_YY: 'DD/MM/YY',
+}
+
+// Réexporter les utilitaires de test courants
+export {
+	describe,
+	it,
+	expect,
+	beforeEach,
+	afterEach,
+	vi,
+	nextTick,
+	ref,
+	computed,
+	mount,
+	DatePicker,
+}

package/src/components/DiacriticPicker/tests/DiatriticPicker.spec.ts

@@ -1,7 +1,6 @@
 /* eslint-disable vue/one-component-per-file */
 import { describe, it, expect, beforeEach } from 'vitest'
 import { mount } from '@vue/test-utils'
-import { vuetify } from '@tests/unit/setup'
 import { ref, nextTick, defineComponent, h } from 'vue'
 import DiacriticPicker from '../DiacriticPicker.vue'
 
@@ -20,9 +19,6 @@ describe('DiacriticPicker.vue', () => {
 			slots: {
 				default: `<input id="diacritic-input-${Math.random().toString(36).substr(2, 9)}" type="text" value="a" />`,
 			},
-			global: {
-				plugins: [vuetify],
-			},
 		})
 		await nextTick()
 	})
@@ -48,7 +44,6 @@ describe('DiacriticPicker.vue', () => {
 		const model = ref('a')
 
 		const wrapper = mount(DiacriticPicker, {
-			global: { plugins: [vuetify] },
 			props: {
 				modelValue: model.value,
 				onUpdateModelValue: (val: string) => {
@@ -103,7 +98,6 @@ describe('DiacriticPicker.vue', () => {
 		const model1 = ref('a')
 
 		const wrapper = mount(DiacriticPicker, {
-			global: { plugins: [vuetify] },
 			props: {
 				modelValue: model1.value,
 				onUpdateModelValue: (val: string) => {

package/src/components/DialogBox/DialogBox.stories.ts

@@ -115,7 +115,7 @@ const meta: Meta<typeof DialogBox> = {
 		},
 		'draggable': {
 			control: 'boolean',
-			description: 'Rendre la boîte de dialogue déplaçable avec la souris ou les flèches gauche/droite du clavier',
+			description: 'Rendre la boîte de dialogue déplaçable avec la souris ou les flèches du clavier',
 			table: {
 				type: {
 					summary: 'boolean',

package/src/components/DialogBox/DialogBox.vue

@@ -40,7 +40,7 @@
 	})
 
 	const confirmBtn = ref<VBtn | null>(null)
-	// Restor the focus to the last active element when the dialog is closed
+	// Restore the focus to the last active element when the dialog is closed
 	let activeElement: HTMLElement | null = null
 	watch(dialog, (newValue) => {
 		if (newValue) {
@@ -50,6 +50,11 @@
 					confirmBtn.value?.$el.focus()
 				})
 			}
+			else if (props.draggable) {
+				nextTick(() => {
+					dialogContent.value?.$el.querySelector('.sy-dialog-box-title')?.focus()
+				})
+			}
 		}
 		else if (activeElement) {
 			activeElement.focus()
@@ -107,13 +112,15 @@
 		startDragging,
 		moveToLeft,
 		moveToRight,
+		moveToBottom,
+		moveToTop,
 	} = useDraggable(toRef(props, 'draggable'), dialogContent)
 </script>
 
 <template>
 	<VDialog
 		v-model="dialog"
-		:scrim="props.draggable ? false : true"
+		:scrim="props.draggable ? 'transparent' : true"
 		v-bind="$attrs"
 		:width="props.width"
 		:persistent="props.persistent"
@@ -122,8 +129,6 @@
 		class="sy-dialog-box"
 		:aria-labelledby="id"
 		@keydown.tab="handleFocus"
-		@keydown.left="moveToLeft"
-		@keydown.right="moveToRight"
 	>
 		<VCard
 			v-bind="options.card"
@@ -138,13 +143,19 @@
 				class="sy-dialog-box-title"
 				v-bind="options.cardTitle"
 				:title="props.draggable ? locales.dragInstruction : undefined"
+				:aria-label="props.draggable ? locales.dragInstructionLabel : undefined"
+				:tabindex="props.draggable ? 0 : undefined"
 				@mousedown="startDragging"
+				@keydown.left.self="moveToLeft"
+				@keydown.right.self="moveToRight"
+				@keydown.up.self="moveToTop"
+				@keydown.down.self="moveToBottom"
 			>
 				<slot name="title">
 					<h2
 						v-if="title"
 						:id="id"
-						class="text-h6 font-weight-bold"
+						class="text-h4 mr-6 font-weight-bold"
 					>
 						{{ props.title }}
 					</h2>
@@ -157,7 +168,7 @@
 					class="sy-dialog-box-close-btn"
 					v-bind="options.closeBtn"
 					:aria-label="locales.closeBtn"
-					@click="dialog = false"
+					@click.stop="dialog = false"
 				>
 					<SyIcon
 						:icon="closeIcon"
@@ -227,8 +238,8 @@
 <style lang="scss" scoped>
 @use '@/assets/tokens' as *;
 
-.v-card__title > * {
-	line-height: 1em;
+.sy-dialog-box-title {
+	line-height: normal;
 }
 
 .v-btn--icon {
@@ -267,6 +278,12 @@ h2 {
 
 .sy-dialog-box-draggable .sy-dialog-box-title {
 	cursor: grab;
+
+	&:focus-visible {
+		outline: 2px solid rgb(var(--v-theme-primary));
+		outline-offset: -2px;
+		border-radius: 3px;
+	}
 }
 
 .sy-dialog-box-draggable--active .sy-dialog-box-title {

package/src/components/DialogBox/locales.ts

@@ -4,4 +4,5 @@ export const locales = {
 	confirmBtn: 'Valider',
 	draggable: 'Déplaçable',
 	dragInstruction: 'Déplacer la boîte de dialogue',
+	dragInstructionLabel: 'Déplacer la boîte de dialogue avec les flèches directionnelles',
 }