@cnamts/synapse 1.0.13 → 1.0.15

package/src/components/Amelipro/AmeliproNumberedCard/{tests → __tests__}/__snapshots__/AmeliproNumberedCard.spec.ts.snap

@@ -1,23 +1,23 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`AmeliproNumberedCard > render correctly 1`] = `
+exports[`AmeliproNumberedCard > Snapshots > renders the component with all properties filled in 1`] = `
 <ol
   class="
     amelipro-numbered-card__list
     d-flex
     flex-wrap
-    items-per-line-2
+    items-per-line-3
     justify-center
     list-style-none
   "
-  id="my-numbered-card-id"
+  id="modified-unique-id"
 >
   <li
     class="
       mb-4
       numbered-card-item__wrapper
     "
-    id="my-numbered-card-id-card-0"
+    id="modified-unique-id-card-0"
   >
     <span class="
       font-weight-regular
@@ -29,7 +29,7 @@ exports[`AmeliproNumberedCard > render correctly 1`] = `
           text--darken-1
           toto
         "
-        id="my-numbered-card-id-card-0-number"
+        id="modified-unique-id-card-0-number"
       >
         1
       </span>
@@ -40,26 +40,22 @@ exports[`AmeliproNumberedCard > render correctly 1`] = `
         d-flex
         w-100
       "
-      id="my-numbered-card-id-card-0-wrapper"
+      id="modified-unique-id-card-0-wrapper"
     >
       <div
         class="
           amelipro-card--numbered
           w-100
         "
-        style="
-          background-color: #FFFFFF;
-          border: 1px solid #DDDEDE;
-        "
+        style="background-color: #545859;"
       >
         <div
-          class="amelipro-card--numbered-content"
-          id="my-numbered-card-id-card-0-content"
-        >
-          <p>
-            Contenu des cartes
-          </p>
-        </div>
+          class="
+            amelipro-card--numbered-content
+            modified-content-classes
+          "
+          id="modified-unique-id-card-0-content"
+        ></div>
       </div>
     </div>
   </li>
@@ -68,7 +64,7 @@ exports[`AmeliproNumberedCard > render correctly 1`] = `
       mb-4
       numbered-card-item__wrapper
     "
-    id="my-numbered-card-id-card-1"
+    id="modified-unique-id-card-1"
   >
     <span class="
       font-weight-regular
@@ -80,7 +76,7 @@ exports[`AmeliproNumberedCard > render correctly 1`] = `
           text--darken-1
           toto
         "
-        id="my-numbered-card-id-card-1-number"
+        id="modified-unique-id-card-1-number"
       >
         2
       </span>
@@ -91,26 +87,22 @@ exports[`AmeliproNumberedCard > render correctly 1`] = `
         d-flex
         w-100
       "
-      id="my-numbered-card-id-card-1-wrapper"
+      id="modified-unique-id-card-1-wrapper"
     >
       <div
         class="
           amelipro-card--numbered
           w-100
         "
-        style="
-          background-color: #FFFFFF;
-          border: 1px solid #DDDEDE;
-        "
+        style="background-color: #545859;"
       >
         <div
-          class="amelipro-card--numbered-content"
-          id="my-numbered-card-id-card-1-content"
-        >
-          <p>
-            Contenu des cartes
-          </p>
-        </div>
+          class="
+            amelipro-card--numbered-content
+            modified-content-classes
+          "
+          id="modified-unique-id-card-1-content"
+        ></div>
       </div>
     </div>
   </li>
@@ -119,7 +111,7 @@ exports[`AmeliproNumberedCard > render correctly 1`] = `
       mb-4
       numbered-card-item__wrapper
     "
-    id="my-numbered-card-id-card-2"
+    id="modified-unique-id-card-2"
   >
     <span class="
       font-weight-regular
@@ -131,7 +123,7 @@ exports[`AmeliproNumberedCard > render correctly 1`] = `
           text--darken-1
           toto
         "
-        id="my-numbered-card-id-card-2-number"
+        id="modified-unique-id-card-2-number"
       >
         3
       </span>
@@ -142,28 +134,38 @@ exports[`AmeliproNumberedCard > render correctly 1`] = `
         d-flex
         w-100
       "
-      id="my-numbered-card-id-card-2-wrapper"
+      id="modified-unique-id-card-2-wrapper"
     >
       <div
         class="
           amelipro-card--numbered
           w-100
         "
-        style="
-          background-color: #FFFFFF;
-          border: 1px solid #DDDEDE;
-        "
+        style="background-color: #545859;"
       >
         <div
-          class="amelipro-card--numbered-content"
-          id="my-numbered-card-id-card-2-content"
-        >
-          <p>
-            Contenu des cartes
-          </p>
-        </div>
+          class="
+            amelipro-card--numbered-content
+            modified-content-classes
+          "
+          id="modified-unique-id-card-2-content"
+        ></div>
       </div>
     </div>
   </li>
 </ol>
 `;
+
+exports[`AmeliproNumberedCard > Snapshots > renders the component with only required properties filled in 1`] = `
+<ol
+  class="
+    amelipro-numbered-card__list
+    d-flex
+    flex-wrap
+    items-per-line-2
+    justify-center
+    list-style-none
+  "
+  id="required-unique-id"
+></ol>
+`;

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

@@ -0,0 +1,219 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { VueWrapper, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import AmeliproOnboarding from '../AmeliproOnboarding.vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { ExpectedPropOptions } from '@tests/types'
+import type { IOnboarding } from '../types'
+import TestHelper from '@tests/helpers/TestHelper'
+import { defineComponent, h } from 'vue'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproOnboarding> = {
+	attach: {
+		type: Boolean,
+		default: false,
+	},
+	displayImgMobile: {
+		type: Boolean,
+		default: false,
+	},
+	eager: {
+		type: Boolean,
+		default: false,
+	},
+	finalBtnLabel: {
+		type: String,
+		default: 'Commencer',
+	},
+	imgHeight: {
+		type: String,
+		default: '335px',
+	},
+	imgWidth: {
+		type: String,
+		default: '35%',
+	},
+	modelValue: {
+		type: Boolean,
+		default: false,
+	},
+	persistent: {
+		type: Boolean,
+		default: false,
+	},
+	skipBtnLabel: {
+		type: String,
+		default: 'Passer',
+	},
+	steps: {
+		type: Array,
+		required: true,
+	},
+	title: {
+		type: String,
+		required: true,
+	},
+	uniqueId: {
+		type: String,
+		required: true,
+	},
+	width: {
+		type: String,
+		default: '800px',
+	},
+}
+
+const stepsData = (): IOnboarding[] => [
+	{
+		content: ['Contenu 1', 'Contenu 2'],
+		img: 'img1.png',
+		title: 'Step 1',
+	},
+	{
+		content: ['Contenu 3'],
+		img: 'img2.png',
+		title: 'Step 2',
+	},
+]
+
+const requiredPropValues = (): ComponentProps<typeof AmeliproOnboarding> => ({
+	steps: stepsData(),
+	title: 'Required title',
+	uniqueId: 'required-unique-id',
+})
+
+const modifiedPropValues = (): ComponentProps<typeof AmeliproOnboarding> => ({
+	attach: true,
+	displayImgMobile: true,
+	eager: true,
+	finalBtnLabel: 'Modified final label',
+	imgHeight: '222px',
+	imgWidth: '44%',
+	modelValue: true,
+	persistent: true,
+	skipBtnLabel: 'Modified skip label',
+	steps: [
+		{
+			content: ['Contenu 4'],
+			img: 'img3.png',
+			title: 'Step 3',
+		},
+		{
+			content: ['Contenu 5', 'Contenu 6'],
+			img: 'img4.png',
+			title: 'Step 4',
+		},
+	],
+	title: 'Modified title',
+	uniqueId: 'modified-unique-id',
+	width: '600px',
+})
+
+const testHelper = new TestHelper(AmeliproOnboarding)
+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
+
+// TODO: de nombreux tests ne passent pas et ont été désactivés. Il faudra les réactiver un par un et corriger les erreurs.
+describe('AmeliproOnboarding', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproOnboarding>>
+
+		const AmeliproDialogStub = defineComponent({
+			name: 'AmeliproDialog',
+			props: {
+				uniqueId: { type: String, required: true },
+			},
+			setup(props, { slots }) {
+				return () =>
+					h('amelipro-dialog-stub', { uniqueId: props.uniqueId }, [
+						slots.header ? slots.header() : null,
+						slots.default ? slots.default() : null,
+					])
+			},
+		})
+
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproOnboarding, {
+				props: requiredPropValues(),
+				global: { stubs: { AmeliproDialog: AmeliproDialogStub } },
+			})
+		})
+
+		describe('Header', () => {
+			it('prop title sets header content', async () => {
+				expect(vueWrapper.find(`#${testHelper.default('uniqueId')}-title`).text()).toBe(testHelper.default('title'))
+
+				const { title } = modifiedPropValues()
+				await vueWrapper.setProps({ title })
+				expect(vueWrapper.find(`#${testHelper.default('uniqueId')}-title`).text()).toBe(title)
+			})
+		})
+
+		describe('Main content', () => {
+			// Attention faute de frappe dans le composant : d au lieu de b dans "ondoarding__content"
+			it('prop uniqueId sets attribute id', async () => {
+				expect(vueWrapper.find('.amelipro-ondoarding__content').attributes('id')).toBe(`${testHelper.default('uniqueId')}-main-content`)
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.find('.amelipro-ondoarding__content').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-main-content`)
+			})
+		})
+
+		describe('Left part', () => {
+			it('prop uniqueId sets attribute id', async () => {
+				expect(vueWrapper.find('.amelipro-ondoarding__content--left').attributes('id')).toBe(`${testHelper.default('uniqueId')}-left-part`)
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.find('.amelipro-ondoarding__content--left').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-left-part`)
+			})
+
+			it('prop imgWidth sets attribute style', async () => {
+				expect(vueWrapper.find('.amelipro-ondoarding__content--left').attributes('style')).toContain(`width: ${testHelper.default('imgWidth')};`)
+
+				const { imgWidth } = modifiedPropValues()
+				await vueWrapper.setProps({ imgWidth })
+				expect(vueWrapper.find('.amelipro-ondoarding__content--left').attributes('style')).toContain(`width: ${testHelper.modified('imgWidth')};`)
+			})
+		})
+
+		// TODO: left part img
+
+		// TODO: right part
+
+		// TODO: right part dot wrapper
+
+		// TODO: right part dot
+
+		// TODO: nombreux cas à rajouter (content title, content text, buttons labels, img height, etc.)
+	})
+
+	describe.skip('Events', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproOnboarding>>
+
+		it('emit update:model-value when closing onboarding', async () => {
+			vueWrapper = shallowMount(AmeliproOnboarding, { props: { ...requiredPropValues(), modelValue: true } })
+			await vueWrapper.find('.amelipro-onboarding__content__btn--final').trigger('click')
+			expect(vueWrapper.emitted('update:model-value')).toBeTruthy()
+		})
+	})
+})

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

@@ -0,0 +1,41 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproOnboarding > Snapshots > renders the component with all properties filled in 1`] = `
+<amelipro-dialog-stub
+  attach="true"
+  cancelbtnlabel="Annuler"
+  eager="true"
+  fullscreen="false"
+  hiddencancelbtn="false"
+  labelledby="modified-unique-id-title"
+  maincontentminheight="150px"
+  modelvalue="true"
+  no-click-animation=""
+  noclickoutside="false"
+  nofooter="true"
+  persistent="true"
+  uniqueid="modified-unique-id"
+  validationbtnlabel="Valider"
+  width="600px"
+></amelipro-dialog-stub>
+`;
+
+exports[`AmeliproOnboarding > Snapshots > renders the component with only required properties filled in 1`] = `
+<amelipro-dialog-stub
+  attach="false"
+  cancelbtnlabel="Annuler"
+  eager="false"
+  fullscreen="false"
+  hiddencancelbtn="false"
+  labelledby="required-unique-id-title"
+  maincontentminheight="150px"
+  modelvalue="false"
+  no-click-animation=""
+  noclickoutside="false"
+  nofooter="true"
+  persistent="false"
+  uniqueid="required-unique-id"
+  validationbtnlabel="Valider"
+  width="800px"
+></amelipro-dialog-stub>
+`;

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

@@ -0,0 +1,129 @@
+import type { AmeliproPageLayoutInfos, SkipLink } from '../types'
+import { VueWrapper, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import AmeliproPageLayout from '../AmeliproPageLayout.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 AmeliproPageLayout> = {
+	ameliproPageLayoutInfos: {
+		type: Object as () => AmeliproPageLayoutInfos,
+		default: undefined,
+	},
+	customMainContent: {
+		type: Boolean,
+		default: false,
+	},
+	skipLinks: {
+		type: Array as () => SkipLink[],
+		default: () => [],
+	},
+	uniqueId: {
+		type: String,
+		default: undefined,
+	},
+}
+
+const requiredPropValues = (): ComponentProps<typeof AmeliproPageLayout> => ({})
+
+const modifiedPropValues = (): ComponentProps<typeof AmeliproPageLayout> => ({
+	ameliproPageLayoutInfos: {
+		ameliproFooterInfos: {
+			a11yCompliance: 'conforme',
+			version: '1.2.3',
+		},
+		ameliproHeaderInfos: {
+			backoffice: true,
+			headerTitle: 'Modified header title',
+			serviceName: 'Modified service name',
+		},
+		ameliproPatientBannerInfos: {
+			birthName: 'Patient Birth Name',
+			birthdate: '01/01/1980',
+			name: 'Patient Name',
+			noMoreInformation: true,
+			noPatientChange: true,
+			patientNir: '1234567890123',
+			patientOrganism: 'Organism',
+			patientStatus: 'Status',
+			patientSystem: 'System',
+		},
+		displayPatientBanner: true,
+	},
+	customMainContent: true,
+	skipLinks: [
+		{ label: 'Modified skip link', href: '#modified' },
+	],
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproPageLayout)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproPageLayout', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproPageLayout>>
+
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproPageLayout, { props: requiredPropValues() })
+		})
+
+		it('prop uniqueId sets attribute id', async () => {
+			expect(vueWrapper.find('.amelipro-page-layout').attributes('id')).toBeUndefined()
+
+			const { uniqueId } = modifiedPropValues()
+			await vueWrapper.setProps({ uniqueId })
+			expect(vueWrapper.find('.amelipro-page-layout').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-container`)
+		})
+
+		it('prop skipLinks sets skip link content', async () => {
+			expect(vueWrapper.findAll('.skip-link__item').length).toBe(1)
+
+			const { skipLinks } = modifiedPropValues()
+			await vueWrapper.setProps({ skipLinks })
+			expect(vueWrapper.findAll('.skip-link__item').length).toBe(2)
+			expect(vueWrapper.find('.skip-link__item:last-child .skip-link').text()).toBe('Modified skip link')
+		})
+
+		it('prop ameliproPageLayoutInfos sets header and footer', async () => {
+			expect(vueWrapper.findComponent({ name: 'AmeliproHeader' }).exists()).toBe(false)
+			expect(vueWrapper.findComponent({ name: 'AmeliproFooter' }).exists()).toBe(false)
+
+			const { ameliproPageLayoutInfos } = modifiedPropValues()
+			await vueWrapper.setProps({ ameliproPageLayoutInfos })
+			expect(vueWrapper.findComponent({ name: 'AmeliproHeader' }).exists()).toBe(true)
+			expect(vueWrapper.findComponent({ name: 'AmeliproFooter' }).exists()).toBe(true)
+		})
+	})
+
+	describe('Events', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproPageLayout>>
+
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproPageLayout, { props: { ...modifiedPropValues(), uniqueId: 'event-id' } })
+		})
+
+		it('emit back-btn-click when header emits back-btn-click', () => {
+			const header = vueWrapper.findComponent({ name: 'AmeliproHeader' })
+			header.vm.$emit('back-btn-click')
+			expect(vueWrapper.emitted('back-btn-click')).toBeTruthy()
+		})
+
+		it('emit click:patient-change when patient banner emits click:patient-change', () => {
+			const patientBanner = vueWrapper.findComponent({ name: 'AmeliproPatientBanner' })
+			patientBanner.vm.$emit('click:patient-change')
+			expect(vueWrapper.emitted('click:patient-change')).toBeTruthy()
+		})
+	})
+})