@cnamts/synapse 0.0.4-alpha → 0.0.6-alpha

package/src/components/Customs/SyInputSelect/AccessibiliteItems.ts

@@ -0,0 +1,96 @@
+import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+
+export const AccessibiliteItemsIndeterminate = [
+	{
+		title: 'Catégorie 10 : Présentation de l’information',
+		subtitle: '10.1 Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information ? ?',
+		items: [
+
+			{
+				precision: '10.1.1 Dans chaque page web, les balises servant à la présentation de l’information ne doivent pas être présentes dans le code source généré des pages. Cette règle est-elle respectée ? ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10.1.1',
+				solution: [{
+					info1: '1. Vérifier l’absence des éléments de présentation <basefont>, <big>, <blink>, <center>, <font>, <marquee>, <s>, <strike>, <tt> ; ',
+					info2: '2. Vérifier l’absence de l’élément <u> uniquement si le DOCTYPE du document ne correspond pas à HTML 5 ; ',
+					info3: '3. Si c’est le cas, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+	},
+
+]
+
+export const AccessibiliteItemsValidated = [
+	{
+		title: 'Catégorie 1 : Images',
+		subtitle: '1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?',
+		items: [
+
+			{
+				precision: '1.2.4 Chaque image vectorielle (balise <svg>) de décoration, sans légende, vérifie-t-elle ces conditions ?'
+					+ ' La balise <svg> possède un attribut WAI-ARIA aria-hidden="true" ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’alternative textuelle ;'
+					+ ' Les balises <title> et <desc> sont absentes ou vides ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’attribut title.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2.4',
+				solution: [{
+					info1: '1. Retrouver dans le document les images décoratives dépourvues de légende structurées au moyen d’un élément <svg> ;',
+					info2: '2. Pour chaque image, vérifier que l’élément <svg> ne possède pas d’attributs aria-labelledby ou aria-label et qu’il :'
+						+ ' Possède un attribut WAI-ARIA aria-hidden="true" ;'
+						+ ' Et est dépourvu d’alternative textuelle (ainsi que ses éléments enfants) ;'
+						+ ' Et ne contient pas d’éléments <title> et <desc> à moins que vides de contenu ;'
+						+ ' Et est dépourvu d’attribut title (ainsi que ses éléments enfants).',
+					info3: '3. Si c’est le cas pour chaque image, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 3 : Couleurs',
+		subtitle: '3.2 Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé?',
+		items: [
+			{
+
+				precision: '3.2.1 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions? Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image sans effet de graisse d’une taille restituée inférieure à 24px qui pourraient poser des problèmes de contraste ;',
+					info2: '2. Pour chacun de ces textes, vérifier que : Soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+
+	{
+		title: 'Catégorie 8 : Eléments Obligatoires',
+		subtitle: '8.9 Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation',
+		items: [
+
+			{
+				precision: ' 8.9.1 Dans chaque page web les balises (à l’exception de <div>, <span> et <table>) ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.9.1',
+				solution: [{
+					info1: '1. Retrouver dans le document l’ensemble des éléments sémantiques utilisés à des fins de présentation ;',
+					info2: '2. Pour chacun de ces éléments, vérifier que :'
+						+ 'L’élément est pourvu d’un attribut role=“presentation” ;'
+						+ 'L’utilisation de cet élément à des fins de présentation reste justifée',
+					info3: '3. Si c’est le cas, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+
+]

package/src/components/Customs/SyInputSelect/SyInputSelect.mdx

@@ -0,0 +1,41 @@
+import { Canvas, Meta, Controls, Story, Source } from '@storybook/blocks';
+import * as SyInputSelectStories from "./SyInputSelect.stories";
+
+<Meta of={SyInputSelectStories} />
+
+# SyInputSelect
+
+Le composant `SyInputSelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles RGAA.<br/>
+Il est basé sur un `v-input`.
+
+<Canvas of={SyInputSelectStories.Default} />
+
+<Story of={SyInputSelectStories.Info} />
+
+# API
+
+<Controls of={SyInputSelectStories.Default} />
+
+# Exemple d'utilisation
+
+<Source dark code={`
+<script setup lang="ts">
+	import { SyInputSelect } from '@cnamts/synapse'
+
+	const items = [
+        { text: 'Option 1', value: '1' },
+        { text: 'Option 2', value: '2' },
+    ],
+</script>
+
+<template>
+	<main>
+		<div class="mt-12 ml-12">
+			<SyInputSelect
+				v-model="value"
+				:items="items"
+			/>
+		</div>
+	</main>
+</template>
+`} />

package/src/components/Customs/{CustomInputSelect/CustomInputSelect.stories.ts → SyInputSelect/SyInputSelect.stories.ts}

@@ -1,26 +1,27 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import CustomInputSelect from './CustomInputSelect.vue'
+import SyInputSelect from './SyInputSelect.vue'
 import { VBtn, VMenu, VList, VListItem, VListItemTitle } from 'vuetify/components'
 import { ref } from 'vue'
-import Alert from '../../Alert/Alert.vue'
+import SyAlert from '@/components/SyAlert/SyAlert.vue'
 
 const meta = {
-	title: 'Composants/Formulaires/CustomInputSelect',
-	component: CustomInputSelect,
+	title: 'Composants/Formulaires/SyInputSelect',
+	component: SyInputSelect,
 	parameters: {
 		layout: 'fullscreen',
-		controls: { exclude: ['selectedValue'] },
+		controls: { exclude: ['selectedValue', 'isOpen', 'toggleMenu', 'closeList', 'selectItem', 'selectedItem', 'getItemText'] },
 	},
 	argTypes: {
 		selectedValue: { control: 'text' },
 		items: { control: 'object' },
 		errorMessages: { control: 'object' },
 		required: { control: 'boolean' },
+		outlined: { control: 'boolean' },
 		textKey: { control: 'text' },
 		valueKey: { control: 'text' },
 		vuetifyOptions: { control: 'object' },
 	},
-} as Meta<typeof CustomInputSelect>
+} as Meta<typeof SyInputSelect>
 
 export default meta
 
@@ -32,7 +33,7 @@ export const Default: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomInputSelect
+					<SyInputSelect
 						v-model="value"
 						:items="items"
 					/>
@@ -43,7 +44,7 @@ export const Default: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomInputSelect from '@cnamts/CustomInputSelect'
+					import SyInputSelect from '@cnamts/SyInputSelect'
 					
 					const items =  [
 						{ text: 'Option 1', value: '1' },
@@ -70,13 +71,13 @@ export const Default: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			components: { SyInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomInputSelect
+					<SyInputSelect
 						v-bind="args"
 						:vuetify-options="args.vuetifyOptions"
 					/>
@@ -87,60 +88,6 @@ export const Default: Story = {
 	},
 }
 
-export const Outlined: Story = {
-	parameters: {
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-				<template>
-					<CustomInputSelect
-						v-model="value"
-						:items="items"
-						outlined
-					/>
-				</template>
-				`,
-			},
-			{
-				name: 'Script',
-				code: `
-				<script setup lang="ts">
-					import CustomInputSelect from '@cnamts/CustomInputSelect'
-					
-					const items =  [
-						{ text: 'Option 1', value: '1' },
-						{ text: 'Option 2', value: '2' },
-					],
-				</script>
-				`,
-			},
-		],
-	},
-	args: {
-		items: [
-			{ text: 'Option 1', value: '1' },
-			{ text: 'Option 2', value: '2' },
-		],
-	},
-	render: (args) => {
-		return {
-			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
-			setup() {
-				return { args }
-			},
-			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomInputSelect
-						v-bind="args"
-						outlined
-					/>
-				</div>
-			`,
-		}
-	},
-}
-
 export const Required: Story = {
 	parameters: {
 		sourceCode: [
@@ -148,7 +95,7 @@ export const Required: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomInputSelect
+					<SyInputSelect
 						v-model="value"
 						:items="items"
 						required
@@ -160,7 +107,7 @@ export const Required: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomInputSelect from '@cnamts/CustomInputSelect'
+					import SyInputSelect from '@cnamts/SyInputSelect'
 					
 					const items =  [
 						{ text: 'Option 1', value: '1' },
@@ -180,13 +127,13 @@ export const Required: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			components: { SyInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomInputSelect
+					<SyInputSelect
 						v-bind="args"
 						:required="args.required"
 					/>
@@ -203,7 +150,7 @@ export const withCustomError: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomInputSelect
+					<SyInputSelect
 						v-model="value"
 						:items="items"
 						:error-messages="errorMessages"
@@ -218,7 +165,7 @@ export const withCustomError: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomInputSelect from '@cnamts/CustomInputSelect'
+					import SyInputSelect from '@cnamts/SyInputSelect'
 					import { ref } from 'vue'
 					
 					const items =  [
@@ -244,7 +191,7 @@ export const withCustomError: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			components: { SyInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
 			setup() {
 				const errorMessages = ref([])
 				const triggerError = () => {
@@ -255,7 +202,7 @@ export const withCustomError: Story = {
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomInputSelect
+					<SyInputSelect
 						v-bind="args"
 						:error-messages="errorMessages"
 					/>
@@ -275,7 +222,7 @@ export const withCustomKey: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomInputSelect
+					<SyInputSelect
 						v-model="value"
 						:items="items"
 						text-key="customKey"
@@ -288,7 +235,7 @@ export const withCustomKey: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomInputSelect from '@cnamts/CustomInputSelect'
+					import SyInputSelect from '@cnamts/SyInputSelect'
 					
 					const items =  [
 						{ customKey: 'Choix 1', value: '1' },
@@ -307,13 +254,13 @@ export const withCustomKey: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			components: { SyInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomInputSelect
+					<SyInputSelect
 						v-bind="args"
 						outlined
 						text-key="customKey"
@@ -331,7 +278,7 @@ export const withCustomStyles: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<CustomInputSelect
+					<SyInputSelect
 						v-model="value"
 						:items="items"
 						:vuetify-options="vuetifyOptions
@@ -343,7 +290,7 @@ export const withCustomStyles: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import CustomInputSelect from '@cnamts/CustomInputSelect'
+					import SyInputSelect from '@cnamts/SyInputSelect'
 					
 					const items =  [
 						{ text: 'Option 1', value: '1' },
@@ -379,13 +326,13 @@ export const withCustomStyles: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
+			components: { SyInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomInputSelect
+					<SyInputSelect
 						v-bind="args"
 						:items="args.items"
 						:vuetify-options="args.vuetifyOptions"
@@ -399,12 +346,12 @@ export const withCustomStyles: Story = {
 export const Info: Story = {
 	render: (args) => {
 		return {
-			components: { Alert },
+			components: { SyAlert },
 			setup() {
 				return { args }
 			},
 			template: `
-				<Alert v-model="args.modelValue" :type="args.type" :variant="tonal" :closable="false">
+				<SyAlert v-model="args.modelValue" :type="args.type" :variant="tonal" :closable="false">
 					<template #default>
 						<b>Format des items :</b>
 						<ul>
@@ -412,7 +359,7 @@ export const Info: Story = {
 							<li>- Si les items sont un tableau de string, le composant les utilisera directement.</li>
 						</ul>
 					</template>
-				</Alert>
+				</SyAlert>
 			`,
 		}
 	},

package/src/components/Customs/{CustomInputSelect/CustomInputSelect.vue → SyInputSelect/SyInputSelect.vue}

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
-	import { mdiChevronDown } from '@mdi/js'
+	import { mdiChevronDown, mdiInformation } from '@mdi/js'
 	import { computed, onMounted, ref, watch } from 'vue'
-	import { VIcon, VList, VListItem, VListItemTitle } from 'vuetify/components'
-
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import defaultOptions from './config'
 
@@ -22,7 +20,7 @@
 		textKey: 'text',
 		valueKey: 'value',
 		label: 'Sélectionnez une option',
-		outlined: false,
+		outlined: true,
 		required: false,
 		errorMessages: () => [],
 		isHeaderToolbar: false,
@@ -34,6 +32,7 @@
 
 	const isOpen = ref(false)
 	const selectedItem = ref<Record<string, unknown> | string | null>(props.modelValue)
+	const hasError = ref(false)
 
 	const toggleMenu = () => {
 		isOpen.value = !isOpen.value
@@ -43,7 +42,11 @@
 		isOpen.value = false
 	}
 
-	const inputId = ref(`custom-input-select-${Math.random().toString(36).substring(7)}`)
+	const isRequired = computed(() => {
+		return (props.required || props.errorMessages.length > 0) && !selectedItem.value
+	})
+
+	const inputId = ref(`sy-input-select-${Math.random().toString(36).substring(7)}`)
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 	const selectItem = (item: any) => {
@@ -69,8 +72,18 @@
 		selectedItem.value = newValue
 	})
 
+	watch([isOpen, hasError], ([newIsOpen, newHasError]) => {
+		if (!newIsOpen) {
+			hasError.value = (!selectedItem.value && isRequired.value) || props.errorMessages.length > 0
+		}
+		else {
+			hasError.value = newHasError
+		}
+	})
+
 	watch(() => props.errorMessages, (newValue) => {
 		localErrorMessages.value = newValue
+		hasError.value = newValue.length > 0
 	})
 
 	const menu = ref<HTMLElement | null>(null)
@@ -88,6 +101,9 @@
 	})
 
 	const buttonClass = computed(() => {
+		if (props.outlined && hasError.value) {
+			return 'v-btn v-btn--density-default v-btn--size-default v-btn--variant-outlined error text-error'
+		}
 		return props.outlined ? 'v-btn v-btn--density-default v-btn--size-default v-btn--variant-outlined' : 'text-color'
 	})
 
@@ -113,6 +129,14 @@
 		localErrorMessages.value = []
 		return true
 	}
+
+	defineExpose({
+		isOpen,
+		closeList,
+		selectItem,
+		selectedItem,
+		getItemText,
+	})
 </script>
 
 <template>
@@ -128,7 +152,7 @@
 		<div
 			ref="menu"
 			v-click-outside="closeList"
-			:class="['custom-select', buttonClass, 'text-'+options.menu.color]"
+			:class="['sy-input-select', buttonClass, 'text-'+options.menu.color]"
 			role="menu"
 			tabindex="0"
 			@click="toggleMenu"
@@ -136,6 +160,13 @@
 			@keydown.space.prevent="toggleMenu"
 		>
 			<span>{{ selectedItemText }}</span>
+			<VIcon
+				v-if="hasError"
+				class="ml-2"
+				color="error"
+			>
+				{{ mdiInformation }}
+			</VIcon>
 			<VIcon> {{ mdiChevronDown }}</VIcon>
 		</div>
 		<VList
@@ -171,6 +202,11 @@
 <style lang="scss" scoped>
 @use '@/assets/tokens.scss';
 
+.sy-input-select {
+  text-transform: none !important;
+  font-size: 16px;
+}
+
 .v-input {
   cursor: pointer;
   position: relative;
@@ -202,6 +238,10 @@
   }
 }
 
+.error {
+  border-color: tokens.$danger-default;
+}
+
 .v-btn {
   color: tokens.$blue-base;
 }

package/src/components/Customs/SyInputSelect/constants/ExpertiseLevelEnum.ts

@@ -0,0 +1,4 @@
+export enum ExpertiseLevelEnum {
+	DEV = 'dev',
+	DESIGN = 'design',
+}

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

@@ -0,0 +1,140 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import SyInputSelect from '../SyInputSelect.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('SyInputSelect', () => {
+	it('renders the component with default props', () => {
+		const wrapper = mount(SyInputSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.find('.sy-input-select').text()).toBe('Sélectionnez une option')
+	})
+
+	it('displays the selected item text', async () => {
+		const items = [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }]
+		const wrapper = mount(SyInputSelect, {
+			props: { items, modelValue: { text: 'Option 1', value: '1' } },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.sy-input-select').text()).toContain('Option 1')
+	})
+
+	it('does not render error messages when not provided', () => {
+		const wrapper = mount(SyInputSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.v-messages__message').exists()).toBe(false)
+	})
+
+	it('does not render the label when not provided', () => {
+		const wrapper = mount(SyInputSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('label').exists()).toBe(false)
+	})
+
+	it('formats items correctly', () => {
+		const items = ['Option 1', 'Option 2']
+		const wrapper = mount(SyInputSelect, {
+			props: { items, textKey: 'text', valueKey: 'value' },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+		const formattedItems = (wrapper.vm as any).formattedItems
+		expect(formattedItems).toEqual([
+			{ text: 'Option 1', value: 'Option 1' },
+			{ text: 'Option 2', value: 'Option 2' },
+		])
+	})
+
+	it('applies the correct button class when outlined is true', () => {
+		const wrapper = mount(SyInputSelect, {
+			props: { outlined: true },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.sy-input-select').classes()).toContain('v-btn--variant-outlined')
+	})
+
+	it('toggles the menu when the button is clicked', async () => {
+		const wrapper = mount(SyInputSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		const button = wrapper.find('.sy-input-select')
+		await button.trigger('click')
+		expect(wrapper.vm.isOpen).toBe(true)
+		await button.trigger('click')
+		expect(wrapper.vm.isOpen).toBe(false)
+	})
+
+	it('use closeList method', async () => {
+		const wrapper = mount(SyInputSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		await wrapper.vm.closeList()
+		expect(wrapper.vm.isOpen).toBe(false)
+	})
+
+	it('selectItem method', async () => {
+		const wrapper = mount(SyInputSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		await wrapper.vm.selectItem({ text: 'Option 1', value: '1' })
+		expect(wrapper.vm.isOpen).toBe(false)
+		expect(wrapper.vm.selectedItem).toEqual({ text: 'Option 1', value: '1' })
+	})
+
+	it('getItemText method', async () => {
+		const wrapper = mount(SyInputSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		const item = { text: 'Option 1', value: '1' }
+		const text = wrapper.vm.getItemText(item)
+		expect(text).toBe('Option 1')
+	})
+
+	it('watch modelValue', async () => {
+		const wrapper = mount(SyInputSelect, {
+			props: { modelValue: { text: 'Option 1', value: '1' } },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.vm.selectedItem).toEqual({ text: 'Option 1', value: '1' })
+		await wrapper.setProps({ modelValue: { text: 'Option 2', value: '2' } })
+		expect(wrapper.vm.selectedItem).toEqual({ text: 'Option 2', value: '2' })
+	})
+
+	it('watch errorMessages', async () => {
+		const wrapper = mount(SyInputSelect, {
+			props: { errorMessages: ['Error message'] },
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.v-messages__message').exists()).toBe(true)
+		await wrapper.setProps({ errorMessages: [] })
+		expect(wrapper.find('.v-messages__message').exists()).toBe(false)
+	})
+})