@cnamts/synapse 1.1.0 → 1.1.1

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/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'])
+	})
+})

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

@@ -117,22 +117,22 @@ exports[`Captcha > renders correctly in audio mode 1`] = `
                     v-field-label
                     v-label
                   "
-                  for="input-v-3"
-                  id="input-v-3-label"
+                  for="input-v-4"
+                  id="input-v-4-label"
                 >
                   <!---->
-                  Caractères de l’audio
+                  Caractères de l’image
                 </label>
                 <!---->
                 <input
-                  aria-describedby="input-v-3-messages"
-                  aria-label="Caractères de l’audio"
-                  aria-labelledby="input-v-3-label"
+                  aria-label="Caractères de l’image"
+                  aria-labelledby="input-v-4-label"
+                  aria-required="false"
                   autocomplete="off"
                   class="v-field__input"
                   direction="horizontal"
-                  id="input-v-3"
-                  title="Caractères de l’audio"
+                  id="input-v-4"
+                  title="Caractères de l’image"
                   type="text"
                 />
                 <!---->
@@ -158,7 +158,7 @@ exports[`Captcha > renders correctly in audio mode 1`] = `
                     "
                   >
                     <!---->
-                    Caractères de l’audio
+                    Caractères de l’image
                   </label>
                 </div>
                 <div class="v-field__outline__end"></div>
@@ -167,20 +167,7 @@ exports[`Captcha > renders correctly in audio mode 1`] = `
             </div>
           </div>
           <!---->
-          <div class="v-input__details">
-            <transition-group-stub
-              appear="false"
-              class="v-messages"
-              css="true"
-              id="input-v-3-messages"
-              name="slide-y-transition"
-              persisted="false"
-              tag="div"
-            >
-              <!---->
-            </transition-group-stub>
-            <!---->
-          </div>
+          <!---->
         </div>
         <!-- v-if -->
       </div>
@@ -461,21 +448,21 @@ exports[`Captcha > renders correctly in image mode 1`] = `
                     v-field-label
                     v-label
                   "
-                  for="input-v-2"
-                  id="input-v-2-label"
+                  for="input-v-3"
+                  id="input-v-3-label"
                 >
                   <!---->
                   Caractères de l’image
                 </label>
                 <!---->
                 <input
-                  aria-describedby="input-v-2-messages"
                   aria-label="Caractères de l’image"
-                  aria-labelledby="input-v-2-label"
+                  aria-labelledby="input-v-3-label"
+                  aria-required="false"
                   autocomplete="off"
                   class="v-field__input"
                   direction="horizontal"
-                  id="input-v-2"
+                  id="input-v-3"
                   title="Caractères de l’image"
                   type="text"
                 />
@@ -511,20 +498,7 @@ exports[`Captcha > renders correctly in image mode 1`] = `
             </div>
           </div>
           <!---->
-          <div class="v-input__details">
-            <transition-group-stub
-              appear="false"
-              class="v-messages"
-              css="true"
-              id="input-v-2-messages"
-              name="slide-y-transition"
-              persisted="false"
-              tag="div"
-            >
-              <!---->
-            </transition-group-stub>
-            <!---->
-          </div>
+          <!---->
         </div>
         <!-- v-if -->
       </div>

package/src/components/Captcha/types.ts

@@ -1,2 +1,17 @@
 export type CaptchaType = 'image' | 'audio' | 'choice'
 export type StateType = 'idle' | 'pending' | 'resolved' | 'rejected'
+import type { FieldValidationProps } from '@/composables/unifyValidation/useValidation'
+import type { locales as defaultLocales } from './locales'
+
+export type CaptchaProps = FieldValidationProps & {
+	modelValue?: string | undefined
+	urlCreate: string
+	urlGetImage: string
+	urlGetAudio: string
+	type?: CaptchaType
+	tagTitle?: string
+	helpDesk?: string | false
+	isClearable?: boolean
+	locale?: string
+	locales?: typeof defaultLocales
+}

package/src/components/Captcha/useCaptchaValidation.ts

@@ -0,0 +1,87 @@
+import { computed, type Ref } from 'vue'
+import { useValidation, type VuetifyValidationRule } from '@/composables/unifyValidation/useValidation'
+import type { ValidationRule as SyValidationRule } from '@/composables/validation/useValidation'
+import type { locales as defaultLocales } from './locales'
+
+export function useCaptchaValidation(params: {
+	modelValue: Ref<string | null>
+	readonly: Ref<boolean>
+	disabled: Ref<boolean>
+	required: Ref<boolean>
+	isValidateOnBlur: Ref<boolean>
+	showSuccessMessages: Ref<boolean>
+	disableErrorHandling: Ref<boolean>
+	useVuetifyValidation: Ref<boolean>
+	label: Ref<string>
+	rules: Ref<VuetifyValidationRule[] | undefined>
+	customRules: Ref<SyValidationRule[] | undefined>
+	customWarningRules: Ref<SyValidationRule[] | undefined>
+	customSuccessRules: Ref<SyValidationRule[] | undefined>
+	errorMessages: Ref<string[] | undefined | null>
+	warningMessages: Ref<string[] | undefined | null>
+	successMessages: Ref<string[] | undefined | null>
+	hasErrorProp: Ref<boolean>
+	hasWarningProp: Ref<boolean>
+	hasSuccessProp: Ref<boolean>
+	maxErrors: Ref<number | undefined>
+	focused: Ref<boolean>
+	locales: Ref<typeof defaultLocales>
+},
+) {
+	const defaultRules = computed<SyValidationRule[]>(() => params.required
+		? [{
+				type: 'required',
+				options: {
+					message: params.locales.value.required,
+					fieldIdentifier: params.label.value,
+				},
+			}]
+		: [],
+	)
+
+	// Un captcha rempli n'est pas « valide » pour autant : la réponse doit être vérifiée.
+	// On n'autorise donc le succès que s'il existe une source de succès explicite
+	// (règle de succès, règle d'erreur portant un successMessage, message de succès injecté,
+	// ou état de succès forcé) — sinon le succès « champ rempli = valide » par défaut est ignoré.
+	const hasExplicitSuccessSource = computed(() =>
+		(params.customSuccessRules.value?.length ?? 0) > 0
+		|| (params.customRules.value ?? []).some(rule => !!rule.options?.successMessage)
+		|| (params.successMessages.value?.length ?? 0) > 0
+		|| params.hasSuccessProp.value,
+	)
+
+	const { validate, clearValidation, errors, warnings, successes, hasError, hasWarning, hasSuccess } = useValidation({
+		modelValue: params.modelValue,
+		readonly: params.readonly,
+		disabled: params.disabled,
+		required: params.required,
+		isValidateOnBlur: params.isValidateOnBlur,
+		showSuccessMessages: params.showSuccessMessages,
+		disableErrorHandling: params.disableErrorHandling,
+		useVuetifyValidation: params.useVuetifyValidation,
+		label: params.label,
+		rules: params.rules ?? [],
+		customRules: computed(() => [...defaultRules.value, ...(params.customRules.value ?? [])]),
+		customWarningRules: computed(() => params.customWarningRules.value ?? []),
+		customSuccessRules: computed(() => params.customSuccessRules.value ?? []),
+		errorMessages: params.errorMessages,
+		warningMessages: params.warningMessages,
+		successMessages: params.successMessages,
+		hasErrorProp: params.hasErrorProp,
+		hasWarningProp: params.hasWarningProp,
+		hasSuccessProp: params.hasSuccessProp,
+		maxErrors: computed(() => params.maxErrors.value ?? 1),
+		focused: params.focused,
+	})
+
+	return {
+		validate,
+		clearValidation,
+		errors,
+		warnings,
+		successes: computed(() => hasExplicitSuccessSource.value ? successes.value : []),
+		hasError,
+		hasWarning,
+		hasSuccess: computed(() => hasExplicitSuccessSource.value && hasSuccess.value),
+	}
+}