@cnamts/synapse 1.0.27 → 1.1.1

package/src/components/RatingPicker/RatingPicker.mdx

@@ -25,7 +25,6 @@ import RatingPicker from './RatingPicker.vue';
     import { RatingPicker } from '@cnamts/synapse'
 
     const ratingEmotion = ref(-1)
-import '../../stories/styles/shared.css';
     const ratingNumber = ref(-1)
     const ratingStars = ref(-1)
 </script>

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/SocialMediaLinks.mdx

@@ -42,7 +42,6 @@ const links = [
 	},
 ]
 </script>
-import '../../stories/styles/shared.css';
 
 <template>
     <SocialMediaLinks :links="links" />

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

@@ -86,6 +86,7 @@
 		:unique-id="uniqueId"
 		:role="role"
 		:aria-labelledby="role ? `${uniqueId}-title` : undefined"
+		align-center
 	>
 		<VCard
 			:elevation="0"

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'))
+	})
+})