@cnamts/synapse 1.0.11 → 1.0.13

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

@@ -253,7 +253,7 @@
 					class="pa-2 footer-list-item"
 				>
 					<AmeliproBtn
-						class="text-none"
+						class="text-none amelipro-footer__site-map-btn"
 						color="ap-white"
 						hover-color="ap-white"
 						hover-underline
@@ -273,7 +273,7 @@
 					class="pa-2 footer-list-item"
 				>
 					<AmeliproBtn
-						class="text-none"
+						class="text-none amelipro-footer__about-btn"
 						color="ap-white"
 						hover-color="ap-white"
 						hover-underline
@@ -293,7 +293,7 @@
 					class="pa-2 footer-list-item"
 				>
 					<AmeliproBtn
-						class="text-none"
+						class="text-none amelipro-footer__config-btn"
 						color="ap-white"
 						hover-color="ap-white"
 						hover-underline
@@ -313,7 +313,7 @@
 					class="pa-2 footer-list-item"
 				>
 					<AmeliproBtn
-						class="text-none"
+						class="text-none amelipro-footer__legal-notice-btn"
 						color="ap-white"
 						hover-color="ap-white"
 						hover-underline
@@ -333,7 +333,7 @@
 					class="pa-2 footer-list-item"
 				>
 					<AmeliproBtn
-						class="text-none"
+						class="text-none amelipro-footer__cgu-btn"
 						color="ap-white"
 						hover-color="ap-white"
 						hover-underline
@@ -354,7 +354,7 @@
 				>
 					<AmeliproBtn
 						v-if="!noLinkA11y"
-						class="text-none"
+						class="text-none amelipro-footer__a11y-btn"
 						color="ap-white"
 						hover-color="ap-white"
 						hover-underline
@@ -367,7 +367,6 @@
 					>
 						{{ a11yComplianceLabel }}
 					</AmeliproBtn>
-
 					<p
 						v-else
 						:id="uniqueId ? `${uniqueId}-a11y-text` : undefined"