@cnamts/synapse 1.0.11 → 1.0.13

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

@@ -0,0 +1,295 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproMenu > Snapshots > renders the component with all properties filled in 1`] = `
+<div
+  class="
+    amelipro-menu
+    d-flex
+    justify-center
+  "
+  id="modified-unique-id-container"
+>
+  <amelipro-icon-btn-stub
+    badge="false"
+    bordered="false"
+    btnlabel="Menu du service"
+    class="amelipro-menu__btn--open"
+    icon="menuSquare"
+    iconbgcolor="transparent"
+    iconcolor="ap-white"
+    iconhoverbgcolor="transparent"
+    iconhovercolor="ap-grey-lighten-5"
+    large="true"
+    medium="false"
+    small="false"
+    uniqueid="modified-unique-id-open-btn"
+    xlarge="false"
+  ></amelipro-icon-btn-stub>
+  <div
+    aria-label="Menu du service"
+    aria-modal="true"
+    color="ap-blue-darken-2"
+    hide-overlay=""
+    id="modified-unique-id-drawer"
+    model-value="false"
+    role="dialog"
+    temporary=""
+    width="300"
+  >
+    <div
+      class="
+        align-center
+        amelipro-menu__container
+        d-flex
+        justify-space-between
+      "
+      id="modified-unique-id-drawer-content"
+    >
+      <h2
+        class="
+          amelipro-menu__title
+          mb-0
+          pa-1
+          text-ap-white
+          text-uppercase
+        "
+        id="modified-unique-id-drawer-title"
+      >
+        Modified menu header
+      </h2>
+      <amelipro-icon-btn-stub
+        badge="false"
+        bordered="false"
+        btnlabel="Fermer le menu"
+        class="menu-btn-close"
+        iconbgcolor="transparent"
+        iconcolor="ap-white"
+        iconhoverbgcolor="transparent"
+        iconhovercolor="ap-white"
+        large="false"
+        medium="false"
+        small="false"
+        uniqueid="modified-unique-id-close-menu-btn"
+        xlarge="false"
+      ></amelipro-icon-btn-stub>
+    </div>
+    <v-divider-stub
+      class="my-2"
+      color="ap-white"
+      inset="false"
+      style="opacity: 1 !important;"
+      thickness="1px"
+      vertical="false"
+    ></v-divider-stub>
+    <ul
+      class="
+        amelipro-menu__list
+        list-style-none
+      "
+      id="modified-unique-id-list"
+    >
+      <li class="amelipro-menu__item">
+        <div>
+          <amelipro-btn-stub
+            aria-controls="modified-unique-id-niveau-2-0"
+            aria-expanded="false"
+            badge="false"
+            badgebgcolor="ap-pink"
+            badgecolor="ap-white"
+            bordered="false"
+            classes="d-flex justify-space-between w-100 menu-btn"
+            color="ap-blue-darken-2"
+            disabled="false"
+            elevation="0"
+            hovercolor="ap-blue-lighten-3"
+            hoverunderline="false"
+            iconbgcolor="transparent"
+            iconbordered="false"
+            iconfocuscolor="ap-blue-darken-2"
+            iconhovercolor="ap-blue-darken-2"
+            iconleft="false"
+            infoblock="false"
+            minheight="2.5rem"
+            size="60px"
+            text="false"
+            textcolor="ap-white"
+            textfocuscolor="ap-blue-darken-2"
+            texthovercolor="ap-blue-darken-2"
+            tile=""
+            type="button"
+            underline="false"
+            uniqueid="menu-btn__modified-menu-1"
+          ></amelipro-btn-stub>
+          <!-- v-if -->
+        </div>
+      </li>
+    </ul>
+    <v-divider-stub
+      class="my-2"
+      color="ap-white"
+      inset="false"
+      style="opacity: 1 !important;"
+      thickness="1px"
+      vertical="false"
+    ></v-divider-stub>
+    <div>
+      <amelipro-btn-stub
+        badge="false"
+        badgebgcolor="ap-pink"
+        badgecolor="ap-white"
+        bordered="false"
+        classes="w-100 pa-0 home-menu-btn"
+        color="ap-blue-darken-2"
+        disabled="false"
+        elevation="0"
+        hovercolor="ap-blue-darken-2"
+        hoverunderline="false"
+        href="modified-home-href"
+        iconbgcolor="transparent"
+        iconbordered="false"
+        iconleft="false"
+        infoblock="false"
+        minheight="2.5rem"
+        size="60px"
+        text="false"
+        textcolor="ap-white"
+        textfocuscolor="ap-blue-darken-2"
+        texthovercolor="ap-blue-darken-2"
+        tile=""
+        to="modified-home-to"
+        type="button"
+        underline="false"
+        uniqueid="modified-unique-id-return-home-menu-btn"
+      ></amelipro-btn-stub>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AmeliproMenu > Snapshots > renders the component with only required properties filled in 1`] = `
+<div
+  class="
+    amelipro-menu
+    d-flex
+    justify-center
+  "
+  id="required-unique-id-container"
+>
+  <amelipro-icon-btn-stub
+    badge="false"
+    bordered="false"
+    btnlabel="Menu du service"
+    class="amelipro-menu__btn--open"
+    icon="menuSquare"
+    iconbgcolor="transparent"
+    iconcolor="ap-white"
+    iconhoverbgcolor="transparent"
+    iconhovercolor="ap-grey-lighten-5"
+    large="true"
+    medium="false"
+    small="false"
+    uniqueid="required-unique-id-open-btn"
+    xlarge="false"
+  ></amelipro-icon-btn-stub>
+  <div
+    aria-label="Menu du service"
+    aria-modal="true"
+    color="ap-blue-darken-2"
+    hide-overlay=""
+    id="required-unique-id-drawer"
+    model-value="false"
+    role="dialog"
+    temporary=""
+    width="300"
+  >
+    <div
+      class="
+        align-center
+        amelipro-menu__container
+        d-flex
+        justify-space-between
+      "
+      id="required-unique-id-drawer-content"
+    >
+      <h2
+        class="
+          amelipro-menu__title
+          mb-0
+          pa-1
+          text-ap-white
+          text-uppercase
+        "
+        id="required-unique-id-drawer-title"
+      >
+        Titre du service
+      </h2>
+      <amelipro-icon-btn-stub
+        badge="false"
+        bordered="false"
+        btnlabel="Fermer le menu"
+        class="menu-btn-close"
+        iconbgcolor="transparent"
+        iconcolor="ap-white"
+        iconhoverbgcolor="transparent"
+        iconhovercolor="ap-white"
+        large="false"
+        medium="false"
+        small="false"
+        uniqueid="required-unique-id-close-menu-btn"
+        xlarge="false"
+      ></amelipro-icon-btn-stub>
+    </div>
+    <v-divider-stub
+      class="my-2"
+      color="ap-white"
+      inset="false"
+      style="opacity: 1 !important;"
+      thickness="1px"
+      vertical="false"
+    ></v-divider-stub>
+    <ul
+      class="
+        amelipro-menu__list
+        list-style-none
+      "
+      id="required-unique-id-list"
+    ></ul>
+    <v-divider-stub
+      class="my-2"
+      color="ap-white"
+      inset="false"
+      style="opacity: 1 !important;"
+      thickness="1px"
+      vertical="false"
+    ></v-divider-stub>
+    <div>
+      <amelipro-btn-stub
+        badge="false"
+        badgebgcolor="ap-pink"
+        badgecolor="ap-white"
+        bordered="false"
+        classes="w-100 pa-0 home-menu-btn"
+        color="ap-blue-darken-2"
+        disabled="false"
+        elevation="0"
+        hovercolor="ap-blue-darken-2"
+        hoverunderline="false"
+        iconbgcolor="transparent"
+        iconbordered="false"
+        iconleft="false"
+        infoblock="false"
+        minheight="2.5rem"
+        size="60px"
+        text="false"
+        textcolor="ap-white"
+        textfocuscolor="ap-blue-darken-2"
+        texthovercolor="ap-blue-darken-2"
+        tile=""
+        type="button"
+        underline="false"
+        uniqueid="required-unique-id-return-home-menu-btn"
+      ></amelipro-btn-stub>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,128 @@
+import { VueWrapper, mount, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { AmeliproBtn } from '@/components'
+import AmeliproDropdownMenuBtn from '../AmeliproDropdownMenuBtn.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'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproDropdownMenuBtn> = {
+	href: {
+		type: String,
+		default: undefined,
+	},
+	label: {
+		type: String,
+		required: true,
+	},
+	to: {
+		type: [Array, Object, String] as PropType<RouteLocationRaw>,
+		default: undefined,
+	},
+	uniqueId: {
+		type: String,
+		required: true,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproDropdownMenuBtn> => ({
+	label: 'Required label',
+	uniqueId: 'required-unique-id',
+})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproDropdownMenuBtn> => ({
+	href: 'modified-href',
+	label: 'modified label',
+	to: 'modified-to',
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproDropdownMenuBtn)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproDropdownMenuBtn', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update props & attributes of inner components', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproDropdownMenuBtn>>
+
+		describe('AmeliproBtn', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproDropdownMenuBtn, { props: requiredPropValues() })
+			})
+
+			it('prop uniqueId sets prop uniqueId', async () => {
+				expect(vueWrapper.findComponent(AmeliproBtn).props('uniqueId')).toBe(testHelper.default('uniqueId'))
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.findComponent(AmeliproBtn).props('uniqueId')).toBe(testHelper.modified('uniqueId'))
+			})
+
+			it('prop href sets attribute href', async () => {
+				expect(vueWrapper.findComponent(AmeliproBtn).attributes('href')).toBe(testHelper.default('href'))
+
+				const { href } = modifiedPropValues()
+				await vueWrapper.setProps({ href })
+				expect(vueWrapper.findComponent(AmeliproBtn).attributes('href')).toBe(testHelper.modified('href'))
+			})
+
+			it('prop to sets attribute to', async () => {
+				expect(vueWrapper.findComponent(AmeliproBtn).attributes('to')).toBe(testHelper.default('to'))
+
+				const { to } = modifiedPropValues()
+				await vueWrapper.setProps({ to })
+				expect(vueWrapper.findComponent(AmeliproBtn).attributes('to')).toBe(testHelper.modified('to'))
+			})
+		})
+	})
+
+	describe('Events', () => {
+		let wrapper: VueWrapper<InstanceType<typeof AmeliproDropdownMenuBtn>>
+		const buttonFinder = () => wrapper.findComponent(AmeliproBtn)
+		beforeEach(() => {
+			wrapper = mount(AmeliproDropdownMenuBtn, { props: modifiedPropValues() })
+		})
+		it('test emitEvent', async () => {
+			expect(wrapper.exists()).toBeTruthy()
+			expect(buttonFinder().exists()).toBeTruthy()
+			const emitValues = ['down', 'up', 'end', 'home', 'esc']
+			await emitValues.forEach(async (element) => {
+				expect(wrapper.emitted(element)).toBeUndefined()
+				await buttonFinder().trigger(`keyup.${element}`)
+				expect(wrapper.emitted(element)).toStrictEqual([[]])
+				expect(wrapper.emitted('letters')).toStrictEqual(undefined)
+			})
+		})
+
+		it('test emitLettersEvent', async () => {
+			expect(wrapper.exists()).toBeTruthy()
+			expect(buttonFinder().exists()).toBeTruthy()
+			await buttonFinder().trigger('keyup', { key: 'a' })
+			expect(wrapper.emitted('letters')).toStrictEqual([['a']])
+			await buttonFinder().trigger('keyup', { key: 'B' })
+			expect(wrapper.emitted('letters')).toStrictEqual([['a'], ['b']])
+			await buttonFinder().trigger('keyup', { key: '+' })
+			expect(wrapper.emitted('letters')).toStrictEqual([['a'], ['b']])
+		})
+	})
+
+	// describe('Other', () => {
+	//	describe('AmeliproBtn', () => {
+	//		it.todo('focus ? sets attribute color')
+	//		it.todo('focus ? sets attribute tabindex')
+	//	})
+	// })
+})

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

@@ -0,0 +1,67 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproDropdownMenuBtn > Snapshots > renders the component with all properties filled in 1`] = `
+<amelipro-btn-stub
+  badge="false"
+  badgebgcolor="ap-pink"
+  badgecolor="ap-white"
+  bordered="false"
+  class="
+    dropdown-menu__btn
+    text-left
+    text-none
+    w-100
+  "
+  color="ap-white"
+  disabled="false"
+  hovercolor="ap-grey-lighten-4"
+  hoverunderline="false"
+  href="modified-href"
+  iconbgcolor="transparent"
+  iconbordered="false"
+  iconleft="false"
+  infoblock="false"
+  minheight="2.5rem"
+  role="menuitem"
+  size="60px"
+  tabindex="-1"
+  text="false"
+  textcolor="ap-grey-darken-1"
+  to="modified-to"
+  type="button"
+  underline="false"
+  uniqueid="modified-unique-id"
+></amelipro-btn-stub>
+`;
+
+exports[`AmeliproDropdownMenuBtn > Snapshots > renders the component with only required properties filled in 1`] = `
+<amelipro-btn-stub
+  badge="false"
+  badgebgcolor="ap-pink"
+  badgecolor="ap-white"
+  bordered="false"
+  class="
+    dropdown-menu__btn
+    text-left
+    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"
+  role="menuitem"
+  size="60px"
+  tabindex="-1"
+  text="false"
+  textcolor="ap-grey-darken-1"
+  type="button"
+  underline="false"
+  uniqueid="required-unique-id"
+></amelipro-btn-stub>
+`;