@cnamts/synapse 1.0.26 → 1.1.0

package/src/components/RangeField/RangeSlider/RangeSlider.vue

@@ -273,7 +273,7 @@ $virtual-thumb-size: 40px;
 		transform: translate(0, -50%);
 		width: 100%;
 		height: var(--sy-track-height);
-		background-color: rgb(var(--v-theme-backgroundInfoSubdued));
+		background-color: rgb(var(--v-theme-infoVariant));
 	}
 }
 
@@ -381,7 +381,7 @@ $virtual-thumb-size: 40px;
 	transform: translate(0, -50%);
 	width: 100%;
 	height: var(--sy-track-height);
-	background-color: rgb(var(--v-theme-accentPrimaryLight));
+	background-color: rgb(var(--v-theme-primary));
 	transition: all 0.1s;
 }
 

package/src/components/RangeField/RangeSlider/Tooltip/Tooltip.vue

@@ -57,7 +57,7 @@
 	position: absolute;
 	bottom: 0;
 	background-color: rgb(0 0 0 / 70%);
-	color: rgb(var(--v-theme-textOnDark));
+	color: rgb(var(--v-theme-onPrimary));
 	padding: 4px 8px;
 	border-radius: 4px;
 	will-change: transform;

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.spec.ts

@@ -72,4 +72,153 @@ describe('StatusPage', () => {
 
 		expect(wrapper.html()).toContain('Contenu additionnel')
 	})
+
+	it('n\'affiche pas le bouton si hideBtn est true', () => {
+		const wrapper = mount(StatusPage, {
+			props: {
+				headingLevel: 1,
+				btnText: 'Retour',
+				btnLink: '/',
+				hideBtn: true,
+			},
+		})
+
+		expect(wrapper.find('.v-btn').exists()).toBe(false)
+	})
+
+	it('émet btn-click au clic sur le bouton', async () => {
+		const wrapper = mount(StatusPage, {
+			props: {
+				headingLevel: 1,
+				btnText: 'Retour',
+				btnHref: 'https://example.com',
+			},
+		})
+
+		await wrapper.find('.v-btn').trigger('click')
+		expect(wrapper.emitted('btn-click')).toBeTruthy()
+	})
+
+	it('affiche le slot illustration quand fourni', () => {
+		const wrapper = mount(StatusPage, {
+			props: { headingLevel: 1 },
+			slots: {
+				illustration: '<img src="test.svg" alt="illustration" />',
+			},
+		})
+
+		expect(wrapper.html()).toContain('illustration')
+	})
+
+	it('ajoute aria-labelledby quand role est défini', () => {
+		const wrapper = mount(StatusPage, {
+			props: {
+				headingLevel: 1,
+				pageTitle: 'Erreur',
+				role: 'main',
+				uniqueId: 'test-id',
+			},
+		})
+
+		const container = wrapper.find('[aria-labelledby]')
+		expect(container.exists()).toBe(true)
+		expect(container.attributes('aria-labelledby')).toBe('test-id-title')
+	})
+
+	it('applique la classe heading correcte pour headingLevel > 1', () => {
+		const wrapper = mount(StatusPage, {
+			props: {
+				headingLevel: 2,
+				pageTitle: 'Titre h2',
+			},
+		})
+
+		expect(wrapper.html()).toContain('Titre h2')
+	})
+
+	it('utilise btnLink comme navigation interne quand btnHref est absent', () => {
+		const wrapper = mount(StatusPage, {
+			props: {
+				headingLevel: 1,
+				btnText: 'Accueil',
+				btnLink: '/accueil',
+			},
+		})
+
+		const btn = wrapper.find('.v-btn')
+		expect(btn.exists()).toBe(true)
+	})
+
+	describe('splitMessage', () => {
+		it('retourne [] si message est undefined', () => {
+			const wrapper = mount(StatusPage, {
+				props: { headingLevel: 1 },
+			})
+
+			expect(wrapper.findAll('a[href^="tel:"]').length).toBe(0)
+		})
+
+		it('texte sans numéro → aucun lien tel:', () => {
+			const wrapper = mount(StatusPage, {
+				props: {
+					headingLevel: 1,
+					message: 'Contactez le support.',
+				},
+			})
+
+			expect(wrapper.findAll('a[href^="tel:"]').length).toBe(0)
+			expect(wrapper.text()).toContain('Contactez le support.')
+		})
+
+		it('numéro 4 chiffres → lien tel:', () => {
+			const wrapper = mount(StatusPage, {
+				props: {
+					headingLevel: 1,
+					message: 'Appelez le 3646.',
+				},
+			})
+
+			const telLinks = wrapper.findAll('a[href^="tel:"]')
+			expect(telLinks.length).toBe(1)
+			expect(telLinks[0]!.attributes('href')).toBe('tel:3646')
+		})
+
+		it('numéro 10 chiffres → lien tel:', () => {
+			const wrapper = mount(StatusPage, {
+				props: {
+					headingLevel: 1,
+					message: 'Appelez le 0123456789 pour de l\'aide.',
+				},
+			})
+
+			const telLinks = wrapper.findAll('a[href^="tel:"]')
+			expect(telLinks.length).toBe(1)
+			expect(telLinks[0]!.attributes('href')).toBe('tel:0123456789')
+		})
+
+		it('numéro en milieu de texte → texte avant + lien + texte après', () => {
+			const wrapper = mount(StatusPage, {
+				props: {
+					headingLevel: 1,
+					message: 'Contactez-nous au 0123456789 pour toute question.',
+				},
+			})
+
+			expect(wrapper.text()).toContain('Contactez-nous au')
+			expect(wrapper.text()).toContain('pour toute question.')
+			expect(wrapper.find('a[href="tel:0123456789"]').exists()).toBe(true)
+		})
+
+		it('plusieurs numéros dans le message', () => {
+			const wrapper = mount(StatusPage, {
+				props: {
+					headingLevel: 1,
+					message: 'Numéros : 3646 et 0123456789.',
+				},
+			})
+
+			const telLinks = wrapper.findAll('a[href^="tel:"]')
+			expect(telLinks.length).toBe(2)
+		})
+	})
 })

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/SubHeader.vue

@@ -220,7 +220,7 @@
 	}
 
 	.vd-data-list-item-action-btn {
-		color: rgb(var(--v-theme-textOnDark)) !important;
+		color: rgb(var(--v-theme-onPrimary)) !important;
 	}
 }