@cnamts/synapse 1.0.14 → 1.0.16

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

@@ -1,5 +1,5 @@
 import { AmeliproIcon, AmeliproMessage } from '@/components'
-import { VueWrapper, mount, shallowMount } from '@vue/test-utils'
+import { mount, shallowMount, VueWrapper } from '@vue/test-utils'
 import { beforeEach, describe, expect, it } from 'vitest'
 import AmeliproIllustratedRadioGroup from '../AmeliproIllustratedRadioGroup.vue'
 import type { AmeliproIllustratedRadioGroupItem } from '../types'
@@ -9,7 +9,7 @@ import type { PropType } from 'vue'
 import TestHelper from '@tests/helpers/TestHelper'
 
 const expectedPropOptions: ExpectedPropOptions<typeof AmeliproIllustratedRadioGroup> = {
-	ariaRequired: {
+	required: {
 		type: Boolean,
 		default: false,
 	},
@@ -72,7 +72,7 @@ const requiredPropValues = (): ComponentProps<typeof AmeliproIllustratedRadioGro
 
 // Valeurs pour les props "modified"
 const modifiedPropValues = (): ComponentProps<typeof AmeliproIllustratedRadioGroup> => ({
-	ariaRequired: true,
+	required: true,
 	disabled: true,
 	error: true,
 	groupLabel: 'Modified group label',
@@ -139,14 +139,14 @@ describe('AmeliproIllustratedRadioGroup', () => {
 				expect(vueWrapper.find('.amelipro-illustrated-radio-group__label').attributes('id')).toBe('modified-unique-id')
 			})
 
-			it('prop ariaRequired & groupLabel sets label content', async () => {
+			it('prop required & groupLabel sets label content', async () => {
 				expect(vueWrapper.find('.amelipro-illustrated-radio-group__label').text()).toBe('Required group label')
 
-				const { ariaRequired, groupLabel } = modifiedPropValues()
+				const { required, groupLabel } = modifiedPropValues()
 				await vueWrapper.setProps({ groupLabel })
 				expect(vueWrapper.find('.amelipro-illustrated-radio-group__label').text()).toBe('Modified group label')
 
-				await vueWrapper.setProps({ ariaRequired })
+				await vueWrapper.setProps({ required })
 				expect(vueWrapper.find('.amelipro-illustrated-radio-group__label').text()).toBe('Modified group label   *   Champ obligatoire')
 			})
 		})
@@ -164,12 +164,12 @@ describe('AmeliproIllustratedRadioGroup', () => {
 				expect(vueWrapper.find('.amelipro-illustrated-radio-group__group').attributes('aria-labelledby')).toBe('modified-unique-id')
 			})
 
-			it('prop ariaRequired sets attribute aria-required', async () => {
-				expect(vueWrapper.find('.amelipro-illustrated-radio-group__group').attributes('aria-required')).toBe('false')
+			it('prop required sets attribute required', async () => {
+				expect(vueWrapper.find('.amelipro-illustrated-radio-group__group').attributes('required')).toBe('false')
 
-				const { ariaRequired } = modifiedPropValues()
-				await vueWrapper.setProps({ ariaRequired })
-				expect(vueWrapper.find('.amelipro-illustrated-radio-group__group').attributes('aria-required')).toBe('true')
+				const { required } = modifiedPropValues()
+				await vueWrapper.setProps({ required })
+				expect(vueWrapper.find('.amelipro-illustrated-radio-group__group').attributes('required')).toBe('true')
 			})
 		})
 
@@ -257,11 +257,11 @@ describe('AmeliproIllustratedRadioGroup', () => {
 				expect(vueWrapper.find('.amelipro-illustrated-radio-group__item input').attributes('aria-checked')).toBe('true')
 			})
 
-			it('props ariaRequired, error & uniqueId set attribute aria-describedby', async () => {
+			it('props required, error & uniqueId set attribute aria-describedby', async () => {
 				expect(vueWrapper.find('.amelipro-illustrated-radio-group__item input').attributes('aria-describedby')).toBeUndefined()
 
-				const { ariaRequired, error, uniqueId } = modifiedPropValues()
-				await vueWrapper.setProps({ ariaRequired, error })
+				const { required, error, uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ required, error })
 				expect(vueWrapper.find('.amelipro-illustrated-radio-group__item input').attributes('aria-describedby')).toBe('required-unique-id-error')
 
 				await vueWrapper.setProps({ uniqueId })
@@ -303,11 +303,11 @@ describe('AmeliproIllustratedRadioGroup', () => {
 				expect(vueWrapper.find('.amelipro-illustrated-radio-group__item input').attributes('name')).toBe('modified-unique-id-name')
 			})
 
-			it('prop ariaRequired sets attribute required', async () => {
+			it('prop required sets attribute required', async () => {
 				expect(vueWrapper.find('.amelipro-illustrated-radio-group__item input').attributes('required')).toBeUndefined()
 
-				const { ariaRequired } = modifiedPropValues()
-				await vueWrapper.setProps({ ariaRequired })
+				const { required } = modifiedPropValues()
+				await vueWrapper.setProps({ required })
 				expect(vueWrapper.find('.amelipro-illustrated-radio-group__item input').attributes('required')).toBe('')
 			})
 
@@ -438,11 +438,11 @@ describe('AmeliproIllustratedRadioGroup', () => {
 				vueWrapper = shallowMount(AmeliproIllustratedRadioGroup, { props: requiredPropValues() })
 			})
 
-			it('props ariaRequired, error & modelValue set AmeliproMessage visibility', async () => {
+			it('props required, error & modelValue set AmeliproMessage visibility', async () => {
 				expect(vueWrapper.findComponent(AmeliproMessage).exists()).toBe(false)
 
-				const { ariaRequired, error, modelValue } = modifiedPropValues()
-				await vueWrapper.setProps({ ariaRequired, error })
+				const { required, error, modelValue } = modifiedPropValues()
+				await vueWrapper.setProps({ required, error })
 				expect(vueWrapper.findComponent(AmeliproMessage).exists()).toBe(true)
 
 				await vueWrapper.setProps({ modelValue, error: false })
@@ -450,8 +450,8 @@ describe('AmeliproIllustratedRadioGroup', () => {
 			})
 
 			it('prop uniqueId sets prop uniqueId', async () => {
-				const { ariaRequired, error, uniqueId } = modifiedPropValues()
-				await vueWrapper.setProps({ ariaRequired, error })
+				const { required, error, uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ required, error })
 
 				expect(vueWrapper.findComponent(AmeliproMessage).props('uniqueId')).toBe(`${testHelper.default('uniqueId')}-error`)
 

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

@@ -37,11 +37,11 @@ exports[`AmeliproIllustratedRadioGroup > Snapshots > renders the component with
     </div>
     <div
       aria-labelledby="modified-unique-id"
-      aria-required="true"
       class="
         amelipro-illustrated-radio-group__group
         mt-2
       "
+      required="true"
       role="radiogroup"
     >
       <ul
@@ -302,11 +302,11 @@ exports[`AmeliproIllustratedRadioGroup > Snapshots > renders the component with
     </div>
     <div
       aria-labelledby="required-unique-id"
-      aria-required="false"
       class="
         amelipro-illustrated-radio-group__group
         mt-2
       "
+      required="false"
       role="radiogroup"
     >
       <ul

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

@@ -0,0 +1,304 @@
+import { VueWrapper, mount, shallowMount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import AmeliproMultipleFoldingCard from '../AmeliproMultipleFoldingCard.vue'
+import type { AmeliproMultipleFoldingCardItem } from '../types'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import { DisplayTestComponent } from '@tests/helpers/utils'
+import type { ExpectedPropOptions } from '@tests/types'
+import { type PropType } from 'vue'
+import TestHelper from '@tests/helpers/TestHelper'
+
+const getTabs = (): AmeliproMultipleFoldingCardItem[] => [
+	{ id: 'modified-item-id-1', title: 'Modified item title 1' },
+	{ id: 'modified-item-id-2', title: 'Modified item title 2' },
+	{ id: 'modified-item-id-3', title: 'Modified item title 3' },
+	{ id: 'modified-item-id-4', title: 'Modified item title 4' },
+	{ id: 'modified-item-id-5', title: 'Modified item title 5' },
+]
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproMultipleFoldingCard> = {
+	borderColor: {
+		type: String,
+		default: 'ap-grey-lighten-2',
+	},
+	bordered: {
+		type: Boolean,
+		default: true,
+	},
+	cardColor: {
+		type: String,
+		default: 'ap-white',
+	},
+	defaultItemOpened: {
+		type: [Number, null] as PropType<number | null>,
+		default: null,
+	},
+	headerRightWidth: {
+		type: String,
+		default: '50%',
+	},
+	manualValidation: {
+		type: Boolean,
+		default: false,
+	},
+	tabs: {
+		type: Array as PropType<AmeliproMultipleFoldingCardItem[]>,
+		required: true,
+	},
+	title: {
+		type: String,
+		required: true,
+	},
+	titleLevel: {
+		type: Number,
+		default: 2,
+	},
+	titleUppercase: {
+		type: Boolean,
+		default: false,
+	},
+	uniqueId: {
+		type: String,
+		default: undefined,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproMultipleFoldingCard> => ({
+	tabs: [],
+	title: 'Required title',
+})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproMultipleFoldingCard> => ({
+	borderColor: 'ap-red darken-2',
+	bordered: false,
+	cardColor: 'ap-red',
+	defaultItemOpened: 2,
+	headerRightWidth: '55px',
+	manualValidation: true,
+	tabs: getTabs(),
+	title: 'Modified title',
+	titleLevel: 1,
+	titleUppercase: true,
+	uniqueId: 'modified-unique-id',
+})
+
+const displayWrapper = mount(DisplayTestComponent)
+const testHelper = new TestHelper(AmeliproMultipleFoldingCard)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproMultipleFoldingCard', () => {
+	let wrapper: VueWrapper<InstanceType<typeof AmeliproMultipleFoldingCard>>
+
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update list of buttons', () => {
+		beforeEach(() => {
+			wrapper = shallowMount(AmeliproMultipleFoldingCard, { props: requiredPropValues() })
+		})
+
+		it('prop tabs sets number of buttons', async () => {
+			const btns = () => (wrapper.findAll('.amelipro-card--multi-folding__btn'))
+			expect(Array.isArray(btns())).toBe(true)
+			expect(btns().length).toBe(0)
+
+			const { tabs } = modifiedPropValues()
+			await wrapper.setProps({ tabs })
+
+			expect(Array.isArray(btns())).toBe(true)
+			expect(btns().length).toBe(5)
+		})
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		beforeEach(() => {
+			wrapper = shallowMount(AmeliproMultipleFoldingCard, { props: requiredPropValues() })
+		})
+
+		describe('main div', () => {
+			it('props cardColor, borderColor & bordered set style attribute', async () => {
+				expect(wrapper.attributes('style')).toBe('background-color: #FFFFFF; border: 1px solid #DDDEDE;')
+
+				const { borderColor, cardColor } = modifiedPropValues()
+				await wrapper.setProps({ borderColor, cardColor })
+				expect(wrapper.attributes('style')).toBe('background-color: #B33F2E; border: 1px solid #B33F2E;')
+
+				await wrapper.setProps({ bordered: false })
+				expect(wrapper.attributes('style')).toBe('background-color: #B33F2E;')
+			})
+		})
+
+		describe('header', () => {
+			const getHeaderWrapper = () => (wrapper.find('.amelipro-card--multi-folding-header > div'))
+			it('props borderColor & defaultItemOpened set style attribute', async () => {
+				expect(wrapper.props('defaultItemOpened')).toBe(null)
+				expect(getHeaderWrapper().exists()).toBe(true)
+				expect(getHeaderWrapper().attributes('style')).toBeUndefined()
+
+				await wrapper.setProps({ tabs: testHelper.modified('tabs') })
+				const btns = wrapper.findAll('button')
+				expect(Array.isArray(btns)).toBe(true)
+				expect(btns.length).toBeGreaterThan(0)
+				await btns[0]?.trigger('click')
+				expect(getHeaderWrapper().attributes('style')).toContain('border-bottom-color: #DDDEDE;')
+
+				const { borderColor } = modifiedPropValues()
+				await wrapper.setProps({ borderColor })
+				expect(getHeaderWrapper().attributes('style')).toContain('border-bottom-color: #B33F2E;')
+			})
+		})
+
+		describe('title', () => {
+			const getTitleWrapper = () => (wrapper.find('.amelipro-card--multi-folding-header [role="heading"]'))
+			it('prop titleLevel sets aria-level attribute', async () => {
+				expect(getTitleWrapper().attributes('aria-level')).toBe('2')
+
+				const { titleLevel } = modifiedPropValues()
+				await wrapper.setProps({ titleLevel })
+				expect(getTitleWrapper().attributes('aria-level')).toBe('1')
+			})
+
+			it('prop titleUppercase sets class attribute', async () => {
+				expect(getTitleWrapper().attributes('class')).toBe('font-weight-bold text-h3 mb-0')
+
+				const { titleUppercase } = modifiedPropValues()
+				await wrapper.setProps({ titleUppercase })
+				expect(getTitleWrapper().attributes('class')).toBe('font-weight-bold text-h3 mb-0 text-uppercase')
+			})
+
+			it('prop title sets text', async () => {
+				expect(getTitleWrapper().text()).toBe('Required title')
+
+				await wrapper.setProps({ title: 'New title' })
+				expect(getTitleWrapper().text()).toBe('New title')
+			})
+		})
+	})
+
+	describe('Events', () => {
+		const getButtonWrappers = () => (wrapper.findAll('button.amelipro-card--multi-folding__btn'))
+		beforeEach(() => {
+			wrapper = shallowMount(AmeliproMultipleFoldingCard, { props: { ...requiredPropValues(), tabs: testHelper.modified('tabs') } })
+		})
+
+		it('prop tabs sets number of buttons', () => {
+			const btns = getButtonWrappers()
+			expect(Array.isArray(btns)).toBe(true)
+			expect(btns.length).toBe(5)
+		})
+
+		it('should react to button event and update attributes', async () => {
+			const btns = getButtonWrappers()
+			expect(Array.isArray(btns)).toBe(true)
+			expect(btns.length).toBeGreaterThan(1)
+			expect(wrapper.emitted('tab-clicked')).toBeUndefined()
+			if (btns[0]) {
+				expect(btns[0].attributes('class')).toBe('d-inline-flex align-center amelipro-card--multi-folding__btn classic-btn')
+				expect(btns[0].attributes('id')).toBe('modified-item-id-1-title')
+				expect(btns[0].attributes('aria-controls')).toBe('modified-item-id-1')
+				expect(btns[0].attributes('aria-expanded')).toBe('false')
+			}
+			if (btns[1]) {
+				expect(btns[1].attributes('class')).toBe('d-inline-flex align-center amelipro-card--multi-folding__btn classic-btn')
+				expect(btns[1].attributes('id')).toBe('modified-item-id-2-title')
+				expect(btns[1].attributes('aria-controls')).toBe('modified-item-id-2')
+				expect(btns[1].attributes('aria-expanded')).toBe('false')
+			}
+
+			await btns[0]?.trigger('click')
+			expect(wrapper.emitted('tab-clicked')).toStrictEqual([['modified-item-id-1']])
+			if (btns[0]) {
+				expect(btns[0].attributes('class')).toBe('d-inline-flex align-center amelipro-card--multi-folding__btn classic-btn active-btn')
+				expect(btns[0].attributes('aria-expanded')).toBe('true')
+			}
+
+			await btns[1]?.trigger('click')
+			expect(wrapper.emitted('tab-clicked')).toStrictEqual([['modified-item-id-1'], ['modified-item-id-2']])
+			if (btns[0]) {
+				expect(btns[0].attributes('class')).toBe('d-inline-flex align-center amelipro-card--multi-folding__btn classic-btn checked-btn')
+				expect(btns[0].attributes('aria-expanded')).toBe('false')
+			}
+			if (btns[1]) {
+				expect(btns[1].attributes('class')).toBe('d-inline-flex align-center amelipro-card--multi-folding__btn classic-btn active-btn')
+				expect(btns[1].attributes('aria-expanded')).toBe('true')
+			}
+
+			await btns[0]?.trigger('click')
+			expect(wrapper.emitted('tab-clicked')).toStrictEqual([['modified-item-id-1'], ['modified-item-id-2'], ['modified-item-id-1']])
+			if (btns[0]) {
+				expect(btns[0].attributes('class')).toBe('d-inline-flex align-center amelipro-card--multi-folding__btn classic-btn active-btn')
+				expect(btns[0].attributes('aria-expanded')).toBe('true')
+			}
+			if (btns[1]) {
+				expect(btns[1].attributes('class')).toBe('d-inline-flex align-center amelipro-card--multi-folding__btn classic-btn checked-btn')
+				expect(btns[1].attributes('aria-expanded')).toBe('false')
+			}
+		})
+	})
+
+	describe('Slots', () => {
+		beforeEach(() => {
+			displayWrapper.vm.setSmAndUp(true)
+			wrapper = shallowMount(AmeliproMultipleFoldingCard, {
+				props: requiredPropValues(),
+				slots: { headerRight: '<p>Right slot</p>' },
+			})
+		})
+
+		afterEach(() => {
+			displayWrapper.vm.resetDefaults()
+		})
+
+		describe('header left', () => {
+			const wrapperFinder = () => (wrapper.find('.amelipro-card--multi-folding-header-left'))
+
+			it('prop headerRightWidth sets style attribute', async () => {
+				expect(wrapperFinder().attributes('style')).toBe('display: inline-block; margin-right: 10px;')
+
+				const { headerRightWidth } = modifiedPropValues()
+				await wrapper.setProps({ headerRightWidth })
+				// *************************************
+				// BUG JSDOM !!!
+				// Cf : https://github.com/jsdom/jsdom/issues/3538
+				// *************************************
+				// Les "calc()" ne s'affichent pas dans le DOM de JSDOM si le calc() contient des parenthèses
+				// OK sur un vrai navigateur
+				// 	- calc(${props.headerRightWidth} - 10px) ==> OK
+				// 	- calc(100% - (${props.headerRightWidth} + 10px)) ==> FAIL
+				// Fausse le retour des TU
+
+				// Attendu : expect(wrapperFinder().attributes('style')).toBe('display: inline-block; width: calc(100% - (55px + 10px)); margin-right: 10px;');
+				expect(wrapperFinder().attributes('style')).toBe('display: inline-block; margin-right: 10px;')
+
+				displayWrapper.vm.setSmAndUp(false)
+				await wrapper.vm.$nextTick()
+				expect(wrapperFinder().attributes('style')).toBe('display: inline-block; width: 100%;')
+			})
+		})
+
+		describe('header right', () => {
+			const wrapperFinder = () => (wrapper.find('.amelipro-card--multi-folding-header-right'))
+
+			it('prop headerRightWidth sets style attribute', async () => {
+				expect(wrapperFinder().attributes('style')).toBe('width: calc(50% - 10px); margin-left: 10px;')
+
+				const { headerRightWidth } = modifiedPropValues()
+				await wrapper.setProps({ headerRightWidth })
+				expect(wrapperFinder().attributes('style')).toBe('width: calc(55px - 10px); margin-left: 10px;')
+
+				displayWrapper.vm.setSmAndUp(false)
+				await wrapper.vm.$nextTick()
+				expect(wrapperFinder().attributes('style')).toBe('width: 100%;')
+			})
+		})
+	})
+})