@cnamts/synapse 1.0.27 → 1.1.0

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

@@ -0,0 +1,52 @@
+import RatingPicker from '../RatingPicker.vue'
+
+describe('RatingPicker - Visual regression tests', () => {
+	it('displays the stars rating picker', () => {
+		cy.mountWithVuetify(RatingPicker, {
+			props: {
+				type: 'stars',
+				label: 'Évaluation',
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('rating-picker-stars', cy.get('.v-application'))
+	})
+
+	it('displays the number rating picker', () => {
+		cy.mountWithVuetify(RatingPicker, {
+			props: {
+				type: 'number',
+				label: 'Satisfaction',
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('rating-picker-number', cy.get('.v-application'))
+	})
+
+	it('displays the emotion rating picker', () => {
+		cy.mountWithVuetify(RatingPicker, {
+			props: {
+				type: 'emotion',
+				label: 'Ressenti',
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('rating-picker-emotion', cy.get('.v-application'))
+	})
+
+	it('displays the rating picker in readonly mode', () => {
+		cy.mountWithVuetify(RatingPicker, {
+			props: {
+				type: 'stars',
+				label: 'Évaluation',
+				readonly: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('rating-picker-readonly', cy.get('.v-application'))
+	})
+})

package/src/components/SearchListField/SearchListField.mdx

@@ -3,7 +3,7 @@ import '../../stories/styles/shared.css';
 import * as SearchListFieldStories from './SearchListField.stories';
 import SearchListField from './SearchListField.vue';
 
-<Meta title="Composants/Formulaires/SearchListField" component={SearchListField}/>
+<Meta title="Composants/Filtres/SearchListField" component={SearchListField}/>
 
 <div className="header">
   <h1>SearchListField</h1>

package/src/components/SearchListField/SearchListField.stories.ts

@@ -3,7 +3,7 @@ import SearchListField from './SearchListField.vue'
 import { fn } from '@storybook/test'
 
 const meta = {
-	title: 'Composants/Formulaires/SearchListField',
+	title: 'Composants/Filtres/SearchListField',
 	component: SearchListField,
 	parameters: {
 		layout: 'fullscreen',

package/src/components/SearchListField/SearchListField.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 	import { ref, computed, watch } from 'vue'
 	import { mdiMagnify } from '@mdi/js'
+	import { useId } from 'vue'
 	import type { PropType } from 'vue'
 	import type { SearchListItem } from './types'
 	import { locales as defaultLocales } from './locales'
@@ -11,7 +12,7 @@
 
 	const props = defineProps({
 		modelValue: {
-			type: Array as PropType<unknown[]>,
+			type: Array as PropType<unknown[] | undefined | null>,
 			default: () => [],
 		},
 		items: {
@@ -52,7 +53,7 @@
 	watch(
 		() => props.modelValue,
 		(newValue) => {
-			internalValue.value = newValue
+			internalValue.value = Array.isArray(newValue) ? [...newValue] : []
 		}, { immediate: true },
 	)
 
@@ -94,6 +95,8 @@
 		emit('update:modelValue', [...value])
 	}
 
+	const id = useId()
+
 	defineExpose({
 		filteredItems,
 		search,
@@ -113,6 +116,7 @@
 			tabindex="0"
 			data-test-id="search-input"
 			:bg-color="props.bgColor"
+			:disable-error-handling="true"
 		>
 			<template #prepend-inner>
 				<SyIcon
@@ -157,10 +161,11 @@
 					<!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
 					<label
 						class="label"
-						:for="`checkbox-${slugify(item.label)}`"
+						:for="`checkbox-${slugify(item.label)}-${id}`"
 					>
 						<SyCheckbox
-							:id="`checkbox-${slugify(item.label)}`"
+							:id="`checkbox-${slugify(item.label)}-${id}`"
+							:name="`checkbox-${slugify(item.label)}-${id}`"
 							hide-details
 							density="compact"
 							class="ml-2"

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

@@ -69,6 +69,56 @@ describe('SearchListField.vue', () => {
 		).toBe(false)
 	})
 
+	it('supports null modelValue and can select an item', async () => {
+		const wrapper = mount(SearchListField, {
+			props: {
+				label: 'Filtrer la liste des Items',
+				items: [
+					{
+						label: 'Item 1',
+						value: 1,
+					},
+					{
+						label: 'Item 2',
+						value: 2,
+					},
+				],
+				modelValue: null,
+			},
+		})
+
+		const listItem = wrapper.find('[data-test-id="suggestions-list"] li')
+		await listItem.find('input[type="checkbox"]').trigger('click')
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.emitted('update:modelValue')).toEqual([[[1]]])
+	})
+
+	it('supports undefined modelValue and can select an item', async () => {
+		const wrapper = mount(SearchListField, {
+			props: {
+				label: 'Filtrer la liste des Items',
+				items: [
+					{
+						label: 'Item 1',
+						value: 1,
+					},
+					{
+						label: 'Item 2',
+						value: 2,
+					},
+				],
+				modelValue: undefined,
+			},
+		})
+
+		const listItem = wrapper.find('[data-test-id="suggestions-list"] li')
+		await listItem.find('input[type="checkbox"]').trigger('click')
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.emitted('update:modelValue')).toEqual([[[1]]])
+	})
+
 	it('selects an item', async () => {
 		const wrapper = mount(SearchListField, {
 			props: {
@@ -394,4 +444,81 @@ describe('SearchListField.vue', () => {
 			expect(emittedEvents![1]).toEqual([[]])
 		})
 	})
+
+	describe('reset and immutability', () => {
+		it('clears internalValue when modelValue is reset to undefined after selections', async () => {
+			const wrapper = mount(SearchListField, {
+				props: {
+					label: 'Test',
+					items: [
+						{ label: 'Item 1', value: 1 },
+						{ label: 'Item 2', value: 2 },
+					],
+				},
+			})
+
+			// Select item 1
+			const checkboxes = wrapper.findAll('[data-test-id="suggestions-list"] input[type="checkbox"]')
+			await checkboxes[0].trigger('click')
+			await wrapper.vm.$nextTick()
+
+			// Simulate parent syncing modelValue back
+			await wrapper.setProps({ modelValue: [1] })
+
+			// Reset: parent sets modelValue to undefined (filter reset)
+			await wrapper.setProps({ modelValue: undefined })
+
+			// Select item 2
+			await checkboxes[1].trigger('click')
+			await wrapper.vm.$nextTick()
+
+			const emitted = wrapper.emitted('update:modelValue')!
+			// Last emit should only contain [2], not [1, 2]
+			expect(emitted[emitted.length - 1]).toEqual([[2]])
+		})
+
+		it('does not mutate the modelValue prop array when selecting items', async () => {
+			const modelValue = [1]
+			const wrapper = mount(SearchListField, {
+				props: {
+					label: 'Test',
+					items: [
+						{ label: 'Item 1', value: 1 },
+						{ label: 'Item 2', value: 2 },
+					],
+					modelValue,
+				},
+			})
+
+			await wrapper.findAll('[data-test-id="suggestions-list"] input[type="checkbox"]')[1].trigger('click')
+			await wrapper.vm.$nextTick()
+
+			// Original prop array must not be mutated
+			expect(modelValue).toEqual([1])
+			// Emitted value should include both items
+			expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[1, 2]])
+		})
+
+		it('does not mutate the modelValue prop array when deselecting items', async () => {
+			const modelValue = [1, 2]
+			const wrapper = mount(SearchListField, {
+				props: {
+					label: 'Test',
+					items: [
+						{ label: 'Item 1', value: 1 },
+						{ label: 'Item 2', value: 2 },
+					],
+					modelValue,
+				},
+			})
+
+			await wrapper.findAll('[data-test-id="suggestions-list"] input[type="checkbox"]')[0].trigger('click')
+			await wrapper.vm.$nextTick()
+
+			// Original prop array must not be mutated
+			expect(modelValue).toEqual([1, 2])
+			// Emitted value should only contain item 2
+			expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[2]])
+		})
+	})
 })

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

@@ -0,0 +1,35 @@
+import SearchListField from '../SearchListField.vue'
+
+const defaultItems = [
+	{ label: 'Option A', value: 'a' },
+	{ label: 'Option B', value: 'b' },
+	{ label: 'Option C', value: 'c' },
+	{ label: 'Option D', value: 'd' },
+]
+
+describe('SearchListField - Visual regression tests', () => {
+	it('displays the search list field by default', () => {
+		cy.mountWithVuetify(SearchListField, {
+			props: {
+				label: 'Rechercher',
+				items: defaultItems,
+			},
+		})
+
+		cy.get('.sy-search-list').should('be.visible')
+		cy.matchImageSnapshot('search-list-field-default', cy.get('.sy-search-list'))
+	})
+
+	it('displays the search list field with selected items', () => {
+		cy.mountWithVuetify(SearchListField, {
+			props: {
+				label: 'Rechercher',
+				items: defaultItems,
+				modelValue: ['a', 'c'],
+			},
+		})
+
+		cy.get('.sy-search-list').should('be.visible')
+		cy.matchImageSnapshot('search-list-field-with-selection', cy.get('.sy-search-list'))
+	})
+})

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

@@ -0,0 +1,16 @@
+import SkipLink from '../SkipLink.vue'
+
+describe('SkipLink - Visual regression tests', () => {
+	it('displays the skip link when focused', () => {
+		cy.mountWithVuetify(SkipLink, {
+			props: {
+				label: 'Aller au contenu principal',
+				target: '#main',
+			},
+		})
+
+		cy.get('.sy-skip-link').focus()
+		cy.get('.sy-skip-link').should('be.visible')
+		cy.matchImageSnapshot('skip-link-focused', cy.get('.v-application'))
+	})
+})

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

@@ -0,0 +1,33 @@
+import SocialMediaLinks from '../SocialMediaLinks.vue'
+import { mdiFacebook, mdiLinkedin, mdiYoutube } from '@mdi/js'
+import { h } from 'vue'
+
+const defaultLinks = [
+	{ name: 'LinkedIn', href: 'https://linkedin.com', icon: mdiLinkedin },
+	{ name: 'Facebook', href: 'https://facebook.com', icon: mdiFacebook },
+	{ name: 'YouTube', href: 'https://youtube.com', icon: mdiYoutube },
+]
+
+describe('SocialMediaLinks - Visual regression tests', () => {
+	it('displays the social media links by default', () => {
+		cy.mountWithVuetify(
+			h('div', { style: 'background-color: #1e1e2e; padding: 16px;' }, [
+				h(SocialMediaLinks, { links: defaultLinks }),
+			]),
+		)
+
+		cy.get('.vd-social-media-links-content').should('be.visible')
+		cy.matchImageSnapshot('social-media-links-default', cy.get('.vd-social-media-links-content').parent().parent())
+	})
+
+	it('displays the social media links without native heading', () => {
+		cy.mountWithVuetify(
+			h('div', { style: 'background-color: #1e1e2e; padding: 16px;' }, [
+				h(SocialMediaLinks, { links: defaultLinks, useNativeHeading: false }),
+			]),
+		)
+
+		cy.get('.vd-social-media-links-content').should('be.visible')
+		cy.matchImageSnapshot('social-media-links-no-native-heading', cy.get('.vd-social-media-links-content').parent().parent())
+	})
+})

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

@@ -0,0 +1,47 @@
+import StatusPage from '../StatusPage.vue'
+import { h } from 'vue'
+
+const illustrationSlot = {
+	illustration: () => h('div', {
+		style: 'width:120px;height:120px;background:#e0e7ff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:48px;',
+	}, '404'),
+}
+
+describe('StatusPage - Visual regression tests', () => {
+	it('displays the status page with a title', () => {
+		cy.mountWithVuetify(StatusPage, {
+			props: { pageTitle: 'Erreur 404' },
+			slots: illustrationSlot,
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('status-page-default', cy.get('.v-application'))
+	})
+
+	it('displays the status page with all content', () => {
+		cy.mountWithVuetify(StatusPage, {
+			props: {
+				pageTitle: 'Page introuvable',
+				message: 'La page que vous recherchez n\'existe pas.',
+				btnText: 'Retour à l\'accueil',
+				btnHref: '/',
+			},
+			slots: illustrationSlot,
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('status-page-full', cy.get('.v-application'))
+	})
+
+	it('displays the status page without button', () => {
+		cy.mountWithVuetify(StatusPage, {
+			props: {
+				pageTitle: 'Erreur',
+				hideBtn: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('status-page-no-btn', cy.get('.v-application'))
+	})
+})

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

@@ -0,0 +1,48 @@
+import SubHeader from '../SubHeader.vue'
+
+describe('SubHeader - Visual regression tests', () => {
+	it('displays the sub header by default', () => {
+		cy.mountWithVuetify(SubHeader, {
+			props: { titleText: 'Titre de la page' },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('sub-header-default', cy.get('.v-application'))
+	})
+
+	it('displays the sub header with subtitle', () => {
+		cy.mountWithVuetify(SubHeader, {
+			props: {
+				titleText: 'Titre',
+				subTitleText: 'Sous-titre',
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('sub-header-with-subtitle', cy.get('.v-application'))
+	})
+
+	it('displays the sub header without back button', () => {
+		cy.mountWithVuetify(SubHeader, {
+			props: {
+				titleText: 'Titre',
+				hideBackBtn: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('sub-header-no-back-btn', cy.get('.v-application'))
+	})
+
+	it('displays the sub header in loading state', () => {
+		cy.mountWithVuetify(SubHeader, {
+			props: {
+				titleText: 'Titre',
+				loading: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('sub-header-loading', cy.get('.v-application'))
+	})
+})

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

@@ -0,0 +1,33 @@
+import SyHeading from '../SyHeading.vue'
+
+describe('SyHeading - Visual regression tests', () => {
+	it('displays a level 1 heading', () => {
+		cy.mountWithVuetify(SyHeading, {
+			props: { level: 1 },
+			slots: { default: 'Titre de niveau 1' },
+		})
+
+		cy.get('.sy-heading').should('be.visible')
+		cy.matchImageSnapshot('sy-heading-level-1', cy.get('.sy-heading'))
+	})
+
+	it('displays a level 2 heading', () => {
+		cy.mountWithVuetify(SyHeading, {
+			props: { level: 2 },
+			slots: { default: 'Titre de niveau 2' },
+		})
+
+		cy.get('.sy-heading').should('be.visible')
+		cy.matchImageSnapshot('sy-heading-level-2', cy.get('.sy-heading'))
+	})
+
+	it('displays a level 3 heading', () => {
+		cy.mountWithVuetify(SyHeading, {
+			props: { level: 3 },
+			slots: { default: 'Titre de niveau 3' },
+		})
+
+		cy.get('.sy-heading').should('be.visible')
+		cy.matchImageSnapshot('sy-heading-level-3', cy.get('.sy-heading'))
+	})
+})

package/src/components/SyTextArea/SyTextArea.stories.ts

@@ -20,6 +20,24 @@ const meta = {
 	},
 	argTypes: {
 		...getValidationDocumentation('string'),
+		uniqueId: {
+			control: { type: 'text' },
+			description: 'Identifiant unique du composant',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'undefined' },
+				category: 'props',
+			},
+		},
+		counter: {
+			control: { type: 'boolean' },
+			description: 'Affiche un compteur de caractères. `true` affiche uniquement le nombre de caractères saisis, un nombre affiche le format `X / N`.',
+			table: {
+				type: { summary: 'boolean | number' },
+				defaultValue: { summary: 'false' },
+				category: 'props',
+			},
+		},
 		label: {
 			control: { type: 'text' },
 			description: 'Texte affiché au-dessus du champ',
@@ -139,6 +157,7 @@ export const Default: Story = {
 				name: 'Template',
 				code: `<template>
 	<SyTextArea
+		uniqueId: 'text-area-unique-id',
 		v-model="text"
 		label="Texte"
 		placeholder="Entrez votre texte ici"
@@ -205,6 +224,7 @@ export const Required: Story = {
 				name: 'Template',
 				code: `<template>
 	<SyTextArea
+		uniqueId: 'text-area-unique-id',
 		v-model="text"
 		label="Texte requis"
 		:required="true"
@@ -333,6 +353,7 @@ export const Trim: Story = {
 				name: 'Template',
 				code: `<template>
 	<SyTextArea
+		uniqueId: 'text-area-unique-id',
 		v-model="text"
 		label="Trim text area"
 		:trim="true"
@@ -373,6 +394,7 @@ export const ReplaceTabs: Story = {
 				name: 'Template',
 				code: `<template>
 	<SyTextArea
+	    uniqueId: 'text-area-unique-id',
 		v-model="text"
 		label="Replace tabs text area"
 		:replace-tabs="4"
@@ -408,6 +430,7 @@ export const MaxLines: Story = {
 				name: 'Template',
 				code: `<template>
 	<SyTextArea
+	    uniqueId: 'text-area-unique-id',
 		v-model="text"
 		label="Max lines text area"
 		:max-lines="5"
@@ -470,6 +493,7 @@ export const AutoWrap: Story = {
 				name: 'Template',
 				code: `<template>
 	<SyTextArea
+	    uniqueId: 'text-area-unique-id',
 		v-model="text"
 		label="Auto wrap text area"
 		:auto-wrap="50"
@@ -515,6 +539,7 @@ export const Normalize: Story = {
 				name: 'Template',
 				code: `<template>
 	<SyTextArea
+	    uniqueId: 'text-area-unique-id',
 		v-model="text"
 		label="Normalize text area"
 		:normalize="true"

package/src/components/SyTextArea/SyTextArea.vue

@@ -10,6 +10,8 @@
 	import { locales } from './locales'
 
 	const props = withDefaults(defineProps<{
+		uniqueId: string
+		counter?: boolean | number | string
 		modelValue?: string
 		trim?: boolean
 		replaceTabs?: number
@@ -30,6 +32,7 @@
 		modelValue: '',
 		trim: false,
 		replaceTabs: undefined,
+		counter: false,
 		maxLines: undefined,
 		autoWrap: undefined,
 		normalize: false,
@@ -141,6 +144,8 @@
 		return 'rgb(var(--v-theme-onSurface))'
 	})
 
+	const counter = computed(() => props.counter === false ? undefined : props.counter)
+
 	const showClear = computed(() =>
 		props.clearable && !props.disabled && !props.readonly && !!internalValue.value,
 	)
@@ -179,11 +184,13 @@
 <template>
 	<div class="sy-textarea">
 		<VTextarea
+			:id="uniqueId"
 			ref="textAreaRef"
 			:model-value="internalValue"
 			:variant="variant"
 			:color="color"
 			:bg-color="props.bgColor"
+			:counter="counter"
 			:error="hasError"
 			:error-messages="errors"
 			:class="{