@cnamts/synapse 1.0.13 → 1.0.15

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

@@ -0,0 +1,241 @@
+import { VueWrapper, mount, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import AmeliproTileBtn from '../AmeliproTileBtn.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 AmeliproTileBtn> = {
+	alignTopStyle: {
+		type: Boolean,
+		default: false,
+	},
+	borderDash: {
+		type: Boolean,
+		default: false,
+	},
+	complementaryInfoLine1: {
+		type: String,
+		default: undefined,
+	},
+	complementaryInfoLine2: {
+		type: String,
+		default: undefined,
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+	href: {
+		type: String,
+		default: undefined,
+	},
+	imgMaxWidth: {
+		type: String,
+		default: undefined,
+	},
+	imgMinWidth: {
+		type: String,
+		default: undefined,
+	},
+	imgSrc: {
+		type: String,
+		required: true,
+	},
+	imgWidth: {
+		type: String,
+		default: '100px',
+	},
+	invalid: {
+		type: Boolean,
+		default: false,
+	},
+	label: {
+		type: String,
+		required: true,
+	},
+	labelBottom: {
+		type: String,
+		default: undefined,
+	},
+	message: {
+		type: String,
+		default: undefined,
+	},
+	messageType: {
+		default: 'info',
+		type: String,
+		validator(value: string): boolean {
+			return ['info', 'error', 'warning'].includes(value.toLowerCase())
+		},
+	},
+	tileMinHeight: {
+		type: String,
+		default: undefined,
+	},
+	tilePadding: {
+		type: String,
+		default: '2rem 1.5rem',
+	},
+	tileWidth: {
+		type: String,
+		default: '100%',
+	},
+	to: {
+		type: [Array, Object, String] as PropType<RouteLocationRaw>,
+		default: undefined,
+	},
+	uniqueId: {
+		type: String,
+		default: undefined,
+	},
+	valid: {
+		type: Boolean,
+		default: false,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproTileBtn> => ({
+	imgSrc: 'required-img-src',
+	label: 'Required label',
+})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproTileBtn> => ({
+	alignTopStyle: true,
+	borderDash: true,
+	complementaryInfoLine1: 'Modified complementary info line 1',
+	complementaryInfoLine2: 'Modified complementary info line 2',
+	disabled: true,
+	href: 'modified-href',
+	imgMaxWidth: 'modified-img-max-width',
+	imgMinWidth: 'modified-img-min-width',
+	imgSrc: 'modified-img-src',
+	imgWidth: 'modified-img-width',
+	invalid: true,
+	label: 'Modified label',
+	labelBottom: 'Modified label bottom',
+	message: 'Modified message',
+	messageType: 'warning',
+	tileMinHeight: 'modified-tile-min-height',
+	tilePadding: 'modified-tile-padding',
+	tileWidth: 'modified-tile-width',
+	to: 'modified-to',
+	uniqueId: 'modified-unique-id',
+	valid: true,
+})
+
+const testHelper = new TestHelper(AmeliproTileBtn)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproTileBtn', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe.skip('Setting props should update attributes of inner tags', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproTileBtn>>
+
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproTileBtn, { props: requiredPropValues() })
+		})
+
+		it('prop borderDash sets button style', async () => {
+			expect(vueWrapper.attributes().style).toBe('background-color: rgb(255, 255, 255); color: rgb(26, 27, 27); padding: 2rem 1.5rem; border: 2px solid #ffffff !important;')
+			await vueWrapper.setProps({ borderDash: testHelper.modified('borderDash') })
+			expect(vueWrapper.attributes().style).toBe('background-color: rgb(255, 255, 255); color: rgb(26, 27, 27); padding: 2rem 1.5rem; border: 2px dashed #99dbf2;')
+		})
+
+		it('props imgMaxWidth, imgMinWidth, imgWidth set img style', async () => {
+			const element = vueWrapper.find('img')
+			expect(element.exists()).toBe(true)
+			expect(element.attributes().style).toBe('width: 100px;')
+			await vueWrapper.setProps({
+				imgMaxWidth: testHelper.modified('imgMaxWidth'),
+				imgMinWidth: testHelper.modified('imgMinWidth'),
+				imgWidth: testHelper.modified('imgWidth'),
+			})
+			expect(element.attributes().style).toBe('width: 100px;')
+		})
+	})
+
+	describe('Setting props should update props or attributes of inner components', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproTileBtn>>
+
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproTileBtn, { props: requiredPropValues() })
+		})
+
+		it('prop label sets label text', async () => {
+			expect(vueWrapper.props('label')).toBe(testHelper.default('label'))
+			await vueWrapper.setProps({ label: testHelper.modified('label') })
+			expect(vueWrapper.props('label')).toBe(testHelper.modified('label'))
+		})
+
+		it('prop labelBottom sets labelBottom prop', async () => {
+			expect(vueWrapper.props('labelBottom')).toBe(testHelper.default('labelBottom'))
+			await vueWrapper.setProps({ labelBottom: testHelper.modified('labelBottom') })
+			expect(vueWrapper.props('labelBottom')).toBe(testHelper.modified('labelBottom'))
+		})
+
+		it('prop complementaryInfoLine1 sets complementaryInfoLine1 prop', async () => {
+			expect(vueWrapper.props('complementaryInfoLine1')).toBe(testHelper.default('complementaryInfoLine1'))
+			await vueWrapper.setProps({ complementaryInfoLine1: testHelper.modified('complementaryInfoLine1') })
+			expect(vueWrapper.props('complementaryInfoLine1')).toBe(testHelper.modified('complementaryInfoLine1'))
+		})
+
+		it('prop complementaryInfoLine2 sets complementaryInfoLine2 prop', async () => {
+			expect(vueWrapper.props('complementaryInfoLine2')).toBe(testHelper.default('complementaryInfoLine2'))
+			await vueWrapper.setProps({ complementaryInfoLine2: testHelper.modified('complementaryInfoLine2') })
+			expect(vueWrapper.props('complementaryInfoLine2')).toBe(testHelper.modified('complementaryInfoLine2'))
+		})
+
+		it('prop disabled sets disabled prop', async () => {
+			expect(vueWrapper.props('disabled')).toBe(testHelper.default('disabled'))
+			await vueWrapper.setProps({ disabled: testHelper.modified('disabled') })
+			expect(vueWrapper.props('disabled')).toBe(testHelper.modified('disabled'))
+		})
+
+		it('prop href sets href prop', async () => {
+			expect(vueWrapper.props('href')).toBe(testHelper.default('href'))
+			await vueWrapper.setProps({ href: testHelper.modified('href') })
+			expect(vueWrapper.props('href')).toBe(testHelper.modified('href'))
+		})
+
+		it('prop to sets to prop', async () => {
+			expect(vueWrapper.props('to')).toBe(testHelper.default('to'))
+			await vueWrapper.setProps({ to: testHelper.modified('to') })
+			expect(vueWrapper.props('to')).toBe(testHelper.modified('to'))
+		})
+
+		it('prop uniqueId sets uniqueId prop', async () => {
+			expect(vueWrapper.props('uniqueId')).toBe(testHelper.default('uniqueId'))
+			await vueWrapper.setProps({ uniqueId: testHelper.modified('uniqueId') })
+			expect(vueWrapper.props('uniqueId')).toBe(testHelper.modified('uniqueId'))
+		})
+	})
+
+	describe('Events', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproTileBtn>>
+
+		beforeEach(() => {
+			vueWrapper = mount(AmeliproTileBtn, { props: modifiedPropValues() })
+		})
+
+		it('emits a click event when button is clicked', async () => {
+			expect(vueWrapper.exists()).toBe(true)
+			expect(vueWrapper.emitted('click')).toBeUndefined()
+			await vueWrapper.trigger('click')
+			expect(vueWrapper.emitted('click')).toStrictEqual([['modified-unique-id']])
+		})
+	})
+})

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

@@ -0,0 +1,74 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproTileBtn > Snapshots > renders the component with all properties filled in 1`] = `
+<v-btn-stub
+  block="false"
+  border="false"
+  class="
+    amelipro-tile-btn
+    text-none
+  "
+  density="default"
+  disabled="true"
+  elevation="1"
+  exact="false"
+  flat="false"
+  height="auto"
+  href="modified-href"
+  icon="false"
+  id="modified-unique-id"
+  loading="false"
+  minheight="modified-tile-min-height"
+  replace="false"
+  ripple="false"
+  size="default"
+  slim="false"
+  stacked="false"
+  style="
+    background-color: #DDDEDE !important;
+    border: 2px solid #DDDEDE !important;
+    color: #1A1B1B !important;
+  "
+  symbol="Symbol(vuetify:v-btn-toggle)"
+  tag="button"
+  tile="false"
+  to="modified-to"
+  variant="elevated"
+  width="modified-tile-width"
+></v-btn-stub>
+`;
+
+exports[`AmeliproTileBtn > Snapshots > renders the component with only required properties filled in 1`] = `
+<v-btn-stub
+  block="false"
+  border="false"
+  class="
+    amelipro-tile-btn
+    text-none
+  "
+  density="default"
+  disabled="false"
+  elevation="1"
+  exact="false"
+  flat="false"
+  height="auto"
+  icon="false"
+  loading="false"
+  replace="false"
+  ripple="false"
+  size="default"
+  slim="false"
+  stacked="false"
+  style="
+    background-color: #FFFFFF;
+    border: 2px solid #FFFFFF !important;
+    color: #1A1B1B;
+    padding: 2rem 1.5rem;
+  "
+  symbol="Symbol(vuetify:v-btn-toggle)"
+  tag="button"
+  tile="false"
+  variant="elevated"
+  width="100%"
+></v-btn-stub>
+`;

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

@@ -0,0 +1,212 @@
+import { VueWrapper, mount, shallowMount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import AmeliproTooltips from '../AmeliproTooltips.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 AmeliproTooltips> = {
+	btnLabel: {
+		type: String,
+		default: 'plus d’informations',
+	},
+	classes: {
+		type: String,
+		default: undefined,
+	},
+	iconBgColor: {
+		type: String,
+		default: 'ap-white',
+	},
+	iconColor: {
+		type: String,
+		default: 'ap-parme-darken-1',
+	},
+	iconHoverBgColor: {
+		type: String,
+		default: 'ap-parme-darken-1',
+	},
+	iconHoverColor: {
+		type: String,
+		default: 'ap-white',
+	},
+	iconName: {
+		type: String,
+		default: 'aide',
+	},
+	tooltipBg: {
+		type: String,
+		default: 'ap-white',
+	},
+	tooltipText: {
+		type: String,
+		default: 'Test',
+	},
+	tooltipTextColor: {
+		type: String,
+		default: 'ap-grey-darken-1',
+	},
+	uniqueId: {
+		type: String,
+		required: true,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproTooltips> => ({ uniqueId: 'required-unique-id' })
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproTooltips> => ({
+	btnLabel: 'Modified btn label',
+	iconBgColor: 'ap-green',
+	iconColor: 'ap-green-darken-1',
+	iconHoverBgColor: 'ap-red',
+	iconHoverColor: 'ap-red-darken-1',
+	iconName: 'home',
+	tooltipBg: 'ap-blue',
+	tooltipText: 'Modified tooltip text',
+	tooltipTextColor: 'ap-blue-darken-1',
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproTooltips)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproTooltips', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproTooltips>>
+
+		describe('root', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproTooltips, { props: requiredPropValues() })
+			})
+
+			it('prop uniqueId sets id attribute on root and tooltip', async () => {
+				expect(vueWrapper.attributes('id')).toBe(`${testHelper.default('uniqueId')}-container`)
+				await vueWrapper.setProps({ uniqueId: testHelper.modified('uniqueId') })
+				expect(vueWrapper.attributes('id')).toBe(`${testHelper.modified('uniqueId')}-container`)
+			})
+		})
+
+		// Le contenu des #slot n'est pas visible avec shallowMount
+		describe('tooltip text', () => {
+			const tooltipContentFinder = () => document.querySelector('.amelipro-tooltip__text')
+
+			beforeEach(() => {
+				// On ne devrait théoriquement pas avoir besoin de ça, mais dans les faits...
+				document.body.innerHTML = ''
+
+				// console.log({ nb: document.querySelectorAll('.amelipro-tooltip__text').length });
+
+				vueWrapper = mount(AmeliproTooltips, { props: requiredPropValues() })
+
+				// Visiblement, VTooltip créé un tooltip dans le body dès qu'il est monté
+				// console.log({ nb: document.querySelectorAll('.amelipro-tooltip__text').length });
+			})
+
+			afterEach(() => {
+				if (vueWrapper) {
+					vueWrapper.unmount()
+				}
+				// Nettoyer tous les tooltips restants dans le body
+				document.querySelectorAll('.amelipro-tooltip__text').forEach(el => el.remove())
+			})
+
+			it('prop tooltipText sets tooltip text', async () => {
+				// find activator button to trigger tooltip
+				const activatorBtn = vueWrapper.find(`#${testHelper.default('uniqueId')}-btn`)
+				expect(activatorBtn.exists()).toBe(true)
+
+				// Trigger tooltip by clicking activator button
+				await activatorBtn.trigger('touchstart')
+
+				// Chercher dans le document global (et non dans le wrapper)
+				expect(tooltipContentFinder()).not.toBeNull()
+				expect(vueWrapper.find('.amelipro-tooltip__text').exists()).toBe(false)
+				expect(tooltipContentFinder()?.textContent).toBe(testHelper.default('tooltipText'))
+				await vueWrapper.setProps({ tooltipText: testHelper.modified('tooltipText') })
+				expect(tooltipContentFinder()?.textContent).toBe(testHelper.modified('tooltipText'))
+			})
+		})
+	})
+
+	describe('Setting props should update props or attributes of inner components', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproTooltips>>
+
+		beforeEach(() => {
+			// On utilise mount car AmeliproIconBtn est contenu dans un slot
+			// et shallowMount ne rend pas les slots.
+			vueWrapper = mount(AmeliproTooltips, { props: requiredPropValues() })
+		})
+
+		it('prop btnLabel sets btn-label prop of AmeliproIconBtn', async () => {
+			expect(vueWrapper.findComponent({ name: 'AmeliproIconBtn' }).props('btnLabel')).toBe(testHelper.default('btnLabel'))
+			await vueWrapper.setProps({ btnLabel: testHelper.modified('btnLabel') })
+			expect(vueWrapper.findComponent({ name: 'AmeliproIconBtn' }).props('btnLabel')).toBe(testHelper.modified('btnLabel'))
+		})
+		it('prop iconName sets icon prop of AmeliproIconBtn', async () => {
+			expect(vueWrapper.findComponent({ name: 'AmeliproIconBtn' }).props('icon')).toBe(testHelper.default('iconName'))
+			await vueWrapper.setProps({ iconName: testHelper.modified('iconName') })
+			expect(vueWrapper.findComponent({ name: 'AmeliproIconBtn' }).props('icon')).toBe(testHelper.modified('iconName'))
+		})
+		it('prop iconBgColor sets icon-bg-color prop of AmeliproIconBtn', async () => {
+			expect(vueWrapper.findComponent({ name: 'AmeliproIconBtn' }).props('iconBgColor')).toBe(testHelper.default('iconBgColor'))
+			await vueWrapper.setProps({ iconBgColor: testHelper.modified('iconBgColor') })
+			expect(vueWrapper.findComponent({ name: 'AmeliproIconBtn' }).props('iconBgColor')).toBe(testHelper.modified('iconBgColor'))
+		})
+		it('prop iconColor sets icon-color prop of AmeliproIconBtn', async () => {
+			expect(vueWrapper.findComponent({ name: 'AmeliproIconBtn' }).props('iconColor')).toBe(testHelper.default('iconColor'))
+			await vueWrapper.setProps({ iconColor: testHelper.modified('iconColor') })
+			expect(vueWrapper.findComponent({ name: 'AmeliproIconBtn' }).props('iconColor')).toBe(testHelper.modified('iconColor'))
+		})
+		it('prop iconHoverBgColor sets icon-hover-bg-color prop of AmeliproIconBtn', async () => {
+			expect(vueWrapper.findComponent({ name: 'AmeliproIconBtn' }).props('iconHoverBgColor')).toBe(testHelper.default('iconHoverBgColor'))
+			await vueWrapper.setProps({ iconHoverBgColor: testHelper.modified('iconHoverBgColor') })
+			expect(vueWrapper.findComponent({ name: 'AmeliproIconBtn' }).props('iconHoverBgColor')).toBe(testHelper.modified('iconHoverBgColor'))
+		})
+		it('prop iconHoverColor sets icon-hover-color prop of AmeliproIconBtn', async () => {
+			expect(vueWrapper.findComponent({ name: 'AmeliproIconBtn' }).props('iconHoverColor')).toBe(testHelper.default('iconHoverColor'))
+			await vueWrapper.setProps({ iconHoverColor: testHelper.modified('iconHoverColor') })
+			expect(vueWrapper.findComponent({ name: 'AmeliproIconBtn' }).props('iconHoverColor')).toBe(testHelper.modified('iconHoverColor'))
+		})
+	})
+
+	describe('Events', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproTooltips>>
+
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproTooltips, { props: requiredPropValues() })
+		})
+		it('should not emit any event by default', () => {
+			expect(vueWrapper.emitted()).toEqual({})
+		})
+	})
+
+	describe('Slots', () => {
+		//  le contenu du slot par défaut (celui du tooltip) n’est rendu que si show est à true.
+		it('renders default slot content', () => {
+			mount(AmeliproTooltips, {
+				props: requiredPropValues(),
+				slots: { default: '<span id="slot-content">Slot Content</span>' },
+			})
+			expect(document.querySelector('#slot-content')?.textContent).toContain('Slot Content')
+		})
+		it('renders tooltipActivator slot content', () => {
+			const vueWrapper = mount(AmeliproTooltips, {
+				props: requiredPropValues(),
+				slots: { tooltipActivator: '<button id="activator-btn">Activator</button>' },
+			})
+			expect(vueWrapper.find('#activator-btn').exists()).toBe(true)
+		})
+	})
+})

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

@@ -0,0 +1,71 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproTooltips > Snapshots > renders the component with all properties filled in 1`] = `
+<div
+  class="amelipro-tooltip"
+  id="modified-unique-id-container"
+>
+  <v-tooltip-stub
+    activatorprops="[object Object]"
+    attach="false"
+    closeonback="false"
+    closeoncontentclick="false"
+    contained="false"
+    contentclass="tooltip-modified-unique-id-js bg-ap-blue"
+    disabled="false"
+    eager="true"
+    id="modified-unique-id"
+    interactive="false"
+    location="end"
+    locationstrategy="connected"
+    maxwidth="300px"
+    minwidth="0"
+    modelvalue="false"
+    noclickanimation="false"
+    offset="10"
+    openonclick="false"
+    openonhover="true"
+    origin="auto"
+    right=""
+    scrim="false"
+    scrollstrategy="reposition"
+    sticktotarget="false"
+    zindex="2000"
+  ></v-tooltip-stub>
+</div>
+`;
+
+exports[`AmeliproTooltips > Snapshots > renders the component with only required properties filled in 1`] = `
+<div
+  class="amelipro-tooltip"
+  id="required-unique-id-container"
+>
+  <v-tooltip-stub
+    activatorprops="[object Object]"
+    attach="false"
+    closeonback="false"
+    closeoncontentclick="false"
+    contained="false"
+    contentclass="tooltip-required-unique-id-js bg-ap-white"
+    disabled="false"
+    eager="true"
+    id="required-unique-id"
+    interactive="false"
+    location="end"
+    locationstrategy="connected"
+    maxwidth="300px"
+    minwidth="0"
+    modelvalue="false"
+    noclickanimation="false"
+    offset="10"
+    openonclick="false"
+    openonhover="true"
+    origin="auto"
+    right=""
+    scrim="false"
+    scrollstrategy="reposition"
+    sticktotarget="false"
+    zindex="2000"
+  ></v-tooltip-stub>
+</div>
+`;