@cnamts/synapse 1.0.15 → 1.0.17

package/src/components/Accordion/Accordion.vue

@@ -7,16 +7,12 @@
 	import useAccordionState from './composables/useAccordionState'
 	import useAccordionGroupCommunication from './composables/useAccordionGroupCommunication'
 	import useAccordionKeyboardNavigation, { type AccordionItem as KeyboardNavigationItem } from './composables/useAccordionKeyboardNavigation'
-
-	interface ContentObject {
-		title: string
-		content: string
-	}
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	interface AccordionItem {
 		id: string
 		title: string
-		content: string | ContentObject
+		content: string | Record<string, unknown>
 		headingLevel?: number
 		disabled?: boolean
 	}
@@ -117,7 +113,7 @@
 					:is="getHeadingTag(item)"
 					class="sy-accordion-heading"
 				>
-					<div
+					<span
 						class="sy-accordion-title"
 						:class="isItemOpen(item.id) ? `text-${options.accordion.activeColor}` : `text-${options.accordion.titleColor}`"
 					>
@@ -125,10 +121,29 @@
 							class="sy-accordion-icon"
 							:class="{ 'sy-accordion-icon--open': isItemOpen(item.id) }"
 						>
-							<v-icon :icon="mdiChevronRight" />
+							<SyIcon
+								:icon="mdiChevronRight"
+								decorative
+							/>
 						</span>
-						<span>{{ item.title }}</span>
-					</div>
+						<slot
+							name="title"
+							:item="item"
+							:index="index"
+						>
+							<span>{{ item.title }}</span>
+						</slot>
+					</span>
+					<span
+						v-if="$slots['right-content']"
+						class="sy-accordion-right-content"
+					>
+						<slot
+							name="right-content"
+							:item="item"
+							:index="index"
+						/>
+					</span>
 				</component>
 			</div>
 
@@ -141,20 +156,28 @@
 				:tabindex="isItemOpen(item.id) ? 0 : -1"
 			>
 				<div class="sy-accordion-content-inner">
-					<template v-if="typeof item.content === 'string'">
-						<p class="sy-accordion-content-text">
-							{{ item.content }}
-						</p>
-					</template>
-					<template v-else>
-						<div class="sy-accordion-content-item">
-							<div class="sy-accordion-content-line">
-								<strong>
-									{{ item.content.title }}
-								</strong>: {{ item.content.content }}
+					<slot
+						name="content"
+						:item="item"
+						:index="index"
+						:is-open="isItemOpen(item.id)"
+					>
+						<template v-if="typeof item.content === 'string'">
+							<p class="sy-accordion-content-text">
+								{{ item.content }}
+							</p>
+						</template>
+						<template v-else>
+							<div class="sy-accordion-content-item">
+								<p class="sy-accordion-content-text">
+									<strong>{{ (item.content as any).title }}</strong>
+								</p>
+								<p class="sy-accordion-content-text">
+									{{ (item.content as any).content }}
+								</p>
 							</div>
-						</div>
-					</template>
+						</template>
+					</slot>
 				</div>
 			</div>
 		</div>
@@ -175,6 +198,10 @@
 
 .sy-accordion-heading {
 	margin: 0;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
 }
 
 .sy-accordion-button {
@@ -197,6 +224,12 @@
 	display: flex;
 }
 
+.sy-accordion-right-content {
+	display: flex;
+	align-items: center;
+	margin-left: 16px;
+}
+
 .sy-accordion-button:hover,
 .sy-accordion-content--open + .sy-accordion-button,
 .sy-accordion-item:has(.sy-accordion-content--open) .sy-accordion-button {
@@ -266,7 +299,6 @@
 }
 
 .sy-accordion-content-line {
-	margin-bottom: 8px;
 	line-height: 1.5;
 }
 

package/src/components/Accordion/tests/Accordion.a11y.spec.ts

@@ -0,0 +1,46 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import Accordion from '../Accordion.vue'
+
+const defaultItems = [
+	{ id: 'item1', title: 'Section 1', content: 'Contenu de la section 1' },
+	{
+		id: 'item2',
+		title: 'Section 2',
+		content: {
+			title: 'Sous-titre de la section 2',
+			content: 'Contenu détaillé de la section 2',
+		},
+	},
+]
+
+// Test d'accessibilité dédié à Accordion, basé sur un scénario réaliste :
+// - plusieurs items
+// - ouvertures successives pour vérifier l'état ouvert/fermé et les attributs ARIA
+
+describe('Accordion – accessibility (axe)', () => {
+	it('has no obvious axe violations when sections are opened', async () => {
+		const wrapper = mount(Accordion, {
+			props: {
+				items: defaultItems,
+				headingLevel: 2,
+			},
+		})
+
+		// Ouvrir les deux sections pour inclure le contenu dans l’audit axe
+		const buttons = wrapper.findAll('.sy-accordion-button')
+		if (buttons.length > 0) {
+			await buttons[0].trigger('click')
+		}
+		if (buttons.length > 1) {
+			await buttons[1].trigger('click')
+		}
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'Accordion – sections opened')
+	})
+})

package/src/components/Accordion/tests/__snapshots__/accordion.spec.ts.snap

@@ -23,24 +23,22 @@ exports[`Accordion > renders correctly 1`] = `
       tabindex="0"
     >
       <h2 class="sy-accordion-heading">
-        <div class="
+        <span class="
           sy-accordion-title
           text-primary
         ">
           <span class="sy-accordion-icon">
-            <v-icon-stub
-              disabled="false"
-              end="false"
+            <sy-icon-stub
+              autodetectbutton="false"
+              decorative="true"
               icon="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-              size="default"
-              start="false"
-              tag="i"
-            ></v-icon-stub>
+            ></sy-icon-stub>
           </span>
           <span>
             Section 1
           </span>
-        </div>
+        </span>
+        <!-- v-if -->
       </h2>
     </div>
     <div
@@ -71,24 +69,22 @@ exports[`Accordion > renders correctly 1`] = `
       tabindex="0"
     >
       <h2 class="sy-accordion-heading">
-        <div class="
+        <span class="
           sy-accordion-title
           text-primary
         ">
           <span class="sy-accordion-icon">
-            <v-icon-stub
-              disabled="false"
-              end="false"
+            <sy-icon-stub
+              autodetectbutton="false"
+              decorative="true"
               icon="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-              size="default"
-              start="false"
-              tag="i"
-            ></v-icon-stub>
+            ></sy-icon-stub>
           </span>
           <span>
             Section 2
           </span>
-        </div>
+        </span>
+        <!-- v-if -->
       </h2>
     </div>
     <div
@@ -119,24 +115,22 @@ exports[`Accordion > renders correctly 1`] = `
       tabindex="0"
     >
       <h2 class="sy-accordion-heading">
-        <div class="
+        <span class="
           sy-accordion-title
           text-primary
         ">
           <span class="sy-accordion-icon">
-            <v-icon-stub
-              disabled="false"
-              end="false"
+            <sy-icon-stub
+              autodetectbutton="false"
+              decorative="true"
               icon="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-              size="default"
-              start="false"
-              tag="i"
-            ></v-icon-stub>
+            ></sy-icon-stub>
           </span>
           <span>
             Section 3
           </span>
-        </div>
+        </span>
+        <!-- v-if -->
       </h2>
     </div>
     <div
@@ -148,12 +142,14 @@ exports[`Accordion > renders correctly 1`] = `
     >
       <div class="sy-accordion-content-inner">
         <div class="sy-accordion-content-item">
-          <div class="sy-accordion-content-line">
+          <p class="sy-accordion-content-text">
             <strong>
               Sous-titre de la section 3
             </strong>
-            : Contenu détaillé de la section 3
-          </div>
+          </p>
+          <p class="sy-accordion-content-text">
+            Contenu détaillé de la section 3
+          </p>
         </div>
       </div>
     </div>

package/src/components/Accordion/tests/accordion.spec.ts

@@ -83,7 +83,7 @@ describe('Accordion', () => {
 	it('renders string content correctly', () => {
 		const wrapper = mount(Accordion, {
 			propsData: {
-				items: [defaultItems[0]],
+				items: [defaultItems[0]!],
 				headingLevel: 2,
 			},
 		})
@@ -92,13 +92,13 @@ describe('Accordion', () => {
 		button.trigger('click')
 
 		const content = wrapper.find('.sy-accordion-content-inner')
-		expect(content.text()).toContain(defaultItems[0].content)
+		expect(content.text()).toContain(defaultItems[0]!.content)
 	})
 
 	it('renders object content correctly', async () => {
 		const wrapper = mount(Accordion, {
 			propsData: {
-				items: [defaultItems[2]],
+				items: [defaultItems[2]!],
 				headingLevel: 2,
 			},
 		})
@@ -106,10 +106,10 @@ describe('Accordion', () => {
 		const button = wrapper.find('.sy-accordion-button')
 		await button.trigger('click')
 
-		const contentLine = wrapper.find('.sy-accordion-content-line')
-		const objectContent = defaultItems[2].content as { title: string, content: string }
-		expect(contentLine.text()).toContain(objectContent.title)
-		expect(contentLine.text()).toContain(objectContent.content)
+		const objectContent = defaultItems[2]!.content as { title: string, content: string }
+		const content = wrapper.find('.sy-accordion-content-inner')
+		expect(content.text()).toContain(objectContent.title)
+		expect(content.text()).toContain(objectContent.content)
 	})
 
 	it('has correct accessibility attributes', () => {
@@ -263,26 +263,27 @@ describe('Accordion', () => {
 		})
 
 		// Ouvrir le premier accordéon (contenu string)
-		const firstButton = wrapper.findAll('.sy-accordion-button')[0]
+		const firstButton = wrapper.findAll('.sy-accordion-button')[0]!
 		await firstButton.trigger('click')
 
 		// Vérifier que le contenu string est rendu dans un élément p
-		const firstContent = wrapper.findAll('.sy-accordion-content-inner')[0]
+		const firstContent = wrapper.findAll('.sy-accordion-content-inner')[0]!
 		const paragraph = firstContent.find('p.sy-accordion-content-text')
 		expect(paragraph.exists()).toBe(true)
 		expect(paragraph.text()).toBe('Contenu de la section 1')
 
 		// Ouvrir le deuxième accordéon (contenu objet)
-		const secondButton = wrapper.findAll('.sy-accordion-button')[1]
+		const secondButton = wrapper.findAll('.sy-accordion-button')[1]!
 		await secondButton.trigger('click')
 
 		// Vérifier que le contenu objet est rendu avec la structure appropriée
-		const secondContent = wrapper.findAll('.sy-accordion-content-inner')[1]
-		const contentLine = secondContent.find('.sy-accordion-content-line')
-		expect(contentLine.exists()).toBe(true)
-		expect(contentLine.find('strong').exists()).toBe(true)
-		expect(contentLine.find('strong').text()).toBe('Sous-titre')
-		expect(contentLine.text()).toContain('Contenu détaillé')
+		const secondContent = wrapper.findAll('.sy-accordion-content-inner')[1]!
+		const paragraphs = secondContent.findAll('p.sy-accordion-content-text')
+		expect(paragraphs.length).toBe(2)
+		expect(paragraphs[0]!.text()).toContain('Sous-titre')
+		expect(paragraphs[1]!.text()).toContain('Contenu détaillé')
+		// Le titre est affiché en gras
+		expect(paragraphs[0]!.find('strong').exists()).toBe(true)
 	})
 
 	it('applies custom colors from options', async () => {
@@ -372,11 +373,11 @@ describe('Accordion', () => {
 		expect(buttons.length).toBeGreaterThan(1) // S'assurer qu'il y a plusieurs boutons
 
 		// Ouvrir le premier accordéon
-		await buttons[0].trigger('click')
+		await buttons[0]!.trigger('click')
 		expect(wrapper.findAll('.sy-accordion-content--open').length).toBe(1)
 
 		// Ouvrir le deuxième accordéon
-		await buttons[1].trigger('click')
+		await buttons[1]!.trigger('click')
 		expect(wrapper.findAll('.sy-accordion-content--open').length).toBe(2)
 
 		// Vérifier que les deux accordéons sont ouverts
@@ -396,18 +397,18 @@ describe('Accordion', () => {
 		expect(buttons.length).toBeGreaterThan(1) // S'assurer qu'il y a plusieurs boutons
 
 		// Ouvrir le premier accordéon - il devrait avoir le focus
-		await buttons[0].trigger('click')
-		expect(buttons[0].classes()).toContain('sy-accordion-button--focused')
-		expect(buttons[1].classes()).not.toContain('sy-accordion-button--focused')
+		await buttons[0]!.trigger('click')
+		expect(buttons[0]!.classes()).toContain('sy-accordion-button--focused')
+		expect(buttons[1]!.classes()).not.toContain('sy-accordion-button--focused')
 
 		// Ouvrir le deuxième accordéon - le focus devrait être transféré
-		await buttons[1].trigger('click')
-		expect(buttons[0].classes()).not.toContain('sy-accordion-button--focused')
-		expect(buttons[1].classes()).toContain('sy-accordion-button--focused')
+		await buttons[1]!.trigger('click')
+		expect(buttons[0]!.classes()).not.toContain('sy-accordion-button--focused')
+		expect(buttons[1]!.classes()).toContain('sy-accordion-button--focused')
 
 		// Fermer le deuxième accordéon - le focus devrait être supprimé
-		await buttons[1].trigger('click')
-		expect(buttons[1].classes()).not.toContain('sy-accordion-button--focused')
+		await buttons[1]!.trigger('click')
+		expect(buttons[1]!.classes()).not.toContain('sy-accordion-button--focused')
 	})
 
 	it('removes event listener on component unmount', async () => {

package/src/components/Amelipro/AmeliproAccordion/AmeliproAccordionTemplate/__tests__/__snapshots__/AmeliproAccordionTemplate.spec.ts.snap

@@ -74,24 +74,7 @@ exports[`AmeliproAccordionTemplate > render correctly 1`] = `
                 width: 11px;
               "
             >
-              <span>
-                <svg
-                  aria-hidden="true"
-                  style="enable-background:new 0 0 42 42;"
-                  version="1.1"
-                  viewBox="0 0 42 42"
-                  x="0px"
-                  xml:space="preserve"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlns:xlink="http://www.w3.org/1999/xlink"
-                  y="0px"
-                >
-                  <polygon
-                    class="shape-color"
-                    points="21,39.2 42,2.8 0,2.8 "
-                  />
-                </svg>
-              </span>
+              <span></span>
             </span>
           </span>
           titre accordion

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

@@ -1,16 +1,185 @@
-import { mount } from '@vue/test-utils'
-import { expect, describe, it } from 'vitest'
+import { VueWrapper, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
 import AmeliproAccordion from '../AmeliproAccordion.vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { ExpectedPropOptions } from '@tests/types'
+import TestHelper from '@tests/helpers/TestHelper'
+import AmeliproAccordionTemplate from '../AmeliproAccordionTemplate/AmeliproAccordionTemplate.vue'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproAccordion> = {
+	accordionTitle: {
+		type: String,
+		required: true,
+	},
+	borderColor: {
+		type: String,
+		default: 'ap-grey-lighten-2',
+	},
+	bordered: {
+		type: Boolean,
+		default: true,
+	},
+	cardColor: {
+		type: String,
+		default: 'ap-white',
+	},
+	headerRightWidth: {
+		type: String,
+		default: '50%',
+	},
+	hideSeparator: {
+		type: Boolean,
+		default: false,
+	},
+	isOpen: {
+		type: Boolean,
+		default: false,
+	},
+	titleLevel: {
+		type: Number,
+		default: 2,
+	},
+	titleUppercase: {
+		type: Boolean,
+		default: false,
+	},
+	uniqueId: {
+		type: String,
+		required: true,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproAccordion> => ({
+	accordionTitle: 'Required accordion title',
+	uniqueId: 'required-unique-id',
+})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproAccordion> => ({
+	accordionTitle: 'Modified accordion title',
+	borderColor: 'modified-border-color',
+	bordered: false,
+	cardColor: 'modified-card-color',
+	headerRightWidth: 'modified-header-right-width',
+	hideSeparator: true,
+	isOpen: true,
+	titleLevel: 3,
+	titleUppercase: true,
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproAccordion)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
 
 describe('AmeliproAccordion', () => {
-	it('render correctly', async () => {
-		const wrapper = mount(AmeliproAccordion, {
-			props: {
-				accordionTitle: 'titre accordion',
-				uniqueId: 'amelipro-accordion-unique-id',
-			},
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('setting props should update props of inner components', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproAccordion>>
+
+		describe('AmeliproAccordionTemplate', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproAccordion, { props: requiredPropValues() })
+			})
+
+			it('prop accordionTitle sets prop accordionTitle', async () => {
+				expect(vueWrapper.findComponent(AmeliproAccordionTemplate).props('accordionTitle')).toBe('Required accordion title')
+
+				const { accordionTitle } = modifiedPropValues()
+				await vueWrapper.setProps({ accordionTitle })
+				expect(vueWrapper.findComponent(AmeliproAccordionTemplate).props('accordionTitle')).toBe('Modified accordion title')
+			})
+
+			it('prop borderColor sets prop borderColor', async () => {
+				expect(vueWrapper.findComponent(AmeliproAccordionTemplate).props('borderColor')).toBe('ap-grey-lighten-2')
+
+				const { borderColor } = modifiedPropValues()
+				await vueWrapper.setProps({ borderColor })
+				expect(vueWrapper.findComponent(AmeliproAccordionTemplate).props('borderColor')).toBe('modified-border-color')
+			})
+
+			it('prop bordered sets prop bordered', async () => {
+				expect(vueWrapper.findComponent(AmeliproAccordionTemplate).props('bordered')).toBe(true)
+
+				const { bordered } = modifiedPropValues()
+				await vueWrapper.setProps({ bordered })
+				expect(vueWrapper.findComponent(AmeliproAccordionTemplate).props('bordered')).toBe(false)
+			})
+
+			it('prop cardColor sets prop cardColor', async () => {
+				expect(vueWrapper.findComponent(AmeliproAccordionTemplate).props('cardColor')).toBe('ap-white')
+
+				const { cardColor } = modifiedPropValues()
+				await vueWrapper.setProps({ cardColor })
+				expect(vueWrapper.findComponent(AmeliproAccordionTemplate).props('cardColor')).toBe('modified-card-color')
+			})
+
+			it('prop headerRightWidth sets prop headerRightWidth', async () => {
+				expect(vueWrapper.findComponent(AmeliproAccordionTemplate).props('headerRightWidth')).toBe('50%')
+
+				const { headerRightWidth } = modifiedPropValues()
+				await vueWrapper.setProps({ headerRightWidth })
+				expect(vueWrapper.findComponent(AmeliproAccordionTemplate).props('headerRightWidth')).toBe('modified-header-right-width')
+			})
+
+			it('prop hideSeparator sets prop hideSeparator', async () => {
+				expect(vueWrapper.findComponent(AmeliproAccordionTemplate).props('hideSeparator')).toBe(false)
+
+				const { hideSeparator } = modifiedPropValues()
+				await vueWrapper.setProps({ hideSeparator })
+				expect(vueWrapper.findComponent(AmeliproAccordionTemplate).props('hideSeparator')).toBe(true)
+			})
+
+			it('prop titleLevel sets prop titleLevel', async () => {
+				expect(vueWrapper.findComponent(AmeliproAccordionTemplate).props('titleLevel')).toBe(2)
+
+				const { titleLevel } = modifiedPropValues()
+				await vueWrapper.setProps({ titleLevel })
+				expect(vueWrapper.findComponent(AmeliproAccordionTemplate).props('titleLevel')).toBe(3)
+			})
+
+			it('prop titleUppercase sets prop titleUppercase', async () => {
+				expect(vueWrapper.findComponent(AmeliproAccordionTemplate).props('titleUppercase')).toBe(false)
+
+				const { titleUppercase } = modifiedPropValues()
+				await vueWrapper.setProps({ titleUppercase })
+				expect(vueWrapper.findComponent(AmeliproAccordionTemplate).props('titleUppercase')).toBe(true)
+			})
+
+			it('prop uniqueId sets prop uniqueId', async () => {
+				expect(vueWrapper.findComponent(AmeliproAccordionTemplate).props('uniqueId')).toBe('required-unique-id')
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.findComponent(AmeliproAccordionTemplate).props('uniqueId')).toBe('modified-unique-id')
+			})
+		})
+	})
+
+	describe('Public functions', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproAccordion>>
+		const findInnerWrapper = (): VueWrapper<InstanceType<typeof AmeliproAccordionTemplate>> => vueWrapper.findComponent(AmeliproAccordionTemplate)
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproAccordion, { props: requiredPropValues() })
 		})
 
-		expect(wrapper.html()).toMatchSnapshot()
+		it('should test openClose()', async () => {
+			expect(findInnerWrapper().props('isOpen')).toBe(false)
+
+			await vueWrapper.vm.openClose()
+			expect(findInnerWrapper().props('isOpen')).toBe(true)
+
+			await vueWrapper.vm.openClose()
+			expect(findInnerWrapper().props('isOpen')).toBe(false)
+		})
 	})
 })