@cnamts/synapse 1.0.26 → 1.1.0

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

@@ -0,0 +1,184 @@
+import { describe, it, expect } from 'vitest'
+import { ref } from 'vue'
+import { useLunarCalendarRules } from '../useLunarCalendarRules'
+
+function getRules(opts: {
+	successMessage?: string
+	required?: boolean
+	minYear?: number
+	maxYear?: number
+}) {
+	const { rules } = useLunarCalendarRules(
+		ref(opts.successMessage),
+		ref(opts.required),
+		ref(opts.minYear),
+		ref(opts.maxYear),
+	)
+	return rules.value
+}
+
+type CustomRule = { type: 'custom', options: { validate: (v: string) => boolean, message: string } }
+
+describe('useLunarCalendarRules', () => {
+	describe('règle required', () => {
+		it('n\'ajoute pas de règle required si required est false', () => {
+			const rules = getRules({ required: false })
+			expect(rules.some(r => r.type === 'required')).toBe(false)
+		})
+
+		it('ajoute une règle required si required est true', () => {
+			const rules = getRules({ required: true })
+			expect(rules.some(r => r.type === 'required')).toBe(true)
+		})
+
+		it('la règle required contient le bon message', () => {
+			const rules = getRules({ required: true })
+			const req = rules.find(r => r.type === 'required')
+			expect(req?.options.message).toBe('Ce champ est requis.')
+		})
+
+		it('la règle required contient le successMessage si fourni', () => {
+			const rules = getRules({ required: true, successMessage: 'Bravo' })
+			const req = rules.find(r => r.type === 'required')
+			expect(req?.options.successMessage).toBe('Bravo')
+		})
+	})
+
+	describe('règle format DD/MM/YYYY', () => {
+		it('valide une date au format DD/MM/YYYY', () => {
+			const rules = getRules({})
+			const fmt = rules.find(r => r.type === 'custom') as CustomRule
+			expect(fmt.options.validate('25/12/2000')).toBe(true)
+		})
+
+		it('rejette une date sans slashs', () => {
+			const rules = getRules({})
+			const fmt = rules.find(r => r.type === 'custom') as CustomRule
+			expect(fmt.options.validate('25122000')).toBe(false)
+		})
+
+		it('rejette une date incomplète', () => {
+			const rules = getRules({})
+			const fmt = rules.find(r => r.type === 'custom') as CustomRule
+			expect(fmt.options.validate('25/12/200')).toBe(false)
+		})
+
+		it('rejette une chaîne vide', () => {
+			const rules = getRules({})
+			const fmt = rules.find(r => r.type === 'custom') as CustomRule
+			expect(fmt.options.validate('')).toBe(false)
+		})
+	})
+
+	describe('règle minYear seulement', () => {
+		it('retourne true si le format est invalide (year null)', () => {
+			const rules = getRules({ minYear: 2000 })
+			const minRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(minRule.options.validate('invalid')).toBe(true)
+		})
+
+		it('retourne true si l\'année >= minYear', () => {
+			const rules = getRules({ minYear: 2000 })
+			const minRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(minRule.options.validate('25/12/2000')).toBe(true)
+		})
+
+		it('retourne false si l\'année < minYear', () => {
+			const rules = getRules({ minYear: 2000 })
+			const minRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(minRule.options.validate('25/12/1999')).toBe(false)
+		})
+
+		it('contient le bon message', () => {
+			const rules = getRules({ minYear: 2000 })
+			const minRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(minRule.options.message).toBe('L\'année doit être supérieure ou égale à 2000.')
+		})
+	})
+
+	describe('règle maxYear seulement', () => {
+		it('retourne true si le format est invalide (year null)', () => {
+			const rules = getRules({ maxYear: 2020 })
+			const maxRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(maxRule.options.validate('invalid')).toBe(true)
+		})
+
+		it('retourne true si l\'année <= maxYear', () => {
+			const rules = getRules({ maxYear: 2020 })
+			const maxRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(maxRule.options.validate('25/12/2020')).toBe(true)
+		})
+
+		it('retourne false si l\'année > maxYear', () => {
+			const rules = getRules({ maxYear: 2020 })
+			const maxRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(maxRule.options.validate('25/12/2021')).toBe(false)
+		})
+
+		it('contient le bon message', () => {
+			const rules = getRules({ maxYear: 2020 })
+			const maxRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(maxRule.options.message).toBe('L\'année doit être inférieure ou égale à 2020.')
+		})
+	})
+
+	describe('règle minYear ET maxYear', () => {
+		it('retourne true si le format est invalide (year null)', () => {
+			const rules = getRules({ minYear: 2000, maxYear: 2020 })
+			const rangeRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(rangeRule.options.validate('invalid')).toBe(true)
+		})
+
+		it('retourne true si l\'année est dans la plage', () => {
+			const rules = getRules({ minYear: 2000, maxYear: 2020 })
+			const rangeRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(rangeRule.options.validate('25/12/2010')).toBe(true)
+		})
+
+		it('retourne false si l\'année est avant minYear', () => {
+			const rules = getRules({ minYear: 2000, maxYear: 2020 })
+			const rangeRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(rangeRule.options.validate('25/12/1999')).toBe(false)
+		})
+
+		it('retourne false si l\'année est après maxYear', () => {
+			const rules = getRules({ minYear: 2000, maxYear: 2020 })
+			const rangeRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(rangeRule.options.validate('25/12/2021')).toBe(false)
+		})
+
+		it('contient le bon message', () => {
+			const rules = getRules({ minYear: 2000, maxYear: 2020 })
+			const rangeRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(rangeRule.options.message).toBe('L\'année doit être comprise entre 2000 et 2020.')
+		})
+	})
+
+	describe('getYearFromModel (via les règles)', () => {
+		it('retourne null si le modèle n\'a pas 3 parties', () => {
+			const rules = getRules({ minYear: 2000 })
+			const minRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(minRule.options.validate('25/12')).toBe(true)
+		})
+
+		it('retourne null si l\'année n\'a pas 4 chiffres', () => {
+			const rules = getRules({ minYear: 2000 })
+			const minRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(minRule.options.validate('25/12/200')).toBe(true)
+		})
+
+		it('retourne null si l\'année n\'est pas un nombre', () => {
+			const rules = getRules({ minYear: 2000 })
+			const minRule = rules.filter(r => r.type === 'custom')[1] as CustomRule
+			expect(minRule.options.validate('25/12/abcd')).toBe(true)
+		})
+	})
+
+	describe('aucune règle year si minYear et maxYear sont undefined', () => {
+		it('ne génère que 1 règle custom (format) sans min/max', () => {
+			const rules = getRules({})
+			const customRules = rules.filter(r => r.type === 'custom')
+			expect(customRules.length).toBe(1)
+		})
+	})
+})

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

@@ -0,0 +1,22 @@
+import MaintenancePage from '../MaintenancePage.vue'
+
+describe('MaintenancePage - Visual regression tests', () => {
+	it('displays the maintenance page by default', () => {
+		cy.mountWithVuetify(MaintenancePage)
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('maintenance-page-default', cy.get('.v-application'))
+	})
+
+	it('displays the maintenance page with custom content', () => {
+		cy.mountWithVuetify(MaintenancePage, {
+			props: {
+				pageTitle: 'Site en maintenance',
+				message: 'Nous effectuons des travaux de maintenance. Merci de réessayer plus tard.',
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('maintenance-page-custom', cy.get('.v-application'))
+	})
+})

package/src/components/MonthPicker/MonthPickerVisual/MonthSelector.vue

@@ -121,17 +121,17 @@
 
 .month-selector__month--selected {
 	/* stylelint-disable-next-line custom-property-pattern */
-	background-color: rgb(var(--v-theme-accentPrimary, 12, 65, 154));
+	background-color: rgb(var(--v-theme-primary, 12, 65, 154));
 	color: white;
 
 	&:hover {
 		/* stylelint-disable-next-line custom-property-pattern */
-		background-color: rgb(var(--v-theme-accentPrimaryContrasted, 7, 39, 92));
+		background-color: rgb(var(--v-theme-primaryVariant, 7, 39, 92));
 	}
 }
 
 .month-selector__month--active:focus {
 	/* stylelint-disable-next-line custom-property-pattern */
-	outline: 2px solid rgb(var(--v-theme-accentPrimary, 12, 65, 154));
+	outline: 2px solid rgb(var(--v-theme-primary, 12, 65, 154));
 }
 </style>

package/src/components/MonthPicker/MonthPickerVisual/VisualPickerFooter.vue

@@ -54,7 +54,7 @@
 
 	&:focus-visible {
 		/* stylelint-disable-next-line custom-property-pattern */
-		outline: 2px solid rgb(var(--v-theme-accentPrimary, 12, 65, 154));
+		outline: 2px solid rgb(var(--v-theme-primary, 12, 65, 154));
 	}
 }
 </style>

package/src/components/MonthPicker/MonthPickerVisual/VisualPickerHeader.vue

@@ -103,7 +103,7 @@
 .visual-picker-header {
 	padding-block: 16px;
 	background-color: rgb(var(--v-theme-primary, '12, 65, 154'));
-	color: rgb(var(--v-theme-textOnDark));
+	color: rgb(var(--v-theme-onPrimary));
 }
 
 .visual-picker-header__title {
@@ -143,7 +143,7 @@
 
 	&:focus-visible {
 		/* stylelint-disable-next-line custom-property-pattern */
-		outline: 2px solid rgb(var(--v-theme-accentPrimary, 12, 65, 154));
+		outline: 2px solid rgb(var(--v-theme-primary, 12, 65, 154));
 	}
 }
 </style>

package/src/components/MonthPicker/MonthPickerVisual/YearSelector.vue

@@ -132,7 +132,7 @@
 
 	&:hover {
 		/* stylelint-disable-next-line custom-property-pattern */
-		background-color: rgb(var(--v-theme-accentPrimaryContrasted, 7, 39, 92));
+		background-color: rgb(var(--v-theme-primaryVariant, 7, 39, 92));
 	}
 }
 

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

@@ -0,0 +1,37 @@
+import MonthPicker from '../MonthPicker.vue'
+
+describe('MonthPicker - Visual regression tests', () => {
+	it('displays the month picker by default', () => {
+		cy.mountWithVuetify(MonthPicker)
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('month-picker-default', cy.get('.v-text-field'))
+	})
+
+	it('displays the month picker with a value', () => {
+		cy.mountWithVuetify(MonthPicker, {
+			props: { modelValue: '03/2025' },
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('month-picker-with-value', cy.get('.v-text-field'))
+	})
+
+	it('displays the month picker in disabled state', () => {
+		cy.mountWithVuetify(MonthPicker, {
+			props: { disabled: true },
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('month-picker-disabled', cy.get('.v-text-field'))
+	})
+
+	it('displays the month picker in readonly state', () => {
+		cy.mountWithVuetify(MonthPicker, {
+			props: { readonly: true },
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('month-picker-readonly', cy.get('.v-text-field'))
+	})
+})

package/src/components/MonthPicker/tests/__snapshots__/MonthPicker.spec.ts.snap

@@ -2466,6 +2466,8 @@ exports[`mounthpicker > should render mounthpicker 1`] = `
             <!-- v-if -->
             <!-- v-if -->
             <!-- v-if -->
+            <!-- Boutons d'incrément custom (remplacent le spinner natif, perdu en type=text) -->
+            <!-- v-if -->
           </div>
           <div class="v-field__outline">
             <div class="v-field__outline__start"></div>