@cnamts/synapse 1.0.13 → 1.0.15

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

@@ -0,0 +1,206 @@
+import { VueWrapper, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import AmeliproStateTile from '../AmeliproStateTile.vue'
+import type { AmeliproStateTileTypes } from '../AmeliproStateTileTypes'
+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 AmeliproStateTile> = {
+	btnStyledText: {
+		type: String,
+		default: undefined,
+	},
+	contentMinHeight: {
+		type: String,
+		default: '284px',
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+	href: {
+		type: String,
+		default: undefined,
+	},
+	labelFirstLine: {
+		type: String,
+		default: undefined,
+	},
+	labelSecondLine: {
+		type: String,
+		default: undefined,
+	},
+	labelThirdLine: {
+		type: String,
+		default: undefined,
+	},
+	linkStyleText: {
+		type: String,
+		default: 'Consulter',
+	},
+	noPdfIcon: {
+		type: Boolean,
+		default: false,
+	},
+	tileMinHeight: {
+		type: String,
+		default: undefined,
+	},
+	tilePaddingX: {
+		type: String,
+		default: '24px',
+	},
+	tileType: {
+		default: 'toDo',
+		type: String as PropType<keyof typeof AmeliproStateTileTypes>,
+		validator(value: string): boolean {
+			return ['date', 'done', 'doneNoCertificate', 'doneNoCertificateBlue', 'doneToCorrect', 'optionnal', 'toDo', 'toDoNoCertificate', 'toDoNoCertificateBlue'].includes(value)
+		},
+	},
+	tileWidth: {
+		type: String,
+		default: '100%',
+	},
+	to: {
+		type: [Array, Object, String] as PropType<RouteLocationRaw>,
+		default: undefined,
+	},
+	uniqueId: {
+		type: String,
+		default: undefined,
+	},
+}
+
+const requiredPropValues = (): ComponentProps<typeof AmeliproStateTile> => ({})
+
+const modifiedPropValues = (): ComponentProps<typeof AmeliproStateTile> => ({
+	btnStyledText: 'Modified styled text',
+	contentMinHeight: '300px',
+	disabled: true,
+	href: '/modified-href',
+	labelFirstLine: 'Modified first line',
+	labelSecondLine: 'Modified second line',
+	labelThirdLine: 'Modified third line',
+	linkStyleText: 'Modified link style text',
+	noPdfIcon: true,
+	tileMinHeight: '350px',
+	tilePaddingX: '32px',
+	tileType: 'done',
+	tileWidth: '80%',
+	to: '/modified-to',
+	uniqueId: 'modified-unique-id',
+})
+
+const globalStubs = {
+	VBtn: {
+		props: [
+			'uniqueId',
+			'disabled',
+			'href',
+			'tileMinHeight',
+			'tileStyles',
+			'to',
+			'tileWidth',
+		],
+		template: `<button 
+		:id="uniqueId"
+		class="amelipro-state-tile text-none text-h5"
+		:disabled="disabled"
+		:href="href"
+		:min-height="tileMinHeight"
+		:style="tileStyles"
+		:to="to"
+		:width="tileWidth"
+		@click="emitClickEvent && emitClickEvent()"
+		><slot /></button>`,
+	},
+}
+
+const testHelper = new TestHelper(AmeliproStateTile)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+	.setMountOptions({ global: { stubs: globalStubs } })
+
+describe('AmeliproStateTile', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproStateTile>>
+
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproStateTile, { props: requiredPropValues(), global: { stubs: globalStubs } })
+		})
+
+		it('prop uniqueId sets attribute id', async () => {
+			expect(vueWrapper.find('.amelipro-state-tile').attributes('id')).toBeUndefined()
+
+			const { uniqueId } = modifiedPropValues()
+			await vueWrapper.setProps({ uniqueId })
+			expect(vueWrapper.find('.amelipro-state-tile').attributes('id')).toBe(testHelper.modified('uniqueId'))
+		})
+
+		it('prop labelFirstLine sets first line content', async () => {
+			expect(vueWrapper.find('.amelipro-state-tile__first-line').text()).toBe('')
+
+			const { labelFirstLine } = modifiedPropValues()
+			await vueWrapper.setProps({ labelFirstLine })
+			expect(vueWrapper.find('.amelipro-state-tile__first-line').text()).toBe(testHelper.modified('labelFirstLine'))
+		})
+
+		it('prop labelSecondLine sets second line content', async () => {
+			expect(vueWrapper.find('.amelipro-state-tile__second-line').exists()).toBe(false)
+
+			const { labelSecondLine } = modifiedPropValues()
+			await vueWrapper.setProps({ labelSecondLine })
+			expect(vueWrapper.find('.amelipro-state-tile__second-line').text()).toBe(testHelper.modified('labelSecondLine'))
+		})
+
+		it('prop labelThirdLine sets third line content', async () => {
+			expect(vueWrapper.find('.amelipro-state-tile__third-line').exists()).toBe(false)
+
+			const { labelThirdLine } = modifiedPropValues()
+			await vueWrapper.setProps({ labelThirdLine })
+			expect(vueWrapper.find('.amelipro-state-tile__third-line').text()).toBe(testHelper.modified('labelThirdLine'))
+		})
+
+		it('prop btnStyledText sets styled button text', async () => {
+			expect(vueWrapper.find('.btn-styled-text').exists()).toBe(false)
+
+			const { btnStyledText } = modifiedPropValues()
+			await vueWrapper.setProps({ btnStyledText, disabled: false })
+			expect(vueWrapper.find('.btn-styled-text').text()).toBe(testHelper.modified('btnStyledText'))
+		})
+
+		it('prop disabled sets unavailable text', async () => {
+			expect(vueWrapper.find('.amelipro-state-tile__unavailable').exists()).toBe(false)
+
+			const { disabled } = modifiedPropValues()
+			await vueWrapper.setProps({ disabled })
+			expect(vueWrapper.find('.amelipro-state-tile__unavailable').exists()).toBe(true)
+		})
+	})
+
+	describe('Events', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproStateTile>>
+
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproStateTile, { props: { ...requiredPropValues(), uniqueId: 'event-id' } })
+		})
+
+		it('emit click event when tile is clicked', async () => {
+			await vueWrapper.find('.amelipro-state-tile').trigger('click')
+			expect(vueWrapper.emitted('click')).toBeTruthy()
+			expect(vueWrapper.emitted('click')?.[0]).toEqual(['event-id'])
+		})
+	})
+})

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

@@ -0,0 +1,158 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproStateTile > Snapshots > renders the component with all properties filled in 1`] = `
+<button
+  class="
+    amelipro-state-tile
+    text-h5
+    text-none
+  "
+  disabled=""
+  elevation="0"
+  height="auto"
+  href="/modified-href"
+  id="modified-unique-id"
+  min-height="350px"
+  ripple="false"
+  style="
+    background-color: #DDDEDE !important;
+    border: 2px solid #545859 !important;
+    border-radius: 0.5rem;
+    color: #1A1B1B !important;
+    padding: 0px;
+    min-height: 350px;
+  "
+  to="/modified-to"
+  width="80%"
+>
+  <span
+    class="
+      amelipro-state-tile__content
+      d-flex
+      flex-column
+      justify-center
+      w-100
+    "
+    style="
+      padding: 32px;
+      min-height: 300px;
+    "
+  >
+    <span class="
+      amelipro-state-tile__text
+      d-flex
+      flex-column
+      justify-center
+      text-center
+      w-100
+    ">
+      <span
+        class="
+          amelipro-state-tile__first-line
+          d-block
+          text-center
+          text-h5
+        "
+        id="modified-unique-id-first-line"
+      >
+        Modified first line
+      </span>
+      <span
+        class="
+          amelipro-state-tile__second-line
+          d-block
+          text-center
+          text-h5
+        "
+        id="modified-unique-id-second-line"
+      >
+        Modified second line
+      </span>
+      <span
+        class="
+          amelipro-state-tile__third-line
+          d-block
+          mt-6
+          text-body-1
+          text-center
+        "
+        id="modified-unique-id-third-line"
+      >
+        Modified third line
+      </span>
+    </span>
+    <span>
+      <span
+        class="
+          amelipro-state-tile__unavailable
+          d-block
+          font-weight-bold
+          mt-6
+          text-center
+        "
+        id="modified-unique-id-unavailable-text"
+      >
+        Non disponible
+      </span>
+    </span>
+    <!-- v-if -->
+  </span>
+</button>
+`;
+
+exports[`AmeliproStateTile > Snapshots > renders the component with only required properties filled in 1`] = `
+<button
+  class="
+    amelipro-state-tile
+    text-h5
+    text-none
+  "
+  elevation="0"
+  height="auto"
+  ripple="false"
+  style="
+    background-color: #00749C;
+    border: 2px solid #00749C !important;
+    border-radius: 0.5rem;
+    color: #FFFFFF;
+    padding: 0px;
+  "
+  width="100%"
+>
+  <span
+    class="
+      amelipro-state-tile__content
+      d-flex
+      flex-column
+      justify-center
+      w-100
+    "
+    style="
+      padding: 32px 24px;
+      min-height: 284px;
+    "
+  >
+    <span class="
+      amelipro-state-tile__text
+      d-flex
+      flex-column
+      justify-center
+      text-center
+      w-100
+    ">
+      <span class="
+        amelipro-state-tile__first-line
+        d-block
+        text-center
+        text-h5
+      "></span>
+      <!-- v-if -->
+      <!-- v-if -->
+    </span>
+    <span>
+      <!-- v-if -->
+    </span>
+    <!-- v-if -->
+  </span>
+</button>
+`;

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

@@ -0,0 +1,120 @@
+import { VueWrapper, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import AmeliproStatus from '../AmeliproStatus.vue'
+import type { AmeliproStatusTypes } from '../AmeliproStatusTypes'
+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 AmeliproStatus> = {
+	isSpan: {
+		type: Boolean,
+		default: false,
+	},
+	label: {
+		type: String,
+		default: undefined,
+	},
+	paddingX: {
+		type: String,
+		default: '12px',
+	},
+	paddingY: {
+		type: String,
+		default: '4px',
+	},
+	type: {
+		default: 'draft',
+		type: String as PropType<keyof typeof AmeliproStatusTypes>,
+		validator(value: string): boolean {
+			return ['action', 'archive', 'canceled', 'closed', 'draft', 'failure', 'progress', 'success'].includes(value.toLowerCase())
+		},
+	},
+	uniqueId: {
+		type: String,
+		default: undefined,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproStatus> => ({})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproStatus> => ({
+	isSpan: true,
+	label: 'Modified label',
+	paddingX: '16px',
+	paddingY: '15px',
+	type: 'canceled',
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproStatus)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproStatus', () => {
+	let vueWrapper: VueWrapper<InstanceType<typeof AmeliproStatus>>
+
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproStatus, { props: requiredPropValues() })
+		})
+
+		describe('main tag', () => {
+			it('prop isSpan sets type of tag', async () => {
+				expect(vueWrapper.findAll('p').length).toBe(1)
+				expect(vueWrapper.findAll('span').length).toBe(0)
+
+				const { isSpan } = modifiedPropValues()
+				await vueWrapper.setProps({ isSpan })
+				expect(vueWrapper.findAll('p').length).toBe(0)
+				expect(vueWrapper.findAll('span').length).toBe(1)
+			})
+
+			it('props label & type sets text content', async () => {
+				expect(vueWrapper.find('p').text()).toBe('Brouillon')
+
+				const { type } = modifiedPropValues()
+				await vueWrapper.setProps({ type })
+				expect(vueWrapper.find('p').text()).toBe('Annulé')
+
+				const { label } = modifiedPropValues()
+				await vueWrapper.setProps({ label })
+				expect(vueWrapper.find('p').text()).toBe('Modified label')
+			})
+
+			it('props paddingX, paddingY & type sets component style', async () => {
+				expect(vueWrapper.find('p').attributes('style')).toBe('border: 2px solid transparent; border-radius: 16px; padding: 4px 12px;')
+
+				const { paddingX, paddingY } = modifiedPropValues()
+				await vueWrapper.setProps({ paddingX, paddingY })
+				expect(vueWrapper.find('p').attributes('style')).toBe('border: 2px solid transparent; border-radius: 16px; padding: 15px 16px;')
+
+				// TODO: type 'canceled' => borderColor: 'bg-ap-grey-lighten-1' => pourquoi #000 ?
+				const { type } = modifiedPropValues()
+				await vueWrapper.setProps({ type })
+				expect(vueWrapper.find('p').attributes('style')).toBe('border: 2px solid #000; border-radius: 16px; padding: 15px 16px;')
+			})
+
+			it('prop type sets component classes', async () => {
+				expect(vueWrapper.find('p').classes('bg-ap-yellow-lighten-3')).toBe(true)
+				expect(vueWrapper.find('p').classes('bg-ap-red-lighten-3')).toBe(false)
+
+				await vueWrapper.setProps({ type: 'progress' })
+				expect(vueWrapper.find('p').classes('bg-ap-yellow-lighten-3')).toBe(false)
+				expect(vueWrapper.find('p').classes('bg-ap-red-lighten-3')).toBe(true)
+			})
+		})
+	})
+})

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

@@ -0,0 +1,39 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproStatus > Snapshots > renders the component with all properties filled in 1`] = `
+<span
+  class="
+    amelipro-status
+    d-inline-flex
+    font-weight-bold
+    mb-0
+  "
+  id="modified-unique-id"
+  style="
+    border: 2px solid #000;
+    border-radius: 16px;
+    padding: 15px 16px;
+  "
+>
+  Modified label
+</span>
+`;
+
+exports[`AmeliproStatus > Snapshots > renders the component with only required properties filled in 1`] = `
+<p
+  class="
+    amelipro-status
+    bg-ap-yellow-lighten-3
+    d-inline-flex
+    font-weight-bold
+    mb-0
+  "
+  style="
+    border: 2px solid transparent;
+    border-radius: 16px;
+    padding: 4px 12px;
+  "
+>
+  Brouillon
+</p>
+`;

package/src/components/Amelipro/AmeliproStepper/AmeliproStepBtn/__tests__/AmeliproStepBtn.spec.ts

@@ -0,0 +1,97 @@
+import { VueWrapper, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import AmeliproStepBtn from '../AmeliproStepBtn.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 AmeliproStepBtn> = {
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+	isActive: {
+		type: Boolean,
+		default: false,
+	},
+	uniqueId: {
+		type: String,
+		default: undefined,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproStepBtn> => ({})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproStepBtn> => ({
+	disabled: true,
+	isActive: true,
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproStepBtn)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproStepBtn', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update props or attributes of inner tags', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproStepBtn>>
+
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproStepBtn, { props: requiredPropValues() })
+		})
+
+		it('prop isActive sets aria current', async () => {
+			expect(vueWrapper.find('.amelipro-step-btn').attributes('aria-current')).toBeUndefined()
+
+			const { isActive } = modifiedPropValues()
+			await vueWrapper.setProps({ isActive })
+			expect(vueWrapper.find('.amelipro-step-btn').attributes('aria-current')).toBe('step')
+		})
+
+		it('prop disabled sets attribute disabled', async () => {
+			expect(vueWrapper.find('.amelipro-step-btn').attributes('disabled')).toBeUndefined()
+
+			const { disabled } = modifiedPropValues()
+			await vueWrapper.setProps({ disabled })
+			expect(vueWrapper.find('.amelipro-step-btn').attributes('disabled')).toBe('')
+		})
+
+		it('props disabled && isActive sets button style', async () => {
+			expect(vueWrapper.find('.amelipro-step-btn').attributes('style')).toBe('background-color: #E6F6FC; border: 1px solid #DDDEDE; color: #00749C; position: relative; z-index: 1;')
+
+			await vueWrapper.setProps({ disabled: true, isActive: true })
+			expect(vueWrapper.find('.amelipro-step-btn').attributes('style')).toBe('background-color: #E6F6FC; border: 1px solid #DDDEDE; color: #00749C; position: relative; z-index: 1;')
+
+			await vueWrapper.setProps({ disabled: false, isActive: true })
+			expect(vueWrapper.find('.amelipro-step-btn').attributes('style')).toBe('background-color: #00749C; border: 1px solid #00749C; color: #FFFFFF; position: relative; z-index: 1;')
+
+			await vueWrapper.setProps({ disabled: true, isActive: false })
+			expect(vueWrapper.find('.amelipro-step-btn').attributes('style')).toBe('background-color: #DDDEDE; border: 1px solid #DDDEDE; color: #1A1B1B; position: relative; z-index: 1; cursor: default;')
+		})
+	})
+
+	describe('Events', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproStepBtn>>
+
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproStepBtn, { props: requiredPropValues() })
+		})
+
+		it('emits an event when the button is clicked', () => {
+			expect(vueWrapper.emitted('click')).toBeUndefined()
+			vueWrapper.find('button').trigger('click')
+			expect(vueWrapper.emitted('click')).toEqual([[]])
+		})
+	})
+})

package/src/components/Amelipro/AmeliproStepper/AmeliproStepBtn/__tests__/__snapshots__/AmeliproStepBtn.spec.ts.snap

@@ -0,0 +1,61 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproStepBtn > Snapshots > renders the component with all properties filled in 1`] = `
+<button
+  aria-current="step"
+  class="
+    amelipro-step-btn
+    pb-4
+    pt-3
+    px-4
+    text-subtitle-1
+  "
+  disabled=""
+  id="modified-unique-id"
+  role="tab"
+  style="
+    background-color: #E6F6FC;
+    border: 1px solid #DDDEDE;
+    color: #00749C;
+    position: relative;
+    z-index: 1;
+  "
+  type="button"
+>
+  <span
+    class="
+      align-center
+      amelipro-step-btn__content
+      d-flex
+    "
+    id="modified-unique-id-content"
+  ></span>
+</button>
+`;
+
+exports[`AmeliproStepBtn > Snapshots > renders the component with only required properties filled in 1`] = `
+<button
+  class="
+    amelipro-step-btn
+    pb-4
+    pt-3
+    px-4
+    text-subtitle-1
+  "
+  role="tab"
+  style="
+    background-color: #E6F6FC;
+    border: 1px solid #DDDEDE;
+    color: #00749C;
+    position: relative;
+    z-index: 1;
+  "
+  type="button"
+>
+  <span class="
+    align-center
+    amelipro-step-btn__content
+    d-flex
+  "></span>
+</button>
+`;