@cnamts/synapse 1.0.27 → 1.1.1

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

@@ -1,11 +1,18 @@
-import { describe, it, expect } from 'vitest'
-import { shallowMount, flushPromises } from '@vue/test-utils'
+import { describe, it, expect, afterEach, vi } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
 import SyTableFilter from '../SyTableFilter.vue'
 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 = {
@@ -22,8 +29,7 @@ describe('SyTableFilter', () => {
 			},
 		})
 
-		// Need to wait for async components to load
-		await flushPromises()
+		await vi.dynamicImportSettled()
 		await wrapper.vm.$nextTick()
 
 		const textFilter = wrapper.findComponent({ name: 'TextFilter' })
@@ -45,7 +51,7 @@ describe('SyTableFilter', () => {
 			},
 		})
 
-		await flushPromises()
+		await vi.dynamicImportSettled()
 		await wrapper.vm.$nextTick()
 		const textFilter = wrapper.findComponent({ name: 'TextFilter' })
 		expect(textFilter.exists()).toBe(true)
@@ -67,7 +73,7 @@ describe('SyTableFilter', () => {
 			},
 		})
 
-		await flushPromises()
+		await vi.dynamicImportSettled()
 		await wrapper.vm.$nextTick()
 		const numberFilter = wrapper.findComponent({ name: 'NumberFilter' })
 		expect(numberFilter.exists()).toBe(true)
@@ -94,7 +100,7 @@ describe('SyTableFilter', () => {
 			},
 		})
 
-		await flushPromises()
+		await vi.dynamicImportSettled()
 		await wrapper.vm.$nextTick()
 		const selectFilter = wrapper.findComponent({ name: 'SelectFilter' })
 		expect(selectFilter.exists()).toBe(true)
@@ -117,7 +123,7 @@ describe('SyTableFilter', () => {
 			},
 		})
 
-		await flushPromises()
+		await vi.dynamicImportSettled()
 		await wrapper.vm.$nextTick()
 		const dateFilter = wrapper.findComponent({ name: 'DateFilter' })
 		expect(dateFilter.exists()).toBe(true)
@@ -140,7 +146,7 @@ describe('SyTableFilter', () => {
 			},
 		})
 
-		await flushPromises()
+		await vi.dynamicImportSettled()
 		await wrapper.vm.$nextTick()
 		const periodFilter = wrapper.findComponent({ name: 'PeriodFilter' })
 		expect(periodFilter.exists()).toBe(true)
@@ -162,7 +168,7 @@ describe('SyTableFilter', () => {
 			},
 		})
 
-		await flushPromises()
+		await vi.dynamicImportSettled()
 		await wrapper.vm.$nextTick()
 
 		const textFilter = wrapper.findComponent({ name: 'TextFilter' })
@@ -197,7 +203,7 @@ describe('SyTableFilter', () => {
 			},
 		})
 
-		await flushPromises()
+		await vi.dynamicImportSettled()
 		await wrapper.vm.$nextTick()
 
 		const textFilter = wrapper.findComponent({ name: 'TextFilter' })
@@ -234,7 +240,7 @@ describe('SyTableFilter', () => {
 			},
 		})
 
-		await flushPromises()
+		await vi.dynamicImportSettled()
 		await wrapper.vm.$nextTick()
 
 		const textFilter = wrapper.findComponent({ name: 'TextFilter' })
@@ -270,7 +276,7 @@ describe('SyTableFilter', () => {
 			},
 		})
 
-		await flushPromises()
+		await vi.dynamicImportSettled()
 		await wrapper.vm.$nextTick()
 
 		// Vérifier que le slot personnalisé est rendu

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

@@ -59,7 +59,6 @@ Vous pouvez configurer le niveau du titre affiché par défaut en utilisant la p
 	import { UploadWorkflow } from '@cnamts/synapse'
 
 	const files = ref([])
-import '../../stories/styles/shared.css';
 
 	const uploadList = [
 		{

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', () => {

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

@@ -0,0 +1,39 @@
+import UploadWorkflow from '../UploadWorkflow.vue'
+
+const defaultUploadList = [
+	{
+		id: '1',
+		title: 'Carte vitale',
+		state: 'initial',
+		showUploadBtn: true,
+	},
+	{
+		id: '2',
+		title: 'Justificatif',
+		state: 'success',
+		fileName: 'justificatif.pdf',
+	},
+]
+
+describe('UploadWorkflow - Visual regression tests', () => {
+	it('displays the upload workflow by default', () => {
+		cy.mountWithVuetify(UploadWorkflow, {
+			props: { uploadList: defaultUploadList },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('upload-workflow-default', cy.get('.v-application'))
+	})
+
+	it('displays the upload workflow with a section title', () => {
+		cy.mountWithVuetify(UploadWorkflow, {
+			props: {
+				uploadList: defaultUploadList,
+				sectionTitle: 'Documents à fournir',
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('upload-workflow-with-title', cy.get('.v-application'))
+	})
+})

package/src/components/UserMenuBtn/UserMenuBtn.mdx

@@ -19,7 +19,6 @@ import * as UserMenuBtnStories from './UserMenuBtn.stories';
 <Source dark code={`
   <script setup lang="ts">
   import { UserMenuBtn } from '@cnamts/synapse';
-import '../../stories/styles/shared.css';
 
   const menuItems = [
     { text: 'Administration', value: 'Administration' },

package/src/components/UserMenuBtn/UserMenuBtn.stories.ts

@@ -720,3 +720,180 @@ export const Slot: Story = {
 		}
 	},
 }
+
+export const WithPsInfo: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <UserMenuBtn
+        v-model="selected"
+        :hide-user-icon="false"
+        :hide-logout-btn="true"
+        :is-mobile-view="true"
+    >
+        <template #default>
+            <div class="pa-4">
+                <div class="mb-2">
+                    <div class="text-subtitle-2 text-medium-emphasis">Nom</div>
+                    <div class="text-body-2">{{ userName }}</div>
+                </div>
+                <div class="mb-2">
+                    <div class="text-subtitle-2 text-medium-emphasis">Profil</div>
+                    <div class="text-body-2">{{ profil }}</div>
+                </div>
+                <div class="mb-2">
+                    <div class="text-subtitle-2 text-medium-emphasis">RPPS</div>
+                    <div class="text-body-2">{{ rpps }}</div>
+                </div>
+                <div class="mb-2">
+                    <div class="text-subtitle-2 text-medium-emphasis">ADELI</div>
+                    <div class="text-body-2">{{ adeli }}</div>
+                </div>
+                <div class="mb-2">
+                    <div class="text-subtitle-2 text-medium-emphasis">Email</div>
+                    <div class="text-body-2">{{ email }}</div>
+                </div>
+                <p class="mt-6 mb-0 text-caption">
+                    Dernière connexion : {{ lastConnexion }}
+                </p>
+            </div>
+
+            <div class="d-flex bg-primary-lighten-3" style="border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;">
+                <v-btn
+                    class="text-none font-weight-bold flex-grow-1"
+                    color="primary"
+                    variant="text"
+                    rounded="0"
+                    @click="handleAccount"
+                >
+                    Mon Compte
+                </v-btn>
+
+                <v-btn
+                    class="text-none font-weight-bold flex-grow-1"
+                    color="primary"
+                    variant="text"
+                    rounded="0"
+                    @click="handleLogout"
+                >
+                    Déconnexion
+                </v-btn>
+            </div>
+        </template>
+    </UserMenuBtn>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+    import { ref } from 'vue'
+    import { UserMenuBtn } from '@cnamts/synapse'
+
+    const selected = ref(null)
+    const userName = ref('userName')
+    const profil = ref('profil')
+    const rpps = ref('RPPS')
+    const adeli = ref('ADELI')
+    const email = ref('email')
+    const lastConnexion = ref('01/01/2024')
+
+    const handleAccount = () => {
+        console.log('Mon Compte clicked')
+    }
+
+    const handleLogout = () => {
+        console.log('Déconnexion clicked')
+    }
+</script>`,
+			},
+		],
+	},
+	args: {
+		modelValue: null,
+		hideLogoutBtn: true,
+		hideUserIcon: false,
+		isMobileView: true,
+		vuetifyOptions: undefined,
+	},
+	render: (args) => {
+		return {
+			components: { UserMenuBtn },
+			setup() {
+				const userDetails = {
+					userName: 'John Doe',
+					profil: 'Médecin généraliste',
+					rpps: 'RPPS',
+					adeli: 'ADELI',
+					email: 'johndoe@gmail.com',
+					lastConnexion: '01/01/2024',
+				}
+
+				const handleAccount = () => {
+					console.log('Mon Compte clicked')
+				}
+
+				const handleLogout = () => {
+					console.log('Déconnexion clicked')
+				}
+
+				return { args, userDetails, handleAccount, handleLogout }
+			},
+			template: `
+<div style="display: flex; justify-content: center; height: 500px;">
+    <UserMenuBtn v-bind="args">
+        <template #default>
+            <div class="pa-4">
+                <div class="mb-2">
+                    <div class="text-subtitle-2 text-medium-emphasis">Nom</div>
+                    <div class="text-body-2">{{ userDetails.userName }}</div>
+                </div>
+                <div class="mb-2">
+                    <div class="text-subtitle-2 text-medium-emphasis">Profil</div>
+                    <div class="text-body-2">{{ userDetails.profil }}</div>
+                </div>
+                <div class="mb-2">
+                    <div class="text-subtitle-2 text-medium-emphasis">RPPS</div>
+                    <div class="text-body-2">{{ userDetails.rpps }}</div>
+                </div>
+                <div class="mb-2">
+                    <div class="text-subtitle-2 text-medium-emphasis">ADELI</div>
+                    <div class="text-body-2">{{ userDetails.adeli }}</div>
+                </div>
+                <div class="mb-2">
+                    <div class="text-subtitle-2 text-medium-emphasis">Email</div>
+                    <div class="text-body-2">{{ userDetails.email }}</div>
+                </div>
+                <p class="mt-6 mb-0 text-caption">
+                    Dernière connexion : {{ userDetails.lastConnexion }}
+                </p>
+            </div>
+
+            <div class="d-flex bg-primary-lighten-3" style="border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;">
+                <v-btn
+                    class="text-none font-weight-bold flex-grow-1"
+                    color="primary"
+                    variant="text"
+                    rounded="0"
+                    @click="handleAccount"
+                >
+                    Mon Compte
+                </v-btn>
+
+                <v-btn
+                    class="text-none font-weight-bold flex-grow-1"
+                    color="primary"
+                    variant="text"
+                    rounded="0"
+                    @click="handleLogout"
+                >
+                    Déconnexion
+                </v-btn>
+            </div>
+        </template>
+    </UserMenuBtn>
+</div>`,
+		}
+	},
+}

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

@@ -0,0 +1,42 @@
+import UserMenuBtn from '../UserMenuBtn.vue'
+
+const defaultMenuItems = [
+	{ text: 'Mon compte', value: 'account' },
+	{ text: 'Paramètres', value: 'settings' },
+]
+
+describe('UserMenuBtn - Visual regression tests', () => {
+	it('displays the user menu button by default', () => {
+		cy.mountWithVuetify(UserMenuBtn, {
+			props: { menuItems: defaultMenuItems },
+		})
+
+		cy.get('.user-menu-btn').should('be.visible')
+		cy.matchImageSnapshot('user-menu-btn-default', cy.get('.user-menu-btn'))
+	})
+
+	it('displays the user menu button with full name', () => {
+		cy.mountWithVuetify(UserMenuBtn, {
+			props: {
+				menuItems: defaultMenuItems,
+				fullName: 'Jean Dupont',
+				additionalInformation: 'N° 123456789',
+			},
+		})
+
+		cy.get('.user-menu-btn').should('be.visible')
+		cy.matchImageSnapshot('user-menu-btn-with-name', cy.get('.user-menu-btn'))
+	})
+
+	it('displays the user menu button without logout', () => {
+		cy.mountWithVuetify(UserMenuBtn, {
+			props: {
+				menuItems: defaultMenuItems,
+				hideLogoutBtn: true,
+			},
+		})
+
+		cy.get('.user-menu-btn').should('be.visible')
+		cy.matchImageSnapshot('user-menu-btn-no-logout', cy.get('.user-menu-btn'))
+	})
+})

package/src/composables/unifyValidation/documentationValidationProps.ts

@@ -18,7 +18,7 @@ function generateBuiltInRuleType(type: 'base' | 'date' | 'number' | 'string' | '
 	}
 }
 
-export function getValidationDocumentation(type: 'date' | 'number' | 'string' | 'all' = 'all') {
+export function getValidationDocumentation(type: 'base' | 'date' | 'number' | 'string' | 'all' = 'all') {
 	const builtInRuleType = generateBuiltInRuleType(type)
 
 	return {
@@ -63,7 +63,7 @@ export function getValidationDocumentation(type: 'date' | 'number' | 'string' |
 			control: 'boolean',
 			table: {
 				type: { summary: 'boolean' },
-				defaultValue: { summary: 'true' },
+				defaultValue: { summary: 'false' },
 				category: 'props',
 			},
 		},

package/src/composables/unifyValidation/tests/documentationValidationProps.spec.ts

@@ -111,9 +111,9 @@ describe('getValidationDocumentation', () => {
 			expect(doc.isValidateOnBlur.table.defaultValue).toEqual({ summary: 'true' })
 		})
 
-		it('showSuccessMessages a un defaultValue true', () => {
+		it('showSuccessMessages a un defaultValue false', () => {
 			const doc = getValidationDocumentation()
-			expect(doc.showSuccessMessages.table.defaultValue).toEqual({ summary: 'true' })
+			expect(doc.showSuccessMessages.table.defaultValue).toEqual({ summary: 'false' })
 		})
 
 		it('disableErrorHandling a un defaultValue false', () => {

package/src/composables/unifyValidation/tests/useValidation.spec.ts

@@ -114,6 +114,18 @@ describe('useValidation (unifyValidation)', () => {
 			expect(result.errors.value).toContain('Nouvelle erreur')
 		})
 
+		it('limits the number of errors from errorMessages according to maxErrors', async () => {
+			const errorMessages = ref<string[] | null>(['E1', 'E2', 'E3'])
+			const params = makeParams({ errorMessages, maxErrors: ref(2) })
+			const { result } = withSetup(() => useValidation(params as Parameters<typeof useValidation>[0]))
+
+			await nextTick()
+			expect(result.errors.value).toHaveLength(2)
+
+			expect(result.errors.value).toEqual(['E1', 'E2'])
+			expect(result.errors.value).not.toContain('E3')
+		})
+
 		it('combines rule validation errors with external errorMessages', async () => {
 			const errorMessages = ref<string[] | null>(['Erreur par défaut'])
 			const params = makeParams({
@@ -125,7 +137,7 @@ describe('useValidation (unifyValidation)', () => {
 
 			const valid = await result.validate()
 			expect(valid).toBe(false)
-			expect(result.errors.value).toEqual(['Erreur règle', 'Erreur par défaut'])
+			expect(result.errors.value).toEqual(['Erreur par défaut', 'Erreur règle'])
 			expect(result.hasError.value).toBe(true)
 		})