@cnamts/synapse 1.0.27 → 1.1.0

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

@@ -0,0 +1,30 @@
+import ExternalLinks from '../ExternalLinks.vue'
+
+const defaultItems = [
+	{ text: 'Ameli.fr', href: 'https://www.ameli.fr' },
+	{ text: 'Service-public.fr', href: 'https://www.service-public.fr' },
+]
+
+describe('ExternalLinks - Visual regression tests', () => {
+	it('displays the external links button', () => {
+		cy.mountWithVuetify(ExternalLinks, {
+			props: { items: defaultItems },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('external-links-default', cy.get('.v-application'))
+	})
+
+	it('displays the external links in fixed position', () => {
+		cy.mountWithVuetify(ExternalLinks, {
+			props: {
+				items: defaultItems,
+				fixed: true,
+				position: 'bottom right',
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('external-links-fixed', cy.get('.v-application'))
+	})
+})

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

@@ -0,0 +1,31 @@
+import FileList from '../FileList.vue'
+
+const defaultUploadList = [
+	{ id: '1', title: 'Carte vitale', state: 'initial', showUploadBtn: true },
+	{ id: '2', title: 'Justificatif de domicile', state: 'success', fileName: 'justificatif.pdf' },
+	{ id: '3', title: 'Ordonnance', state: 'error' },
+]
+
+describe('FileList - Visual regression tests', () => {
+	it('displays the file list with mixed states', () => {
+		cy.mountWithVuetify(FileList, {
+			props: { uploadList: defaultUploadList },
+		})
+
+		cy.get('.upload-list').should('be.visible')
+		cy.matchImageSnapshot('file-list-default', cy.get('.upload-list'))
+	})
+
+	it('displays the file list with delete buttons', () => {
+		cy.mountWithVuetify(FileList, {
+			props: {
+				uploadList: [
+					{ id: '1', title: 'Document', state: 'success', fileName: 'doc.pdf', showDeleteBtn: true },
+				],
+			},
+		})
+
+		cy.get('.upload-list').should('be.visible')
+		cy.matchImageSnapshot('file-list-with-delete', cy.get('.upload-list'))
+	})
+})

package/src/components/FilePreview/accessibilite/Accessibility.mdx

@@ -1,12 +1,90 @@
 import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../FilePreview.stories.ts';
-import '@/stories/styles/shared.css';
+import * as FilePreviewStories from '../FilePreview.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+  AccessibilityGuideLayout,
+  CriteriaSection,
+  CriteriaCard,
+  DemoSection,
+  BestPracticesSection,
+  ResourcesSection,
+  AuditSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={Stories} />
+<Meta of={FilePreviewStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+  componentName="FilePreview"
+  iconSrc={AccessibilityIcon}
+  apgHref="https://www.w3.org/WAI/tutorials/images/"
+>
+  <AuditSection>
+    <div class="mt-2">
+      <p>Rapport d'audit manuel : <a href="/audits/FilePreview.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+      <p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/922" target="_blank" style={{color:'#0C41BD'}}>issue #922</a>)</p>
+    </div>
+  </AuditSection>
 
-<br />
+  <CriteriaSection>
+
+    <CriteriaCard icon="🖼️" title="Prévisualisation des images">
+      <ul>
+        <li><strong>Image native</strong> : Utilisation de l'élément HTML <code>&lt;img&gt;</code></li>
+        <li><strong>Texte alternatif</strong> : Support de l'attribut <code>alt</code> via <code>options.image.alt</code></li>
+        <li><strong>Compatibilité</strong> : Restitution native par les technologies d'assistance</li>
+        <li><strong>Conformité</strong> : Respect du critère RGAA 1.1 relatif aux images porteuses d'information</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="📄" title="Prévisualisation des PDF">
+      <ul>
+        <li><strong>Intégration native</strong> : Utilisation de l'élément <code>&lt;object&gt;</code></li>
+        <li><strong>Type explicite</strong> : Déclaration du MIME type <code>application/pdf</code></li>
+        <li><strong>Fallback accessible</strong> : Message affiché lorsque la prévisualisation n'est pas disponible</li>
+        <li><strong>Compatibilité variable</strong> : Le rendu dépend du navigateur et du lecteur PDF disponible</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="⚠️" title="Gestion des formats non supportés">
+      <ul>
+        <li><strong>Message alternatif</strong> : Affichage d'un contenu de remplacement lorsque le type de fichier n'est pas prévisualisable</li>
+        <li><strong>Slot personnalisé</strong> : Possibilité de fournir un message métier adapté</li>
+        <li><strong>Compréhension utilisateur</strong> : Évite les zones vides ou silencieuses</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="♿" title="Informations accessibles">
+      <ul>
+        <li><strong>Texte alternatif pertinent</strong> : Fournir un <code>alt</code> descriptif lorsque l'image apporte une information</li>
+        <li><strong>Image décorative</strong> : Utiliser un <code>alt=""</code> lorsque l'image n'apporte aucune information utile</li>
+        <li><strong>Message de secours</strong> : Les utilisateurs sont informés lorsqu'un aperçu ne peut être affiché</li>
+        <li><strong>Navigation clavier</strong> : Aucun comportement spécifique requis car le composant n'est pas interactif</li>
+      </ul>
+    </CriteriaCard>
+
+  </CriteriaSection>
+
+  <DemoSection componentName="FilePreview">
+    <Story of={FilePreviewStories.Default} />
+  </DemoSection>
+
+  <BestPracticesSection>
+    <ul>
+      <li>Renseigner systématiquement <code>options.image.alt</code> pour les images informatives.</li>
+      <li>Prévoir un message explicite pour les formats non pris en charge.</li>
+      <li>Ne pas utiliser la prévisualisation comme unique moyen d'accéder au document.</li>
+      <li>Fournir un lien de téléchargement complémentaire lorsque cela est pertinent.</li>
+      <li>Tester les PDF sur plusieurs navigateurs car leur rendu dépend des capacités natives.</li>
+      <li>Vérifier que le contraste des contenus affichés respecte les exigences d'accessibilité.</li>
+    </ul>
+  </BestPracticesSection>
+
+  <ResourcesSection>
+    <ul>
+      <li><a href="https://www.w3.org/WAI/tutorials/images/" target="_blank" rel="noopener noreferrer">WAI - ImagesTutorial</a></li>
+      <li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
+      <li><a href="https://accessibilite.numerique.gouv.fr/" target="_blank" rel="noopener noreferrer">Référentiel Général d'Amélioration de l'Accessibilité (RGAA)</a></li>
+    </ul>
+  </ResourcesSection>
+
+</AccessibilityGuideLayout>

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

@@ -0,0 +1,36 @@
+import FileUpload from '../FileUpload.vue'
+
+describe('FileUpload - Visual regression tests', () => {
+	it('displays the file upload zone by default', () => {
+		cy.mountWithVuetify(FileUpload, {
+			props: { modelValue: [] },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('file-upload-default', cy.get('.v-application'))
+	})
+
+	it('displays the file upload zone in disabled state', () => {
+		cy.mountWithVuetify(FileUpload, {
+			props: {
+				modelValue: [],
+				disabled: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('file-upload-disabled', cy.get('.v-application'))
+	})
+
+	it('displays the file upload zone with multiple files allowed', () => {
+		cy.mountWithVuetify(FileUpload, {
+			props: {
+				modelValue: [],
+				multiple: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('file-upload-multiple', cy.get('.v-application'))
+	})
+})

package/src/components/FilterInline/FilterInline.stories.ts

@@ -537,6 +537,7 @@ export const FilterCombination: Story = {
 
 				<template #profession="{ props }">
 					<SearchListField
+						label="Profession"
 						v-bind="props"
 						:items="professionList"
 					/>
@@ -583,6 +584,7 @@ export const FilterCombination: Story = {
 
 				<template #profession="{ props }">
 					<SearchListField
+						label="Profession"
 						v-bind="props"
 						:items="professionList"
 						color="primary"

package/src/components/FilterInline/FilterInline.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 	import useFilterable, { type FilterProp } from '@/composables/useFilterable/useFilterable'
 	import { mdiChevronDown, mdiChevronUp } from '@mdi/js'
-	import { toRef } from 'vue'
+	import { toRef, watch } from 'vue'
 	import ChipList from '../ChipList/ChipList.vue'
 	import { locales as defaultLocales } from './locales'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
@@ -15,19 +15,25 @@
 	})
 
 	const emits = defineEmits<{
-		'update:modelValue': (value: FilterProp) => void
+		(e: 'update:modelValue', value: FilterProp): void
 	}>()
 
 	const {
 		filters,
-		updateValue,
 		removeChip,
 		resetFilter,
 		getChips,
 		getFilterCount,
 		formatFilterName,
-	} = useFilterable(toRef(props, 'modelValue'), emits)
+	} = useFilterable(toRef(props, 'modelValue'))
 
+	watch(filters, (newFilters) => {
+		if (JSON.stringify(newFilters) === JSON.stringify(props.modelValue)) {
+			// a new array or object do not mean a new value
+			return
+		}
+		emits('update:modelValue', filters.value)
+	}, { deep: true })
 </script>
 
 <template>
@@ -88,7 +94,6 @@
 						'onUpdate:modelValue': (value: unknown) => {
 							if (value !== filter.value) {
 								filter.value = value
-								updateValue()
 							}
 						},
 					}"

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

@@ -0,0 +1,25 @@
+import FilterInline from '../FilterInline.vue'
+
+const defaultFilters = [
+	{
+		name: 'statut',
+		title: 'Statut',
+		value: ['actif'],
+	},
+	{
+		name: 'type',
+		title: 'Type',
+		value: null,
+	},
+]
+
+describe('FilterInline - Visual regression tests', () => {
+	it('displays the inline filters', () => {
+		cy.mountWithVuetify(FilterInline, {
+			props: { modelValue: defaultFilters },
+		})
+
+		cy.get('.sy-filters-inline').should('be.visible')
+		cy.matchImageSnapshot('filter-inline-default', cy.get('.sy-filters-inline'))
+	})
+})

package/src/components/FilterSideBar/FilterSideBar.stories.ts

@@ -10,7 +10,7 @@ import RangeField from '../RangeField/RangeField.vue'
 import SyTextField from '../Customs/SyTextField/SyTextField.vue'
 
 const meta = {
-	title: 'Composants/Filtres/FiltersSideBar',
+	title: 'Composants/Filtres/FilterSideBar',
 	component: FilterSideBar,
 
 	argTypes: {
@@ -254,6 +254,7 @@ export const Default: Story = {
 
 				<template #profession="{ props }">
 					<SearchListField
+						label="Profession"
 						v-bind="props"
 						label="Profession"
 						:items="professionList"
@@ -602,6 +603,7 @@ export const FilterCombination: Story = {
 
 				<template #profession="{ props }">
 					<SearchListField
+						label="Profession"
 						v-bind="props"
 						:items="professionList"
 					/>
@@ -703,6 +705,7 @@ export const FilterCombination: Story = {
 
 				<template #profession="{ props }">
 					<SearchListField
+						label="Profession"
 						v-bind="props"
 						:items="professionList"
 					/>

package/src/components/FilterSideBar/FilterSideBar.vue

@@ -23,19 +23,18 @@
 	})
 
 	const emits = defineEmits<{
-		'update:modelValue': (value: FilterProp) => void
+		(e: 'update:modelValue', value: FilterProp): void
 	}>()
 
 	const {
 		filters,
-		updateValue,
 		removeChip,
 		resetFilter,
 		getChips,
 		getFilterCount,
 		formatFilterName,
 		resetAllFilters,
-	} = useFilterable(toRef(props, 'modelValue'), emits)
+	} = useFilterable(toRef(props, 'modelValue'))
 
 	const drawer = ref(false)
 
@@ -57,7 +56,7 @@
 	}
 
 	function applyFilters(): void {
-		updateValue()
+		emits('update:modelValue', filters.value)
 		drawer.value = false
 	}
 
@@ -76,6 +75,12 @@
 			svg.removeAttribute('role')
 		})
 	})
+
+	function resetAll(): void {
+		resetAllFilters()
+		emits('update:modelValue', filters.value)
+	}
+
 </script>
 
 <template>
@@ -175,7 +180,7 @@
 								<slot
 									:name="`${formatFilterName(filter.name)}`"
 									:props="{
-										modelValue: filter.value as any,
+										modelValue: filter.value,
 										'onUpdate:modelValue': (value: unknown) =>{
 											(filter.value = value)},
 									}"
@@ -207,7 +212,7 @@
 							class="sy-filters-side-bar__reset-btn mb-4"
 							type="reset"
 							:aria-label="locales.resetAriaLabel"
-							@click.stop="resetAllFilters"
+							@click.stop="resetAll"
 						>
 							{{ locales.reset }}
 						</VBtn>

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

@@ -0,0 +1,37 @@
+import FilterSideBar from '../FilterSideBar.vue'
+
+const defaultFilters = [
+	{
+		name: 'statut',
+		title: 'Statut',
+		value: ['actif'],
+	},
+	{
+		name: 'type',
+		title: 'Type',
+		value: null,
+	},
+]
+
+describe('FilterSideBar - Visual regression tests', () => {
+	it('displays the sidebar filter button', () => {
+		cy.mountWithVuetify(FilterSideBar, {
+			props: { modelValue: defaultFilters },
+		})
+
+		cy.get('.sy-filters-side-bar').should('be.visible')
+		cy.matchImageSnapshot('filter-sidebar-default', cy.get('.sy-filters-side-bar'))
+	})
+
+	it('displays the sidebar filter in modale mode', () => {
+		cy.mountWithVuetify(FilterSideBar, {
+			props: {
+				modelValue: defaultFilters,
+				modale: true,
+			},
+		})
+
+		cy.get('.sy-filters-side-bar').should('be.visible')
+		cy.matchImageSnapshot('filter-sidebar-modale', cy.get('.sy-filters-side-bar'))
+	})
+})

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

@@ -0,0 +1,37 @@
+import FooterBar from '../FooterBar.vue'
+
+describe('FooterBar - Visual regression tests', () => {
+	it('displays the footer bar by default', () => {
+		cy.mountWithVuetify(FooterBar)
+
+		cy.get('.v-footer').should('be.visible')
+		cy.matchImageSnapshot('footer-bar-default', cy.get('.v-footer'))
+	})
+
+	it('displays the footer bar without logo', () => {
+		cy.mountWithVuetify(FooterBar, {
+			props: { hideLogo: true },
+		})
+
+		cy.get('.v-footer').should('be.visible')
+		cy.matchImageSnapshot('footer-bar-no-logo', cy.get('.v-footer'))
+	})
+
+	it('displays the footer bar without social media links', () => {
+		cy.mountWithVuetify(FooterBar, {
+			props: { hideSocialMediaLinks: true },
+		})
+
+		cy.get('.v-footer').should('be.visible')
+		cy.matchImageSnapshot('footer-bar-no-social', cy.get('.v-footer'))
+	})
+
+	it('displays the footer bar with a version', () => {
+		cy.mountWithVuetify(FooterBar, {
+			props: { version: '1.2.3' },
+		})
+
+		cy.get('.v-footer').should('be.visible')
+		cy.matchImageSnapshot('footer-bar-version', cy.get('.v-footer'))
+	})
+})

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

@@ -0,0 +1,38 @@
+import FranceConnectBtn from '../FranceConnectBtn.vue'
+
+describe('FranceConnectBtn - Visual regression tests', () => {
+	it('displays the FranceConnect button by default', () => {
+		cy.mountWithVuetify(FranceConnectBtn, {
+			props: { href: 'https://franceconnect.gouv.fr' },
+		})
+
+		cy.get('.sy-france-connect-btn').should('be.visible')
+		cy.matchImageSnapshot('france-connect-btn-default', cy.get('.sy-france-connect-btn'))
+	})
+
+	it('displays the FranceConnect+ button', () => {
+		cy.mountWithVuetify(FranceConnectBtn, {
+			props: {
+				href: 'https://franceconnect.gouv.fr',
+				isConnectPlus: true,
+			},
+		})
+
+		cy.get('.sy-france-connect-btn').should('be.visible')
+		cy.matchImageSnapshot('france-connect-btn-plus', cy.get('.sy-france-connect-btn'))
+	})
+
+	it('displays the FranceConnect button in dark mode', () => {
+		cy.mountWithVuetify(FranceConnectBtn, {
+			props: {
+				href: 'https://franceconnect.gouv.fr',
+				dark: true,
+			},
+		})
+		cy.get('.v-application').invoke('css', 'background-color', '#121212')
+
+		cy.get('.sy-france-connect-btn').should('be.visible')
+		cy.matchImageSnapshot('france-connect-btn-dark', cy.get('.sy-france-connect-btn'))
+		cy.get('.v-application').invoke('css', 'background-color', '')
+	})
+})

package/src/components/HeaderBar/HeaderBurgerMenu/tests/HeaderBurgerMenu.spec.ts

@@ -4,6 +4,10 @@ import { registerHeaderMenuKey } from '../../consts'
 import HeaderBurgerMenu from '../HeaderBurgerMenu.vue'
 import { defineComponent, toRef } from 'vue'
 
+vi.mock('@/utils/functions/throttleDisplayFn/throttleDisplayFn.ts', () => ({
+	default: (fn: (...args: unknown[]) => void) => fn,
+}))
+
 describe('HeaderBurgerMenu', () => {
 	const BtnTestComponent = defineComponent({
 		props: {
@@ -18,10 +22,6 @@ describe('HeaderBurgerMenu', () => {
 		template: `<button @click="$emit('update:modelValue', !open)">Test</button>`,
 	})
 
-	vi.mock('@/utils/functions/throttleDisplayFn/throttleDisplayFn.ts', () => ({
-		default: (fn: (...args: unknown[]) => void) => fn,
-	}))
-
 	afterAll(() => {
 		vi.restoreAllMocks()
 		document.body.innerHTML = ''

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

@@ -0,0 +1,34 @@
+import HeaderLoading from '../HeaderLoading.vue'
+
+describe('HeaderLoading - Visual regression tests', () => {
+	it('displays the inline skeleton loader', () => {
+		cy.mountWithVuetify(HeaderLoading)
+
+		cy.get('.v-skeleton-loader').should('be.visible')
+		cy.matchImageSnapshot('header-loading-default', cy.get('.v-skeleton-loader'))
+	})
+
+	it('displays the standalone loader with aria role', () => {
+		cy.mountWithVuetify(HeaderLoading, {
+			props: {
+				standalone: true,
+				ariaLabel: 'Chargement des données...',
+			},
+		})
+
+		cy.get('[role="alert"]').should('exist')
+		cy.matchImageSnapshot('header-loading-standalone', cy.get('.v-application'))
+	})
+
+	it('displays the loader with custom dimensions', () => {
+		cy.mountWithVuetify(HeaderLoading, {
+			props: {
+				width: '200px',
+				height: '2rem',
+			},
+		})
+
+		cy.get('.v-skeleton-loader').should('be.visible')
+		cy.matchImageSnapshot('header-loading-custom-size', cy.get('.v-skeleton-loader'))
+	})
+})

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

@@ -4,11 +4,11 @@ import { afterAll, describe, expect, it, vi } from 'vitest'
 import HeaderNavbar from '../HeaderNavigationBar.vue'
 import HorizontalNavbar from '../HorizontalNavbar/HorizontalNavbar.vue'
 
-describe('HeaderNavigationBar', () => {
-	vi.mock('@/utils/functions/throttleDisplayFn/throttleDisplayFn.ts', () => ({
-		default: (fn: (...args: unknown[]) => void) => fn,
-	}))
+vi.mock('@/utils/functions/throttleDisplayFn/throttleDisplayFn.ts', () => ({
+	default: (fn: (...args: unknown[]) => void) => fn,
+}))
 
+describe('HeaderNavigationBar', () => {
 	afterAll(() => {
 		vi.restoreAllMocks()
 		document.body.innerHTML = ''