@cnamts/synapse 1.0.23 → 1.0.24

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { mount, flushPromises } from '@vue/test-utils'
 import { VIcon } from 'vuetify/components'
 
 import SyTextField from '../SyTextField.vue'
@@ -15,6 +15,7 @@ describe('SyTextField', () => {
 				required: true,
 				showSuccessMessages: true,
 				outlined: true,
+				label: 'Test Field',
 			},
 		})
 	})
@@ -26,7 +27,7 @@ describe('SyTextField', () => {
 
 	it('applies the correct variant style', () => {
 		wrapper = mount(SyTextField, {
-			props: { variantStyle: 'filled' },
+			props: { variantStyle: 'filled', label: 'Test Field' },
 		})
 		const textField = wrapper.findComponent({ name: 'VTextField' })
 		expect(textField.props('variant')).toBe('filled')
@@ -34,6 +35,7 @@ describe('SyTextField', () => {
 
 	it('renders default slots correctly', () => {
 		wrapper = mount(SyTextField, {
+			props: { label: 'Test Field' },
 			slots: {
 				prepend: '<div data-testid="prepend-slot">Prepend Slot Content</div>',
 				append: '<div data-testid="append-slot">Append Slot Content</div>',
@@ -49,6 +51,7 @@ describe('SyTextField', () => {
 
 	it('renders inner slots correctly', () => {
 		wrapper = mount(SyTextField, {
+			props: { label: 'Test Field' },
 			slots: {
 				'prepend-inner': '<div data-testid="prepend-inner-slot">Prepend Inner Slot Content</div>',
 				'append-inner': '<div data-testid="append-inner-slot">Append Inner Slot Content</div>',
@@ -66,35 +69,35 @@ describe('SyTextField', () => {
 
 	it('should update icon when validation state changes', async () => {
 		wrapper = mount(SyTextField, {
-			props: { appendInnerIcon: 'success' as IconType },
+			props: { appendInnerIcon: 'success' as IconType, label: 'Test Field' },
 		})
 		expect(wrapper.props('appendInnerIcon')).toBe('success')
 	})
 
 	it('should update icon when validation state changes with warning', async () => {
 		wrapper = mount(SyTextField, {
-			props: { appendInnerIcon: 'warning' as IconType },
+			props: { appendInnerIcon: 'warning' as IconType, label: 'Test Field' },
 		})
 		expect(wrapper.props('appendInnerIcon')).toBe('warning')
 	})
 
 	it('should update icon when validation state changes with error', async () => {
 		wrapper = mount(SyTextField, {
-			props: { appendInnerIcon: 'error' as IconType },
+			props: { appendInnerIcon: 'error' as IconType, label: 'Test Field' },
 		})
 		expect(wrapper.props('appendInnerIcon')).toBe('error')
 	})
 
 	it('should update icon when validation state changes with success', async () => {
 		wrapper = mount(SyTextField, {
-			props: { appendInnerIcon: 'success' as IconType },
+			props: { appendInnerIcon: 'success' as IconType, label: 'Test Field' },
 		})
 		expect(wrapper.props('appendInnerIcon')).toBe('success')
 	})
 
 	it('emits prepend-icon-click event when prepend icon is clicked', async () => {
 		const wrapper = mount(SyTextField, {
-			props: { prependIcon: 'info' as IconType },
+			props: { prependIcon: 'info' as IconType, label: 'Test Field' },
 		})
 
 		await wrapper.vm.$nextTick()
@@ -107,7 +110,7 @@ describe('SyTextField', () => {
 
 	it('emits append-icon-click event when append icon is clicked', async () => {
 		const wrapper = mount(SyTextField, {
-			props: { appendIcon: 'info' as IconType },
+			props: { appendIcon: 'info' as IconType, label: 'Test Field' },
 		})
 
 		await wrapper.vm.$nextTick()
@@ -155,8 +158,13 @@ describe('SyTextField', () => {
 				label: 'Test Field',
 			},
 		})
+		await wrapper.find('input').trigger('focus')
+		await wrapper.vm.$nextTick()
 		await wrapper.find('input').trigger('blur')
 		await wrapper.vm.$nextTick()
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
 		expect(wrapper.find('.v-messages').text()).toContain('Le champ Test Field est requis')
 	})
 
@@ -170,12 +178,16 @@ describe('SyTextField', () => {
 		}
 
 		wrapper = mount(SyTextField, {
-			props: { customRules: [customRule] },
+			props: { customRules: [customRule], label: 'Test Field' },
 		})
 
 		await wrapper.setProps({ modelValue: 'ab' })
+		await wrapper.find('input').trigger('focus')
+		await wrapper.vm.$nextTick()
 		await wrapper.find('input').trigger('blur')
 		await wrapper.vm.$nextTick()
+		await flushPromises()
+		await wrapper.vm.$nextTick()
 
 		const messages = wrapper.find('.v-messages')
 		expect(messages.text()).toContain('Test error message')
@@ -200,9 +212,12 @@ describe('SyTextField', () => {
 			},
 		})
 
+		await wrapper.find('input').trigger('focus')
 		await wrapper.vm.$nextTick()
 		await wrapper.find('input').trigger('blur')
 		await wrapper.vm.$nextTick()
+		await flushPromises()
+		await wrapper.vm.$nextTick()
 
 		const messages = wrapper.find('.v-messages')
 		expect(messages.exists()).toBe(true)
@@ -237,7 +252,7 @@ describe('SyTextField', () => {
 
 		it('sets generic aria-label when no label and loading', async () => {
 			wrapper = mount(SyTextField, {
-				props: { loading: true },
+				props: { loading: true, label: '' },
 			})
 			await wrapper.vm.$nextTick()
 			const bar = wrapper.find('.v-progress-linear')
@@ -246,13 +261,91 @@ describe('SyTextField', () => {
 	})
 
 	it('maintains input value without validation rules', async () => {
-		wrapper = mount(SyTextField)
+		wrapper = mount(SyTextField, {
+			props: { label: 'Test Field' },
+		})
 		const input = wrapper.find('input')
 
 		await input.setValue('test value')
 		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['test value'])
 	})
 
+	it('filters alphabetic characters when type is number', async () => {
+		wrapper = mount(SyTextField, {
+			props: {
+				label: 'Test Field',
+				type: 'number',
+			},
+		})
+
+		const input = wrapper.find('input')
+		const inputElement = input.element as HTMLInputElement
+		inputElement.value = '12ab.3e-4'
+
+		await input.trigger('input')
+
+		expect(inputElement.value).toBe('12.3e-4')
+		expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['12.3e-4'])
+	})
+
+	it('prevents invalid beforeinput data when type is number', async () => {
+		wrapper = mount(SyTextField, {
+			props: {
+				label: 'Test Field',
+				type: 'number',
+			},
+		})
+
+		const input = wrapper.find('input')
+		const event = new InputEvent('beforeinput', {
+			data: 'a',
+			cancelable: true,
+			bubbles: true,
+		})
+
+		input.element.dispatchEvent(event)
+
+		expect(event.defaultPrevented).toBe(true)
+	})
+
+	it('filters alphabetic characters when type is tel', async () => {
+		wrapper = mount(SyTextField, {
+			props: {
+				label: 'Telephone',
+				type: 'tel',
+			},
+		})
+
+		const input = wrapper.find('input')
+		const inputElement = input.element as HTMLInputElement
+		inputElement.value = '+33 ab(0)1-23.45'
+
+		await input.trigger('input')
+
+		expect(inputElement.value).toBe('+33 (0)1-23.45')
+		expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['+33 (0)1-23.45'])
+	})
+
+	it('prevents invalid beforeinput data when type is tel', async () => {
+		wrapper = mount(SyTextField, {
+			props: {
+				label: 'Telephone',
+				type: 'tel',
+			},
+		})
+
+		const input = wrapper.find('input')
+		const event = new InputEvent('beforeinput', {
+			data: 'a',
+			cancelable: true,
+			bubbles: true,
+		})
+
+		input.element.dispatchEvent(event)
+
+		expect(event.defaultPrevented).toBe(true)
+	})
+
 	it('validates field immediately when isValidateOnBlur is false', async () => {
 		const customRule = {
 			type: 'custom',
@@ -264,6 +357,8 @@ describe('SyTextField', () => {
 
 		wrapper = mount(SyTextField, {
 			props: {
+				modelValue: '',
+				label: 'Test Field',
 				customRules: [customRule],
 				isValidateOnBlur: false,
 			},
@@ -272,6 +367,12 @@ describe('SyTextField', () => {
 		await wrapper.setProps({ modelValue: 'ab' })
 		await wrapper.vm.$nextTick()
 
+		// settle all pending promises to ensure validation has completed
+		await vi.waitUntil(() => {
+			const messages = wrapper.find('.v-messages')
+			return messages.text().includes('Test error message')
+		})
+
 		const messages = wrapper.find('.v-messages')
 		expect(messages.text()).toContain('Test error message')
 
@@ -279,6 +380,14 @@ describe('SyTextField', () => {
 		await wrapper.setProps({ modelValue: 'abc' })
 		await wrapper.vm.$nextTick()
 
+		// the async validation should have updated the error messages, so we wait for the next tick before checking the messages again
+		await wrapper.vm.$nextTick()
+
+		await vi.waitUntil(() => {
+			const messages = wrapper.find('.v-messages')
+			return !messages.text().includes('Test error message')
+		})
+
 		expect(messages.text()).not.toContain('Test error message')
 	})
 })