@cnamts/synapse 1.0.26 → 1.1.0

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

@@ -2,6 +2,7 @@ import SyRadioGroup from '../SyRadioGroup.vue'
 import { mount } from '@vue/test-utils'
 import { describe, it, expect } from 'vitest'
 import { nextTick } from 'vue'
+import type { ValidationRule } from '@/composables/unifyValidation/useValidation'
 
 describe('SyRadioGroup', () => {
 	it('should render correctly', () => {
@@ -19,15 +20,16 @@ describe('SyRadioGroup', () => {
 		expect(wrapper.text()).toContain('Test radio group')
 		expect(wrapper.findAll('input[type="radio"]').length).toBe(2)
 	})
+
 	it('should handle v-model correctly', async () => {
 		const wrapper = mount(SyRadioGroup, {
 			props: {
 				'modelValue': null,
+				'label': 'Test Radio',
 				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
 				'options': [
 					{ label: 'Option A', value: 'A' },
 					{ label: 'Option B', value: 'B' },
-
 				],
 			},
 		})
@@ -71,13 +73,14 @@ describe('SyRadioGroup', () => {
 		// Valider à nouveau
 		const isValidAfter = await wrapper.vm.validateOnSubmit()
 		expect(isValidAfter).toBe(true)
-		expect(wrapper.vm.modelValue).toBe('X')
+		expect(wrapper.props('modelValue')).toBe('X')
 	})
 
 	it('should handle readonly and disabled states', async () => {
 		const wrapper = mount(SyRadioGroup, {
 			props: {
 				modelValue: null,
+				label: 'Readonly Radio',
 				readonly: true,
 				options: [{ label: 'X', value: 'X' }],
 			},
@@ -94,11 +97,10 @@ describe('SyRadioGroup', () => {
 	})
 
 	it('should handle custom validation rules', async () => {
-		const customRule = {
+		const customRule: ValidationRule = {
 			type: 'custom',
 			options: {
-				// La fonction de validation personnalisée doit être définie dans options.validate
-				validate: (value: unknown) => value === 'OK', // type générique unknown
+				validate: (value: unknown) => value === 'OK',
 				message: 'Vous devez sélectionner une option.',
 				fieldIdentifier: 'Custom Radio',
 			},
@@ -107,13 +109,14 @@ describe('SyRadioGroup', () => {
 		const wrapper = mount(SyRadioGroup, {
 			props: {
 				'modelValue': null,
+				'label': 'Custom Rules Radio',
 				'required': true,
 				'customRules': [customRule],
 				'isValidateOnBlur': false,
 				'options': [
 					{ label: 'Non', value: 'NO' },
 					{ label: 'Oui', value: 'OK' },
-					{ label: 'Peut-être', value: 42 }, // exemple valeur non-string
+					{ label: 'Peut-être', value: 42 },
 				],
 				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
 			},
@@ -122,14 +125,148 @@ describe('SyRadioGroup', () => {
 		// Validation initiale : aucune option sélectionnée
 		const isValidInitial = await wrapper.vm.validateOnSubmit()
 		expect(isValidInitial).toBe(false)
-		expect(wrapper.vm.validation.errors.value).toContain('Vous devez sélectionner une option.')
 
-		// Sélectionner l’option correcte
+		// Vérifier visuellement le message d'erreur
+		await nextTick()
+		const errorMessages = wrapper.findAll('.v-messages__message')
+		expect(errorMessages.length).toBeGreaterThan(0)
+
+		// Sélectionner l'option correcte
 		await wrapper.setProps({ modelValue: 'OK' })
+		await nextTick()
 
 		// Validation après sélection
 		const isValidCorrect = await wrapper.vm.validateOnSubmit()
 		expect(isValidCorrect).toBe(true)
-		expect(wrapper.vm.validation.errors.value).toHaveLength(0)
+	})
+
+	it('should display asterisk when displayAsterisk is true and required', () => {
+		const wrapper = mount(SyRadioGroup, {
+			props: {
+				label: 'Required Field',
+				required: true,
+				displayAsterisk: true,
+				options: [{ label: 'X', value: 'X' }],
+			},
+		})
+
+		expect(wrapper.text()).toContain('Required Field *')
+	})
+
+	it('should not display asterisk when displayAsterisk is false', () => {
+		const wrapper = mount(SyRadioGroup, {
+			props: {
+				label: 'Required Field',
+				required: true,
+				displayAsterisk: false,
+				options: [{ label: 'X', value: 'X' }],
+			},
+		})
+
+		expect(wrapper.text()).toContain('Required Field')
+		expect(wrapper.text()).not.toContain('Required Field *')
+	})
+
+	it('should handle external error messages', async () => {
+		const wrapper = mount(SyRadioGroup, {
+			props: {
+				label: 'Radio Group',
+				options: [{ label: 'X', value: 'X' }],
+				errorMessages: ['Erreur externe'],
+			},
+		})
+
+		await nextTick()
+		const errorMessages = wrapper.findAll('.v-messages__message')
+		expect(errorMessages.length).toBeGreaterThan(0)
+		expect(errorMessages[0]?.text()).toContain('Erreur externe')
+	})
+
+	it('should handle warning and success rules', async () => {
+		const warningRule: ValidationRule = {
+			type: 'custom',
+			options: {
+				validate: (value: unknown) => value === 'A' || value === 'a',
+				fieldIdentifier: 'Warning Field',
+			},
+		}
+
+		const successRule: ValidationRule = {
+			type: 'custom',
+			options: {
+				validate: (value: unknown) => value === 'A',
+				successMessage: 'Bonne sélection !',
+				fieldIdentifier: 'Success Field',
+			},
+		}
+
+		const wrapper = mount(SyRadioGroup, {
+			props: {
+				'modelValue': null,
+				'label': 'Warning/Success Rules Radio',
+				'customWarningRules': [warningRule],
+				'customSuccessRules': [successRule],
+				'showSuccessMessages': true,
+				'isValidateOnBlur': false,
+				'options': [
+					{ label: 'Option A', value: 'A' },
+					{ label: 'Option B', value: 'B' },
+				],
+				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
+			},
+		})
+
+		// Sélectionner l'option A
+		await wrapper.setProps({ modelValue: 'A' })
+		await nextTick()
+		await wrapper.vm.validateOnSubmit()
+		await nextTick()
+
+		// Vérifier que la validation fonctionne
+		const isValid = await wrapper.vm.validateOnSubmit()
+		expect(isValid).toBe(true)
+	})
+
+	it('should validate on selection change when isValidateOnBlur is false', async () => {
+		const wrapper = mount(SyRadioGroup, {
+			props: {
+				'modelValue': null,
+				'label': 'Validate On Change Radio',
+				'required': true,
+				'isValidateOnBlur': false,
+				'options': [
+					{ label: 'Option A', value: 'A' },
+				],
+				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
+			},
+		})
+
+		// La validation devrait se déclencher lors du changement de valeur
+		await wrapper.setProps({ modelValue: 'A' })
+		await nextTick()
+
+		const isValid = await wrapper.vm.validateOnSubmit()
+		expect(isValid).toBe(true)
+	})
+
+	it('should handle useVuetifyValidation mode', async () => {
+		const wrapper = mount(SyRadioGroup, {
+			props: {
+				'modelValue': null,
+				'label': 'Vuetify Validation Radio',
+				'useVuetifyValidation': true,
+				'rules': [
+					(v: string | null) => !!v || 'Sélection requise',
+				],
+				'options': [
+					{ label: 'Option A', value: 'A' },
+				],
+				'onUpdate:modelValue': e => wrapper.setProps({ modelValue: e }),
+			},
+		})
+
+		// Validation doit fonctionner en mode Vuetify
+		const isValid = await wrapper.vm.validateOnSubmit()
+		expect(typeof isValid).toBe('boolean')
 	})
 })

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

@@ -0,0 +1,165 @@
+import SyRadioGroup from '../SyRadioGroup.vue'
+
+const defaultOptions = [
+	{ label: 'Option A', value: 'A' },
+	{ label: 'Option B', value: 'B' },
+	{ label: 'Option C', value: 'C' },
+]
+
+describe('SyRadioGroup - Visual regression tests', () => {
+	it('displays the radio group by default', () => {
+		cy.mountWithVuetify(SyRadioGroup, {
+			props: {
+				label: 'Test Radio Group',
+				options: defaultOptions,
+			},
+		})
+
+		cy.get('.v-radio-group').should('be.visible')
+		cy.matchImageSnapshot('sy-radio-group-default', cy.get('.v-radio-group'))
+	})
+
+	it('displays the radio group with a selected value', () => {
+		cy.mountWithVuetify(SyRadioGroup, {
+			props: {
+				label: 'Test Radio Group',
+				modelValue: 'B',
+				options: defaultOptions,
+			},
+		})
+
+		cy.get('.v-radio-group').should('be.visible')
+		cy.matchImageSnapshot('sy-radio-group-selected', cy.get('.v-radio-group'))
+	})
+
+	it('displays the radio group in error state', () => {
+		cy.mountWithVuetify(SyRadioGroup, {
+			props: {
+				label: 'Required Radio Group',
+				required: true,
+				options: defaultOptions,
+				hasError: true,
+				errorMessages: ['Ce champ est requis.'],
+			},
+		})
+
+		cy.get('.v-radio-group').should('be.visible')
+		cy.get('.v-radio-group').should('have.class', 'error-field')
+		cy.matchImageSnapshot('sy-radio-group-error', cy.get('.v-radio-group'))
+	})
+
+	it('displays the radio group in warning state', () => {
+		cy.mountWithVuetify(SyRadioGroup, {
+			props: {
+				label: 'Radio Group with Warning',
+				options: defaultOptions,
+				hasWarning: true,
+				warningMessages: ['This is a warning message'],
+				showSuccessMessages: true,
+			},
+		})
+
+		cy.get('.v-radio-group').should('be.visible')
+		cy.get('.v-radio-group').should('have.class', 'warning-field')
+		cy.matchImageSnapshot('sy-radio-group-warning', cy.get('.v-radio-group'))
+	})
+
+	it('displays the radio group in success state', () => {
+		cy.mountWithVuetify(SyRadioGroup, {
+			props: {
+				label: 'Radio Group with Success',
+				options: defaultOptions,
+				modelValue: 'A',
+				required: true,
+				hasSuccess: true,
+				showSuccessMessages: true,
+				successMessages: ['Sélection valide.'],
+			},
+		})
+
+		cy.get('.v-radio-group').should('be.visible')
+		cy.get('.v-radio-group').should('have.class', 'success-field')
+		cy.matchImageSnapshot('sy-radio-group-success', cy.get('.v-radio-group'))
+	})
+
+	it('displays the radio group when disabled', () => {
+		cy.mountWithVuetify(SyRadioGroup, {
+			props: {
+				label: 'Disabled Radio Group',
+				options: defaultOptions,
+				modelValue: 'B',
+				disabled: true,
+			},
+		})
+
+		cy.get('.v-radio-group').should('be.visible')
+		cy.matchImageSnapshot('sy-radio-group-disabled', cy.get('.v-radio-group'))
+	})
+
+	it('displays the radio group when readonly', () => {
+		cy.mountWithVuetify(SyRadioGroup, {
+			props: {
+				label: 'Readonly Radio Group',
+				options: defaultOptions,
+				modelValue: 'B',
+				readonly: true,
+			},
+		})
+
+		cy.get('.v-radio-group').should('be.visible')
+		cy.matchImageSnapshot('sy-radio-group-readonly', cy.get('.v-radio-group'))
+	})
+
+	it('displays the radio group with compact density', () => {
+		cy.mountWithVuetify(SyRadioGroup, {
+			props: {
+				label: 'Compact Radio Group',
+				options: defaultOptions,
+				density: 'compact',
+			},
+		})
+
+		cy.get('.v-radio-group').should('be.visible')
+		cy.matchImageSnapshot('sy-radio-group-compact', cy.get('.v-radio-group'))
+	})
+
+	it('displays the radio group with comfortable density', () => {
+		cy.mountWithVuetify(SyRadioGroup, {
+			props: {
+				label: 'Comfortable Radio Group',
+				options: defaultOptions,
+				density: 'comfortable',
+			},
+		})
+
+		cy.get('.v-radio-group').should('be.visible')
+		cy.matchImageSnapshot('sy-radio-group-comfortable', cy.get('.v-radio-group'))
+	})
+
+	it('displays the radio group with asterisk', () => {
+		cy.mountWithVuetify(SyRadioGroup, {
+			props: {
+				label: 'Required Radio Group',
+				options: defaultOptions,
+				required: true,
+				displayAsterisk: true,
+			},
+		})
+
+		cy.get('.v-radio-group').should('be.visible')
+		cy.matchImageSnapshot('sy-radio-group-asterisk', cy.get('.v-radio-group'))
+	})
+
+	it('displays the radio group without details', () => {
+		cy.mountWithVuetify(SyRadioGroup, {
+			props: {
+				label: 'Radio Group without details',
+				options: defaultOptions,
+				hideDetails: true,
+			},
+		})
+
+		cy.get('.v-radio-group').should('be.visible')
+		cy.matchImageSnapshot('sy-radio-group-no-details', cy.get('.v-radio-group'))
+	})
+})