@cnamts/synapse 1.0.27 → 1.1.1

package/src/components/Customs/SyCheckbox/composables/useSyCheckboxValidation.ts

@@ -0,0 +1,105 @@
+import { computed, ref, toRef, type ComputedRef, type Ref } from 'vue'
+import { useValidation, type ValidationRule } from '@/composables/unifyValidation/useValidation'
+import type { SyCheckboxValidationProps } from '../types'
+
+export interface UseSyCheckboxValidationReturn {
+	validate: () => Promise<boolean>
+	validateOnSubmit: () => Promise<boolean>
+	clearValidation: () => void
+	errors: Ref<string[]>
+	warnings: Ref<string[]>
+	successes: Ref<string[]>
+	hasError: ComputedRef<boolean | undefined>
+	hasWarning: ComputedRef<boolean | undefined>
+	hasSuccess: ComputedRef<boolean | undefined>
+	defaultRules: ComputedRef<ValidationRule[]>
+	focused: Ref<boolean>
+}
+
+/**
+ * Composable de validation du composant SyCheckbox
+ *
+ * Version simplifiée du système unifié : pour une case à cocher, « required » signifie
+ * que la case doit être cochée (`value === true`). On utilise donc une règle `custom`
+ * plutôt que la règle `required` générique, qui considère `false` comme une valeur valide.
+ *
+ * @example
+ * const { validate, errors, hasError } = useSyCheckboxValidation(props, model, focused)
+ */
+export function useSyCheckboxValidation(
+	props: SyCheckboxValidationProps,
+	model: Ref<boolean | null>,
+	focused?: Ref<boolean>,
+): UseSyCheckboxValidationReturn {
+	const focusedRef = focused !== undefined ? focused : ref(false)
+
+	// « required » pour une case = doit être cochée (true)
+	const defaultRules = computed<ValidationRule[]>(() =>
+		props.required
+			? [{
+					type: 'custom',
+					options: {
+						validate: (value: unknown) => value === true,
+						message: `Le champ ${props.label || 'ce champ'} est requis.`,
+						fieldIdentifier: props.label,
+					},
+				}]
+			: [],
+	)
+
+	// Vuetify ne gère pas les messages de succès : on les désactive en mode Vuetify
+	const effectiveShowSuccessMessages = computed(() =>
+		props.useVuetifyValidation ? false : (props.showSuccessMessages ?? false),
+	)
+
+	const {
+		validate,
+		clearValidation,
+		errors,
+		warnings,
+		successes,
+		hasError,
+		hasWarning,
+		hasSuccess,
+	} = useValidation({
+		modelValue: model,
+		readonly: toRef(() => props.readonly ?? false),
+		disabled: toRef(() => props.disabled ?? false),
+		required: toRef(() => props.required ?? false),
+		isValidateOnBlur: toRef(() => props.isValidateOnBlur ?? false),
+		showSuccessMessages: effectiveShowSuccessMessages,
+		disableErrorHandling: toRef(() => props.disableErrorHandling ?? false),
+		useVuetifyValidation: toRef(() => props.useVuetifyValidation ?? false),
+		label: toRef(() => props.label ?? ''),
+		rules: toRef(() => props.rules),
+		customRules: computed(() => [...defaultRules.value, ...(props.customRules ?? [])]),
+		customWarningRules: toRef(() => props.customWarningRules ?? []),
+		customSuccessRules: toRef(() => props.customSuccessRules ?? []),
+		errorMessages: toRef(() => props.errorMessages ?? null),
+		warningMessages: toRef(() => props.warningMessages ?? null),
+		successMessages: toRef(() => props.successMessages ?? null),
+		hasErrorProp: toRef(() => props.hasError ?? false),
+		hasWarningProp: toRef(() => props.hasWarning ?? false),
+		hasSuccessProp: toRef(() => props.hasSuccess ?? false),
+		maxErrors: toRef(() => props.maxErrors ?? 1),
+		focused: focusedRef,
+	})
+
+	const validateOnSubmit = async (): Promise<boolean> => {
+		return await validate()
+	}
+
+	return {
+		validate,
+		validateOnSubmit,
+		clearValidation,
+		errors,
+		warnings,
+		successes,
+		hasError,
+		hasWarning,
+		hasSuccess,
+		defaultRules,
+		focused: focusedRef,
+	}
+}

package/src/components/Customs/SyCheckbox/tests/SyCheckbox.spec.ts

@@ -178,4 +178,110 @@ describe('SyCheckbox', () => {
 		await wrapper.find('.v-checkbox').trigger('click')
 		expect(wrapper.emitted('update:modelValue')).toBeFalsy()
 	})
+
+	it('affiche le helpText quand aucun message de validation n\'est présent', () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'CGU',
+				helpText: 'Texte d\'aide',
+			},
+		})
+
+		const help = wrapper.find('.help-text-below')
+		expect(help.exists()).toBe(true)
+		expect(help.text()).toContain('Texte d\'aide')
+	})
+
+	it('masque le helpText et affiche l\'erreur quand la validation échoue', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'CGU',
+				helpText: 'Texte d\'aide',
+				required: true,
+				modelValue: false,
+			},
+		})
+
+		await wrapper.vm.validateOnSubmit()
+		await nextTick()
+
+		expect(wrapper.find('.help-text-below').exists()).toBe(false)
+		expect(wrapper.find('.v-messages').text()).toContain('CGU est requis')
+	})
+
+	it('disableErrorHandling : aucune erreur affichée même si requis et décoché', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'CGU',
+				required: true,
+				disableErrorHandling: true,
+				modelValue: false,
+			},
+		})
+
+		const isValid = await wrapper.vm.validateOnSubmit()
+		await nextTick()
+
+		expect(isValid).toBe(true)
+		expect(wrapper.find('.error-field').exists()).toBe(false)
+		expect(wrapper.find('.v-messages__message').exists()).toBe(false)
+	})
+
+	it('affiche un message d\'avertissement via customWarningRules', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'CGU',
+				modelValue: false,
+				customWarningRules: [{
+					type: 'custom',
+					options: {
+						validate: (value: boolean) => value === true,
+						warningMessage: 'Avertissement de test',
+					},
+				}],
+			},
+		})
+
+		await wrapper.vm.validateOnSubmit()
+		await nextTick()
+
+		expect(wrapper.find('.warning-field').exists()).toBe(true)
+		expect(wrapper.find('.v-messages').text()).toContain('Avertissement de test')
+	})
+
+	it('affiche un message de succès via customSuccessRules et showSuccessMessages', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'CGU',
+				modelValue: true,
+				showSuccessMessages: true,
+				customSuccessRules: [{
+					type: 'custom',
+					options: {
+						validate: (value: boolean) => value === true,
+						successMessage: 'Succès de test',
+					},
+				}],
+			},
+		})
+
+		await wrapper.vm.validateOnSubmit()
+		await nextTick()
+
+		expect(wrapper.find('.success-field').exists()).toBe(true)
+		expect(wrapper.find('.v-messages').text()).toContain('Succès de test')
+	})
+
+	it('affiche les messages externes (errorMessages + hasError)', () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'CGU',
+				hasError: true,
+				errorMessages: ['Erreur externe'],
+			},
+		})
+
+		expect(wrapper.find('.error-field').exists()).toBe(true)
+		expect(wrapper.find('.v-messages').text()).toContain('Erreur externe')
+	})
 })

package/src/components/Customs/SyCheckbox/tests/SyCheckbox.visual.cy.ts

@@ -0,0 +1,61 @@
+import SyCheckbox from '../SyCheckbox.vue'
+
+describe('SyCheckbox - Visual regression tests', () => {
+	it('displays the checkbox unchecked by default', () => {
+		cy.mountWithVuetify(SyCheckbox, {
+			props: { label: 'J\'accepte les conditions' },
+		})
+
+		cy.get('.v-checkbox').should('be.visible')
+		cy.matchImageSnapshot('sy-checkbox-unchecked', cy.get('.v-checkbox'))
+	})
+
+	it('displays the checkbox checked', () => {
+		cy.mountWithVuetify(SyCheckbox, {
+			props: {
+				label: 'J\'accepte les conditions',
+				modelValue: true,
+			},
+		})
+
+		cy.get('.v-checkbox').should('be.visible')
+		cy.matchImageSnapshot('sy-checkbox-checked', cy.get('.v-checkbox'))
+	})
+
+	it('displays the checkbox in indeterminate state', () => {
+		cy.mountWithVuetify(SyCheckbox, {
+			props: {
+				label: 'Sélectionner tout',
+				indeterminate: true,
+			},
+		})
+
+		cy.get('.v-checkbox').should('be.visible')
+		cy.matchImageSnapshot('sy-checkbox-indeterminate', cy.get('.v-checkbox'))
+	})
+
+	it('displays the checkbox in disabled state', () => {
+		cy.mountWithVuetify(SyCheckbox, {
+			props: {
+				label: 'Option désactivée',
+				disabled: true,
+			},
+		})
+
+		cy.get('.v-checkbox').should('be.visible')
+		cy.matchImageSnapshot('sy-checkbox-disabled', cy.get('.v-checkbox'))
+	})
+
+	it('displays the checkbox as required', () => {
+		cy.mountWithVuetify(SyCheckbox, {
+			props: {
+				label: 'Champ obligatoire',
+				required: true,
+				displayAsterisk: true,
+			},
+		})
+
+		cy.get('.v-checkbox').should('be.visible')
+		cy.matchImageSnapshot('sy-checkbox-required', cy.get('.v-checkbox'))
+	})
+})

package/src/components/Customs/SyCheckbox/tests/useSyCheckboxValidation.spec.ts

@@ -0,0 +1,98 @@
+import { describe, it, expect } from 'vitest'
+import { defineComponent, ref, nextTick, type Ref } from 'vue'
+import { mount } from '@vue/test-utils'
+import { useSyCheckboxValidation, type UseSyCheckboxValidationReturn } from '../composables/useSyCheckboxValidation'
+import type { SyCheckboxValidationProps } from '../types'
+
+function createProps(overrides: Partial<SyCheckboxValidationProps> = {}): SyCheckboxValidationProps {
+	return {
+		label: 'Conditions générales',
+		required: false,
+		readonly: false,
+		disabled: false,
+		customRules: [],
+		customWarningRules: [],
+		customSuccessRules: [],
+		errorMessages: null,
+		warningMessages: null,
+		successMessages: null,
+		showSuccessMessages: false,
+		isValidateOnBlur: false,
+		...overrides,
+	}
+}
+
+// Exécute le composable dans un contexte de setup (requis par les composables Vuetify internes)
+function withValidation(props: SyCheckboxValidationProps, model: Ref<boolean | null>): UseSyCheckboxValidationReturn {
+	let result!: UseSyCheckboxValidationReturn
+	const Harness = defineComponent({
+		setup() {
+			result = useSyCheckboxValidation(props, model)
+			return () => null
+		},
+	})
+	mount(Harness)
+	return result
+}
+
+describe('useSyCheckboxValidation', () => {
+	describe('required (la case doit être cochée)', () => {
+		it('échoue quand la case est décochée', async () => {
+			const model = ref<boolean | null>(false)
+			const { validate, errors, hasError } = withValidation(createProps({ required: true }), model)
+
+			expect(await validate()).toBe(false)
+			await nextTick()
+			expect(hasError.value).toBe(true)
+			expect(errors.value.join(' ')).toContain('Conditions générales est requis')
+		})
+
+		it('réussit quand la case est cochée', async () => {
+			const model = ref<boolean | null>(true)
+			const { validate, hasError } = withValidation(createProps({ required: true }), model)
+
+			expect(await validate()).toBe(true)
+			await nextTick()
+			expect(hasError.value).toBeFalsy()
+		})
+	})
+
+	it('non requis : valide même décochée', async () => {
+		const model = ref<boolean | null>(false)
+		const { validate, hasError } = withValidation(createProps({ required: false }), model)
+
+		expect(await validate()).toBe(true)
+		expect(hasError.value).toBeFalsy()
+	})
+
+	it('customRules : la case doit être cochée', async () => {
+		const model = ref<boolean | null>(false)
+		const { validate, errors } = withValidation(
+			createProps({
+				customRules: [{
+					type: 'custom',
+					options: {
+						validate: (value: unknown) => value === true,
+						message: 'Doit être coché',
+					},
+				}],
+			}),
+			model,
+		)
+
+		expect(await validate()).toBe(false)
+		await nextTick()
+		expect(errors.value.join(' ')).toContain('Doit être coché')
+	})
+
+	it('disableErrorHandling : ne produit pas d\'erreur', async () => {
+		const model = ref<boolean | null>(false)
+		const { validate, hasError } = withValidation(
+			createProps({ required: true, disableErrorHandling: true }),
+			model,
+		)
+
+		expect(await validate()).toBe(true)
+		expect(hasError.value).toBeFalsy()
+	})
+})

package/src/components/Customs/SyCheckbox/types.ts

@@ -0,0 +1,51 @@
+import type { FieldValidationProps, ValidationRule, VuetifyValidationRule } from '@/composables/unifyValidation/useValidation'
+
+/**
+ * Props du composant SyCheckbox
+ */
+export interface SyCheckboxProps extends FieldValidationProps {
+	modelValue?: boolean | null
+	indeterminate?: boolean
+	label?: string
+	helpText?: string
+	ariaLabel?: string
+	ariaLabelledby?: string
+	title?: string
+	color?: string
+	hideDetails?: boolean | 'auto'
+	density?: 'default' | 'comfortable' | 'compact'
+	id?: string
+	name?: string
+	value?: unknown
+	trueValue?: unknown
+	falseValue?: unknown
+	controlsIds?: string[]
+	displayAsterisk?: boolean
+	decorative?: boolean
+}
+
+/**
+ * Props de validation passées au composable dédié
+ */
+export interface SyCheckboxValidationProps extends FieldValidationProps {
+	modelValue?: boolean | null
+	required?: boolean
+	readonly?: boolean
+	disabled?: boolean
+	label?: string
+	customRules?: ValidationRule[]
+	customWarningRules?: ValidationRule[]
+	customSuccessRules?: ValidationRule[]
+	isValidateOnBlur?: boolean
+	showSuccessMessages?: boolean
+	useVuetifyValidation?: boolean
+	rules?: VuetifyValidationRule[]
+	errorMessages?: string[] | null
+	warningMessages?: string[] | null
+	successMessages?: string[] | null
+	hasError?: boolean
+	hasWarning?: boolean
+	hasSuccess?: boolean
+	maxErrors?: number
+	disableErrorHandling?: boolean
+}

package/src/components/Customs/SyIcon/SyIcon.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+	import type { ComponentPublicInstance } from 'vue'
 	import type { IconValue } from 'vuetify/lib/composables/icons.mjs'
 	import { vRgaaSvgFix } from '@/directives/rgaaSvgFix'
-	import { computed, onMounted, watch } from 'vue'
+	import { computed, onMounted, onUpdated, ref, watch } from 'vue'
 
 	/**
 	 * Composant SyIcon - Affiche une icône avec gestion de l'accessibilité
@@ -32,6 +33,7 @@
 		autoDetectButton?: boolean
 		color?: string
 		size?: string
+		width?: string
 	}>()
 
 	const resolvedDecorative = computed(() => props.decorative ?? true)
@@ -45,11 +47,26 @@
 		}
 	})
 
+	const svg = ref<ComponentPublicInstance | null>(null)
+
 	// Vérification à l'initialisation du composant
 	onMounted(() => {
 		checkAccessibility(props.icon, resolvedDecorative.value, props.label)
+		setWidth()
 	})
 
+	onUpdated(setWidth)
+
+	function setWidth() {
+		if (svg.value && props.width) {
+			const iconElement = svg.value.$el?.querySelector('svg')
+
+			if (iconElement) {
+				iconElement.setAttribute('width', props.width)
+			}
+		}
+	}
+
 	// Vérification à chaque changement des props concernées
 	watch(
 		[() => props.decorative, () => props.label, () => props.icon],
@@ -65,6 +82,7 @@
 
 <template>
 	<v-icon
+		ref="svg"
 		v-rgaa-svg-fix="rgaaSvgFixConfig"
 		:color="props.color"
 		:size="props.size"

package/src/components/Customs/SyIcon/tests/SyIcon.visual.cy.ts

@@ -0,0 +1,83 @@
+import SyIcon from '../SyIcon.vue'
+import { mdiHome, mdiInformation, mdiStar, mdiAlert, mdiCheck, mdiPencil } from '@mdi/js'
+
+describe('SyIcon - Visual regression tests', () => {
+	it('displays a decorative icon by default', () => {
+		cy.mountWithVuetify(SyIcon, {
+			props: {
+				icon: mdiHome,
+				decorative: true,
+			},
+		})
+
+		cy.get('.v-icon').should('be.visible')
+		cy.matchImageSnapshot('sy-icon-decorative', cy.get('.v-icon'))
+	})
+
+	it('displays an informative icon with label', () => {
+		cy.mountWithVuetify(SyIcon, {
+			props: {
+				icon: mdiInformation,
+				decorative: false,
+				label: 'Information importante',
+			},
+		})
+
+		cy.get('.v-icon').should('be.visible')
+		cy.get('.v-icon').should('have.attr', 'aria-label', 'Information importante')
+		cy.matchImageSnapshot('sy-icon-informative', cy.get('.v-icon'))
+	})
+
+	it('hides a decorative icon from assistive tech (aria-hidden)', () => {
+		cy.mountWithVuetify(SyIcon, {
+			props: {
+				icon: mdiStar,
+				decorative: true,
+			},
+		})
+
+		cy.get('.v-icon').should('have.attr', 'aria-hidden', 'true')
+	})
+
+	it('displays an icon with a custom color', () => {
+		cy.mountWithVuetify(SyIcon, {
+			props: {
+				icon: mdiAlert,
+				decorative: true,
+				color: 'error',
+			},
+		})
+
+		cy.get('.v-icon').should('be.visible')
+		cy.matchImageSnapshot('sy-icon-color-error', cy.get('.v-icon'))
+	})
+
+	it('displays an icon with size large', () => {
+		cy.mountWithVuetify(SyIcon, {
+			props: {
+				icon: mdiCheck,
+				decorative: true,
+				size: 'large',
+			},
+		})
+
+		cy.get('.v-icon').should('be.visible')
+		cy.matchImageSnapshot('sy-icon-size-large', cy.get('.v-icon'))
+	})
+
+	it('displays an icon with role button', () => {
+		cy.mountWithVuetify(SyIcon, {
+			props: {
+				icon: mdiPencil,
+				decorative: false,
+				label: 'Éditer',
+				role: 'button',
+			},
+		})
+
+		cy.get('.v-icon').should('be.visible')
+		cy.get('.v-icon').should('have.attr', 'role', 'button')
+		cy.get('.v-icon').should('have.attr', 'aria-label', 'Éditer')
+		cy.matchImageSnapshot('sy-icon-role-button', cy.get('.v-icon'))
+	})
+})

package/src/components/Customs/SyIconButton/tests/SyIconButton.visual.cy.ts

@@ -0,0 +1,55 @@
+import SyIconButton from '../SyIconButton.vue'
+import { mdiPencil, mdiDelete, mdiPlus } from '@mdi/js'
+
+describe('SyIconButton - Visual regression tests', () => {
+	it('displays the icon button by default', () => {
+		cy.mountWithVuetify(SyIconButton, {
+			props: {
+				icon: mdiPencil,
+				label: 'Modifier',
+			},
+		})
+
+		cy.get('.v-btn').should('be.visible')
+		cy.matchImageSnapshot('sy-icon-button-default', cy.get('.v-btn'))
+	})
+
+	it('displays the icon button with primary color', () => {
+		cy.mountWithVuetify(SyIconButton, {
+			props: {
+				icon: mdiDelete,
+				label: 'Supprimer',
+				color: 'error',
+			},
+		})
+
+		cy.get('.v-btn').should('be.visible')
+		cy.matchImageSnapshot('sy-icon-button-error', cy.get('.v-btn'))
+	})
+
+	it('displays the icon button in large size', () => {
+		cy.mountWithVuetify(SyIconButton, {
+			props: {
+				icon: mdiPlus,
+				label: 'Ajouter',
+				size: 'large',
+			},
+		})
+
+		cy.get('.v-btn').should('be.visible')
+		cy.matchImageSnapshot('sy-icon-button-large', cy.get('.v-btn'))
+	})
+
+	it('displays the icon button in disabled state', () => {
+		cy.mountWithVuetify(SyIconButton, {
+			props: {
+				icon: mdiPencil,
+				label: 'Modifier',
+				disabled: true,
+			},
+		})
+
+		cy.get('.v-btn').should('be.visible')
+		cy.matchImageSnapshot('sy-icon-button-disabled', cy.get('.v-btn'))
+	})
+})

package/src/components/Customs/SyPagination/tests/SyPagination.visual.cy.ts

@@ -0,0 +1,40 @@
+import SyPagination from '../SyPagination.vue'
+
+describe('SyPagination - Visual regression tests', () => {
+	it('displays pagination on first page', () => {
+		cy.mountWithVuetify(SyPagination, {
+			props: {
+				modelValue: 1,
+				pages: 10,
+			},
+		})
+
+		cy.get('.sy-pagination').should('be.visible')
+		cy.matchImageSnapshot('sy-pagination-first-page', cy.get('.sy-pagination'))
+	})
+
+	it('displays pagination on middle page', () => {
+		cy.mountWithVuetify(SyPagination, {
+			props: {
+				modelValue: 5,
+				pages: 10,
+			},
+		})
+
+		cy.get('.sy-pagination').should('be.visible')
+		cy.matchImageSnapshot('sy-pagination-middle-page', cy.get('.sy-pagination'))
+	})
+
+	it('displays pagination with label', () => {
+		cy.mountWithVuetify(SyPagination, {
+			props: {
+				modelValue: 1,
+				pages: 5,
+				label: 'Navigation des pages',
+			},
+		})
+
+		cy.get('.sy-pagination').should('be.visible')
+		cy.matchImageSnapshot('sy-pagination-with-label', cy.get('.sy-pagination'))
+	})
+})