@cnamts/synapse 1.0.27 → 1.1.0

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

@@ -0,0 +1,49 @@
+import TableToolbar from '../TableToolbar.vue'
+
+describe('TableToolbar - Visual regression tests', () => {
+	it('displays the table toolbar by default', () => {
+		cy.mountWithVuetify(TableToolbar, {
+			props: { nbTotal: 42 },
+		})
+
+		cy.get('.sy-table-toolbar').should('be.visible')
+		cy.matchImageSnapshot('table-toolbar-default', cy.get('.sy-table-toolbar'))
+	})
+
+	it('displays the table toolbar with filtered count', () => {
+		cy.mountWithVuetify(TableToolbar, {
+			props: {
+				nbTotal: 42,
+				nbFiltered: 10,
+			},
+		})
+
+		cy.get('.sy-table-toolbar').should('be.visible')
+		cy.matchImageSnapshot('table-toolbar-filtered', cy.get('.sy-table-toolbar'))
+	})
+
+	it('displays the table toolbar with add button', () => {
+		cy.mountWithVuetify(TableToolbar, {
+			props: {
+				nbTotal: 42,
+				showAddButton: true,
+				addButtonLabel: 'Ajouter',
+			},
+		})
+
+		cy.get('.sy-table-toolbar').should('be.visible')
+		cy.matchImageSnapshot('table-toolbar-with-add-btn', cy.get('.sy-table-toolbar'))
+	})
+
+	it('displays the table toolbar in loading state', () => {
+		cy.mountWithVuetify(TableToolbar, {
+			props: {
+				nbTotal: 42,
+				loading: true,
+			},
+		})
+
+		cy.get('.sy-table-toolbar').should('be.visible')
+		cy.matchImageSnapshot('table-toolbar-loading', cy.get('.sy-table-toolbar'))
+	})
+})

package/src/components/Tables/SyServerTable/SyServerTable.vue

@@ -513,11 +513,11 @@
 }
 
 .sy-server-table--pinned-left-shadow :deep(.sy-table__pinned--left) {
-	box-shadow: 2px 0 6px -4px rgba(var(--v-theme-grey-base), 0.6);
+	box-shadow: 2px 0 6px -4px rgba(var(--v-theme-onSurfaceVariant), 0.6);
 }
 
 .sy-server-table--pinned-right-shadow :deep(.sy-table__pinned--right) {
-	box-shadow: -2px 0 6px -4px rgba(var(--v-theme-grey-base), 0.6);
+	box-shadow: -2px 0 6px -4px rgba(var(--v-theme-onSurfaceVariant), 0.6);
 }
 
 .sy-server-table--pinned-select-left :deep(.v-data-table__th--select),
@@ -558,7 +558,7 @@
 .sy-server-table--pinned-left-shadow.sy-server-table--pinned-select-left :deep(.v-table__wrapper > table > tbody > tr:not(.v-data-table-rows-loading) > .v-data-table__td:first-child),
 .sy-server-table--pinned-left-shadow.sy-server-table--pinned-select-left :deep(.v-data-table__tbody .v-data-table__tr:not(.v-data-table-rows-loading) > .v-data-table__td:first-child),
 .sy-server-table--pinned-left-shadow.sy-server-table--pinned-select-left :deep(.v-data-table__tbody tr:not(.v-data-table-rows-loading) > td:first-child) {
-	box-shadow: 2px 0 6px -4px rgba(var(--v-theme-grey-base), 0.6);
+	box-shadow: 2px 0 6px -4px rgba(var(--v-theme-onSurfaceVariant), 0.6);
 }
 /* stylelint-enable @stylistic/max-line-length */
 

package/src/components/Tables/SyServerTable/accessibilite/Accessibility.mdx

@@ -1,10 +1,117 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as SyServerTable from '../SyServerTable.stories';
+import { Meta, Story } from '@storybook/blocks';
+import * as Stories from '../SyServerTable.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import '@/stories/styles/shared.css';
+import {
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    DemoSection,
+    BestPracticesSection,
+    ResourcesSection,
+    AuditSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={SyServerTable} />
+<Meta of={Stories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+    componentName="SyServerTable"
+    iconSrc={AccessibilityIcon}
+>
+
+    [//]: # (<AuditSection>)
+
+    [//]: # ( <div>)
+
+        [//]: # ( Rapport d’audit manuel :{' '})
+
+        [//]: # ( <a href="/audits/SyServerTable.xlsx" style={{color: '#0C41BD'}}>Voir le rapport</a>)
+
+        [//]: # ( </div>)
+
+    [//]: # ( <div style={{color: 'grey', fontSize: '14px', marginTop: '0px'}}>)
+
+        [//]: # ( Correctifs associés &#40;<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/XXX" target="_blank" style={{color: '#0C41BD'}}>issue #XXX</a>&#41;)
+
+        [//]: # ( </div>)
+
+    [//]: # (</AuditSection>)
+
+    <CriteriaSection>
+        <CriteriaCard icon="🏷️" title="Structure et rôles">
+            <ul>
+                <li>Le composant repose sur <code>VDataTableServer</code> et conserve la structure sémantique native d’un tableau HTML (<code>table</code>, <code>caption</code>, <code>thead</code>, <code>tbody</code>, <code>th</code>, <code>td</code>).</li>
+                <li>Une légende (<code>caption</code>) décrit le contenu du tableau et reste disponible aux technologies d’assistance même lorsqu’elle est visuellement masquée.</li>
+                <li>Les en-têtes de colonnes sont rendus dans des cellules <code>th</code> et exposent les informations de tri, de redimensionnement et de filtrage.</li>
+                <li>La zone de statut utilise <code>role="status"</code> et <code>aria-live="polite"</code> pour annoncer les changements du nombre de résultats.</li>
+                <li>Les cases à cocher de sélection utilisent des libellés explicites pour la sélection globale et individuelle.</li>
+                <li>La pagination, les filtres et l’organisation des colonnes conservent les rôles natifs des contrôles HTML.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="⌨️" title="Navigation clavier">
+            <ul>
+                <li>Les en-têtes triables sont activables au clavier via Entrée ou Espace.</li>
+                <li>Les filtres intégrés sont accessibles par Tabulation dans l’ordre naturel du tableau.</li>
+                <li>Les cases à cocher de sélection de ligne et de sélection globale sont entièrement utilisables au clavier.</li>
+                <li>Les lignes cliquables restent focalisables et déclenchables au clavier lorsqu’elles sont activées.</li>
+                <li>La pagination est navigable au clavier et permet de modifier la page et le nombre d’éléments par page.</li>
+                <li>Le bouton de réinitialisation des filtres est accessible par Tabulation et activable via Entrée ou Espace.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="📢" title="Annonces aux technologies d’assistance">
+            <ul>
+                <li>Le changement du nombre de résultats est annoncé automatiquement dans une région <code>aria-live</code>.</li>
+                <li>Les actions de sélection de lignes sont vocalisées grâce à des libellés explicites.</li>
+                <li>Le <code>caption</code> fournit un contexte global pour la lecture du tableau.</li>
+                <li>Les états de tri sont exposés par les attributs ARIA appliqués aux en-têtes.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🎨" title="Contraste et lisibilité">
+            <ul>
+                <li>Les styles du design system assurent un contraste suffisant pour les textes, les bordures et les états de focus.</li>
+                <li>Les lignes alternées (<code>striped</code>) utilisent une variation de fond discrète sans compromettre la lisibilité.</li>
+                <li>Les colonnes figées conservent un fond opaque et des ombres pour maintenir la séparation visuelle.</li>
+                <li>Les états sélectionnés, triés ou filtrés restent perceptibles visuellement et programmatiquement.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="📌" title="Fonctionnalités avancées accessibles">
+            <ul>
+                <li>Le tri multi-colonnes et obligatoire conserve les attributs ARIA appropriés.</li>
+                <li>Les filtres par colonne utilisent des champs correctement libellés.</li>
+                <li>La sélection simple ou multiple annonce clairement l’état des cases à cocher.</li>
+                <li>Les colonnes épinglées restent accessibles sans altérer l’ordre de lecture du tableau.</li>
+                <li>L’organisation des colonnes conserve la structure et la cohérence des en-têtes.</li>
+                <li>L’état du tableau peut être mémorisé localement sans impact sur l’accessibilité.</li>
+            </ul>
+        </CriteriaCard>
+    </CriteriaSection>
+
+    <DemoSection componentName="SyServerTable">
+        <Story of={Stories.Default}/>
+    </DemoSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li>Renseignez toujours la propriété <code>caption</code> pour décrire clairement l’objet du tableau.</li>
+            <li>Utilisez des intitulés de colonnes explicites, uniques et concis.</li>
+            <li>Activez <code>showFilters</code> uniquement lorsque chaque filtre dispose d’un libellé pertinent.</li>
+            <li>Assurez-vous que les lignes cliquables disposent d’une action compréhensible.</li>
+            <li>Testez la navigation clavier après activation du tri, des filtres, de la sélection et de la pagination.</li>
+            <li>Vérifiez que les annonces <code>aria-live</code> restent pertinentes lors des chargements serveur.</li>
+            <li>Conservez un contraste suffisant pour les colonnes figées et les états sélectionnés.</li>
+        </ul>
+    </BestPracticesSection>
+
+    <ResourcesSection>
+        <ul>
+            <li><a href="https://www.w3.org/WAI/tutorials/tables/" target="_blank" rel="noopener noreferrer">W3C WAI – Tables Tutorial</a></li>
+            <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/table/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices – Table Pattern</a></li>
+            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html" target="_blank" rel="noopener noreferrer">WCAG – Status Messages (4.1.3)</a></li>
+            <li><a href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/" target="_blank" rel="noopener noreferrer">RGAA – critères 5 (tableaux), 7 (ARIA), 10 (présentation)</a></li>
+        </ul>
+    </ResourcesSection>
+</AccessibilityGuideLayout>

package/src/components/Tables/SyServerTable/tests/SyServerTable.visual.cy.ts

@@ -0,0 +1,58 @@
+import SyServerTable from '../SyServerTable.vue'
+
+const defaultHeaders = [
+	{ title: 'Nom', key: 'nom', sortable: true },
+	{ title: 'Prénom', key: 'prenom', sortable: true },
+	{ title: 'Ville', key: 'ville' },
+]
+
+const defaultItems = [
+	{ nom: 'Dupont', prenom: 'Jean', ville: 'Paris' },
+	{ nom: 'Martin', prenom: 'Marie', ville: 'Lyon' },
+]
+
+describe('SyServerTable - Visual regression tests', () => {
+	it('displays the server table by default', () => {
+		cy.mountWithVuetify(SyServerTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				serverItemsLength: 50,
+				caption: 'Tableau serveur',
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('sy-server-table-default', cy.get('.v-application'))
+	})
+
+	it('displays the server table in loading state', () => {
+		cy.mountWithVuetify(SyServerTable, {
+			props: {
+				headers: defaultHeaders,
+				items: undefined,
+				serverItemsLength: 0,
+				caption: 'Tableau chargement',
+				loading: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('sy-server-table-loading', cy.get('.v-application'))
+	})
+
+	it('displays the server table with selection', () => {
+		cy.mountWithVuetify(SyServerTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				serverItemsLength: 2,
+				caption: 'Tableau avec sélection',
+				showSelect: true,
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('sy-server-table-with-select', cy.get('.v-application'))
+	})
+})

package/src/components/Tables/SyTable/accessibilite/Accessibility.mdx

@@ -1,10 +1,119 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as SyTable from '../SyTable.stories';
+import { Meta, Story } from '@storybook/blocks';
+import * as Stories from '../SyTable.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import '@/stories/styles/shared.css';
+import {
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    DemoSection,
+    BestPracticesSection,
+    ResourcesSection,
+    AuditSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={SyTable} />
+<Meta of={Stories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+    componentName="SyTable"
+    iconSrc={AccessibilityIcon}
+>
+
+    [//]: # (<AuditSection>)
+
+    [//]: # ( <div>)
+
+        [//]: # ( Rapport d’audit manuel :{' '})
+
+        [//]: # ( <a href="/audits/SyTable.xlsx" style={{color: '#0C41BD'}}>Voir le rapport</a>)
+
+        [//]: # ( </div>)
+
+    [//]: # ( <div style={{color: 'grey', fontSize: '14px', marginTop: '0px'}}>)
+
+        [//]: # ( Correctifs associés &#40;)
+
+        [//]: # ( <a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/XXX" target="_blank" rel="noopener noreferrer" style={{color: '#0C41BD'}}>issue #XXX</a>&#41;)
+
+        [//]: # ( </div>)
+
+    [//]: # (</AuditSection>)
+
+    <CriteriaSection>
+        <CriteriaCard icon="🏷️" title="Structure et rôles">
+            <ul>
+                <li>Le composant repose sur <code>VDataTable</code> et conserve la structure sémantique native d’un tableau HTML (<code>table</code>, <code>caption</code>, <code>thead</code>, <code>tbody</code>, <code>th</code>, <code>td</code>).</li>
+                <li>Une légende (<code>caption</code>) est injectée dynamiquement au montage et reste accessible via la classe <code>d-sr-only</code> lorsqu’elle est masquée visuellement.</li>
+                <li>Les en-têtes utilisent des cellules <code>th</code> avec <code>scope="col"</code> et exposent les états de tri via <code>aria-sort</code>.</li>
+                <li>Les filtres et la pagination conservent les rôles natifs des composants de formulaire.</li>
+                <li>Les slots permettent d’étendre le tableau sans altérer sa structure sémantique.</li>
+                <li>L’état de tri, pagination et sélection peut être persisté sans impacter l’accessibilité.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="⌨️" title="Navigation clavier">
+            <ul>
+                <li>Les en-têtes de colonnes sont focalisables via <code>tabindex="0"</code> et activables au clavier.</li>
+                <li>Les actions de tri sont accessibles via Entrée ou Espace.</li>
+                <li>Les filtres sont navigables dans l’ordre naturel de tabulation.</li>
+                <li>Les cases à cocher de sélection (ligne et globale) sont entièrement accessibles au clavier.</li>
+                <li>La pagination est utilisable au clavier (page, items par page, navigation).</li>
+                <li>Les lignes cliquables restent accessibles via clavier lorsqu’activées.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="📢" title="Annonces aux technologies d’assistance">
+            <ul>
+                <li>Le <code>caption</code> fournit un contexte global de lecture du tableau.</li>
+                <li>Un region <code>role="status"</code> avec <code>aria-live="polite"</code> annonce les changements de résultats.</li>
+                <li>Les états de tri sont exposés via <code>aria-sort</code> sur les en-têtes.</li>
+                <li>Les contrôles de pagination et filtres utilisent des libellés explicites.</li>
+                <li>Les attributs ARIA inutiles (ex: <code>aria-describedby</code>) sont supprimés pour éviter les doublons de lecture.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🎨" title="Contraste et lisibilité">
+            <ul>
+                <li>Les styles du design system assurent un contraste suffisant pour texte, bordures et focus.</li>
+                <li>Les lignes alternées (<code>striped</code>) améliorent la lisibilité sans nuire au contraste.</li>
+                <li>Les colonnes figées conservent un fond opaque et des ombres pour la lisibilité.</li>
+                <li>Les états actifs (focus, tri, sélection) restent perceptibles visuellement et via ARIA.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="📌" title="Fonctionnalités avancées accessibles">
+            <ul>
+                <li>Le tri multi-colonnes et obligatoire reste accessible via attributs ARIA.</li>
+                <li>Les filtres par colonne utilisent des champs correctement libellés.</li>
+                <li>La sélection simple ou multiple est annoncée clairement aux lecteurs d’écran.</li>
+                <li>Les colonnes épinglées restent accessibles sans modifier l’ordre de lecture.</li>
+                <li>L’organisation des colonnes est configurable sans perte de sémantique.</li>
+                <li>La persistance locale de l’état n’impacte pas l’accessibilité du tableau.</li>
+            </ul>
+        </CriteriaCard>
+    </CriteriaSection>
+
+    <DemoSection componentName="SyTable">
+        <Story of={Stories.Default}/>
+    </DemoSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li>Fournir toujours un <code>caption</code> clair et descriptif pour le tableau.</li>
+            <li>Limiter les actions dans les headers pour éviter la surcharge cognitive.</li>
+            <li>Tester systématiquement tri, filtres et pagination au clavier.</li>
+            <li>Vérifier les annonces lecteur d’écran lors des changements de données.</li>
+            <li>Éviter les libellés ambigus sur les colonnes et filtres.</li>
+            <li>Contrôler la cohérence visuelle entre états ARIA et styles CSS.</li>
+        </ul>
+    </BestPracticesSection>
+
+    <ResourcesSection>
+        <ul>
+            <li><a href="https://www.w3.org/WAI/tutorials/tables/" target="_blank" rel="noopener noreferrer">W3C WAI – Tables Tutorial</a></li>
+            <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/table/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices – Table Pattern</a></li>
+            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html" target="_blank" rel="noopener noreferrer">WCAG – Status Messages (4.1.3)</a></li>
+            <li><a href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/" target="_blank" rel="noopener noreferrer">RGAA – critères 5, 7 et 10</a></li>
+        </ul>
+    </ResourcesSection>
+</AccessibilityGuideLayout>

package/src/components/Tables/SyTable/tests/SyTable.visual.cy.ts

@@ -0,0 +1,70 @@
+import SyTable from '../SyTable.vue'
+
+const defaultHeaders = [
+	{ title: 'Nom', key: 'nom', sortable: true },
+	{ title: 'Prénom', key: 'prenom', sortable: true },
+	{ title: 'Ville', key: 'ville' },
+]
+
+const defaultItems = [
+	{ nom: 'Dupont', prenom: 'Jean', ville: 'Paris' },
+	{ nom: 'Martin', prenom: 'Marie', ville: 'Lyon' },
+	{ nom: 'Bernard', prenom: 'Pierre', ville: 'Marseille' },
+]
+
+describe('SyTable - Visual regression tests', () => {
+	it('displays the table by default', () => {
+		cy.mountWithVuetify(SyTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				caption: 'Tableau de données',
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('sy-table-default', cy.get('.v-application'))
+	})
+
+	it('displays the table with striped rows', () => {
+		cy.mountWithVuetify(SyTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				caption: 'Tableau rayé',
+				striped: true,
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('sy-table-striped', cy.get('.v-application'))
+	})
+
+	it('displays the table with selection checkboxes', () => {
+		cy.mountWithVuetify(SyTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				caption: 'Tableau avec sélection',
+				showSelect: true,
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('sy-table-with-select', cy.get('.v-application'))
+	})
+
+	it('displays the table with compact density', () => {
+		cy.mountWithVuetify(SyTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				caption: 'Tableau compact',
+				density: 'compact',
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('sy-table-compact', cy.get('.v-application'))
+	})
+})

package/src/components/Tables/common/tableStyles.scss

@@ -1,8 +1,8 @@
 @mixin tablestyles {
 	.v-table {
-		border: 1px solid rgb(var(--v-theme-grey-lighten80));
+		border: 1px solid rgb(var(--v-theme-disabled));
 
-		--sy-table-header-bg-pinned: color-mix(in srgb, rgb(var(--v-theme-blue-lighten80)) 20%, white);
+		--sy-table-header-bg-pinned: color-mix(in srgb, rgb(var(--v-theme-infoVariant)) 20%, white);
 
 		// Standardisation des z-index pour les tableaux
 		--sy-table-z-base: 1;
@@ -17,13 +17,13 @@
 
 	table thead tr.filters,
 	table thead tr.reset {
-		background-color: rgb(var(--v-theme-blue-lighten90));
+		background-color: rgb(var(--v-theme-infoVariant90));
 	}
 
 	caption,
 	table thead tr.headers,
 	table thead tr.reset {
-		background-color: rgba(var(--v-theme-blue-lighten80), 0.2);
+		background-color: rgba(var(--v-theme-infoVariant), 0.2);
 	}
 
 	&.fixed-min-height {

package/src/components/Tables/common/tests/SyTableFilter.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, afterEach, vi } from 'vitest'
 import { shallowMount, flushPromises } from '@vue/test-utils'
 import SyTableFilter from '../SyTableFilter.vue'
 import type { FilterOption, TableColumnHeader, FilterType } from '../types'
@@ -6,6 +6,13 @@ import type { FilterOption, TableColumnHeader, FilterType } from '../types'
 // Using shallowMount will automatically stub all child components
 
 describe('SyTableFilter', () => {
+	// Les filtres sont chargés via defineAsyncComponent(() => import(...)). On laisse ces
+	// imports dynamiques (et leurs dépendances : SyTextField, DatePicker…) se résoudre avant
+	// le teardown de l'environnement, sinon Vitest 4 lève une EnvironmentTeardownError.
+	afterEach(async () => {
+		await vi.dynamicImportSettled()
+	})
+
 	it('renders text filter correctly', async () => {
 		const filters: FilterOption[] = []
 		const header: TableColumnHeader = {

package/src/components/Tables/common/tests/filterByRange.spec.ts

@@ -7,6 +7,29 @@ import PeriodFilter from '../filters/PeriodFilter.vue'
 import SelectFilter from '../filters/SelectFilter.vue'
 import TextFilter from '../filters/TextFilter.vue'
 
+vi.mock('../../common/filters/getFilterComponent', () => {
+	return {
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		default: (filterType?: string, filterOptions?: unknown) => {
+			if (filterType === 'select') {
+				return SelectFilter
+			}
+			else if (filterType === 'date') {
+				return DateFilter
+			}
+			else if (filterType === 'period') {
+				return PeriodFilter
+			}
+			else if (filterType === 'number') {
+				return NumberFilter
+			}
+			else {
+				return TextFilter
+			}
+		},
+	}
+})
+
 const headers = [
 	{
 		title: 'Nom',
@@ -42,28 +65,6 @@ const items = [
 ]
 
 describe('SyTable - filterByRange', () => {
-	vi.mock('../../common/filters/getFilterComponent', () => {
-		return {
-			// eslint-disable-next-line @typescript-eslint/no-unused-vars
-			default: (filterType?: string, filterOptions?: unknown) => {
-				if (filterType === 'select') {
-					return SelectFilter
-				}
-				else if (filterType === 'date') {
-					return DateFilter
-				}
-				else if (filterType === 'period') {
-					return PeriodFilter
-				}
-				else if (filterType === 'number') {
-					return NumberFilter
-				}
-				else {
-					return TextFilter
-				}
-			},
-		}
-	})
 	afterAll(() => {
 		vi.resetModules()
 	})

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

@@ -0,0 +1,34 @@
+import ToolbarContainer from '../ToolbarContainer.vue'
+import { h } from 'vue'
+import { VBtn } from 'vuetify/components'
+
+describe('ToolbarContainer - Visual regression tests', () => {
+	it('displays the toolbar container with buttons', () => {
+		cy.mountWithVuetify(ToolbarContainer, {
+			slots: {
+				default: () => [
+					h(VBtn, {}, () => 'Action 1'),
+					h(VBtn, {}, () => 'Action 2'),
+					h(VBtn, {}, () => 'Action 3'),
+				],
+			},
+		})
+
+		cy.get('.sy-toolbar').should('be.visible')
+		cy.matchImageSnapshot('toolbar-container-default', cy.get('.sy-toolbar'))
+	})
+
+	it('displays the toolbar container with links', () => {
+		cy.mountWithVuetify(ToolbarContainer, {
+			slots: {
+				default: () => [
+					h('a', { href: '#' }, 'Lien 1'),
+					h('a', { href: '#' }, 'Lien 2'),
+				],
+			},
+		})
+
+		cy.get('.sy-toolbar').should('be.visible')
+		cy.matchImageSnapshot('toolbar-container-links', cy.get('.sy-toolbar'))
+	})
+})

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

@@ -1,11 +1,10 @@
-import { describe, it, expect, vi } from 'vitest'
+import { describe, it, expect, vi, afterEach } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { nextTick } from 'vue'
 
 import UploadWorkflow from '../UploadWorkflow.vue'
 import { locales as fileListLocales } from '@/components/FileList/UploadItem/locales'
 import { locales as FileUploadLocales } from '@/components/FileUpload/locales'
-import { afterEach } from 'node:test'
 import { SySelect } from '@/components'
 
 describe('UploadWorkflow', () => {