@cnamts/synapse 1.0.13 → 1.0.15

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

@@ -0,0 +1,459 @@
+import { VueWrapper, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { AmeliproIcon } from '@/components'
+import AmeliproIconBtn from '../AmeliproIconBtn.vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { ExpectedPropOptions } from '@tests/types'
+import { defineComponent, h, type PropType } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import TestHelper from '@tests/helpers/TestHelper'
+import { VBtn } from 'vuetify/components'
+
+vi.mock('@/composables/useError', () => ({ useError: () => ({ propError: vi.fn() }) }))
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproIconBtn> = {
+	badge: {
+		type: [Boolean, Number, String],
+		default: false,
+	},
+	badgeBgColor: {
+		type: String,
+		default: undefined,
+	},
+	badgeColor: {
+		type: String,
+		default: undefined,
+	},
+	bordered: {
+		type: Boolean,
+		default: false,
+	},
+	btnLabel: {
+		type: String,
+		default: undefined,
+	},
+	btnTitle: {
+		type: String,
+		default: undefined,
+	},
+	href: {
+		type: String,
+		default: undefined,
+	},
+	icon: {
+		type: String,
+		default: undefined,
+	},
+	iconBgColor: {
+		type: String,
+		default: 'transparent',
+	},
+	iconBorderColor: {
+		type: String,
+		default: undefined,
+	},
+	iconColor: {
+		type: String,
+		required: true,
+	},
+	iconFocusBgColor: {
+		type: String,
+		default: undefined,
+	},
+	iconFocusBorderColor: {
+		type: String,
+		default: undefined,
+	},
+	iconFocusColor: {
+		type: String,
+		default: undefined,
+	},
+	iconHoverBgColor: {
+		type: String,
+		default: 'transparent',
+	},
+	iconHoverBorderColor: {
+		type: String,
+		default: undefined,
+	},
+	iconHoverColor: {
+		type: String,
+		required: true,
+	},
+	large: {
+		type: Boolean,
+		default: false,
+	},
+	medium: {
+		type: Boolean,
+		default: false,
+	},
+	size: {
+		type: String,
+		default: undefined,
+	},
+	small: {
+		type: Boolean,
+		default: false,
+	},
+	to: {
+		type: [Array, Object, String] as PropType<RouteLocationRaw>,
+		default: undefined,
+	},
+	uniqueId: {
+		type: String,
+		default: undefined,
+	},
+	xLarge: {
+		type: Boolean,
+		default: false,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproIconBtn> => ({
+	iconColor: 'required-icon-color',
+	iconHoverColor: 'required-icon-hover-color',
+})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproIconBtn> => ({
+	badge: true,
+	badgeBgColor: 'ap-blue',
+	badgeColor: 'ap-yellow',
+	bordered: true,
+	btnLabel: 'Modified btn label',
+	href: '#modified-href',
+	icon: 'modified-icon',
+	iconBgColor: '#123456',
+	iconBorderColor: 'ap-grey',
+	iconColor: 'modified-icon-color',
+	iconFocusBgColor: '#abcdef',
+	iconFocusBorderColor: 'ap-orange',
+	iconFocusColor: 'modified-icon-focus-color',
+	iconHoverBgColor: '#654321',
+	iconHoverBorderColor: 'ap-red',
+	iconHoverColor: 'modified-icon-hover-color',
+	large: true,
+	medium: true,
+	size: 'modified-size',
+	small: true,
+	to: '#modified-to',
+	uniqueId: 'modified-unique-id',
+	xLarge: true,
+})
+
+// Mock VBtn de Vuetify
+const VBtnMock = defineComponent({
+	name: 'VBtn',
+	emits: ['focus', 'mouseenter', 'mouseleave'],
+	setup(props, { slots }) {
+		return () => h('v-btn-stub', props, slots.default ? slots.default() : [])
+	},
+})
+
+const testHelper = new TestHelper(AmeliproIconBtn)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproIconBtn', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproIconBtn>>
+		describe('label', () => {
+			beforeEach(() => {
+				// Par défaut, btnLabel est undefined donc le label ne s'affiche pas
+				vueWrapper = shallowMount(AmeliproIconBtn, {
+					props: { ...requiredPropValues(), badge: true },
+					global: {
+						stubs: {
+							AmeliproIcon,
+							VBtn: VBtnMock,
+						},
+					},
+				})
+			})
+
+			it('prop uniqueId sets attribute id', async () => {
+				// Le label n'existe pas par défaut car btnLabel est undefined
+				expect(vueWrapper.find('.amelipro-btn__label').exists()).toBe(false)
+
+				const { btnLabel, uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ btnLabel })
+				expect(vueWrapper.find('.amelipro-btn__label').attributes('id')).toBeUndefined()
+
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.find('.amelipro-btn__label').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-btn-label`)
+			})
+
+			it('prop btnLabel sets label content', async () => {
+				expect(vueWrapper.find('.amelipro-btn__label').exists()).toBe(false)
+
+				const { btnLabel } = modifiedPropValues()
+				await vueWrapper.setProps({ btnLabel })
+				expect(vueWrapper.find('.amelipro-btn__label').text()).toBe(testHelper.modified('btnLabel'))
+
+				// Si btnLabel est retiré, le label ne doit plus exister
+				await vueWrapper.setProps({ btnLabel: undefined })
+				expect(vueWrapper.find('.amelipro-btn__label').exists()).toBe(false)
+			})
+		})
+
+		describe('badge wrapper', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproIconBtn, {
+					props: { ...requiredPropValues(), badge: true },
+					global: {
+						stubs: {
+							AmeliproIcon,
+							VBtn: VBtnMock,
+						},
+					},
+				})
+			})
+
+			it('prop uniqueId sets attribute id', async () => {
+				expect(vueWrapper.find('.amelipro-btn__badge-wrapper').attributes('id')).toBe(testHelper.default('uniqueId'))
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.find('.amelipro-btn__badge-wrapper').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-badge`)
+			})
+		})
+
+		describe('badge', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproIconBtn, {
+					props: { ...requiredPropValues(), badge: true },
+					global: {
+						stubs: {
+							AmeliproIcon,
+							VBtn: VBtnMock,
+						},
+					},
+				})
+			})
+
+			it('props badgeBgColor & badgeColor set attribute style', async () => {
+				expect(vueWrapper.find('.amelipro-btn__badge').attributes('style')).toBe('background-color: #000; color: #000;')
+
+				const { badgeBgColor, badgeColor } = modifiedPropValues()
+				await vueWrapper.setProps({ badgeBgColor })
+				expect(vueWrapper.find('.amelipro-btn__badge').attributes('style')).toBe('background-color: #0C419A; color: #000;')
+
+				await vueWrapper.setProps({ badgeColor })
+				expect(vueWrapper.find('.amelipro-btn__badge').attributes('style')).toBe('background-color: #0C419A; color: #F0B323;')
+			})
+
+			it('prop badge set badge content', async () => {
+				// badge est booléen par défaut, donc testHelper.default('badge') retourne false.
+				// Selon la règle 2.6, il ne faut PAS utiliser testHelper pour vérifier le texte dans ce cas.
+				expect(vueWrapper.find('.amelipro-btn__badge').text()).toBe('')
+
+				const { badge } = modifiedPropValues()
+				await vueWrapper.setProps({ badge })
+				// badge = true (booléen), donc toujours pas de texte attendu
+				expect(vueWrapper.find('.amelipro-btn__badge').text()).toBe('')
+
+				await vueWrapper.setProps({ badge: 'Badge text' })
+				expect(vueWrapper.find('.amelipro-btn__badge').text()).toBe('Badge text')
+			})
+		})
+	})
+
+	describe('Setting props should update props or attributes of inner components', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproIconBtn>>
+		describe('VBtn', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproIconBtn, { props: requiredPropValues() })
+			})
+
+			it('prop uniqueId sets attribute id', async () => {
+				expect(vueWrapper.findComponent(VBtn).attributes('id')).toBeUndefined()
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.findComponent(VBtn).attributes('id')).toBe('modified-unique-id')
+			})
+
+			it('prop href sets prop href', async () => {
+				expect(vueWrapper.findComponent(VBtn).props('href')).toBeUndefined()
+
+				const { href } = modifiedPropValues()
+				await vueWrapper.setProps({ href })
+				expect(vueWrapper.findComponent(VBtn).props('href')).toBe('#modified-href')
+			})
+
+			it('prop to sets prop to', async () => {
+				expect(vueWrapper.findComponent(VBtn).props('to')).toBeUndefined()
+
+				const { to } = modifiedPropValues()
+				await vueWrapper.setProps({ to })
+				expect(vueWrapper.findComponent(VBtn).props('to')).toBe('#modified-to')
+			})
+		})
+
+		describe('AmeliproIcon', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproIconBtn, {
+					props: requiredPropValues(),
+					slots: { icon: '<span>The icon</span>' },
+					global: {
+						stubs: { AmeliproIcon, VBtn: VBtnMock },
+					},
+				})
+			})
+
+			it('should exists', () => {
+				expect(vueWrapper.findComponent(AmeliproIcon).exists()).toBe(true)
+				expect(vueWrapper.props('btnLabel')).toBeUndefined()
+			})
+
+			it('props iconHoverBorderColor & iconBorderColor sets prop borderColor', async () => {
+				const { iconBorderColor, iconHoverBorderColor } = modifiedPropValues()
+				expect(vueWrapper.findComponent(AmeliproIcon).props('borderColor')).toBeUndefined()
+
+				await vueWrapper.setProps({ iconBorderColor })
+				expect(vueWrapper.findComponent(AmeliproIcon).props('borderColor')).toBe(testHelper.modified('iconBorderColor'))
+
+				await vueWrapper.findComponent(VBtn).vm.$emit('mouseenter')
+				expect(vueWrapper.findComponent(AmeliproIcon).props('borderColor')).toBeUndefined()
+
+				await vueWrapper.setProps({ iconHoverBorderColor })
+				expect(vueWrapper.findComponent(AmeliproIcon).props('borderColor')).toBe(testHelper.modified('iconHoverBorderColor'))
+			})
+
+			// --- AJOUT TESTS FOCUS ---
+			it('props iconFocusBorderColor & iconBorderColor sets prop borderColor on focus', async () => {
+				const { iconBorderColor, iconFocusBorderColor } = modifiedPropValues()
+				expect(vueWrapper.findComponent(AmeliproIcon).props('borderColor')).toBeUndefined()
+
+				await vueWrapper.setProps({ iconBorderColor })
+				expect(vueWrapper.findComponent(AmeliproIcon).props('borderColor')).toBe(testHelper.modified('iconBorderColor'))
+
+				await vueWrapper.findComponent(VBtn).vm.$emit('focus')
+				expect(vueWrapper.findComponent(AmeliproIcon).props('borderColor')).toBeUndefined()
+
+				await vueWrapper.setProps({ iconFocusBorderColor })
+				expect(vueWrapper.findComponent(AmeliproIcon).props('borderColor')).toBe(testHelper.modified('iconFocusBorderColor'))
+			})
+
+			it('prop iconFocusBgColor sets prop iconBgColor on focus', async () => {
+				const { iconFocusBgColor } = modifiedPropValues()
+				expect(vueWrapper.findComponent(AmeliproIcon).props('iconBgColor')).toBe('transparent')
+
+				await vueWrapper.findComponent(VBtn).vm.$emit('focus')
+				expect(vueWrapper.findComponent(AmeliproIcon).props('iconBgColor')).toBe('transparent')
+
+				await vueWrapper.setProps({ iconFocusBgColor })
+				expect(vueWrapper.findComponent(AmeliproIcon).props('iconBgColor')).toBe(testHelper.modified('iconFocusBgColor'))
+			})
+
+			it('prop iconFocusColor sets prop iconColor on focus', async () => {
+				const { iconFocusColor } = modifiedPropValues()
+				expect(vueWrapper.findComponent(AmeliproIcon).props('iconColor')).toBe(testHelper.default('iconColor'))
+
+				await vueWrapper.findComponent(VBtn).vm.$emit('focus')
+				// iconFocusColor est par défaut undefined => utiliser iconHoverColor
+				expect(vueWrapper.findComponent(AmeliproIcon).props('iconColor')).toBe(testHelper.default('iconHoverColor'))
+
+				await vueWrapper.setProps({ iconFocusColor })
+				expect(vueWrapper.findComponent(AmeliproIcon).props('iconColor')).toBe(testHelper.modified('iconFocusColor'))
+			})
+
+			it('prop bordered sets prop bordered', async () => {
+				expect(vueWrapper.findComponent(AmeliproIcon).props('bordered')).toBe(false)
+
+				await vueWrapper.setProps({ bordered: true })
+				expect(vueWrapper.findComponent(AmeliproIcon).props('bordered')).toBe(true)
+			})
+
+			it('slots prepend & append sets attribute class', () => {
+				expect(vueWrapper.findComponent(AmeliproIcon).attributes('class')).toBe('amelipro-icon icon-custom')
+
+				vueWrapper = shallowMount(AmeliproIconBtn, {
+					props: requiredPropValues(),
+					slots: { prepend: '<span>Slot #prepend content</span>' },
+					global: {
+						stubs: {
+							AmeliproIcon,
+							VBtn: VBtnMock,
+						},
+					},
+				})
+				expect(vueWrapper.findComponent(AmeliproIcon).attributes('class')).toBe('amelipro-icon icon-custom ml-2')
+
+				vueWrapper = shallowMount(AmeliproIconBtn, {
+					props: requiredPropValues(),
+					slots: { append: '<span>Slot #append content</span>' },
+					global: {
+						stubs: {
+							AmeliproIcon,
+							VBtn: VBtnMock,
+						},
+					},
+				})
+				expect(vueWrapper.findComponent(AmeliproIcon).attributes('class')).toBe('amelipro-icon icon-custom mr-2')
+
+				vueWrapper = shallowMount(AmeliproIconBtn, {
+					props: requiredPropValues(),
+					slots: {
+						append: '<span>Slot #append content</span>',
+						prepend: '<span>Slot #prepend content</span>',
+					},
+					global: {
+						stubs: {
+							AmeliproIcon,
+							VBtn: VBtnMock,
+						},
+					},
+				})
+				expect(vueWrapper.findComponent(AmeliproIcon).attributes('class')).toBe('amelipro-icon icon-custom ml-2 mr-2')
+			})
+
+			it('prop icon sets prop icon', async () => {
+				const { icon } = modifiedPropValues()
+				expect(vueWrapper.findComponent(AmeliproIcon).props('icon')).toBeUndefined()
+
+				await vueWrapper.setProps({ icon })
+				expect(vueWrapper.findComponent(AmeliproIcon).props('icon')).toBe(testHelper.modified('icon'))
+			})
+
+			it('prop iconBgColor sets prop iconBgColor', async () => {
+				const { iconBgColor, iconHoverBgColor } = modifiedPropValues()
+				expect(vueWrapper.findComponent(AmeliproIcon).props('iconBgColor')).toBe('transparent')
+
+				await vueWrapper.setProps({ iconBgColor })
+				expect(vueWrapper.findComponent(AmeliproIcon).props('iconBgColor')).toBe(testHelper.modified('iconBgColor'))
+
+				await vueWrapper.findComponent(VBtn).vm.$emit('mouseenter')
+				expect(vueWrapper.findComponent(AmeliproIcon).props('iconBgColor')).toBe('transparent')
+
+				await vueWrapper.setProps({ iconHoverBgColor })
+				expect(vueWrapper.findComponent(AmeliproIcon).props('iconBgColor')).toBe(testHelper.modified('iconHoverBgColor'))
+			})
+
+			it('prop disabled, iconHoverColor, infoBlock, iconColor & text sets prop iconColor', async () => {
+				expect(vueWrapper.findComponent(AmeliproIcon).props('iconColor')).toBe(testHelper.default('iconColor'))
+
+				const { iconColor, iconHoverColor } = modifiedPropValues()
+				await vueWrapper.setProps({ iconColor })
+				expect(vueWrapper.findComponent(AmeliproIcon).props('iconColor')).toBe(testHelper.modified('iconColor'))
+
+				await vueWrapper.findComponent(VBtn).vm.$emit('mouseenter')
+				expect(vueWrapper.findComponent(AmeliproIcon).props('iconColor')).toBe(testHelper.default('iconHoverColor'))
+
+				await vueWrapper.setProps({ iconHoverColor })
+				expect(vueWrapper.findComponent(AmeliproIcon).props('iconColor')).toBe(testHelper.modified('iconHoverColor'))
+			})
+		})
+	})
+})

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

@@ -0,0 +1,58 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproIconBtn > Snapshots > renders the component with all properties filled in 1`] = `
+<v-btn-stub
+  block="false"
+  border="false"
+  class="btn--icon"
+  density="default"
+  disabled="false"
+  elevation="0"
+  exact="false"
+  flat="false"
+  height="auto"
+  href="#modified-href"
+  icon="true"
+  id="modified-unique-id"
+  loading="false"
+  plain=""
+  replace="false"
+  ripple="false"
+  size="default"
+  slim="false"
+  stacked="false"
+  symbol="Symbol(vuetify:v-btn-toggle)"
+  tag="button"
+  tile="true"
+  to="#modified-to"
+  variant="elevated"
+  width="auto"
+></v-btn-stub>
+`;
+
+exports[`AmeliproIconBtn > Snapshots > renders the component with only required properties filled in 1`] = `
+<v-btn-stub
+  block="false"
+  border="false"
+  class="btn--icon"
+  density="default"
+  disabled="false"
+  elevation="0"
+  exact="false"
+  flat="false"
+  height="auto"
+  icon="true"
+  loading="false"
+  plain=""
+  replace="false"
+  ripple="false"
+  size="default"
+  slim="false"
+  stacked="false"
+  symbol="Symbol(vuetify:v-btn-toggle)"
+  tag="button"
+  tile="true"
+  variant="elevated"
+  width="auto"
+></v-btn-stub>
+`;

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

@@ -58,10 +58,10 @@ export const Default: Story = {
 			return { args }
 		},
 		template: `
-<AmeliproIllustratedDataTile
-	v-bind="args"
-/>
-		`,
+          <AmeliproIllustratedDataTile
+              v-bind="args"
+          />
+        `,
 	}),
 
 }
@@ -70,7 +70,7 @@ export const Default: Story = {
 export const AvecImage: Story = {
 	name: 'Avec image',
 	args: {
-		imgSrc: '.storybook/public/logos/logo-assurance-maladie.svg',
+		imgSrc: '/logos/logo-assurance-maladie.svg',
 		labelFirstLine: 'Assurance Maladie',
 		labelSecondLine: 'Partenaire',
 		tileWidth: '250px',
@@ -82,7 +82,7 @@ export const AvecImage: Story = {
 				name: 'Template',
 				code: `
 <AmeliproIllustratedDataTile
-  img-src=".storybook/public/logos/logo-assurance-maladie.svg"
+  img-src="/logos/logo-assurance-maladie.svg"
   label-first-line="Assurance Maladie"
   label-second-line="Partenaire"
   tile-width="250px"
@@ -93,11 +93,13 @@ export const AvecImage: Story = {
 	},
 	render: args => ({
 		components: { AmeliproIllustratedDataTile },
-		setup() { return { args } },
+		setup() {
+			return { args }
+		},
 		template: `
-<p class="mb-2">Affichage d’une image personnalisée grâce à la prop <code>imgSrc</code>.</p>
-<AmeliproIllustratedDataTile v-bind="args" />
-`,
+          <p class="mb-2">Affichage d’une image personnalisée grâce à la prop <code>imgSrc</code>.</p>
+          <AmeliproIllustratedDataTile v-bind="args"/>
+        `,
 	}),
 }
 
@@ -128,11 +130,13 @@ export const AvecIcone: Story = {
 	},
 	render: args => ({
 		components: { AmeliproIllustratedDataTile },
-		setup() { return { args } },
+		setup() {
+			return { args }
+		},
 		template: `
-<p class="mb-2">Affichage d’une icône grâce à la prop <code>iconName</code>.</p>
-<AmeliproIllustratedDataTile v-bind="args" />
-`,
+          <p class="mb-2">Affichage d’une icône grâce à la prop <code>iconName</code>.</p>
+          <AmeliproIllustratedDataTile v-bind="args"/>
+        `,
 	}),
 }
 
@@ -168,11 +172,14 @@ export const AvecInfosComplements: Story = {
 	},
 	render: args => ({
 		components: { AmeliproIllustratedDataTile },
-		setup() { return { args } },
+		setup() {
+			return { args }
+		},
 		template: `
-<p class="mb-2">Affichage d’informations complémentaires sous le sous-titre grâce à la prop <code>complementaryInformation</code>.</p>
-<AmeliproIllustratedDataTile v-bind="args" />
-`,
+          <p class="mb-2">Affichage d’informations complémentaires sous le sous-titre grâce à la prop <code>complementaryInformation</code>.
+          </p>
+          <AmeliproIllustratedDataTile v-bind="args"/>
+        `,
 	}),
 }
 
@@ -205,11 +212,13 @@ export const TitreNiveauPersonnalise: Story = {
 	},
 	render: args => ({
 		components: { AmeliproIllustratedDataTile },
-		setup() { return { args } },
+		setup() {
+			return { args }
+		},
 		template: `
-<p class="mb-2">Le niveau du titre est personnalisé grâce à la prop <code>titleLevel</code>.</p>
-<AmeliproIllustratedDataTile v-bind="args" />
-`,
+          <p class="mb-2">Le niveau du titre est personnalisé grâce à la prop <code>titleLevel</code>.</p>
+          <AmeliproIllustratedDataTile v-bind="args"/>
+        `,
 	}),
 }
 
@@ -244,10 +253,13 @@ export const AvecStylePerso: Story = {
 	},
 	render: args => ({
 		components: { AmeliproIllustratedDataTile },
-		setup() { return { args } },
+		setup() {
+			return { args }
+		},
 		template: `
-<p class="mb-2">Le padding et la hauteur minimale sont personnalisés grâce aux props <code>tilePadding</code> et <code>tileMinHeight</code>.</p>
-<AmeliproIllustratedDataTile v-bind="args" />
-`,
+          <p class="mb-2">Le padding et la hauteur minimale sont personnalisés grâce aux props <code>tilePadding</code>
+            et <code>tileMinHeight</code>.</p>
+          <AmeliproIllustratedDataTile v-bind="args"/>
+        `,
 	}),
 }