@cnamts/synapse 1.0.11 → 1.0.13

package/src/components/Amelipro/AmeliproMessagingLayout/AmeliproDropdownMenu/__tests__/AmeliproDropdownMenu.spec.ts

@@ -0,0 +1,266 @@
+import { VueWrapper, mount, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { AmeliproBtn } from '@/components'
+import AmeliproDropdownMenu from '../AmeliproDropdownMenu.vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { DropdownItem } from '../types'
+import type { ExpectedPropOptions } from '@tests/types'
+import type { PropType } from 'vue'
+import TestHelper from '@tests/helpers/TestHelper'
+import { attachToApp } from '@tests/helpers/utils'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproDropdownMenu> = {
+	items: {
+		type: Array as PropType<DropdownItem[]>,
+		required: true,
+	},
+	label: {
+		type: String,
+		required: true,
+	},
+	menuWidth: {
+		type: String,
+		default: '100%',
+	},
+	uniqueId: {
+		type: String,
+		required: true,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproDropdownMenu> => ({
+	items: [],
+	label: 'Required label',
+	uniqueId: 'required-unique-id',
+})
+
+const items = (): DropdownItem[] => ([
+	{
+		active: false,
+		href: '#',
+		label: 'Boîte de réception',
+	},
+	{
+		active: true,
+		href: '#',
+		label: 'Brouillons',
+	},
+	{
+		active: false,
+		href: '#',
+		label: 'Archives',
+	},
+])
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproDropdownMenu> => ({
+	items: items(),
+	label: 'Modified label',
+	menuWidth: '500px',
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproDropdownMenu)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproDropdownMenu', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproDropdownMenu>>
+
+		describe('root', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproDropdownMenu, { props: requiredPropValues() })
+			})
+
+			it('prop uniqueId sets attribute id', async () => {
+				expect(vueWrapper.attributes('id')).toBe(testHelper.default('uniqueId'))
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.attributes('id')).toBe(testHelper.modified('uniqueId'))
+			})
+
+			it('prop menuWidth sets attribute style', async () => {
+				expect(vueWrapper.attributes('style')).toBe(`width: ${testHelper.default('menuWidth')};`)
+
+				const { menuWidth } = modifiedPropValues()
+				await vueWrapper.setProps({ menuWidth })
+				expect(vueWrapper.attributes('style')).toBe(`width: ${testHelper.modified('menuWidth')};`)
+			})
+		})
+
+		describe('dropdown menu list', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproDropdownMenu, { props: requiredPropValues() })
+			})
+
+			it('prop uniqueId sets attribute id', async () => {
+				expect(vueWrapper.find('.dropdown-menu__list').attributes('id')).toBe(`${testHelper.default('uniqueId')}-menu`)
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.find('.dropdown-menu__list').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-menu`)
+			})
+
+			it('prop label sets attribute aria-label', async () => {
+				expect(vueWrapper.find('.dropdown-menu__list').attributes('aria-label')).toBe(testHelper.default('label'))
+
+				const { label } = modifiedPropValues()
+				await vueWrapper.setProps({ label })
+				expect(vueWrapper.find('.dropdown-menu__list').attributes('aria-label')).toBe(testHelper.modified('label'))
+			})
+		})
+
+		// describe.todo('dropdown menu item')
+	})
+
+	describe('Setting props should update props or attributes of inner components', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproDropdownMenu>>
+
+		describe('AmeliproBtn', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproDropdownMenu, { props: requiredPropValues() })
+			})
+
+			it('prop uniqueId sets prop uniqueId', async () => {
+				expect(vueWrapper.findComponent(AmeliproBtn).props('uniqueId')).toBe(`${testHelper.default('uniqueId')}-btn`)
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.findComponent(AmeliproBtn).props('uniqueId')).toBe(`${testHelper.modified('uniqueId')}-btn`)
+			})
+
+			it('prop uniqueId sets prop aria-controls', async () => {
+				expect(vueWrapper.findComponent(AmeliproBtn).attributes('aria-controls')).toBe(`${testHelper.default('uniqueId')}-menu`)
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.findComponent(AmeliproBtn).attributes('aria-controls')).toBe(`${testHelper.modified('uniqueId')}-menu`)
+			})
+		})
+
+		// describe.todo('AmeliproDropdownMenuBtn')
+	})
+
+	// Apparemment, Vitest ne modifie pas document.activeElement (contrairement à Jest)
+	// On ne peut pas se baser sur ça pour identifier l'élément actif...
+	// CF : https://stackoverflow.com/questions/78798672/vue-3-and-vitest-focus-input-sets-document-activeelement-to-htmlbodyelement-in-t
+	describe.skip('Functions', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproDropdownMenu>>
+		const wrapperFinder = () => vueWrapper.find('#test-id-btn')
+
+		beforeEach(() => {
+			vueWrapper = mount(AmeliproDropdownMenu, {
+				autoAttach: attachToApp(),
+				props: modifiedPropValues(),
+			})
+		})
+
+		it('test openMenu', async () => {
+			expect(wrapperFinder().exists()).toBe(true)
+			// open the menu with down key
+			await wrapperFinder().trigger('keyup.down')
+			await vueWrapper.vm.$nextTick()
+
+			expect(wrapperFinder().attributes('aria-expanded')).toStrictEqual('true')
+			// expect(document.activeElement?.id).toStrictEqual('test-id-btn-0');
+			// close the menu
+			await wrapperFinder().trigger('click')
+			await vueWrapper.vm.$nextTick()
+			expect(wrapperFinder().attributes('aria-expanded')).toStrictEqual('false')
+			// expect(document.activeElement?.id).toStrictEqual('test-id-btn');
+			// open the menu with up key
+			await wrapperFinder().trigger('keyup.up')
+			await vueWrapper.vm.$nextTick()
+
+			expect(wrapperFinder().attributes('aria-expanded')).toStrictEqual('true')
+			// expect(document.activeElement?.id).toStrictEqual('test-id-btn-2');
+			// close the menu with click
+			await wrapperFinder().trigger('click')
+		})
+
+		it('test closeMenu', async () => {
+			// open the menu with down key
+			await wrapperFinder().trigger('keyup.down')
+			await vueWrapper.vm.$nextTick()
+
+			expect(wrapperFinder().attributes('aria-expanded')).toStrictEqual('true')
+			// expect(document.activeElement?.id).toStrictEqual('test-id-btn-0');
+			// close the menu with esc
+			await vueWrapper.find('#test-id-btn-0').trigger('keyup.esc')
+			await vueWrapper.vm.$nextTick()
+
+			expect(wrapperFinder().attributes('aria-expanded')).toStrictEqual('false')
+			// expect(document.activeElement?.id).toStrictEqual('test-id-btn');
+		})
+
+		it('test pressUp', async () => {
+			// open the menu with up key
+			await wrapperFinder().trigger('keyup.up')
+			await vueWrapper.vm.$nextTick()
+
+			expect(wrapperFinder().attributes('aria-expanded')).toStrictEqual('true')
+			// expect(document.activeElement?.id).toStrictEqual('test-id-btn-2');
+			// press up on the focused btn
+			await vueWrapper.find('#test-id-btn-2').trigger('keyup.up')
+			await vueWrapper.vm.$nextTick()
+			// expect(document.activeElement?.id).toStrictEqual('test-id-btn-1');
+			// press up on the focused btn
+			await vueWrapper.find('#test-id-btn-1').trigger('keyup.up')
+			await vueWrapper.vm.$nextTick()
+			// expect(document.activeElement?.id).toStrictEqual('test-id-btn-0');
+			// press up on the focused btn
+			await vueWrapper.find('#test-id-btn-0').trigger('keyup.up')
+			await vueWrapper.vm.$nextTick()
+			// expect(document.activeElement?.id).toStrictEqual('test-id-btn-2');
+			// close the menu with click
+			await wrapperFinder().trigger('click')
+		})
+
+		it('test pressDown', async () => {
+			// open the menu with down key
+			await wrapperFinder().trigger('keyup.down')
+			await vueWrapper.vm.$nextTick()
+
+			expect(wrapperFinder().attributes('aria-expanded')).toStrictEqual('true')
+			// expect(document.activeElement?.id).toStrictEqual('test-id-btn-0');
+			// expect(vueWrapper.find('#test-id-btn-0').element.matches(':focus')).toBe(true);
+			// press down on the focused btn
+			await vueWrapper.find('#test-id-btn-0').trigger('keyup.down')
+			await vueWrapper.vm.$nextTick()
+			// expect(document.activeElement?.id).toStrictEqual('test-id-btn-1');
+			// press down on the focused btn
+			await vueWrapper.find('#test-id-btn-1').trigger('keyup.down')
+			await vueWrapper.vm.$nextTick()
+			// expect(document.activeElement?.id).toStrictEqual('test-id-btn-2');
+			// press down on the focused btn
+			await vueWrapper.find('#test-id-btn-2').trigger('keyup.down')
+			await vueWrapper.vm.$nextTick()
+			// expect(document.activeElement?.id).toStrictEqual('test-id-btn-0');
+			// close the menu with click
+			await wrapperFinder().trigger('click')
+		})
+
+		it('test pressCharacter', async () => {
+			// open the menu with down key
+			await wrapperFinder().trigger('keyup.down')
+			await vueWrapper.vm.$nextTick()
+
+			expect(wrapperFinder().attributes('aria-expanded')).toStrictEqual('true')
+			// expect(document.activeElement?.id).toStrictEqual('test-id-btn-0');
+			// press A to set focus on item 2
+			await vueWrapper.find('#test-id-btn-0').trigger('keyup', { key: 'A' })
+		})
+	})
+})

package/src/components/Amelipro/AmeliproMessagingLayout/AmeliproDropdownMenu/__tests__/__snapshots__/AmeliproDropdownMenu.spec.ts.snap

@@ -0,0 +1,134 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproDropdownMenu > Snapshots > renders the component with all properties filled in 1`] = `
+<div
+  class="dropdown-menu"
+  id="modified-unique-id"
+  style="width: 500px;"
+>
+  <amelipro-btn-stub
+    aria-controls="modified-unique-id-menu"
+    aria-expanded="false"
+    aria-haspopup="true"
+    badge="false"
+    badgebgcolor="ap-pink"
+    badgecolor="ap-white"
+    bordered="false"
+    class="
+      dropdown-menu__open-btn
+      font-weight-bold
+      text-h6
+      text-none
+      w-100
+    "
+    color="ap-white"
+    disabled="false"
+    hovercolor="ap-grey-lighten-4"
+    hoverunderline="false"
+    iconbgcolor="transparent"
+    iconbordered="false"
+    iconleft="false"
+    infoblock="false"
+    minheight="2.5rem"
+    size="60px"
+    text="false"
+    textcolor="ap-grey-darken-1"
+    type="button"
+    underline="false"
+    uniqueid="modified-unique-id-btn"
+  ></amelipro-btn-stub>
+  <ul
+    aria-label="Modified label"
+    class="
+      ap-white
+      dropdown-menu__list
+      list-style-none
+    "
+    id="modified-unique-id-menu"
+    role="menu"
+    style="display: none;"
+  >
+    <li
+      class="dropdown-menu__item"
+      role="none"
+    >
+      <amelipro-dropdown-menu-btn-stub
+        href="#"
+        label="Boîte de réception"
+        uniqueid="modified-unique-id-btn-0"
+      ></amelipro-dropdown-menu-btn-stub>
+    </li>
+    <li
+      class="dropdown-menu__item"
+      role="none"
+    >
+      <amelipro-dropdown-menu-btn-stub
+        href="#"
+        label="Brouillons"
+        uniqueid="modified-unique-id-btn-1"
+      ></amelipro-dropdown-menu-btn-stub>
+    </li>
+    <li
+      class="dropdown-menu__item"
+      role="none"
+    >
+      <amelipro-dropdown-menu-btn-stub
+        href="#"
+        label="Archives"
+        uniqueid="modified-unique-id-btn-2"
+      ></amelipro-dropdown-menu-btn-stub>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`AmeliproDropdownMenu > Snapshots > renders the component with only required properties filled in 1`] = `
+<div
+  class="dropdown-menu"
+  id="required-unique-id"
+  style="width: 100%;"
+>
+  <amelipro-btn-stub
+    aria-controls="required-unique-id-menu"
+    aria-expanded="false"
+    aria-haspopup="true"
+    badge="false"
+    badgebgcolor="ap-pink"
+    badgecolor="ap-white"
+    bordered="false"
+    class="
+      dropdown-menu__open-btn
+      font-weight-bold
+      text-h6
+      text-none
+      w-100
+    "
+    color="ap-white"
+    disabled="false"
+    hovercolor="ap-grey-lighten-4"
+    hoverunderline="false"
+    iconbgcolor="transparent"
+    iconbordered="false"
+    iconleft="false"
+    infoblock="false"
+    minheight="2.5rem"
+    size="60px"
+    text="false"
+    textcolor="ap-grey-darken-1"
+    type="button"
+    underline="false"
+    uniqueid="required-unique-id-btn"
+  ></amelipro-btn-stub>
+  <ul
+    aria-label="Required label"
+    class="
+      ap-white
+      dropdown-menu__list
+      list-style-none
+    "
+    id="required-unique-id-menu"
+    role="menu"
+    style="display: none;"
+  ></ul>
+</div>
+`;

package/src/components/Amelipro/AmeliproMessagingLayout/AmeliproMessagingMenuBtn/__tests__/AmeliproMessagingMenuBtn.spec.ts

@@ -0,0 +1,72 @@
+import AmeliproMessagingMenuBtn from '../AmeliproMessagingMenuBtn.vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { ExpectedPropOptions } from '@tests/types'
+import type { PropType } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import TestHelper from '@tests/helpers/TestHelper'
+import { describe } from 'vitest'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproMessagingMenuBtn> = {
+	active: {
+		type: Boolean,
+		default: false,
+	},
+	href: {
+		type: String,
+		default: undefined,
+	},
+	icon: {
+		type: String,
+		default: undefined,
+	},
+	label: {
+		type: String,
+		default: undefined,
+	},
+	to: {
+		type: [Array, Object, String] as PropType<RouteLocationRaw>,
+		default: undefined,
+	},
+	uniqueId: {
+		type: String,
+		required: true,
+	},
+	unreadNumber: {
+		type: Number,
+		default: undefined,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproMessagingMenuBtn> => ({ uniqueId: 'required-unique-id' })
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproMessagingMenuBtn> => ({
+	active: true,
+	href: '#modified',
+	icon: 'modified-plus',
+	label: 'Modified label',
+	to: '/modified-home',
+	uniqueId: 'modified-unique-id',
+	unreadNumber: 5,
+})
+
+const testHelper = new TestHelper(AmeliproMessagingMenuBtn)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproMessagingMenuBtn', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	// const wrapper = mount(AmeliproMessagingMenuBtn, {
+	//	props: modifiedPropValues(),
+	//	stubs: { AmeliproIcon },
+	// });
+})

package/src/components/Amelipro/AmeliproMessagingLayout/AmeliproMessagingMenuBtn/__tests__/__snapshots__/AmeliproMessagingMenuBtn.spec.ts.snap

@@ -0,0 +1,71 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproMessagingMenuBtn > Snapshots > renders the component with all properties filled in 1`] = `
+<amelipro-btn-stub
+  active="true"
+  badge="false"
+  badgebgcolor="ap-pink"
+  badgecolor="ap-white"
+  bordered="false"
+  class="
+    font-weight-bold
+    mb-1
+    messaging-menu__btn
+    text-h6
+    text-none
+    w-100
+  "
+  color="ap-blue-darken-2"
+  disabled="false"
+  hovercolor="ap-blue-darken-2"
+  hoverunderline="false"
+  href="#modified"
+  iconbgcolor="transparent"
+  iconbordered="false"
+  iconleft="false"
+  infoblock="false"
+  minheight="2.5rem"
+  size="60px"
+  style="min-height: 50px;"
+  text="false"
+  textcolor="ap-white"
+  to="/modified-home"
+  type="button"
+  underline="false"
+  uniqueid="modified-unique-id"
+></amelipro-btn-stub>
+`;
+
+exports[`AmeliproMessagingMenuBtn > Snapshots > renders the component with only required properties filled in 1`] = `
+<amelipro-btn-stub
+  active="false"
+  badge="false"
+  badgebgcolor="ap-pink"
+  badgecolor="ap-white"
+  bordered="false"
+  class="
+    font-weight-bold
+    mb-1
+    messaging-menu__btn
+    text-h6
+    text-none
+    w-100
+  "
+  color="ap-blue-darken-1"
+  disabled="false"
+  hovercolor="ap-blue-darken-2"
+  hoverunderline="false"
+  iconbgcolor="transparent"
+  iconbordered="false"
+  iconleft="false"
+  infoblock="false"
+  minheight="2.5rem"
+  size="60px"
+  style="min-height: 50px;"
+  text="false"
+  textcolor="ap-white"
+  type="button"
+  underline="false"
+  uniqueid="required-unique-id"
+></amelipro-btn-stub>
+`;

package/src/components/Amelipro/AmeliproPageLayout/tests/__snapshots__/AmeliproPageLayout.spec.ts.snap

@@ -1297,6 +1297,8 @@ exports[`AmeliproPageLayout > render correctly 1`] = `
                 <a
                   class="
                     amelipro-btn
+                    amelipro-footer__site-map-btn
+                    amelipro-footer__site-map-btn
                     elevation-0
                     text-ap-white
                     text-none
@@ -1342,6 +1344,8 @@ exports[`AmeliproPageLayout > render correctly 1`] = `
                 <a
                   class="
                     amelipro-btn
+                    amelipro-footer__about-btn
+                    amelipro-footer__about-btn
                     elevation-0
                     text-ap-white
                     text-none
@@ -1387,6 +1391,8 @@ exports[`AmeliproPageLayout > render correctly 1`] = `
                 <a
                   class="
                     amelipro-btn
+                    amelipro-footer__config-btn
+                    amelipro-footer__config-btn
                     elevation-0
                     text-ap-white
                     text-none
@@ -1432,6 +1438,8 @@ exports[`AmeliproPageLayout > render correctly 1`] = `
                 <a
                   class="
                     amelipro-btn
+                    amelipro-footer__legal-notice-btn
+                    amelipro-footer__legal-notice-btn
                     elevation-0
                     text-ap-white
                     text-none
@@ -1477,6 +1485,8 @@ exports[`AmeliproPageLayout > render correctly 1`] = `
                 <a
                   class="
                     amelipro-btn
+                    amelipro-footer__cgu-btn
+                    amelipro-footer__cgu-btn
                     elevation-0
                     text-ap-white
                     text-none
@@ -1522,6 +1532,8 @@ exports[`AmeliproPageLayout > render correctly 1`] = `
                 <a
                   class="
                     amelipro-btn
+                    amelipro-footer__a11y-btn
+                    amelipro-footer__a11y-btn
                     elevation-0
                     text-ap-white
                     text-none