@cnamts/synapse 1.0.11 → 1.0.12

package/src/components/Amelipro/AmeliproDialog/__tests__/AmeliproDialog.spec.ts

@@ -0,0 +1,257 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { VueWrapper, mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import AmeliproDialog from '../AmeliproDialog.vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { ExpectedPropOptions } from '@tests/types'
+import TestHelper from '@tests/helpers/TestHelper'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproDialog> = {
+	attach: {
+		type: Boolean,
+		default: false,
+	},
+	cancelBtnLabel: {
+		type: String,
+		default: 'Annuler',
+	},
+	eager: {
+		type: Boolean,
+		default: false,
+	},
+	fullscreen: {
+		type: Boolean,
+		default: false,
+	},
+	hiddenCancelBtn: {
+		type: Boolean,
+		default: false,
+	},
+	labelledby: {
+		type: String,
+		required: true,
+	},
+	mainContentMaxHeight: {
+		type: String,
+		default: undefined,
+	},
+	mainContentMinHeight: {
+		type: String,
+		default: '150px',
+	},
+	modelValue: {
+		type: Boolean,
+		default: false,
+	},
+	noClickOutside: {
+		type: Boolean,
+		default: false,
+	},
+	noFooter: {
+		type: Boolean,
+		default: true,
+	},
+	persistent: {
+		type: Boolean,
+		default: false,
+	},
+	title: {
+		type: String,
+		default: undefined,
+	},
+	uniqueId: {
+		type: String,
+		required: true,
+	},
+	validationBtnLabel: {
+		type: String,
+		default: 'Valider',
+	},
+	width: {
+		type: String,
+		default: '800px',
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproDialog> => ({
+	labelledby: 'required-labelledby',
+	uniqueId: 'required-uniqueid',
+})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproDialog> => ({
+	cancelBtnLabel: 'Modified cancel btn label',
+	fullscreen: true,
+	hiddenCancelBtn: true,
+	labelledby: 'modified-labelledby',
+	mainContentMaxHeight: '300px',
+	mainContentMinHeight: '200px',
+	modelValue: true,
+	noClickOutside: true,
+	noFooter: false,
+	persistent: true,
+	title: 'Modified title',
+	uniqueId: 'modified-uniqueid',
+	validationBtnLabel: 'Modified validation btn label',
+	width: '700px',
+})
+
+const testHelper = new TestHelper(AmeliproDialog)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+// Mock global MutationObserver pour éviter la boucle infinie dans les tests unitaires
+class NoopMutationObserver {
+	observe = vi.fn()
+	disconnect = vi.fn()
+	takeRecords = vi.fn(() => [])
+}
+
+global.MutationObserver = NoopMutationObserver as any
+
+describe('AmeliproDialog', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Slots', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproDialog>>
+
+		it('renders default slot content', () => {
+			vueWrapper = mount(AmeliproDialog, {
+				global: {
+					stubs: {
+						AmeliproBtn: true,
+						AmeliproIconBtn: true,
+						VDialog: { template: '<div><slot /></div>' },
+					},
+				},
+				props: requiredPropValues(),
+				slots: { default: '<div id="slot-content">Slot Content</div>' },
+			})
+			expect(vueWrapper.find('#slot-content').exists()).toBe(true)
+			expect(vueWrapper.find('#slot-content').text()).toBe('Slot Content')
+		})
+
+		it('renders header slot content', () => {
+			vueWrapper = mount(AmeliproDialog, {
+				global: {
+					stubs: {
+						AmeliproBtn: true,
+						AmeliproIconBtn: true,
+						VDialog: { template: '<div><slot /></div>' },
+					},
+				},
+				props: requiredPropValues(),
+				slots: { header: '<div id="header-slot">Header Slot</div>' },
+			})
+			expect(vueWrapper.find('#header-slot').exists()).toBe(true)
+			expect(vueWrapper.find('#header-slot').text()).toBe('Header Slot')
+		})
+
+		it('renders footer slot content', () => {
+			vueWrapper = mount(AmeliproDialog, {
+				global: {
+					stubs: {
+						AmeliproBtn: true,
+						AmeliproIconBtn: true,
+						VDialog: { template: '<div><slot /></div>' },
+					},
+				},
+				props: { ...requiredPropValues(), noFooter: false },
+				slots: { footer: '<div id="footer-slot">Footer Slot</div>' },
+			})
+			expect(vueWrapper.find('#footer-slot').exists()).toBe(true)
+			expect(vueWrapper.find('#footer-slot').text()).toBe('Footer Slot')
+		})
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproDialog>>
+
+		beforeEach(() => {
+			vueWrapper = mount(AmeliproDialog, {
+				global: {
+					stubs: {
+						AmeliproBtn: true,
+						AmeliproIconBtn: true,
+						VDialog: { template: '<div><slot /></div>' },
+					},
+				},
+				props: { ...requiredPropValues(), noFooter: false },
+			})
+		})
+
+		it('prop uniqueId sets attribute id on root dialog element', async () => {
+			expect(vueWrapper.find('.dialog').attributes('id')).toBe(testHelper.default('uniqueId'))
+			const { uniqueId } = modifiedPropValues()
+			await vueWrapper.setProps({ uniqueId })
+			expect(vueWrapper.find('.dialog').attributes('id')).toBe(testHelper.modified('uniqueId'))
+		})
+
+		it('prop uniqueId sets attribute id on header/content/footer', async () => {
+			expect(vueWrapper.find('.dialog__header').attributes('id')).toBe(`${testHelper.default('uniqueId')}-header`)
+			expect(vueWrapper.find('.dialog__content').attributes('id')).toBe(`${testHelper.default('uniqueId')}-content`)
+			expect(vueWrapper.find('.dialog__footer').attributes('id')).toBe(`${testHelper.default('uniqueId')}-footer`)
+
+			const { uniqueId } = modifiedPropValues()
+			await vueWrapper.setProps({ uniqueId })
+			expect(vueWrapper.find('.dialog__header').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-header`)
+			expect(vueWrapper.find('.dialog__content').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-content`)
+			expect(vueWrapper.find('.dialog__footer').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-footer`)
+		})
+	})
+
+	describe('Setting props should update props or attributes of inner components', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproDialog>>
+
+		beforeEach(() => {
+			vueWrapper = mount(AmeliproDialog, {
+				props: { ...requiredPropValues(), hiddenCancelBtn: false, noFooter: false },
+				global: {
+					stubs: {
+						// AmeliproBtn: { template: '<button class="dialog__cancel-btn"><slot /></button>' },
+						AmeliproIconBtn: true,
+						VDialog: { template: '<div><slot /></div>' },
+					},
+				},
+			})
+		})
+
+		it('prop cancelBtnLabel sets AmeliproBtn cancel label', async () => {
+			expect(vueWrapper.find('.dialog__cancel-btn').text()).toBe(testHelper.default('cancelBtnLabel'))
+			const { cancelBtnLabel } = modifiedPropValues()
+			await vueWrapper.setProps({ cancelBtnLabel })
+			expect(vueWrapper.find('.dialog__cancel-btn').text()).toBe(testHelper.modified('cancelBtnLabel'))
+		})
+	})
+
+	describe('Affichage conditionnel du footer', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproDialog>>
+
+		beforeEach(() => {
+			vueWrapper = mount(AmeliproDialog, {
+				props: requiredPropValues(),
+				global: {
+					stubs: {
+						AmeliproBtn: true,
+						AmeliproIconBtn: true,
+						VDialog: { template: '<div><slot /></div>' },
+					},
+				},
+			})
+		})
+
+		it('prop noFooter sets footer visibility', async () => {
+			expect(vueWrapper.find('.dialog__footer').exists()).toBe(false)
+			await vueWrapper.setProps({ noFooter: false })
+			expect(vueWrapper.find('.dialog__footer').exists()).toBe(true)
+		})
+	})
+})

package/src/components/Amelipro/AmeliproDialog/__tests__/__snapshots__/AmeliproDialog.spec.ts.snap

@@ -0,0 +1,61 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproDialog > Snapshots > renders the component with all properties filled in 1`] = `
+<v-dialog-stub
+  absolute="false"
+  activatorprops="[object Object]"
+  attach="false"
+  class=""
+  closeonback="true"
+  closeoncontentclick="false"
+  contained="false"
+  disabled="false"
+  eager="false"
+  fullscreen="true"
+  location="bottom"
+  locationstrategy="static"
+  modelvalue="true"
+  noclickanimation="false"
+  openonhover="false"
+  origin="center center"
+  persistent="true"
+  retainfocus="true"
+  scrim="true"
+  scrollable="false"
+  scrollstrategy="none"
+  sticktotarget="false"
+  transition="[object Object]"
+  width="700px"
+  zindex="2400"
+></v-dialog-stub>
+`;
+
+exports[`AmeliproDialog > Snapshots > renders the component with only required properties filled in 1`] = `
+<v-dialog-stub
+  absolute="false"
+  activatorprops="[object Object]"
+  attach="false"
+  class="dialog-radius"
+  closeonback="true"
+  closeoncontentclick="false"
+  contained="false"
+  disabled="false"
+  eager="false"
+  fullscreen="false"
+  location="bottom"
+  locationstrategy="static"
+  modelvalue="false"
+  noclickanimation="false"
+  openonhover="false"
+  origin="center center"
+  persistent="false"
+  retainfocus="true"
+  scrim="true"
+  scrollable="false"
+  scrollstrategy="none"
+  sticktotarget="false"
+  transition="[object Object]"
+  width="800px"
+  zindex="2400"
+></v-dialog-stub>
+`;

package/src/components/Amelipro/AmeliproDisclosure/__tests__/AmeliproDisclosure.spec.ts

@@ -0,0 +1,79 @@
+import { type VueWrapper, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import AmeliproDisclosure from '../AmeliproDisclosure.vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { ExpectedPropOptions } from '@tests/types'
+import TestHelper from '@tests/helpers/TestHelper'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproDisclosure> = {
+	isOpen: {
+		type: Boolean,
+		default: false,
+	},
+	title: {
+		type: String,
+		required: true,
+	},
+	uniqueId: {
+		type: String,
+		required: true,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproDisclosure> => ({
+	title: 'required-title',
+	uniqueId: 'required-unique-id',
+})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproDisclosure> => ({
+	isOpen: false,
+	title: 'Modified title',
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproDisclosure)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproDisclosure', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproDisclosure>>
+
+		describe('root', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproDisclosure, { props: requiredPropValues() })
+			})
+
+			it('prop uniqueId sets attribute id', async () => {
+				expect(vueWrapper.attributes('id')).toBe(`${testHelper.default('uniqueId')}-container`)
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.attributes('id')).toBe(`${testHelper.modified('uniqueId')}-container`)
+			})
+		})
+	})
+
+	describe('Setting props should update props or attributes of inner components', () => {
+		describe.skip('AmeliproBtn', () => {
+			// TODO: add tests for AmeliproBtn inner component
+		})
+	})
+
+	describe('Slots', () => {
+		describe.skip('#default', () => {
+			// TODO: add tests for default slot
+		})
+	})
+})

package/src/components/Amelipro/AmeliproDisclosure/__tests__/__snapshots__/AmeliproDisclosure.spec.ts.snap

@@ -0,0 +1,89 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproDisclosure > Snapshots > renders the component with all properties filled in 1`] = `
+<div
+  class="
+    amelipro-disclosure
+    mb-3
+    w-100
+  "
+  id="modified-unique-id-container"
+>
+  <amelipro-btn-stub
+    aria-controls="modified-unique-id"
+    aria-expanded="false"
+    badge="false"
+    badgebgcolor="ap-pink"
+    badgecolor="ap-white"
+    bordered="false"
+    class="
+      amelipro-disclosure__btn
+      text-none
+    "
+    color="ap-blue-darken-1"
+    disabled="false"
+    hovercolor="ap-blue-darken-2"
+    hoverunderline="true"
+    iconbgcolor="transparent"
+    iconbordered="false"
+    iconleft="false"
+    infoblock="false"
+    minheight="2.5rem"
+    size="60px"
+    text="true"
+    textcolor="ap-white"
+    type="button"
+    underline="false"
+    uniqueid="modified-unique-id-open-close-btn"
+  ></amelipro-btn-stub>
+  <div
+    class="amelipro-disclosure__content"
+    id="modified-unique-id"
+    style="display: none;"
+  ></div>
+</div>
+`;
+
+exports[`AmeliproDisclosure > Snapshots > renders the component with only required properties filled in 1`] = `
+<div
+  class="
+    amelipro-disclosure
+    mb-3
+    w-100
+  "
+  id="required-unique-id-container"
+>
+  <amelipro-btn-stub
+    aria-controls="required-unique-id"
+    aria-expanded="false"
+    badge="false"
+    badgebgcolor="ap-pink"
+    badgecolor="ap-white"
+    bordered="false"
+    class="
+      amelipro-disclosure__btn
+      text-none
+    "
+    color="ap-blue-darken-1"
+    disabled="false"
+    hovercolor="ap-blue-darken-2"
+    hoverunderline="true"
+    iconbgcolor="transparent"
+    iconbordered="false"
+    iconleft="false"
+    infoblock="false"
+    minheight="2.5rem"
+    size="60px"
+    text="true"
+    textcolor="ap-white"
+    type="button"
+    underline="false"
+    uniqueid="required-unique-id-open-close-btn"
+  ></amelipro-btn-stub>
+  <div
+    class="amelipro-disclosure__content"
+    id="required-unique-id"
+    style="display: none;"
+  ></div>
+</div>
+`;

package/src/components/Amelipro/AmeliproTable/AmeliproTable.stories.ts

@@ -47,6 +47,16 @@ const meta = {
 	width: string;
 	maxWidth: string;
 	descriptionId?: string;
+	sort?: {
+		ascendant?: {
+			label: string,
+			disabled: boolean,
+		},
+		descendant?: {
+			label: string,
+			disabled: boolean,
+		},
+	};
 }>`,
 				},
 			},
@@ -560,7 +570,42 @@ export const PaginationEtTri: Story = {
 	name: 'Pagination et tri',
 	args: {
 		dataList,
-		headers,
+		headers: [
+			{
+				align: 'left',
+				maxWidth: '25%',
+				minWidth: '20%',
+				name: 'name',
+				title: 'Nom',
+				width: '25%',
+				sort: {
+					ascendant: {
+						label: 'tri de A vers Z',
+						disabled: false,
+					},
+					descendant: {
+						label: 'tri de Z vers A',
+						disabled: false,
+					},
+				},
+			},
+			{
+				align: 'left',
+				maxWidth: '25%',
+				minWidth: '20%',
+				name: 'firstname',
+				title: 'Prénom',
+				width: '25%',
+			},
+			{
+				align: 'left',
+				maxWidth: '25%',
+				minWidth: '20%',
+				name: 'email',
+				title: 'E-mail',
+				width: '25%',
+			},
+		],
 		title: 'Tableau avec pagination et tri',
 		uniqueId: 'table-pagination-tri',
 		itemsToDisplayDesktop: 2,
@@ -597,6 +642,8 @@ export const PaginationEtTri: Story = {
         pagination-select-label="Résultats par page"
         pagination-select-placeholder="Sélectionner"
         @change:sort-select="onSortChange"
+		@asc-sort="onSortAsc"
+		@desc-sort="onSortDesc"
     />
 </template>
                 `,
@@ -608,7 +655,7 @@ import { ref, computed } from 'vue'
 import { AmeliproTable } from '@cnamts/synapse'
 
 const headers = [
-    { align: 'left', maxWidth: '25%', minWidth: '20%', name: 'name', title: 'Nom', width: '25%' },
+    { align: 'left', maxWidth: '25%', minWidth: '20%', name: 'name', title: 'Nom', width: '25%', sort: { ascendant: { label: 'Tri de A vers Z', disabled: false }, descedant: {label: 'Tri de Z vers A', disabled: false } } },
     { align: 'left', maxWidth: '25%', minWidth: '20%', name: 'firstname', title: 'Prénom', width: '25%' },
     { align: 'left', maxWidth: '25%', minWidth: '20%', name: 'email', title: 'E-mail', width: '25%' },
 ]
@@ -636,8 +683,19 @@ const sortedDataList = computed(() => {
 function onSortChange(val: string) {
     sortValue.value = val
 }
-</script>
-                `,
+
+function onSortAsc(event: Event, header: string) {
+	if (header === 'name') {
+		sortValue.value = 'name-asc'
+	}
+}
+
+function onSortDesc(event: Event, header: string) {
+	if (header === 'name') {
+		sortValue.value = 'name-desc'
+	}
+}
+</script>`,
 			},
 		],
 	},
@@ -658,7 +716,19 @@ function onSortChange(val: string) {
 			function onSortChange(val: string) {
 				sortValue.value = val
 			}
-			return { args, sortedDataList, onSortChange }
+
+			function onSortAsc(header: string) {
+				if (header === 'name') {
+					sortValue.value = 'name-asc'
+				}
+			}
+
+			function onSortDesc(header: string) {
+				if (header === 'name') {
+					sortValue.value = 'name-desc'
+				}
+			}
+			return { args, sortedDataList, onSortChange, onSortAsc, onSortDesc }
 		},
 		template: `
 <p class="mb-2">Tableau avec pagination personnalisée et options de tri. Le tri est appliqué via l'événement <code>change:sort-select</code>.</p>
@@ -666,6 +736,8 @@ function onSortChange(val: string) {
     v-bind="args"
     :data-list="sortedDataList"
     @change:sort-select="onSortChange"
+	@asc-sort="onSortAsc"
+	@desc-sort="onSortDesc"
 />
         `,
 	}),
@@ -678,9 +750,9 @@ export const LargeurPersonnalisee: Story = {
 		headers,
 		title: 'Tableau largeur personnalisée',
 		uniqueId: 'table-largeur',
-		tableMinWidth: '600px',
+		tableMinWidth: '1200px',
 		tableMaxWidth: '900px',
-		tableWidth: '80%',
+		tableWidth: '100%',
 	},
 	parameters: {
 		sourceCode: [
@@ -692,9 +764,9 @@ export const LargeurPersonnalisee: Story = {
         :headers="headers"
         title="Tableau largeur personnalisée"
         unique-id="table-largeur"
-        table-min-width="600px"
+        table-min-width="1200px"
         table-max-width="900px"
-        table-width="80%"
+        table-width="100%"
     />
 </template>
                 `,