@cnamts/synapse 1.0.26 → 1.1.0

package/src/components/Customs/Selects/SySelect/tests/SySelect.spec.ts

@@ -640,7 +640,7 @@ describe('SySelect.vue', () => {
 				wrapper.unmount()
 			})
 
-			it('ignore les errorMessages quand disableErrorHandling est true', () => {
+			it('Surcharge les errorMessages quand disableErrorHandling est true et que des messages sont passes', () => {
 				const wrapper = mount(SySelect, {
 					props: {
 						errorMessages: ['Erreur forcée'],
@@ -651,8 +651,8 @@ describe('SySelect.vue', () => {
 
 				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 				const instance = wrapper.vm as any
-				expect(instance.hasError).toBe(false)
-				expect(wrapper.find('.v-messages__message').exists()).toBe(false)
+				expect(instance.hasError).toBe(true)
+				expect(wrapper.find('.v-messages__message').exists()).toBe(true)
 
 				wrapper.unmount()
 			})
@@ -783,6 +783,202 @@ describe('SySelect.vue', () => {
 
 			wrapper.unmount()
 		})
+
+		it('ne valide pas lors d\'un changement de valeur mais seulement à la fermeture du menu quand isValidateOnBlur est true', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					items: [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					],
+					label: 'Test Label',
+					modelValue: undefined,
+					isValidateOnBlur: true,
+					customRules: [{
+						type: 'custom',
+						options: {
+							validate: (value: unknown) => value === '2',
+							message: 'Test error message',
+						},
+					}],
+				},
+				attachTo: document.body,
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+			expect(instance.hasError).toBe(false)
+
+			// Changement de valeur programmatique — l'erreur ne doit PAS apparaître
+			await wrapper.setProps({ modelValue: '1' })
+			await wrapper.vm.$nextTick()
+			expect(instance.hasError).toBe(false)
+
+			// Ouverture puis fermeture du menu (= blur) — l'erreur doit apparaître
+			await wrapper.find('.v-field').trigger('click')
+			await wrapper.vm.$nextTick()
+			await wrapper.find('.v-field').trigger('click')
+			await wrapper.vm.$nextTick()
+
+			await vi.waitUntil(() => instance.hasError === true)
+			expect(wrapper.find('.v-messages').text()).toContain('Test error message')
+
+			wrapper.unmount()
+		})
+
+		it('déclenche la validation au blur natif sans ouvrir le menu', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					required: true,
+					label: 'Test Label',
+					modelValue: undefined,
+					items: [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					],
+				},
+				attachTo: document.body,
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+			expect(instance.hasError).toBe(false)
+
+			// Simuler un blur natif sur l'input sans jamais ouvrir le menu
+			const input = wrapper.find('input')
+			await input.trigger('blur')
+			await wrapper.vm.$nextTick()
+
+			await vi.waitUntil(() => instance.hasError === true)
+			expect(wrapper.find('.v-messages').text()).toContain('requis')
+
+			wrapper.unmount()
+		})
+
+		it('affiche un avertissement avec customWarningRules', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					items: [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					],
+					label: 'Test Label',
+					modelValue: undefined,
+					isValidateOnBlur: false,
+					customWarningRules: [{
+						type: 'custom',
+						options: {
+							validate: (value: unknown) => value === '2',
+							warningMessage: 'Option 1 est dépréciée.',
+						},
+					}],
+				},
+				attachTo: document.body,
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+			expect(instance.hasWarning).toBe(false)
+
+			await wrapper.find('.v-field').trigger('click')
+			await wrapper.vm.$nextTick()
+			await wrapper.findComponent(VList).findAll('.v-list-item').at(0)!.trigger('click')
+			await wrapper.setProps({ modelValue: '1' })
+
+			await vi.waitUntil(() => instance.hasWarning === true)
+			expect(wrapper.find('.v-messages').text()).toContain('Option 1 est dépréciée.')
+
+			wrapper.unmount()
+		})
+
+		it('validateOnSubmit retourne true quand le champ est valide', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					required: true,
+					label: 'Test Label',
+					modelValue: '1',
+					items: [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					],
+				},
+				attachTo: document.body,
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const isValid = await (wrapper.vm as any).validateOnSubmit()
+			await nextTick()
+
+			expect(isValid).toBe(true)
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			expect((wrapper.vm as any).hasError).toBe(false)
+
+			wrapper.unmount()
+		})
+
+		it('affiche le message de succès avec customSuccessRules quand showSuccessMessages est true', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					items: [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					],
+					label: 'Test Label',
+					modelValue: undefined,
+					isValidateOnBlur: false,
+					showSuccessMessages: true,
+					customSuccessRules: [{
+						type: 'custom',
+						options: {
+							validate: (value: unknown) => value === '2',
+							successMessage: 'Test success message',
+						},
+					}],
+				},
+				attachTo: document.body,
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+			expect(instance.hasSuccess).toBe(false)
+
+			await wrapper.setProps({ modelValue: '2' })
+
+			await vi.waitUntil(() => instance.hasSuccess === true)
+			expect(wrapper.find('.success-field').exists()).toBe(true)
+			expect(wrapper.find('.v-messages').text()).toContain('Test success message')
+
+			wrapper.unmount()
+		})
+
+		it('clearValidation remet l\'état d\'erreur à zéro', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					required: true,
+					label: 'Test Label',
+					modelValue: undefined,
+					items: [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					],
+				},
+				attachTo: document.body,
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+
+			await instance.validateOnSubmit()
+			await nextTick()
+			expect(instance.hasError).toBe(true)
+
+			instance.clearValidation()
+			await nextTick()
+			expect(instance.hasError).toBe(false)
+			expect(wrapper.find('.v-messages__message').exists()).toBe(false)
+
+			wrapper.unmount()
+		})
 	})
 
 	describe('Comportement du menu', () => {

package/src/components/Customs/Selects/SySelect/tests/SySelect.visual.cy.ts

@@ -0,0 +1,77 @@
+import SySelect from '../SySelect.vue'
+
+const defaultItems = [
+	{ text: 'Option A', value: 'a' },
+	{ text: 'Option B', value: 'b' },
+	{ text: 'Option C', value: 'c' },
+]
+
+describe('SySelect - Visual regression tests', () => {
+	it('displays the select by default', () => {
+		cy.mountWithVuetify(SySelect, {
+			props: {
+				items: defaultItems,
+				label: 'Choisir une option',
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('sy-select-default', cy.get('.v-text-field'))
+	})
+
+	it('displays the select with a selected value', () => {
+		cy.mountWithVuetify(SySelect, {
+			props: {
+				items: defaultItems,
+				label: 'Choisir une option',
+				modelValue: 'b',
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('sy-select-with-value', cy.get('.v-text-field'))
+	})
+
+	it('displays the select as required', () => {
+		cy.mountWithVuetify(SySelect, {
+			props: {
+				items: defaultItems,
+				label: 'Choisir une option',
+				required: true,
+				displayAsterisk: true,
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('sy-select-required', cy.get('.v-text-field'))
+	})
+
+	it('displays the select with multiple selection and chips', () => {
+		cy.mountWithVuetify(SySelect, {
+			props: {
+				items: defaultItems,
+				label: 'Choisir plusieurs options',
+				multiple: true,
+				chips: true,
+				modelValue: ['a', 'c'],
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('sy-select-multiple-chips', cy.get('.v-text-field'))
+	})
+
+	it('displays the select with clearable option', () => {
+		cy.mountWithVuetify(SySelect, {
+			props: {
+				items: defaultItems,
+				label: 'Choisir une option',
+				clearable: true,
+				modelValue: 'a',
+			},
+		})
+
+		cy.get('.v-text-field').should('be.visible')
+		cy.matchImageSnapshot('sy-select-clearable', cy.get('.v-text-field'))
+	})
+})