@cnamts/synapse 1.0.12 → 1.0.14

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

@@ -0,0 +1,321 @@
+import { VueWrapper, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import { AmeliproIcon } from '@/components'
+import type { AmeliproIllustratedDataInfoTypes } from '../types'
+import AmeliproIllustratedDataTile from '../AmeliproIllustratedDataTile.vue'
+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 AmeliproIllustratedDataTile> = {
+	complementaryInformation: {
+		type: Array as PropType<AmeliproIllustratedDataInfoTypes[]>,
+		default: () => [],
+	},
+	iconName: {
+		type: String,
+		default: undefined,
+	},
+	imgSrc: {
+		type: String,
+		default: undefined,
+	},
+	labelFirstLine: {
+		type: String,
+		required: true,
+	},
+	labelSecondLine: {
+		type: String,
+		required: true,
+	},
+	tileInfoColor: {
+		type: String,
+		default: 'ap-grey-darken-1',
+	},
+	tileMinHeight: {
+		type: String,
+		default: undefined,
+	},
+	tilePadding: {
+		type: String,
+		default: '2rem 1rem',
+	},
+	tileWidth: {
+		type: String,
+		default: '100%',
+	},
+	titleLevel: {
+		type: Number,
+		default: 2,
+	},
+	uniqueId: {
+		type: String,
+		default: undefined,
+	},
+}
+
+const complementaryInformationDatas = (): AmeliproIllustratedDataInfoTypes[] => ([
+	{
+		label: 'Complementary information label 1',
+		value: 'complementary-information-value-1',
+	},
+	{ label: 'Complementary information label 2' },
+])
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproIllustratedDataTile> => ({
+	labelFirstLine: 'Required label first line',
+	labelSecondLine: 'Required label second line',
+})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproIllustratedDataTile> => ({
+	complementaryInformation: complementaryInformationDatas(),
+	iconName: 'plus',
+	imgSrc: 'modified-img-src',
+	labelFirstLine: 'Modified label first line',
+	labelSecondLine: 'Modified label second line',
+	tileInfoColor: 'ap-white',
+	tileMinHeight: '300px',
+	tilePadding: '20px',
+	tileWidth: '250px',
+	titleLevel: 3,
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproIllustratedDataTile)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproIllustratedDataTile', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproIllustratedDataTile>>
+
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproIllustratedDataTile, { props: requiredPropValues() })
+		})
+
+		describe('root', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproIllustratedDataTile, { 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')}-container`)
+			})
+
+			it('props tileWidth & tileMinHeight set attribute style', async () => {
+				expect(vueWrapper.attributes('style')).toBe(`width: ${testHelper.default('tileWidth')};`)
+
+				const { tileWidth, tileMinHeight } = modifiedPropValues()
+				await vueWrapper.setProps({ tileWidth, tileMinHeight })
+				expect(vueWrapper.attributes('style')).toBe(`width: ${testHelper.modified('tileWidth')}; min-height: ${testHelper.modified('tileMinHeight')};`)
+			})
+		})
+
+		describe('wrapper', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproIllustratedDataTile, { props: requiredPropValues() })
+			})
+
+			it('prop tilePadding sets attribute style', async () => {
+				expect(vueWrapper.find('.illustrated-data-tile__wrapper').attributes('style')).toBe('border: 2px solid #EEEEEE !important; padding: 2rem 1rem;')
+
+				const { tilePadding } = modifiedPropValues()
+				await vueWrapper.setProps({ tilePadding })
+				expect(vueWrapper.find('.illustrated-data-tile__wrapper').attributes('style')).toBe('border: 2px solid #EEEEEE !important; padding: 20px;')
+			})
+		})
+
+		describe('img', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproIllustratedDataTile, { props: requiredPropValues() })
+			})
+
+			it('prop imgSrc sets img visibility', async () => {
+				expect(vueWrapper.find('.illustrated-data-tile__img').exists()).toBe(false)
+
+				const { imgSrc } = modifiedPropValues()
+				await vueWrapper.setProps({ imgSrc })
+				expect(vueWrapper.find('.illustrated-data-tile__img').exists()).toBe(true)
+			})
+
+			it('prop uniqueId sets attribute id', async () => {
+				const { imgSrc, uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ imgSrc })
+				expect(vueWrapper.find('.illustrated-data-tile__img').attributes('id')).toBe(testHelper.default('uniqueId'))
+
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.find('.illustrated-data-tile__img').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-img`)
+			})
+
+			it('prop imgSrc sets attribute src', async () => {
+				const { imgSrc } = modifiedPropValues()
+				await vueWrapper.setProps({ imgSrc })
+				expect(vueWrapper.find('.illustrated-data-tile__img').attributes('src')).toBe(testHelper.modified('imgSrc'))
+
+				await vueWrapper.setProps({ imgSrc: '#imgSrc' })
+				expect(vueWrapper.find('.illustrated-data-tile__img').attributes('src')).toBe('#imgSrc')
+			})
+		})
+
+		describe('label', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproIllustratedDataTile, { props: requiredPropValues() })
+			})
+
+			it('prop uniqueId sets attribute id', async () => {
+				expect(vueWrapper.find('.illustrated-data-tile__label').attributes('id')).toBe(testHelper.default('uniqueId'))
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.find('.illustrated-data-tile__label').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-label`)
+			})
+
+			it('prop titleLevel sets attribute heading-level', async () => {
+				expect(vueWrapper.find('.illustrated-data-tile__label').attributes('aria-level')).toBe(`${testHelper.default('titleLevel')}`)
+
+				const { titleLevel } = modifiedPropValues()
+				await vueWrapper.setProps({ titleLevel })
+				expect(vueWrapper.find('.illustrated-data-tile__label').attributes('aria-level')).toBe(`${testHelper.modified('titleLevel')}`)
+			})
+		})
+
+		describe('label line 1', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproIllustratedDataTile, { props: requiredPropValues() })
+			})
+
+			it('prop uniqueId sets attribute id', async () => {
+				expect(vueWrapper.find('.illustrated-data-tile__label-line-1').attributes('id')).toBe(testHelper.default('uniqueId'))
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.find('.illustrated-data-tile__label-line-1').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-label-line-1`)
+			})
+
+			it('prop labelFirstLine set label line 1 content', async () => {
+				expect(vueWrapper.find('.illustrated-data-tile__label-line-1').text()).toBe(testHelper.default('labelFirstLine'))
+
+				const { labelFirstLine } = modifiedPropValues()
+				await vueWrapper.setProps({ labelFirstLine })
+				expect(vueWrapper.find('.illustrated-data-tile__label-line-1').text()).toBe(testHelper.modified('labelFirstLine'))
+			})
+		})
+
+		describe('label line 2', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproIllustratedDataTile, { props: requiredPropValues() })
+			})
+
+			it('prop uniqueId sets attribute id', async () => {
+				expect(vueWrapper.find('.illustrated-data-tile__label-line-2').attributes('id')).toBe(testHelper.default('uniqueId'))
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.find('.illustrated-data-tile__label-line-2').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-label-line-2`)
+			})
+
+			it('prop labelSecondLine set label line 2 content', async () => {
+				expect(vueWrapper.find('.illustrated-data-tile__label-line-2').text()).toBe(testHelper.default('labelSecondLine'))
+
+				const { labelSecondLine } = modifiedPropValues()
+				await vueWrapper.setProps({ labelSecondLine })
+				expect(vueWrapper.find('.illustrated-data-tile__label-line-2').text()).toBe(testHelper.modified('labelSecondLine'))
+			})
+		})
+
+		describe('complementary info', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproIllustratedDataTile, { props: requiredPropValues() })
+			})
+
+			it('prop uniqueId sets attribute id', async () => {
+				expect(vueWrapper.find('.illustrated-data-tile__info').attributes('id')).toBe(testHelper.default('uniqueId'))
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.find('.illustrated-data-tile__info').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-complementary-info`)
+			})
+		})
+
+		describe('complementary info > span', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproIllustratedDataTile, { props: requiredPropValues() })
+			})
+
+			it('prop complementaryInformation sets complementary info content', async () => {
+				expect(vueWrapper.findAll('.illustrated-data-tile__info > span').length).toBe(0)
+
+				const { complementaryInformation } = modifiedPropValues()
+				await vueWrapper.setProps({ complementaryInformation })
+				expect(vueWrapper.findAll('.illustrated-data-tile__info > span').length).toBe(2)
+
+				expect(vueWrapper.findAll('.illustrated-data-tile__info > span').at(0)?.text()).toBe('Complementary information label 1 complementary-information-value-1')
+				expect(vueWrapper.findAll('.illustrated-data-tile__info > span').at(1)?.text()).toBe('Complementary information label 2')
+			})
+		})
+	})
+
+	describe('Setting props should update props or attributes of inner components', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproIllustratedDataTile>>
+
+		describe('AmeliproIcon', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproIllustratedDataTile, { props: requiredPropValues() })
+			})
+
+			it('prop imgSrc & iconName sets icon visibility', async () => {
+				expect(vueWrapper.findComponent(AmeliproIcon).exists()).toBe(false)
+
+				const { iconName, imgSrc } = modifiedPropValues()
+				await vueWrapper.setProps({ iconName })
+				expect(vueWrapper.findComponent(AmeliproIcon).exists()).toBe(true)
+
+				await vueWrapper.setProps({ imgSrc })
+				expect(vueWrapper.findComponent(AmeliproIcon).exists()).toBe(false)
+			})
+
+			it('prop uniqueId sets prop uniqueId', async () => {
+				const { iconName, uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ iconName })
+				expect(vueWrapper.findComponent(AmeliproIcon).props('uniqueId')).toBeUndefined()
+
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.findComponent(AmeliproIcon).props('uniqueId')).toBe('modified-unique-id-icon')
+			})
+
+			it('prop iconName sets prop icon', async () => {
+				const { iconName } = modifiedPropValues()
+				await vueWrapper.setProps({ iconName })
+				expect(vueWrapper.findComponent(AmeliproIcon).props('icon')).toBe('plus')
+
+				await vueWrapper.setProps({ iconName: 'new-icon-name' })
+				expect(vueWrapper.findComponent(AmeliproIcon).props('icon')).toBe('new-icon-name')
+			})
+
+			it('prop tileInfoColor sets prop iconColor', async () => {
+				const { iconName, tileInfoColor } = modifiedPropValues()
+				await vueWrapper.setProps({ iconName })
+				expect(vueWrapper.findComponent(AmeliproIcon).props('iconColor')).toBe('ap-grey-darken-1')
+
+				await vueWrapper.setProps({ tileInfoColor })
+				expect(vueWrapper.findComponent(AmeliproIcon).props('iconColor')).toBe('ap-white')
+			})
+		})
+	})
+})

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

@@ -0,0 +1,148 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproIllustratedDataTile > Snapshots > renders the component with all properties filled in 1`] = `
+<div
+  class="
+    d-flex
+    illustrated-data-tile
+    pt-2
+  "
+  id="modified-unique-id-container"
+  style="
+    width: 250px;
+    min-height: 300px;
+  "
+>
+  <div
+    class="
+      align-center
+      ap-white
+      d-flex
+      flex-column
+      illustrated-data-tile__wrapper
+      w-100
+    "
+    style="
+      border: 2px solid #EEEEEE !important;
+      padding: 20px;
+    "
+  >
+    <img
+      alt=""
+      class="
+        illustrated-data-tile__img
+        mx-auto
+      "
+      id="modified-unique-id-img"
+      src="modified-img-src"
+    />
+    <p
+      aria-level="3"
+      class="
+        illustrated-data-tile__label
+        mb-0
+        text-center
+      "
+      id="modified-unique-id-label"
+      role="heading"
+    >
+      <span
+        class="
+          d-block
+          illustrated-data-tile__label-line-1
+          text-center
+        "
+        id="modified-unique-id-label-line-1"
+      >
+        Modified label first line
+      </span>
+      <span
+        class="
+          d-block
+          illustrated-data-tile__label-line-2
+          text-center
+          text-uppercase
+        "
+        id="modified-unique-id-label-line-2"
+      >
+        Modified label second line
+      </span>
+    </p>
+    <p
+      class="
+        illustrated-data-tile__info
+        text-center
+      "
+      id="modified-unique-id-complementary-info"
+    >
+      <span class="d-block">
+        Complementary information label 1
+        <span class="font-weight-bold">
+          complementary-information-value-1
+        </span>
+      </span>
+      <span class="d-block">
+        Complementary information label 2
+        <span class="font-weight-bold"></span>
+      </span>
+    </p>
+  </div>
+</div>
+`;
+
+exports[`AmeliproIllustratedDataTile > Snapshots > renders the component with only required properties filled in 1`] = `
+<div
+  class="
+    d-flex
+    illustrated-data-tile
+    pt-2
+  "
+  style="width: 100%;"
+>
+  <div
+    class="
+      align-center
+      ap-white
+      d-flex
+      flex-column
+      illustrated-data-tile__wrapper
+      w-100
+    "
+    style="
+      border: 2px solid #EEEEEE !important;
+      padding: 2rem 1rem;
+    "
+  >
+    <!-- v-if -->
+    <p
+      aria-level="2"
+      class="
+        illustrated-data-tile__label
+        mb-0
+        text-center
+      "
+      role="heading"
+    >
+      <span class="
+        d-block
+        illustrated-data-tile__label-line-1
+        text-center
+      ">
+        Required label first line
+      </span>
+      <span class="
+        d-block
+        illustrated-data-tile__label-line-2
+        text-center
+        text-uppercase
+      ">
+        Required label second line
+      </span>
+    </p>
+    <p class="
+      illustrated-data-tile__info
+      text-center
+    "></p>
+  </div>
+</div>
+`;

package/src/components/Amelipro/AmeliproIllustratedRadioGroup/AmeliproIllustratedRadioGroup.stories.ts

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import { ref, watch } from 'vue'
 import AmeliproIllustratedRadioGroup from './AmeliproIllustratedRadioGroup.vue'
 import AmeliproTooltips from '../AmeliproTooltips/AmeliproTooltips.vue'
+import AmeliproBtn from '../AmeliproBtn/AmeliproBtn.vue'
 
 const meta = {
 	argTypes: {
@@ -42,7 +43,7 @@ const items = [
 	{
 		icon: 'vaccination',
 		iconDefaultColor: 'ap-yellow',
-		isChecked: false,
+		isChecked: true,
 		label: '1',
 		value: 'Valeur 1',
 	},
@@ -106,7 +107,7 @@ export const Default: Story = {
 		{
 			icon: 'vaccination',
 			iconDefaultColor: 'ap-yellow',
-			isChecked: false,
+			isChecked: true,
 			label: '1',
 			value: 'Valeur 1',
 		},
@@ -213,6 +214,7 @@ export const Required: Story = {
 		modelValue: items,
 		uniqueId: 'illustrated-radio-required',
 		ariaRequired: true,
+		error: true,
 	},
 	parameters: {
 		sourceCode: [
@@ -240,16 +242,23 @@ export const Required: Story = {
 		],
 	},
 	render: args => ({
-		components: { AmeliproIllustratedRadioGroup },
+		components: { AmeliproIllustratedRadioGroup, AmeliproBtn },
 		setup() {
 			const model = ref(args.modelValue)
 			watch(() => args.modelValue, (newValue) => {
 				model.value = newValue
 			})
-			return { args, model }
+			const deselect = () => {
+				model.value = model.value.map(item => ({
+					...item,
+					isChecked: false,
+				}))
+			}
+			return { args, model, deselect }
 		},
 		template: `<p class="mb-2">La sélection d’un bouton est obligatoire grâce à la prop <code>ariaRequired</code>.</p>
-<AmeliproIllustratedRadioGroup v-bind="args" v-model="model" />`,
+        <AmeliproIllustratedRadioGroup v-bind="args" v-model="model"/>
+        <AmeliproBtn class="mt-4" @click="deselect">Tout désélectionner</AmeliproBtn>`,
 	}),
 }
 

package/src/components/Amelipro/AmeliproIllustratedRadioGroup/AmeliproIllustratedRadioGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { type PropType, computed } from 'vue'
+	import { computed, type PropType } from 'vue'
 	import AmeliproIcon from '../AmeliproIcon/AmeliproIcon.vue'
 	import type { AmeliproIllustratedRadioGroupItem } from './types'
 	import AmeliproMessage from '../AmeliproMessage/AmeliproMessage.vue'