@cnamts/synapse 1.0.27 → 1.1.1

package/src/components/Captcha/tests/Captcha.focus.spec.ts

@@ -0,0 +1,214 @@
+import { describe, expect, it } from 'vitest'
+import { defineComponent } from 'vue'
+import { mount } from '@vue/test-utils'
+import Captcha from '../Captcha.vue'
+
+const CaptchaBaseStub = {
+	name: 'CaptchaBase',
+	emits: ['update:modelValue', 'create-captcha:init', 'create-captcha:success', 'create-captcha:error'],
+	template: `
+		<div>
+			<button class="change-type" @click="$emit('update:modelValue', 'audio')" />
+			<button class="refresh-captcha" @click="$emit('create-captcha:init')" />
+			<button class="captcha-success" @click="$emit('create-captcha:success', 'captcha-id-1')" />
+			<slot
+				name="image"
+				:choose-image="() => {}"
+				:choose-audio="() => {}"
+				:url="''"
+				:state="'idle'"
+				:is-error="false"
+				:error-message="null"
+			/>
+		</div>
+	`,
+}
+
+const CaptchaFormStub = {
+	name: 'CaptchaForm',
+	emits: ['update:modelValue'],
+	template: '<div class="captcha-form-stub" />',
+}
+
+const CaptchaFormWithFocusStub = defineComponent({
+	name: 'CaptchaForm',
+	props: {
+		errorMessages: { type: Array, default: () => [] },
+	},
+	emits: ['update:modelValue', 'focus', 'blur'],
+	template: '<div class="captcha-form-stub" />',
+})
+
+describe('Captcha behavior', () => {
+	it('emits update:type when captcha type changes from CaptchaBase', async () => {
+		const wrapper = mount(Captcha, {
+			props: {
+				urlCreate: '/captcha/captcha.json',
+				urlGetImage: '/captcha/captcha.png',
+				urlGetAudio: '/captcha/captcha.mp3',
+				type: 'image',
+			},
+			global: {
+				stubs: {
+					CaptchaInformation: true,
+					CaptchaBase: CaptchaBaseStub,
+					CaptchaImg: true,
+					CaptchaAlert: true,
+					CaptchaBtn: true,
+					CaptchaHelpdesk: true,
+					CaptchaForm: CaptchaFormStub,
+					volumeUp: true,
+					SyIcon: true,
+					VBtn: true,
+				},
+			},
+		})
+
+		await wrapper.find('.change-type').trigger('click')
+
+		expect(wrapper.emitted('update:type')).toBeTruthy()
+		expect(wrapper.emitted('update:type')?.[0]).toEqual(['audio'])
+	})
+
+	it('clears captcha text when a new captcha is initialized', async () => {
+		const wrapper = mount(Captcha, {
+			props: {
+				urlCreate: '/captcha/captcha.json',
+				urlGetImage: '/captcha/captcha.png',
+				urlGetAudio: '/captcha/captcha.mp3',
+			},
+			global: {
+				stubs: {
+					CaptchaInformation: true,
+					CaptchaBase: CaptchaBaseStub,
+					CaptchaImg: true,
+					CaptchaAlert: true,
+					CaptchaBtn: true,
+					CaptchaHelpdesk: true,
+					CaptchaForm: CaptchaFormStub,
+					volumeUp: true,
+					SyIcon: true,
+					VBtn: true,
+				},
+			},
+		})
+
+		// Complete the initial captcha load so subsequent refreshes work
+		await wrapper.find('.captcha-success').trigger('click')
+
+		const form = wrapper.findComponent(CaptchaFormStub)
+		await form.vm.$emit('update:modelValue', 'captcha-text')
+		await wrapper.find('.refresh-captcha').trigger('click')
+
+		const modelEvents = wrapper.emitted('update:modelValue') || []
+		expect(modelEvents.length).toBeGreaterThanOrEqual(2)
+		expect(modelEvents[0]).toEqual(['captcha-text'])
+		expect(modelEvents[modelEvents.length - 1]).toEqual([''])
+	})
+
+	it('does not clear validation errors when the first captcha loads after a blur', async () => {
+		const commonStubs = {
+			CaptchaInformation: true,
+			CaptchaBase: CaptchaBaseStub,
+			CaptchaImg: true,
+			CaptchaAlert: true,
+			CaptchaBtn: true,
+			CaptchaHelpdesk: true,
+			CaptchaForm: CaptchaFormWithFocusStub,
+			volumeUp: true,
+			SyIcon: true,
+			VBtn: true,
+		}
+
+		const wrapper = mount(Captcha, {
+			props: {
+				urlCreate: '/captcha/captcha.json',
+				urlGetImage: '/captcha/captcha.png',
+				urlGetAudio: '/captcha/captcha.mp3',
+				customRules: [
+					{
+						type: 'custom' as const,
+						options: {
+							validate: (v: unknown) => v ? true : 'Le captcha est requis',
+						},
+					},
+				],
+			},
+			global: { stubs: commonStubs },
+		})
+
+		// Simulate: user focuses and blurs without entering a value (triggers validation)
+		const form = wrapper.findComponent(CaptchaFormWithFocusStub)
+		await form.vm.$emit('focus')
+		await form.vm.$emit('blur')
+
+		// Wait for async validation to complete
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		// Errors should now be set
+		const errorsBeforeSuccess = form.props('errorMessages') as string[]
+		expect(errorsBeforeSuccess).toContain('Le captcha est requis')
+
+		// Simulate: first captcha load completes (race condition – used to clear validation)
+		await wrapper.find('.captcha-success').trigger('click')
+		await wrapper.vm.$nextTick()
+
+		// Errors must still be present – first create-captcha:success must NOT clear validation
+		const errorsAfterFirstSuccess = form.props('errorMessages') as string[]
+		expect(errorsAfterFirstSuccess).toContain('Le captcha est requis')
+	})
+
+	it('clears validation errors when the captcha is refreshed after a blur', async () => {
+		const commonStubs = {
+			CaptchaInformation: true,
+			CaptchaBase: CaptchaBaseStub,
+			CaptchaImg: true,
+			CaptchaAlert: true,
+			CaptchaBtn: true,
+			CaptchaHelpdesk: true,
+			CaptchaForm: CaptchaFormWithFocusStub,
+			volumeUp: true,
+			SyIcon: true,
+			VBtn: true,
+		}
+
+		const wrapper = mount(Captcha, {
+			props: {
+				urlCreate: '/captcha/captcha.json',
+				urlGetImage: '/captcha/captcha.png',
+				urlGetAudio: '/captcha/captcha.mp3',
+				customRules: [
+					{
+						type: 'custom' as const,
+						options: {
+							validate: (v: unknown) => v ? true : 'Le captcha est requis',
+						},
+					},
+				],
+			},
+			global: { stubs: commonStubs },
+		})
+
+		// Complete the initial load first
+		await wrapper.find('.captcha-success').trigger('click')
+		await wrapper.vm.$nextTick()
+
+		// User blurs without a value → error shown
+		const form = wrapper.findComponent(CaptchaFormWithFocusStub)
+		await form.vm.$emit('focus')
+		await form.vm.$emit('blur')
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		expect(form.props('errorMessages') as string[]).toContain('Le captcha est requis')
+
+		// User asks for a new captcha (init + success)
+		await wrapper.find('.refresh-captcha').trigger('click')
+		await wrapper.find('.captcha-success').trigger('click')
+		await wrapper.vm.$nextTick()
+
+		// Errors should be cleared now (this is the intended behaviour for a refresh)
+		expect(form.props('errorMessages') as string[]).toEqual([])
+	})
+})

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

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, afterEach } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount, VueWrapper } from '@vue/test-utils'
 import Captcha from '../Captcha.vue'
+import type { ComponentPublicInstance } from 'vue/dist/vue.js'
 
 describe('Captcha', () => {
 	afterEach(() => {
@@ -24,11 +25,9 @@ describe('Captcha', () => {
 		})
 
 		// Wait for the component to fully mount and initialize
-		await wrapper.vm.$nextTick()
-		await wrapper.vm.$nextTick()
 
 		// Allow additional time for async initialization
-		await new Promise(resolve => setTimeout(resolve, 50))
+		await flushPromises()
 
 		expect(fetch).toHaveBeenCalledTimes(1)
 
@@ -64,11 +63,9 @@ describe('Captcha', () => {
 		})
 
 		// Wait for the component to fully mount and initialize
-		await wrapper.vm.$nextTick()
-		await wrapper.vm.$nextTick()
 
 		// Allow additional time for async initialization
-		await new Promise(resolve => setTimeout(resolve, 50))
+		await flushPromises()
 
 		expect(fetch).toHaveBeenCalledTimes(1)
 
@@ -156,12 +153,8 @@ describe('Captcha', () => {
 			},
 		})
 
-		await wrapper.vm.$nextTick()
-		await wrapper.vm.$nextTick()
-
 		// Simulate text input change
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		await (wrapper.vm as any).emitChangeValueEvent('new-text-value')
+		await (wrapper.vm as ComponentPublicInstance<typeof Captcha>).emitChangeValueEvent('new-text-value')
 
 		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
 		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new-text-value'])
@@ -183,9 +176,7 @@ describe('Captcha', () => {
 			},
 		})
 
-		await wrapper.vm.$nextTick()
-		await wrapper.vm.$nextTick()
-		await new Promise(resolve => setTimeout(resolve, 50))
+		await flushPromises()
 
 		expect(fetch).toHaveBeenCalledWith('/captcha/captcha.json', expect.any(Object))
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -200,7 +191,7 @@ describe('Captcha', () => {
 		} as any
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
-		const wrapper = mount(Captcha, {
+		const wrapper = mount<typeof Captcha>(Captcha, {
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -212,11 +203,10 @@ describe('Captcha', () => {
 		await wrapper.vm.$nextTick()
 
 		// Change modelValue prop
-		await wrapper.setProps({ modelValue: 'updated-value' })
+		await (wrapper as VueWrapper<ComponentPublicInstance<typeof Captcha>>).setProps({ modelValue: 'updated-value' })
 		await wrapper.vm.$nextTick()
 
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		expect((wrapper.vm as any).text).toBe('updated-value')
+		expect((wrapper.vm as ComponentPublicInstance<typeof Captcha>).text).toBe('updated-value')
 	})
 
 	it('handles helpDesk prop correctly', async () => {
@@ -236,9 +226,7 @@ describe('Captcha', () => {
 			},
 		})
 
-		await wrapper.vm.$nextTick()
-		await wrapper.vm.$nextTick()
-		await new Promise(resolve => setTimeout(resolve, 50))
+		await flushPromises()
 
 		expect(wrapper.text()).toContain('1234')
 	})
@@ -260,10 +248,231 @@ describe('Captcha', () => {
 			},
 		})
 
+		await flushPromises()
+
+		expect(wrapper.find('.captcha-helpdesk').exists()).toBe(false)
+	})
+
+	it('displays required validation error on blur when captcha text is empty', async () => {
+		const response = {
+			ok: true,
+			json: async () => ({ id: 'captcha-id' }),
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		} as any
+		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
+
+		const wrapper = mount(Captcha, {
+			props: {
+				urlCreate: '/captcha/captcha.json',
+				urlGetImage: '/captcha/captcha.png',
+				urlGetAudio: '/captcha/captcha.mp3',
+				required: true,
+				modelValue: '',
+			},
+		})
+
+		await flushPromises()
+
+		const input = wrapper.find('input')
+		expect(input.exists()).toBe(true)
+
+		await input.trigger('focus')
+		await input.trigger('blur')
+
+		expect(wrapper.text()).toContain('est requis')
+	})
+
+	it('applies customRules and displays custom error message on blur', async () => {
+		const response = {
+			ok: true,
+			json: async () => ({ id: 'captcha-id' }),
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		} as any
+		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
+
+		const wrapper = mount(Captcha, {
+			props: {
+				urlCreate: '/captcha/captcha.json',
+				urlGetImage: '/captcha/captcha.png',
+				urlGetAudio: '/captcha/captcha.mp3',
+				modelValue: 'abc',
+				customRules: [{
+					type: 'custom',
+					options: {
+						validate: () => false,
+						message: 'Erreur custom captcha',
+					},
+				}],
+			},
+		})
+
+		await flushPromises()
+
+		const input = wrapper.find('input')
+		expect(input.exists()).toBe(true)
+
+		await input.trigger('focus')
+		await input.trigger('blur')
+
+		expect(wrapper.text()).toContain('Erreur custom captcha')
+	})
+
+	it('applies customWarningRules and displays custom warning message on blur', async () => {
+		const response = {
+			ok: true,
+			json: async () => ({ id: 'captcha-id' }),
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		} as any
+		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
+
+		const wrapper = mount(Captcha, {
+			props: {
+				urlCreate: '/captcha/captcha.json',
+				urlGetImage: '/captcha/captcha.png',
+				urlGetAudio: '/captcha/captcha.mp3',
+				modelValue: 'abc',
+				customWarningRules: [{
+					type: 'custom',
+					options: {
+						validate: () => false,
+						isWarning: true,
+						warningMessage: 'Warning custom captcha',
+					},
+				}],
+			},
+		})
+
 		await wrapper.vm.$nextTick()
 		await wrapper.vm.$nextTick()
-		await new Promise(resolve => setTimeout(resolve, 50))
+		await flushPromises()
 
-		expect(wrapper.find('.captcha-helpdesk').exists()).toBe(false)
+		const input = wrapper.find('input')
+		expect(input.exists()).toBe(true)
+
+		await input.trigger('focus')
+		await input.trigger('blur')
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.text()).toContain('Warning custom captcha')
+	})
+
+	it('applies customSuccessRules and displays custom success message on blur', async () => {
+		const response = {
+			ok: true,
+			json: async () => ({ id: 'captcha-id' }),
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		} as any
+		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
+
+		const wrapper = mount(Captcha, {
+			props: {
+				urlCreate: '/captcha/captcha.json',
+				urlGetImage: '/captcha/captcha.png',
+				urlGetAudio: '/captcha/captcha.mp3',
+				modelValue: 'abc',
+				showSuccessMessages: true,
+				customSuccessRules: [{
+					type: 'custom',
+					options: {
+						validate: () => true,
+						successMessage: 'Succès custom captcha',
+					},
+				}],
+			},
+		})
+
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		const input = wrapper.find('input')
+		expect(input.exists()).toBe(true)
+
+		await input.trigger('focus')
+		await input.trigger('blur')
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.text()).toContain('Succès custom captcha')
+	})
+
+	it('resets the validation when the exposed clearValidation method is called', async () => {
+		const response = {
+			ok: true,
+			json: async () => ({ id: 'captcha-id' }),
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		} as any
+		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
+
+		const wrapper = mount(Captcha, {
+			props: {
+				urlCreate: '/captcha/captcha.json',
+				urlGetImage: '/captcha/captcha.png',
+				urlGetAudio: '/captcha/captcha.mp3',
+				required: true,
+				modelValue: '',
+			},
+		})
+
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		const input = wrapper.find('input')
+		expect(input.exists()).toBe(true)
+
+		await input.trigger('focus')
+		await input.trigger('blur')
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.text()).toContain('est requis')
+
+		// Call the exposed clearValidation method
+		await (wrapper.vm as ComponentPublicInstance<typeof Captcha>).clearValidation()
+
+		expect(wrapper.text()).not.toContain('est requis')
+	})
+
+	it('resets the field and the validation when the the exposed reset method is called', async () => {
+		const response = {
+			ok: true,
+			json: async () => ({ id: 'captcha-id' }),
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		} as any
+		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
+		const wrapper = mount(Captcha, {
+			props: {
+				urlCreate: '/captcha/captcha.json',
+				urlGetImage: '/captcha/captcha.png',
+				urlGetAudio: '/captcha/captcha.mp3',
+				required: true,
+				modelValue: '',
+				customRules: [{
+					type: 'custom',
+					options: {
+						validate: () => false,
+						message: 'Erreur custom captcha',
+					},
+				}],
+			},
+		})
+
+		await flushPromises()
+
+		const input = wrapper.find('input')
+		expect(input.exists()).toBe(true)
+
+		await input.trigger('focus')
+		await input.setValue('abc')
+		await input.trigger('blur')
+
+		expect(wrapper.text()).toContain('Erreur custom captcha')
+
+		await (wrapper.vm as ComponentPublicInstance<typeof Captcha>).reset()
+
+		expect(wrapper.text()).not.toContain('Erreur custom captcha')
+		expect(input.element.value).toBe('')
 	})
 })

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

@@ -0,0 +1,45 @@
+import Captcha from '../Captcha.vue'
+
+describe('Captcha - Visual regression tests', () => {
+	it('displays the captcha with image type', () => {
+		cy.mountWithVuetify(Captcha, {
+			props: {
+				urlCreate: '/api/captcha/create',
+				urlGetImage: '/api/captcha/image',
+				urlGetAudio: '/api/captcha/audio',
+				type: 'image',
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('captcha-image-type', cy.get('.v-application'))
+	})
+
+	it('displays the captcha with audio type', () => {
+		cy.mountWithVuetify(Captcha, {
+			props: {
+				urlCreate: '/api/captcha/create',
+				urlGetImage: '/api/captcha/image',
+				urlGetAudio: '/api/captcha/audio',
+				type: 'audio',
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('captcha-audio-type', cy.get('.v-application'))
+	})
+
+	it('displays the captcha without helpdesk', () => {
+		cy.mountWithVuetify(Captcha, {
+			props: {
+				urlCreate: '/api/captcha/create',
+				urlGetImage: '/api/captcha/image',
+				urlGetAudio: '/api/captcha/audio',
+				helpDesk: false,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('captcha-no-helpdesk', cy.get('.v-application'))
+	})
+})

package/src/components/Captcha/tests/CaptchaForm.spec.ts

@@ -0,0 +1,82 @@
+/* eslint-disable vue/one-component-per-file */
+import { describe, expect, it } from 'vitest'
+import { defineComponent } from 'vue'
+import { mount } from '@vue/test-utils'
+import CaptchaForm from '../CaptchaForm.vue'
+import { locales } from '../locales'
+
+const SyTextFieldStub = defineComponent({
+	name: 'SyTextField',
+	props: {
+		errorMessages: { type: Array, default: () => [] },
+		hasSuccess: { type: Boolean, default: false },
+		readonly: { type: Boolean, default: false },
+		isClearable: { type: Boolean, default: false },
+		disabled: { type: Boolean, default: false },
+		showSuccessMessages: { type: Boolean, default: true },
+		label: { type: String, default: '' },
+		customRules: { type: Array, default: () => [] },
+	},
+	emits: ['update:modelValue'],
+	template: '<div class="sy-text-field-stub" />',
+})
+
+const VSheetStub = defineComponent({
+	name: 'VSheet',
+	template: '<div class="v-sheet-stub"><slot /></div>',
+})
+
+describe('CaptchaForm', () => {
+	it('forwards current captcha props to SyTextField', () => {
+		const wrapper = mount(CaptchaForm, {
+			props: {
+				label: 'Captcha label',
+				locales,
+				state: 'rejected',
+				errorMessages: ['error message'],
+				success: true,
+			},
+			global: {
+				stubs: {
+					VSheet: VSheetStub,
+					SyTextField: SyTextFieldStub,
+				},
+			},
+		})
+
+		const textField = wrapper.findComponent({ name: 'SyTextField' })
+
+		expect(textField.exists()).toBe(true)
+		expect(textField.props('errorMessages')).toEqual(['error message'])
+		expect(textField.props('hasSuccess')).toBe(false)
+		expect(textField.props('readonly')).toBe(true)
+		expect(textField.props('isClearable')).toBe(false)
+		expect(textField.props('disabled')).toBe(true)
+		expect(textField.props('showSuccessMessages')).toBe(false)
+		expect(textField.props('label')).toBe('Captcha label')
+		expect(textField.props('customRules')).toEqual([])
+	})
+
+	it('emits update:modelValue when SyTextField updates the value', async () => {
+		const wrapper = mount(CaptchaForm, {
+			props: {
+				label: 'Captcha label',
+				locales,
+				errors: [],
+				success: false,
+			},
+			global: {
+				stubs: {
+					VSheet: VSheetStub,
+					SyTextField: SyTextFieldStub,
+				},
+			},
+		})
+
+		const textField = wrapper.findComponent({ name: 'SyTextField' })
+		await textField.vm.$emit('update:modelValue', 'abc123')
+
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['abc123'])
+	})
+})