@cnamts/synapse 1.0.10 → 1.0.11

package/src/components/Amelipro/AmeliproAutoCompleteField/__tests__/AmeliproAutoCompleteField.spec.ts

@@ -1,62 +1,284 @@
-import { mount } from '@vue/test-utils'
-import { expect, describe, it } from 'vitest'
-import { vuetify } from '@tests/unit/setup'
+import { type VueWrapper, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
 import AmeliproAutoCompleteField from '../AmeliproAutoCompleteField.vue'
+import type { AutoCompleteItem } from '../types'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { ExpectedPropOptions } from '@tests/types'
+import { defineComponent, h, type PropType } from 'vue'
+import TestHelper from '@tests/helpers/TestHelper'
+import type { ValidateOnType } from '../../types'
+import type { ValidationRule } from '@/utils/rules/types'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproAutoCompleteField> = {
+	ariaRequired: {
+		type: Boolean,
+		default: false,
+	},
+	classes: {
+		type: String,
+		default: undefined,
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+	globalMaxWidth: {
+		type: String,
+		default: undefined,
+	},
+	globalMinWidth: {
+		type: String,
+		default: undefined,
+	},
+	globalWidth: {
+		type: String,
+		default: undefined,
+	},
+	hideErrorMessage: {
+		type: [String, Boolean] as PropType<boolean | 'auto'>,
+		default: false,
+	},
+	horizontal: {
+		type: Boolean,
+		default: false,
+	},
+	inputMaxWidth: {
+		type: String,
+		default: undefined,
+	},
+	inputMinWidth: {
+		type: String,
+		default: undefined,
+	},
+	items: {
+		type: Array as PropType<AutoCompleteItem[]>,
+		default: () => [],
+	},
+	label: {
+		type: String,
+		required: true,
+	},
+	labelMaxWidth: {
+		type: String,
+		default: undefined,
+	},
+	labelMinWidth: {
+		type: String,
+		default: undefined,
+	},
+	modelValue: {
+		type: [String, Object] as PropType<string | object>,
+		default: undefined,
+	},
+	placeholder: {
+		type: String,
+		default: undefined,
+	},
+	readonly: {
+		type: Boolean,
+		default: false,
+	},
+	rules: {
+		type: Array as PropType<ValidationRule[]>,
+		default: () => [],
+	},
+	uniqueId: {
+		type: String,
+		required: true,
+	},
+	validateOn: {
+		default: undefined,
+		type: String as PropType<ValidateOnType>,
+		validator(value: string): boolean {
+			return ['lazy', 'blur', 'input', 'submit', 'blur lazy', 'input lazy', 'submit lazy', 'lazy blur', 'lazy input', 'lazy submit'].includes(value.toLowerCase())
+		},
+	},
+}
+
+const items = (): AutoCompleteItem[] => ([
+	{
+		disabled: true,
+		title: 'Item title 1',
+		value: 'item-value-1',
+	},
+	{
+		title: 'Item title 2',
+		value: 'item-value-2',
+	},
+	{
+		title: 'Item title 3',
+		value: 'item-value-3',
+	},
+	{
+		title: 'Item title 4',
+		value: 'item-value-4',
+	},
+])
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproAutoCompleteField> => ({
+	label: 'Required label',
+	uniqueId: 'required-unique-id',
+})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproAutoCompleteField> => ({
+	ariaRequired: true,
+	classes: 'modified-classes',
+	disabled: true,
+	globalMaxWidth: 'modified-global-max-width',
+	globalMinWidth: 'modified-global-min-width',
+	// Non pris en compte pour "width" si valeur non valide. Avec var() ça passe...
+	globalWidth: 'var(--modified-global-width)',
+	hideErrorMessage: true,
+	horizontal: true,
+	inputMaxWidth: 'modified-input-max-width',
+	inputMinWidth: 'modified-input-min-width',
+	items: items(),
+	label: 'Modified label',
+	labelMaxWidth: 'modified-label-max-width',
+	labelMinWidth: 'modified-label-min-width',
+	modelValue: 'modified-model-value',
+	placeholder: 'Modified placeholder',
+	readonly: true,
+	rules: [() => 'modified-rules'],
+	uniqueId: 'modified-unique-id',
+	validateOn: 'lazy',
+})
+
+// Mock VAutocomplete pour éviter la logique d'attache DOM de Vuetify
+const VAutocompleteMock = defineComponent({
+	name: 'VAutocomplete',
+	setup() {
+		return () => h('v-autocomplete-stub')
+	},
+})
+
+const testHelper = new TestHelper(AmeliproAutoCompleteField)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+	.setMountOptions({ global: { stubs: { VAutocomplete: VAutocompleteMock } } })
 
 describe('AmeliproAutoCompleteField', () => {
-	it('render correctly', async () => {
-		const wrapper = mount(AmeliproAutoCompleteField, {
-			global: {
-				plugins: [vuetify],
-			},
-			props: {
-				items: [
-					{
-						title: 'Bordeaux',
-						value: 'Bordeaux',
-					},
-					{
-						title: 'Bagnolet',
-						value: 'Bagnolet',
-					},
-					{
-						title: 'Bagneux',
-						value: 'Bagneux',
-					},
-					{
-						title: 'Arcachon',
-						value: 'Arcachon',
-					},
-					{
-						title: 'Paris',
-						value: 'Paris',
-					},
-					{
-						title: 'Lille',
-						value: 'Lille',
-					},
-					{
-						title: 'Lyon',
-						value: 'Lyon',
-					},
-					{
-						title: 'Brest',
-						value: 'Brest',
-					},
-					{
-						title: 'Marseille',
-						value: 'Marseille',
-					},
-					{
-						title: 'Toulouse',
-						value: 'Toulouse',
-					},
-				],
-				label: 'Mon label',
-				uniqueId: 'my-AutoCompleteField-id',
-			},
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproAutoCompleteField>>
+
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproAutoCompleteField, {
+				props: requiredPropValues(), global: {
+					stubs: { VAutocomplete: VAutocompleteMock },
+				},
+			})
+		})
+
+		describe('root', () => {
+			it('prop uniqueId sets attribute id', async () => {
+				expect(vueWrapper.attributes('id')).toBe('required-unique-id-container')
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.attributes('id')).toBe('modified-unique-id-container')
+			})
+
+			it('props horizontal & classes set attribute class', async () => {
+				expect(vueWrapper.attributes('class')).toBe('d-flex flex-column amelipro-autocomplete')
+
+				const { classes, horizontal } = modifiedPropValues()
+				await vueWrapper.setProps({ horizontal })
+				expect(vueWrapper.attributes('class')).toBe('d-flex flex-column amelipro-autocomplete flex-md-row')
+
+				await vueWrapper.setProps({ classes })
+				expect(vueWrapper.attributes('class')).toBe('d-flex flex-column amelipro-autocomplete flex-md-row modified-classes')
+			})
+
+			it('props globalMaxWidth, globalMinWidth & globalWidth set attribute style', async () => {
+				expect(vueWrapper.attributes('class')).toBe('d-flex flex-column amelipro-autocomplete')
+
+				const { globalMaxWidth, globalMinWidth, globalWidth } = modifiedPropValues()
+				await vueWrapper.setProps({ globalMaxWidth })
+				expect(vueWrapper.attributes('style')).toBe('max-width: modified-global-max-width;')
+
+				await vueWrapper.setProps({ globalMinWidth })
+				expect(vueWrapper.attributes('style')).toBe('max-width: modified-global-max-width; min-width: modified-global-min-width;')
+
+				await vueWrapper.setProps({ globalWidth })
+				expect(vueWrapper.attributes('style')).toBe('max-width: modified-global-max-width; min-width: modified-global-min-width; width: var(--modified-global-width);')
+			})
+		})
+
+		describe('label wrapper', () => {
+			it('prop horizontal sets attribute class', async () => {
+				expect(vueWrapper.find('.amelipro-autocomplete__label-wrapper').classes('mt-md-2')).toBe(false)
+				expect(vueWrapper.find('.amelipro-autocomplete__label-wrapper').classes('mr-md-2')).toBe(false)
+
+				const { horizontal } = modifiedPropValues()
+				await vueWrapper.setProps({ horizontal })
+				expect(vueWrapper.find('.amelipro-autocomplete__label-wrapper').classes('mt-md-2')).toBe(true)
+				expect(vueWrapper.find('.amelipro-autocomplete__label-wrapper').classes('mr-md-2')).toBe(true)
+			})
 		})
 
-		expect(wrapper.html()).toMatchSnapshot()
+		describe('label', () => {
+			it('prop uniqueId sets attribute id', async () => {
+				expect(vueWrapper.find('.amelipro-autocomplete__label').attributes('id')).toBe('required-unique-id-label')
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.find('.amelipro-autocomplete__label').attributes('id')).toBe('modified-unique-id-label')
+			})
+
+			it('prop horizontal sets attribute class', async () => {
+				expect(vueWrapper.find('.amelipro-autocomplete__label').classes('mr-md-2')).toBe(false)
+
+				const { horizontal } = modifiedPropValues()
+				await vueWrapper.setProps({ horizontal })
+				expect(vueWrapper.find('.amelipro-autocomplete__label').classes('mr-md-2')).toBe(true)
+			})
+
+			it('prop uniqueId sets attribute for', async () => {
+				expect(vueWrapper.find('.amelipro-autocomplete__label').attributes('for')).toBe('required-unique-id')
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.find('.amelipro-autocomplete__label').attributes('for')).toBe('modified-unique-id')
+			})
+
+			it('props labelMaxWidth & labelMinWidth set attribute style', async () => {
+				expect(vueWrapper.find('.amelipro-autocomplete__label').attributes('style')).toBeUndefined()
+
+				const { labelMaxWidth, labelMinWidth } = modifiedPropValues()
+				await vueWrapper.setProps({ labelMaxWidth })
+				expect(vueWrapper.find('.amelipro-autocomplete__label').attributes('style')).toBe('max-width: modified-label-max-width;')
+
+				await vueWrapper.setProps({ labelMinWidth })
+				expect(vueWrapper.find('.amelipro-autocomplete__label').attributes('style')).toBe('max-width: modified-label-max-width; min-width: modified-label-min-width;')
+			})
+
+			it('props label & ariaRequired set label content', async () => {
+				expect(vueWrapper.find('.amelipro-autocomplete__label').text()).toBe('Required label')
+
+				const { label, ariaRequired } = modifiedPropValues()
+				await vueWrapper.setProps({ label })
+				expect(vueWrapper.find('.amelipro-autocomplete__label').text()).toBe('Modified label')
+
+				await vueWrapper.setProps({ ariaRequired })
+				expect(vueWrapper.find('.amelipro-autocomplete__label').text()).toBe('Modified label   *   Champ obligatoire')
+			})
+		})
 	})
+
+	describe.todo('Setting props should update props or attributes of inner components')
+
+	describe.todo('Events')
+
+	describe.todo('Slots')
 })