@cnamts/synapse 1.0.27 → 1.1.1

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

@@ -53,10 +53,10 @@ describe('LunarCalendar', () => {
 				},
 			})
 
-			const input = wrapper.find('input')
-			await input.setValue('10/19/1995')
-			await input.trigger('blur')
+			await (wrapper.vm.validateOnSubmit as () => Promise<boolean>)()
 			await flushPromises()
+			await wrapper.vm.$nextTick()
+			await wrapper.vm.$nextTick()
 
 			expect(wrapper.html()).toContain('L\'année doit être supérieure ou égale à 1996.')
 		})
@@ -70,12 +70,203 @@ describe('LunarCalendar', () => {
 				},
 			})
 
-			const input = wrapper.find('input')
-			await input.setValue('10/19/1995')
-			await input.trigger('blur')
+			await (wrapper.vm.validateOnSubmit as () => Promise<boolean>)()
 			await flushPromises()
+			await wrapper.vm.$nextTick()
+			await wrapper.vm.$nextTick()
 
 			expect(wrapper.html()).toContain('L\'année doit être inférieure ou égale à 1994.')
 		})
+
+		it('displays success messages when showSuccessMessages is true', async () => {
+			const successRule = {
+				type: 'custom',
+				options: {
+					validate: (value: string) => {
+						const regex = /^\d{2}\/\d{2}\/\d{4}$/
+						return regex.test(value)
+					},
+					successMessage: 'Date format valide',
+				},
+			}
+
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					showSuccessMessages: true,
+					customSuccessRules: [successRule],
+				},
+			})
+
+			await (wrapper.vm.validateOnSubmit as () => Promise<boolean>)()
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.html()).toContain('Date format valide')
+		})
+
+		it('displays success messages when showSuccessMessages is true', async () => {
+			const successRule = {
+				type: 'custom',
+				options: {
+					validate: (value: string) => {
+						const regex = /^\d{2}\/\d{2}\/\d{4}$/
+						return regex.test(value)
+					},
+					successMessage: 'Date format valide',
+				},
+			}
+
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					showSuccessMessages: true,
+					customSuccessRules: [successRule],
+				},
+			})
+
+			await (wrapper.vm.validateOnSubmit as unknown as () => Promise<boolean>)()
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.html()).toContain('Date format valide')
+		})
+	})
+
+	describe('new props iso SyTextField', () => {
+		it('renders with helpText', () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					helpText: 'Format attendu : JJ/MM/AAAA',
+				},
+			})
+
+			expect(wrapper.html()).toContain('Format attendu : JJ/MM/AAAA')
+		})
+
+		it('renders with noIcon', () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					noIcon: true,
+				},
+			})
+
+			// Vérifie que l'icône n'est pas présente
+			expect(wrapper.findComponent({ name: 'SyIcon' }).exists()).toBe(false)
+		})
+
+		it('renders with displayAsterisk when required', () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '',
+					required: true,
+					displayAsterisk: true,
+				},
+			})
+
+			// Vérifie que l'astérisque est présent dans le label
+			expect(wrapper.html()).toContain('*')
+		})
+
+		it('renders with loading state', () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					loading: true,
+				},
+			})
+
+			// Vérifie que le champ a l'attribut loading ou la classe correspondante
+			expect(wrapper.findComponent({ name: 'SyTextField' }).props('loading')).toBe(true)
+		})
+
+		it('renders with disabled state', () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					disabled: true,
+				},
+			})
+
+			const input = wrapper.find('input')
+			expect(input.attributes('disabled')).toBeDefined()
+		})
+
+		it('renders with readonly state', () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					readonly: true,
+				},
+			})
+
+			const input = wrapper.find('input')
+			expect(input.attributes('readonly')).toBeDefined()
+		})
+
+		it('renders with custom variantStyle', () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					variantStyle: 'filled',
+				},
+			})
+
+			expect(wrapper.findComponent({ name: 'SyTextField' }).props('variantStyle')).toBe('filled')
+		})
+
+		it('renders with custom color', () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					color: 'secondary',
+				},
+			})
+
+			expect(wrapper.findComponent({ name: 'SyTextField' }).props('color')).toBe('secondary')
+		})
+
+		it('renders with custom density', () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					density: 'compact',
+				},
+			})
+
+			expect(wrapper.findComponent({ name: 'SyTextField' }).props('density')).toBe('compact')
+		})
+
+		it('renders with hint when focused', async () => {
+			const wrapper = mount(LunarCalendar, {
+				props: {
+					label: 'Date de naissance',
+					modelValue: '10/19/1995',
+					hint: 'Ceci est un hint',
+				},
+			})
+
+			// Le hint s'affiche quand le champ est focus
+			await wrapper.find('input').trigger('focus')
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+			await wrapper.vm.$nextTick()
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.html()).toContain('Ceci est un hint')
+		})
 	})
 })

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'))
+	})
+})

package/src/components/LunarCalendar/tests/useLunarCalendarValidation.spec.ts

@@ -0,0 +1,287 @@
+import { describe, it, expect } from 'vitest'
+import { ref, nextTick } from 'vue'
+import { useLunarCalendarValidation } from '../useLunarCalendarValidation'
+import type { LunarCalendarProps } from '../types'
+
+function createProps(overrides: Partial<LunarCalendarProps> = {}): LunarCalendarProps {
+	return {
+		label: 'Date de naissance',
+		placeholder: undefined,
+		isClearable: false,
+		displayPrependIcon: true,
+		displayAppendIcon: false,
+		minYear: undefined,
+		maxYear: undefined,
+		// FieldValidationProps defaults
+		required: false,
+		errorMessages: null,
+		warningMessages: null,
+		successMessages: null,
+		readonly: false,
+		disabled: false,
+		customRules: [],
+		customWarningRules: [],
+		customSuccessRules: [],
+		showSuccessMessages: false,
+		isValidateOnBlur: true,
+		...overrides,
+	}
+}
+
+describe('useLunarCalendarValidation', () => {
+	describe('règle de format DD/MM/YYYY', () => {
+		it('ne retourne pas d\'erreur si la valeur est vide', async () => {
+			const modelValue = ref('')
+			const props = createProps()
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toHaveLength(0)
+		})
+
+		it('accepte une date au format DD/MM/YYYY', async () => {
+			const modelValue = ref('25/12/2000')
+			const props = createProps()
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toHaveLength(0)
+		})
+
+		it('retourne une erreur si le format est invalide', async () => {
+			const modelValue = ref('25122000')
+			const props = createProps()
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toContain('La date est invalide.')
+			expect(validation.hasError.value).toBe(true)
+		})
+
+		it('retourne une erreur si la date est incomplète', async () => {
+			const modelValue = ref('25/12/200')
+			const props = createProps()
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toContain('La date est invalide.')
+		})
+	})
+
+	describe('règle required', () => {
+		it('ne retourne pas d\'erreur si non requis et vide', async () => {
+			const modelValue = ref('')
+			const props = createProps({ required: false })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toHaveLength(0)
+		})
+
+		it('retourne une erreur si requis et vide', async () => {
+			const modelValue = ref('')
+			const props = createProps({ required: true, label: 'Date' })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toContain('Le champ Date est requis.')
+			expect(validation.hasError.value).toBe(true)
+		})
+
+		it('utilise le label dans le message d\'erreur', async () => {
+			const modelValue = ref('')
+			const props = createProps({ required: true, label: 'Date de naissance' })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toContain('Le champ Date de naissance est requis.')
+		})
+	})
+
+	describe('règle minYear', () => {
+		it('retourne une erreur si l\'année est inférieure à minYear', async () => {
+			const modelValue = ref('25/12/1999')
+			const props = createProps({ minYear: 2000 })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toContain('L\'année doit être supérieure ou égale à 2000.')
+			expect(validation.hasError.value).toBe(true)
+		})
+
+		it('accepte l\'année égale à minYear', async () => {
+			const modelValue = ref('25/12/2000')
+			const props = createProps({ minYear: 2000 })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toHaveLength(0)
+		})
+
+		it('accepte l\'année supérieure à minYear', async () => {
+			const modelValue = ref('25/12/2020')
+			const props = createProps({ minYear: 2000 })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toHaveLength(0)
+		})
+
+		it('ignore minYear si le format est invalide', async () => {
+			const modelValue = ref('invalid')
+			const props = createProps({ minYear: 2000 })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			// L'erreur de format est présente mais pas celle de minYear
+			expect(validation.errors.value).toContain('La date est invalide.')
+			expect(validation.errors.value).not.toContain('L\'année doit être supérieure ou égale à 2000.')
+		})
+	})
+
+	describe('règle maxYear', () => {
+		it('retourne une erreur si l\'année est supérieure à maxYear', async () => {
+			const modelValue = ref('25/12/2021')
+			const props = createProps({ maxYear: 2020 })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toContain('L\'année doit être inférieure ou égale à 2020.')
+			expect(validation.hasError.value).toBe(true)
+		})
+
+		it('accepte l\'année égale à maxYear', async () => {
+			const modelValue = ref('25/12/2020')
+			const props = createProps({ maxYear: 2020 })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toHaveLength(0)
+		})
+
+		it('accepte l\'année inférieure à maxYear', async () => {
+			const modelValue = ref('25/12/2010')
+			const props = createProps({ maxYear: 2020 })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toHaveLength(0)
+		})
+	})
+
+	describe('règles minYear ET maxYear combinées', () => {
+		it('retourne une erreur si l\'année est hors plage (inférieure)', async () => {
+			const modelValue = ref('25/12/1999')
+			const props = createProps({ minYear: 2000, maxYear: 2020 })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toContain('L\'année doit être comprise entre 2000 et 2020.')
+			expect(validation.hasError.value).toBe(true)
+		})
+
+		it('retourne une erreur si l\'année est hors plage (supérieure)', async () => {
+			const modelValue = ref('25/12/2021')
+			const props = createProps({ minYear: 2000, maxYear: 2020 })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toContain('L\'année doit être comprise entre 2000 et 2020.')
+			expect(validation.hasError.value).toBe(true)
+		})
+
+		it('accepte une date dans la plage', async () => {
+			const modelValue = ref('25/12/2010')
+			const props = createProps({ minYear: 2000, maxYear: 2020 })
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+
+			expect(validation.errors.value).toHaveLength(0)
+		})
+	})
+
+	describe('clearValidation', () => {
+		it('efface les erreurs après clearValidation', async () => {
+			const modelValue = ref('invalid')
+			const props = createProps()
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			await validation.validate()
+			await nextTick()
+			expect(validation.errors.value.length).toBeGreaterThan(0)
+
+			validation.clearValidation()
+			await nextTick()
+
+			expect(validation.errors.value).toHaveLength(0)
+			expect(validation.hasError.value).toBe(false)
+		})
+	})
+
+	describe('validate return value', () => {
+		it('retourne true si la validation réussit', async () => {
+			const modelValue = ref('25/12/2000')
+			const props = createProps()
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			const result = await validation.validate()
+
+			expect(result).toBe(true)
+		})
+
+		it('retourne false si la validation échoue', async () => {
+			const modelValue = ref('invalid')
+			const props = createProps()
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			const result = await validation.validate()
+
+			expect(result).toBe(false)
+		})
+	})
+
+	describe('focused ref', () => {
+		it('exposed focused ref', () => {
+			const modelValue = ref('')
+			const props = createProps()
+			const validation = useLunarCalendarValidation(modelValue, props)
+
+			expect(validation.focused).toBeDefined()
+			expect(validation.focused.value).toBe(false)
+		})
+	})
+})

package/src/components/LunarCalendar/types.ts

@@ -0,0 +1,39 @@
+import type { FieldValidationProps } from '@/composables/unifyValidation/useValidation'
+
+export type IconType = 'info' | 'success' | 'warning' | 'error' | 'close' | 'calendar' | undefined
+export type VariantStyle = 'outlined' | 'plain' | 'underlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled'
+export type ColorType = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error'
+export type DensityType = 'default' | 'comfortable' | 'compact'
+
+// On extrait modelValue car on utilise defineModel
+export type LunarCalendarProps = {
+	label: string
+	placeholder?: string
+	isClearable?: boolean
+	displayPrependIcon?: boolean
+	displayAppendIcon?: boolean
+	minYear?: number
+	maxYear?: number
+	// Props iso avec SyTextField
+	helpText?: string
+	noIcon?: boolean
+	displayAsterisk?: boolean
+	prependTooltip?: string
+	appendTooltip?: string
+	tooltipLocation?: 'top' | 'bottom' | 'start' | 'end'
+	variantStyle?: VariantStyle
+	color?: ColorType
+	density?: DensityType
+	loading?: boolean | string
+	hint?: string
+	bgColor?: string
+	baseColor?: string
+	counter?: string | number | boolean
+	id?: string
+	name?: string
+	autocomplete?: string
+	disabled?: boolean
+	readonly?: boolean
+	required?: boolean
+	hideDetails?: boolean | 'auto'
+} & Omit<FieldValidationProps, 'modelValue'>