@cnamts/synapse 1.0.15 → 1.0.17

package/src/components/DatePicker/CalendarMode/tests/DatePicker.events.spec.ts

@@ -9,6 +9,7 @@ describe('CalendarMode.vue - Events', () => {
 	beforeEach(() => {
 		wrapper = mount(DatePicker, {
 			props: {
+				label: 'Date Field',
 				modelValue: '',
 				format: 'DD/MM/YYYY',
 			},
@@ -55,6 +56,7 @@ describe('CalendarMode.vue - Events', () => {
 		// Créer un composant avec disablePickerInteraction à true
 		const wrapperWithDisabledPicker = mount(DatePicker, {
 			props: {
+				label: 'Date Field',
 				modelValue: '',
 				format: 'DD/MM/YYYY',
 				disablePickerInteraction: true,
@@ -112,6 +114,7 @@ describe('CalendarMode.vue - Events', () => {
 	it('accepte différents formats de date', async () => {
 		const wrapperWithDashFormat = mount(DatePicker, {
 			props: {
+				label: 'Date Field',
 				modelValue: '',
 				format: 'YYYY-MM-DD',
 			},
@@ -133,6 +136,7 @@ describe('CalendarMode.vue - Events', () => {
 	it('accepte les plages de dates en entrée', async () => {
 		const wrapperWithRange = mount(DatePicker, {
 			props: {
+				label: 'Date Field',
 				modelValue: ['01/01/2023', '05/01/2023'],
 				format: 'DD/MM/YYYY',
 				displayRange: true,
@@ -156,6 +160,7 @@ describe('CalendarMode.vue - Events', () => {
 
 		const wrapperWithRules = mount(DatePicker, {
 			props: {
+				label: 'Date Field',
 				modelValue: '',
 				format: 'DD/MM/YYYY',
 				customRules: [customRule],

package/src/components/DatePicker/CalendarMode/tests/DatePicker.spec.ts

@@ -1,85 +1,68 @@
-import { mount } from '@vue/test-utils'
-import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
 import { nextTick } from 'vue'
 import DatePicker from '../DatePicker.vue'
 
-describe('CalendarMode.vue', () => {
-	let wrapper
+type DatePickerInstance = InstanceType<typeof DatePicker>
 
-	beforeEach(() => {
-		wrapper = mount(DatePicker, {
-			props: {
-				modelValue: '',
-				required: true,
-			},
-		})
+describe('DatePicker', () => {
+	const mountComponent = (props: Record<string, unknown> = {}) => mount(DatePicker, {
+		props: { label: 'Date Field', ...props },
 	})
 
-	it('emits update:modelValue event on date selection', async () => {
-		const wrapper = mount(DatePicker)
-		const input = wrapper.find('input')
-		await input.setValue('01/01/2023')
-		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
-	})
+	it('renders the calendar mode activator input by default', () => {
+		const wrapper = mountComponent({
+			required: true,
+		})
 
-	it('renders the component', () => {
-		const wrapper = mount(DatePicker)
 		expect(wrapper.exists()).toBe(true)
+		const input = wrapper.find('input')
+		expect(input.exists()).toBe(true)
 	})
 
-	it('emits the correct formatted date on date selection', async () => {
+	it('emits update:modelValue when a valid date is typed in single mode', async () => {
+		const wrapper = mountComponent({
+			format: 'DD/MM/YYYY',
+		})
+
 		const input = wrapper.find('input')
 		await input.setValue('01/01/2023')
-		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
-		expect(wrapper.emitted('update:modelValue')[0]).toEqual(['01/01/2023'])
-	})
+		await input.trigger('blur')
+		await flushPromises()
 
-	it('renders the date picker with proper structure', async () => {
-		// Ouvrir le CalendarMode pour que les éléments soient dans le DOM
-		wrapper.vm.isDatePickerVisible = true
-		await nextTick()
-		// Simuler un clic pour s'assurer que le CalendarMode est complètement initialisé
-		const input = wrapper.find('input')
-		await input.trigger('click')
-		await nextTick()
-		// Attendre un peu pour que le DOM soit mis à jour
-		await new Promise(resolve => setTimeout(resolve, 100))
-		// Vérifier que le CalendarMode est visible
-		const datePickerEl = document.querySelector('.v-date-picker')
-		expect(datePickerEl).not.toBeNull()
-		// Vérifier qu'il y a des boutons de navigation
-		const navigationButtons = datePickerEl?.querySelectorAll('button') || []
-		expect(navigationButtons.length).toBeGreaterThan(0)
+		const emitted = wrapper.emitted('update:modelValue')
+		expect(emitted).toBeTruthy()
+		expect(emitted && emitted[0][0]).toBe('01/01/2023')
 	})
 
-	it('handles invalid date input gracefully', async () => {
+	it('handles invalid typed date input gracefully', async () => {
+		const wrapper = mountComponent({
+			format: 'DD/MM/YYYY',
+		})
+		const vm = wrapper.vm as DatePickerInstance
+
 		const input = wrapper.find('input')
 		await input.setValue('invalid date')
-		expect(wrapper.vm.selectedDates).toBeNull()
+		await input.trigger('blur')
+		await flushPromises()
+
+		expect(vm.selectedDates).toBeNull()
 		expect(wrapper.emitted('update:modelValue')).toBeFalsy()
 	})
 
-	it('removes the click event listener on unmount', async () => {
-		const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener')
-
-		// Monte le composant
-		const wrapper = mount(DatePicker)
-
-		// Démonte le composant
-		wrapper.unmount()
-
-		// Vérifie que removeEventListener a été appelé avec les bons arguments
-		expect(removeEventListenerSpy).toHaveBeenCalledWith('click', wrapper.vm.handleClickOutside)
-
-		// Nettoie le spy
-		removeEventListenerSpy.mockRestore()
-	})
+	it('initializeSelectedDates returns an array of dates for a valid range', () => {
+		const wrapper = mountComponent({
+			format: 'DD/MM/YYYY',
+		})
+		const vm = wrapper.vm as DatePickerInstance
 
-	it('returns an array of all dates between two valid dates', () => {
 		const datesArray = ['01/01/2023', '05/01/2023']
-		const result = wrapper.vm.initializeSelectedDates(datesArray, 'DD/MM/YYYY')
+		const result = vm.initializeSelectedDates(datesArray, 'DD/MM/YYYY')
 
 		expect(Array.isArray(result)).toBe(true)
+		if (!Array.isArray(result)) {
+			throw new Error('Expected initializeSelectedDates to return an array of dates')
+		}
 		expect(result.length).toBe(2)
 		expect(result[0]).toBeInstanceOf(Date)
 		expect(result[1]).toBeInstanceOf(Date)
@@ -87,200 +70,217 @@ describe('CalendarMode.vue', () => {
 		expect(result[1].toISOString().split('T')[0]).toBe('2023-01-05')
 	})
 
-	it('handles invalid date inputs gracefully', () => {
+	it('initializeSelectedDates returns an empty array for invalid range inputs', () => {
+		const wrapper = mountComponent({
+			format: 'DD/MM/YYYY',
+		})
+		const vm = wrapper.vm as DatePickerInstance
+
 		const datesArray = ['invalid date', '05/01/2023']
-		const result = wrapper.vm.initializeSelectedDates(datesArray, 'DD/MM/YYYY')
+		const result = vm.initializeSelectedDates(datesArray, 'DD/MM/YYYY')
 
 		expect(result).toEqual([])
 	})
 
-	it('handles a single date correctly', () => {
+	it('initializeSelectedDates handles a single valid date correctly', () => {
+		const wrapper = mountComponent({
+			format: 'DD/MM/YYYY',
+		})
+		const vm = wrapper.vm as DatePickerInstance
+
 		const singleDate = '01/01/2023'
-		const result = wrapper.vm.initializeSelectedDates(singleDate, 'DD/MM/YYYY')
+		const result = vm.initializeSelectedDates(singleDate, 'DD/MM/YYYY')
 
 		expect(result).toBeInstanceOf(Date)
+		if (!(result instanceof Date)) {
+			throw new Error('Expected initializeSelectedDates to return a Date for a single valid date')
+		}
 		expect(result.toISOString().split('T')[0]).toBe('2023-01-01')
 	})
 
-	it('returns an empty array if start date is after end date', () => {
+	it('initializeSelectedDates returns an empty array when start date is after end date', () => {
+		const wrapper = mountComponent({
+			format: 'DD/MM/YYYY',
+		})
+		const vm = wrapper.vm as DatePickerInstance
+
 		const datesArray = ['05/01/2023', '01/01/2023']
-		const result = wrapper.vm.initializeSelectedDates(datesArray, 'DD/MM/YYYY')
+		const result = vm.initializeSelectedDates(datesArray, 'DD/MM/YYYY')
 
 		expect(result).toEqual([])
 	})
 
-	it('returns true when there are no validation errors', async () => {
-		const wrapper = mount(DatePicker, {
-			props: {
-				required: true,
-			},
+	it('updateSelectedDates sets selectedDates to null when input is empty', () => {
+		const wrapper = mountComponent({
+			format: 'DD/MM/YYYY',
 		})
+		const vm = wrapper.vm as DatePickerInstance
 
-		wrapper.vm.selectedDates = [new Date('2023-01-01')]
-		await nextTick()
-
-		const result = wrapper.vm.validateOnSubmit()
-
-		expect(result).toBe(true)
-		expect(wrapper.vm.errorMessages).toEqual([])
+		vm.updateSelectedDates('')
+		expect(vm.selectedDates).toBeNull()
 	})
 
-	it('returns false when there are validation errors', async () => {
-		const wrapper = mount(DatePicker, {
-			props: {
-				required: true,
-			},
+	it('updateSelectedDates parses a valid date string and updates selectedDates', () => {
+		const wrapper = mountComponent({
+			format: 'DD/MM/YYYY',
 		})
+		const vm = wrapper.vm as DatePickerInstance
+
+		vm.updateSelectedDates('15/01/2023')
+		expect(vm.selectedDates).toBeInstanceOf(Date)
+		if (!(vm.selectedDates instanceof Date)) {
+			throw new Error('Expected selectedDates to be a Date after parsing a valid string')
+		}
+		expect(vm.selectedDates.toISOString().split('T')[0]).toBe('2023-01-15')
+	})
 
-		wrapper.vm.selectedDates = null
-		await nextTick()
+	it('updateSelectedDates does not update selectedDates for an invalid date string', () => {
+		const wrapper = mountComponent({
+			format: 'DD/MM/YYYY',
+		})
+		const vm = wrapper.vm as DatePickerInstance
 
-		const result = wrapper.vm.validateOnSubmit()
+		vm.selectedDates = null
+		vm.updateSelectedDates('invalid-date')
 
-		expect(result).toBe(false)
-		expect(wrapper.vm.errorMessages).toContain('La date est requise.')
+		expect(vm.selectedDates).toBeNull()
 	})
 
-	it('parses a valid date string into a Date instance', () => {
-		const modelValue = '15/01/2023'
-		const result = wrapper.vm.initializeSelectedDates(modelValue, 'DD/MM/YYYY')
-
-		expect(result).toBeInstanceOf(Date)
-		expect(result.toISOString().split('T')[0]).toBe('2023-01-15')
-	})
+	it('validateOnSubmit returns false and sets error messages when required and empty', async () => {
+		const wrapper = mountComponent({
+			required: true,
+			format: 'DD/MM/YYYY',
+		})
+		const vm = wrapper.vm as DatePickerInstance
 
-	it('returns null if modelValue is null or undefined', () => {
-		const modelValue = null
-		const result = wrapper.vm.initializeSelectedDates(modelValue, 'DD/MM/YYYY')
+		vm.selectedDates = null
+		const result = await vm.validateOnSubmit()
 
-		expect(result).toBeNull()
+		expect(result).toBe(false)
+		expect(vm.errorMessages.length).toBeGreaterThan(0)
 	})
 
-	it('handles an invalid date string gracefully', () => {
-		const modelValue = 'invalid date'
-		const result = wrapper.vm.initializeSelectedDates(modelValue, 'DD/MM/YYYY')
-
-		expect(result).toBeNull()
-	})
+	it('validateOnSubmit returns true and clears error messages when required and a date is selected', async () => {
+		const wrapper = mountComponent({
+			required: true,
+			format: 'DD/MM/YYYY',
+		})
+		const vm = wrapper.vm as DatePickerInstance
 
-	it('sets selectedDates to null when input is empty', () => {
-		wrapper.vm.updateSelectedDates('')
+		vm.selectedDates = new Date('2023-01-01')
+		const result = await vm.validateOnSubmit()
 
-		expect(wrapper.vm.selectedDates).toBeNull()
+		expect(result).toBe(true)
+		expect(vm.errorMessages).toEqual([])
 	})
 
-	it('parses a valid date string and updates selectedDates', () => {
-		const validInput = '15/01/2023'
-		wrapper.vm.updateSelectedDates(validInput)
+	it('does not produce validation errors when required and readonly with empty selection', async () => {
+		const wrapper = mountComponent({
+			required: true,
+			format: 'DD/MM/YYYY',
+			readonly: true,
+		})
+		const vm = wrapper.vm as DatePickerInstance
 
-		expect(wrapper.vm.selectedDates).toBeInstanceOf(Date)
-		expect(wrapper.vm.selectedDates.toISOString().split('T')[0]).toBe('2023-01-15')
-	})
+		vm.selectedDates = null
+		const result = await vm.validateOnSubmit()
 
-	it('does not update selectedDates for invalid date string', () => {
-		const invalidInput = 'invalid-date'
-		wrapper.vm.updateSelectedDates(invalidInput)
-		expect(wrapper.vm.selectedDates).toBeNull()
+		expect(result).toBe(true)
+		expect(vm.errorMessages.length).toBe(0)
 	})
 
-	it('toggles date picker visibility correctly', async () => {
-		const wrapper = mount(DatePicker)
+	it('toggles date picker visibility with openDatePicker', async () => {
+		const wrapper = mountComponent()
+		const vm = wrapper.vm as DatePickerInstance
 
-		expect(wrapper.vm.isDatePickerVisible).toBe(false)
+		expect(vm.isDatePickerVisible).toBe(false)
 
-		wrapper.vm.openDatePicker()
+		vm.openDatePicker()
 		await nextTick()
-		expect(wrapper.vm.isDatePickerVisible).toBe(true)
+		expect(vm.isDatePickerVisible).toBe(true)
 
-		wrapper.vm.isDatePickerVisible = false
+		vm.isDatePickerVisible = false
 		await nextTick()
-		expect(wrapper.vm.isDatePickerVisible).toBe(false)
+		expect(vm.isDatePickerVisible).toBe(false)
 	})
 
-	it('validates required field correctly', async () => {
-		const wrapper = mount(DatePicker, {
-			props: {
-				required: true,
-			},
+	it('respects disabled and readonly props when opening the calendar', async () => {
+		const wrapper = mountComponent({
+			format: 'DD/MM/YYYY',
+			disabled: true,
 		})
+		const vm = wrapper.vm as DatePickerInstance
 
-		const result = await wrapper.vm.validateOnSubmit()
-		expect(result).toBe(false)
-		expect(wrapper.vm.errorMessages.length).toBeGreaterThan(0)
+		expect(vm.isDatePickerVisible).toBe(false)
+		vm.openDatePicker()
+		await nextTick()
+		expect(vm.isDatePickerVisible).toBe(false)
+
+		await wrapper.setProps({ disabled: false, readonly: true })
+		vm.openDatePicker()
+		await nextTick()
+		expect(vm.isDatePickerVisible).toBe(false)
 	})
 
-	it('initializes selected dates correctly', async () => {
+	it('initializes selected dates from a valid modelValue', async () => {
 		const today = new Date()
 		const formattedDate = `${today.getDate().toString().padStart(2, '0')}/${(today.getMonth() + 1).toString().padStart(2, '0')}/${today.getFullYear()}`
-		const wrapper = mount(DatePicker, {
-			props: {
-				modelValue: formattedDate,
-				format: 'DD/MM/YYYY',
-			},
+		const wrapper = mountComponent({
+			modelValue: formattedDate,
+			format: 'DD/MM/YYYY',
 		})
+		const vm = wrapper.vm as DatePickerInstance
 
 		await nextTick()
-		expect(wrapper.vm.selectedDates).not.toBeNull()
+		expect(vm.selectedDates).not.toBeNull()
 	})
 
-	it('supports date ranges when displayRange is true', async () => {
-		const wrapper = mount(DatePicker, {
-			props: {
-				displayRange: true,
-			},
+	it('supports date ranges when displayRange is true', () => {
+		const wrapper = mountComponent({
+			displayRange: true,
 		})
+		const vm = wrapper.vm as DatePickerInstance
 
-		expect(wrapper.vm.selectedDates).toBeNull()
+		expect(vm.selectedDates).toBeNull()
 		const rangeInput = wrapper.find('input')
 		expect(rangeInput.exists()).toBe(true)
 	})
 
-	it('properly displays error messages from validation', async () => {
-		const wrapper = mount(DatePicker, {
-			props: {
-				required: true,
-			},
-		})
-
-		await wrapper.vm.validateOnSubmit()
-		await nextTick()
-
-		expect(wrapper.vm.errorMessages.length).toBeGreaterThan(0)
-		const errorMessage = wrapper.find('.v-messages__message')
-		expect(errorMessage.exists()).toBe(true)
-		expect(errorMessage.text()).toContain('requise')
-	})
-
 	it('handles birth date mode properly', async () => {
-		const wrapper = mount(DatePicker, {
-			props: {
-				isBirthDate: true,
-			},
+		const wrapper = mountComponent({
+			isBirthDate: true,
 		})
+		const vm = wrapper.vm as DatePickerInstance
 
 		expect(wrapper.props('isBirthDate')).toBe(true)
 
-		wrapper.vm.openDatePicker()
+		vm.openDatePicker()
 		await nextTick()
-		expect(wrapper.vm.isDatePickerVisible).toBe(true)
-	})
+		expect(vm.isDatePickerVisible).toBe(true)
+	}, 20000)
 
-	it('takes into account disabled and readonly limitations', async () => {
-		const wrapper = mount(DatePicker, {
-			props: {
-				disabled: true,
-			},
+	it('emits closed when handleClickOutside is called while open', () => {
+		const wrapper = mountComponent({
+			format: 'DD/MM/YYYY',
 		})
+		const vm = wrapper.vm as DatePickerInstance
 
-		wrapper.vm.openDatePicker()
-		await nextTick()
+		const outsideElement = document.createElement('div')
+		vm.isDatePickerVisible = true
+		vm.handleClickOutside({ target: outsideElement } as unknown as MouseEvent)
+
+		const closedEvents = wrapper.emitted('closed')
+		expect(closedEvents).toBeTruthy()
+	})
 
-		expect(wrapper.vm.isDatePickerVisible).toBe(false)
+	it('handleSelectToday selects today and keeps the component usable', async () => {
+		const wrapper = mountComponent()
+		const vm = wrapper.vm as DatePickerInstance
 
-		await wrapper.setProps({ disabled: false, readonly: true })
-		wrapper.vm.openDatePicker()
-		await nextTick()
+		await vm.handleSelectToday()
+		await flushPromises()
 
-		expect(wrapper.vm.isDatePickerVisible).toBe(false)
+		expect(vm.selectedDates).not.toBeNull()
+		expect(wrapper.exists()).toBe(true)
 	})
 })

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

@@ -335,6 +335,9 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -404,6 +407,9 @@ export const Default: Story = {
 
 export const Required: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -485,6 +491,9 @@ export const Required: Story = {
 
 export const DateRange: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -553,6 +562,9 @@ export const DateRange: Story = {
 
 export const BirthDate: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -615,6 +627,9 @@ export const BirthDate: Story = {
 
 export const WithValidation: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -700,6 +715,9 @@ export const WithValidation: Story = {
 
 export const DifferentFormats: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -785,6 +803,9 @@ export const DifferentFormats: Story = {
 
 export const WithDateFormatReturn: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -843,6 +864,9 @@ export const WithDateFormatReturn: Story = {
 
 export const DisablePickerInteraction: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -900,6 +924,9 @@ export const DisablePickerInteraction: Story = {
 
 export const AutoFormattingInput: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -953,6 +980,9 @@ export const AutoFormattingInput: Story = {
 
 export const CustomDateFormat: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1007,6 +1037,9 @@ export const CustomDateFormat: Story = {
 
 export const ReadonlyMode: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1073,6 +1106,9 @@ export const ReadonlyMode: Story = {
 
 export const AppendIcon: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1131,6 +1167,9 @@ export const AppendIcon: Story = {
 
 export const WithCustomPeriod: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1243,6 +1282,9 @@ export const WithCustomPeriod: Story = {
 
 export const WithTextFieldActivator: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1299,6 +1341,9 @@ export const WithTextFieldActivator: Story = {
 
 export const AutoClampFeature: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1403,6 +1448,9 @@ export const AutoClampFeature: Story = {
 
 export const WithFormSubmission: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1495,6 +1543,9 @@ export const WithFormSubmission: Story = {
 
 export const CustomRules: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1570,6 +1621,9 @@ export const CustomRules: Story = {
 
 export const CustomWarningRules: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',