@cnamts/synapse 1.0.13 → 1.0.15

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

@@ -0,0 +1,300 @@
+import { VueWrapper, mount, shallowMount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { AmeliproBtn } from '@/components/'
+import AmeliproDropdownMenu from '../AmeliproDropdownMenu/AmeliproDropdownMenu.vue'
+import AmeliproMessagingLayout from '../AmeliproMessagingLayout.vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import { DisplayTestComponent } from '@tests/helpers/utils'
+import type { ExpectedPropOptions } from '@tests/types'
+import type { MessagingMenuTypes } from '../types'
+import type { PropType } from 'vue'
+import TestHelper from '@tests/helpers/TestHelper'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproMessagingLayout> = {
+	items: {
+		type: Array as PropType<MessagingMenuTypes[]>,
+		default: () => [],
+	},
+	mainContentBg: {
+		type: String,
+		default: 'ap-grey-lighten-5',
+	},
+	menuWidth: {
+		type: String,
+		default: '255px',
+	},
+	newMessageDisable: {
+		type: Boolean,
+		default: false,
+	},
+	uniqueId: {
+		type: String,
+		required: true,
+	},
+}
+
+const itemsData = () => [
+	{
+		href: '#',
+		icon: 'discussion',
+		label: 'À traiter',
+		unreadNumber: 1,
+	},
+	{
+		active: true,
+		href: '#',
+		icon: 'horlogeFlecheDroiteNoCircle',
+		label: 'En cours',
+	},
+	{
+		href: '#',
+		icon: 'ecrire',
+		label: 'Brouillons',
+		unreadNumber: 1,
+	},
+	{
+		href: '#',
+		icon: 'boite',
+		label: 'Clos',
+		unreadNumber: 1,
+	},
+]
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproMessagingLayout> => ({ uniqueId: 'required-unique-id' })
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproMessagingLayout> => ({
+	items: itemsData(),
+	mainContentBg: 'ap-white',
+	menuWidth: '300px',
+	newMessageDisable: true,
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproMessagingLayout)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+const displayWrapper = mount(DisplayTestComponent)
+
+describe('AmeliproMessagingLayout', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproMessagingLayout>>
+
+		describe('root', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproMessagingLayout, { 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'))
+			})
+		})
+
+		describe('menu', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproMessagingLayout, { props: requiredPropValues() })
+			})
+
+			it('prop uniqueId sets attribute id', async () => {
+				expect(vueWrapper.find('.messaging-menu').attributes('id')).toBe(`${testHelper.default('uniqueId')}-menu`)
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.find('.messaging-menu').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-menu`)
+			})
+
+			it('prop menuWidth & display width set attribute style', async () => {
+				displayWrapper.vm.setMdAndUp(true)
+				await vueWrapper.vm.$nextTick()
+				expect(vueWrapper.find('.messaging-menu').attributes('style')).toBe('min-width: 255px;')
+
+				const { menuWidth } = modifiedPropValues()
+				await vueWrapper.setProps({ menuWidth })
+				expect(vueWrapper.find('.messaging-menu').attributes('style')).toBe('min-width: 300px;')
+
+				displayWrapper.vm.setMdAndUp(false)
+				await vueWrapper.vm.$nextTick()
+				expect(vueWrapper.find('.messaging-menu').attributes('style')).toBe('min-width: 100%;')
+			})
+		})
+
+		describe('menu desktop', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproMessagingLayout, { props: requiredPropValues() })
+			})
+
+			afterEach(() => {
+				displayWrapper.vm.resetDefaults()
+			})
+
+			it('prop display width sets tag visibility', async () => {
+				displayWrapper.vm.setMdAndUp(true)
+				await vueWrapper.vm.$nextTick()
+				expect(vueWrapper.find('.messaging-menu--desktop').exists()).toBe(true)
+
+				displayWrapper.vm.setMdAndUp(false)
+				await vueWrapper.vm.$nextTick()
+				expect(vueWrapper.find('.messaging-menu--desktop').exists()).toBe(false)
+			})
+
+			it('prop uniqueId sets attribute id', async () => {
+				displayWrapper.vm.setMdAndUp(true)
+				await vueWrapper.vm.$nextTick()
+				expect(vueWrapper.find('.messaging-menu--desktop').attributes('id')).toBe(`${testHelper.default('uniqueId')}-messaging-menu-desktop`)
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.find('.messaging-menu--desktop').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-messaging-menu-desktop`)
+			})
+		})
+
+		describe('menu list', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproMessagingLayout, { props: requiredPropValues() })
+			})
+
+			it('prop uniqueId sets attribute id', async () => {
+				expect(vueWrapper.find('.messaging-menu--desktop .list-style-none').attributes('id')).toBe(`${testHelper.default('uniqueId')}-messaging-menu-list`)
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.find('.messaging-menu--desktop .list-style-none').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-messaging-menu-list`)
+			})
+		})
+
+		describe('menu list items', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproMessagingLayout, { props: requiredPropValues() })
+			})
+
+			it('prop items sets items', async () => {
+				expect(vueWrapper.findAll('.messaging-menu--desktop .list-style-none li').length).toBe(0)
+
+				const { items } = modifiedPropValues()
+				await vueWrapper.setProps({ items })
+				expect(vueWrapper.findAll('.messaging-menu--desktop .list-style-none li').length).toBe(4)
+			})
+		})
+
+		describe('menu mobile', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproMessagingLayout, { props: requiredPropValues() })
+			})
+
+			afterEach(() => {
+				displayWrapper.vm.resetDefaults()
+			})
+
+			it('prop display width sets tag visibility', async () => {
+				displayWrapper.vm.setMdAndUp(true)
+				await vueWrapper.vm.$nextTick()
+				expect(vueWrapper.find('.messaging-menu__dropdown-menu').exists()).toBe(false)
+
+				displayWrapper.vm.setMdAndUp(false)
+				await vueWrapper.vm.$nextTick()
+				expect(vueWrapper.find('.messaging-menu__dropdown-menu').exists()).toBe(true)
+			})
+
+			it('prop uniqueId sets attribute id', async () => {
+				displayWrapper.vm.setMdAndUp(false)
+				await vueWrapper.vm.$nextTick()
+				expect(vueWrapper.find('.messaging-menu__dropdown-menu').attributes('id')).toBe(`${testHelper.default('uniqueId')}-messaging-menu-mobile`)
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.find('.messaging-menu__dropdown-menu').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-messaging-menu-mobile`)
+			})
+		})
+
+		describe('content', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproMessagingLayout, { props: requiredPropValues() })
+			})
+
+			it('prop uniqueId sets attribute id', async () => {
+				await vueWrapper.vm.$nextTick()
+				expect(vueWrapper.find('.amelipro-messaging-layout__content').attributes('id')).toBe(`${testHelper.default('uniqueId')}-content`)
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.find('.amelipro-messaging-layout__content').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-content`)
+			})
+
+			it('prop mainContentBg sets prop style', async () => {
+				expect(vueWrapper.find('.amelipro-messaging-layout__content').attributes('style')).toBe('background-color: #FAFAFA;')
+
+				const { mainContentBg } = modifiedPropValues()
+				await vueWrapper.setProps({ mainContentBg })
+				expect(vueWrapper.find('.amelipro-messaging-layout__content').attributes('style')).toBe('background-color: #FFFFFF;')
+			})
+		})
+	})
+
+	describe('Computed', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproMessagingLayout>>
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproMessagingLayout, { props: { ...requiredPropValues(), items: testHelper.modified('items') } })
+		})
+
+		afterEach(() => {
+			displayWrapper.vm.resetDefaults()
+		})
+
+		it('test menuItems', async () => {
+			displayWrapper.vm.setMdAndUp(false)
+			await vueWrapper.vm.$nextTick()
+			expect(vueWrapper.findComponent(AmeliproDropdownMenu).props('items')).toStrictEqual([
+				{
+					active: undefined,
+					href: '#',
+					label: 'À traiter',
+					to: undefined,
+				},
+				{
+					active: true,
+					href: '#',
+					label: 'En cours',
+					to: undefined,
+				},
+				{
+					active: undefined,
+					href: '#',
+					label: 'Brouillons',
+					to: undefined,
+				},
+				{
+					active: undefined,
+					href: '#',
+					label: 'Clos',
+					to: undefined,
+				},
+			])
+		})
+	})
+
+	describe('Events', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproMessagingLayout>>
+		it('test emitNewMessageEvent', async () => {
+			vueWrapper = shallowMount(AmeliproMessagingLayout, { props: { ...requiredPropValues(), newMessageDisable: false } })
+			expect(vueWrapper.emitted('click-new-message')).toStrictEqual(undefined)
+
+			await vueWrapper.findComponent(AmeliproBtn).trigger('click')
+			expect(vueWrapper.emitted('click-new-message')).toStrictEqual([[]])
+		})
+	})
+})

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

@@ -0,0 +1,197 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproMessagingLayout > Snapshots > renders the component with all properties filled in 1`] = `
+<div
+  class="
+    amelipro-messaging-layout
+    d-flex
+    flex-column
+    flex-md-row
+  "
+  id="modified-unique-id"
+>
+  <nav
+    aria-label="Menu messagerie"
+    class="
+      align-sm-center
+      bg-ap-blue-darken-1
+      d-block
+      d-md-block
+      d-sm-flex
+      messaging-menu
+    "
+    id="modified-unique-id-menu"
+    role="navigation"
+    style="min-width: 300px;"
+  >
+    <div class="messaging-menu__new-message">
+      <amelipro-btn-stub
+        badge="false"
+        badgebgcolor="ap-pink"
+        badgecolor="ap-white"
+        bordered="true"
+        class="
+          font-weight-bold
+          messaging-menu__new-message-btn
+          px-5
+        "
+        color="ap-grey-lighten-2"
+        disabled="true"
+        hovercolor="ap-grey-lighten-2"
+        hoverunderline="false"
+        iconbgcolor="transparent"
+        iconbordered="false"
+        iconcolor="ap-grey"
+        iconleft="true"
+        iconname="pencilNoCircle"
+        infoblock="false"
+        minheight="2.5rem"
+        size="60px"
+        text="false"
+        textcolor="ap-grey"
+        type="button"
+        underline="false"
+        uniqueid="modified-unique-id-new-message-btn"
+      ></amelipro-btn-stub>
+    </div>
+    <div
+      class="
+        messaging-menu--desktop
+        w-100
+      "
+      id="modified-unique-id-messaging-menu-desktop"
+    >
+      <ul
+        class="list-style-none"
+        id="modified-unique-id-messaging-menu-list"
+      >
+        <li>
+          <amelipro-messaging-menu-btn-stub
+            active="false"
+            href="#"
+            icon="discussion"
+            label="À traiter"
+            uniqueid="modified-unique-id-menu-btn-0"
+            unreadnumber="1"
+          ></amelipro-messaging-menu-btn-stub>
+        </li>
+        <li>
+          <amelipro-messaging-menu-btn-stub
+            active="true"
+            href="#"
+            icon="horlogeFlecheDroiteNoCircle"
+            label="En cours"
+            uniqueid="modified-unique-id-menu-btn-1"
+          ></amelipro-messaging-menu-btn-stub>
+        </li>
+        <li>
+          <amelipro-messaging-menu-btn-stub
+            active="false"
+            href="#"
+            icon="ecrire"
+            label="Brouillons"
+            uniqueid="modified-unique-id-menu-btn-2"
+            unreadnumber="1"
+          ></amelipro-messaging-menu-btn-stub>
+        </li>
+        <li>
+          <amelipro-messaging-menu-btn-stub
+            active="false"
+            href="#"
+            icon="boite"
+            label="Clos"
+            uniqueid="modified-unique-id-menu-btn-3"
+            unreadnumber="1"
+          ></amelipro-messaging-menu-btn-stub>
+        </li>
+      </ul>
+    </div>
+  </nav>
+  <div
+    class="
+      amelipro-messaging-layout__content
+      w-100
+    "
+    id="modified-unique-id-content"
+    style="background-color: #FFFFFF;"
+  ></div>
+</div>
+`;
+
+exports[`AmeliproMessagingLayout > Snapshots > renders the component with only required properties filled in 1`] = `
+<div
+  class="
+    amelipro-messaging-layout
+    d-flex
+    flex-column
+    flex-md-row
+  "
+  id="required-unique-id"
+>
+  <nav
+    aria-label="Menu messagerie"
+    class="
+      align-sm-center
+      bg-ap-blue-darken-1
+      d-block
+      d-md-block
+      d-sm-flex
+      messaging-menu
+    "
+    id="required-unique-id-menu"
+    role="navigation"
+    style="min-width: 255px;"
+  >
+    <div class="messaging-menu__new-message">
+      <amelipro-btn-stub
+        badge="false"
+        badgebgcolor="ap-pink"
+        badgecolor="ap-white"
+        bordered="true"
+        class="
+          font-weight-bold
+          messaging-menu__new-message-btn
+          px-5
+        "
+        color="ap-blue-darken-1"
+        disabled="false"
+        hovercolor="ap-blue-darken-2"
+        hoverunderline="false"
+        iconbgcolor="transparent"
+        iconbordered="false"
+        iconcolor="ap-white"
+        iconleft="true"
+        iconname="pencilNoCircle"
+        infoblock="false"
+        minheight="2.5rem"
+        size="60px"
+        text="false"
+        textcolor="ap-white"
+        type="button"
+        underline="false"
+        uniqueid="required-unique-id-new-message-btn"
+      ></amelipro-btn-stub>
+    </div>
+    <div
+      class="
+        messaging-menu--desktop
+        w-100
+      "
+      id="required-unique-id-messaging-menu-desktop"
+    >
+      <ul
+        class="list-style-none"
+        id="required-unique-id-messaging-menu-list"
+      ></ul>
+    </div>
+  </nav>
+  <div
+    class="
+      amelipro-messaging-layout__content
+      w-100
+    "
+    id="required-unique-id-content"
+    style="background-color: #FAFAFA;"
+  ></div>
+</div>
+`;

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

@@ -0,0 +1,117 @@
+import { VueWrapper, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import AmeliproNumberedCard from '../AmeliproNumberedCard.vue'
+import type { AmeliproNumberedCardItem } from '../types'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { ExpectedPropOptions } from '@tests/types'
+import type { PropType } from 'vue'
+import TestHelper from '@tests/helpers/TestHelper'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproNumberedCard> = {
+	borderColor: {
+		type: String,
+		default: 'ap-grey-lighten-2',
+	},
+	bordered: {
+		type: Boolean,
+		default: true,
+	},
+	cardColor: {
+		type: String,
+		default: 'ap-white',
+	},
+	contentClasses: {
+		type: String,
+		default: undefined,
+	},
+	items: {
+		type: Array as PropType<AmeliproNumberedCardItem[]>,
+		required: true,
+	},
+	itemsPerLine: {
+		type: Number,
+		default: 2,
+	},
+	uniqueId: {
+		type: String,
+		required: true,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproNumberedCard> => ({
+	uniqueId: 'required-unique-id',
+	items: [],
+})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproNumberedCard> => ({
+	borderColor: 'ap-blue',
+	bordered: false,
+	cardColor: 'ap-grey',
+	contentClasses: 'modified-content-classes',
+	items: [
+		{
+			email: 'modified-jean.bernard@gmail.com',
+			firstname: 'Modified Jean',
+			id: 0,
+			name: 'Modified Bernard',
+		},
+		{
+			email: 'modified-simon.pierre@gmail.com',
+			firstname: 'Modified Simon',
+			id: 1,
+			name: 'Modified Pierre',
+		},
+		{
+			email: 'modified-michel.souris@gmail.com',
+			firstname: 'Modified Michel',
+			id: 2,
+			name: 'Modified Souris',
+		},
+	],
+	itemsPerLine: 3,
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproNumberedCard)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproNumberedCard', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Computed', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproNumberedCard>>
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproNumberedCard, { props: { ...requiredPropValues(), items: testHelper.modified('items') } })
+		})
+
+		it('generalCardStyles returns the good styles', async () => {
+			expect(vueWrapper.find('.amelipro-card--numbered').attributes('style')).toStrictEqual('background-color: #FFFFFF; border: 1px solid #DDDEDE;')
+
+			const { borderColor, bordered, cardColor } = modifiedPropValues()
+			await vueWrapper.setProps({ borderColor, cardColor })
+			expect(vueWrapper.find('.amelipro-card--numbered').attributes('style')).toStrictEqual('background-color: #545859; border: 1px solid #0C419A;')
+			await vueWrapper.setProps({ bordered })
+			expect(vueWrapper.find('.amelipro-card--numbered').attributes('style')).toStrictEqual('background-color: #545859;')
+		})
+
+		it('listClasses returns the good classes', async () => {
+			expect(vueWrapper.find('ol').classes().includes('items-per-line-2')).toBeTruthy()
+
+			await vueWrapper.setProps({ itemsPerLine: 3 })
+			expect(vueWrapper.find('ol').classes().includes('items-per-line-3')).toBeTruthy()
+
+			await vueWrapper.setProps({ itemsPerLine: 4 })
+			expect(vueWrapper.find('ol').classes().includes('items-per-line-4')).toBeTruthy()
+		})
+	})
+})