@cnamts/synapse 1.0.11 → 1.0.13

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

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import AmeliproAccordionList from './AmeliproAccordionList.vue'
 import type { IDataListItem } from '../types'
 import { computed, ref } from 'vue'
+import { fn } from '@storybook/test'
 
 const meta = {
 	argTypes: {
@@ -158,8 +159,9 @@ export const Default: Story = {
 	name: 'Par défaut',
 	args: {
 		items,
-		title: 'Exemple de liste de résultats',
-		uniqueId: 'amelipro-accordion-list-unique-id',
+		'title': 'Exemple de liste de résultats',
+		'uniqueId': 'amelipro-accordion-list-unique-id',
+		'onOpen-close': fn(),
 	},
 	parameters: {
 		sourceCode: [
@@ -289,6 +291,7 @@ export const Default: Story = {
 		template: `
 	<AmeliproAccordionList
 		v-bind="args"
+		@open-close="args['onOpen-close']"
 	>
 		<template #headingContent="item">
 			<p class="mb-0">

package/src/components/Amelipro/AmeliproAccordionList/AmeliproAccordionList.vue

@@ -130,8 +130,10 @@
 		}
 	})
 
+	const emit = defineEmits(['click', 'change:sort-select', 'change:pagination-select', 'open-close'])
 	const openClose = (id: number): void => {
 		openId.value = openId.value === String(id) ? null : String(id)
+		emit('open-close', id, openId.value)
 	}
 
 	const hideSelectLabel = (): void => {
@@ -141,7 +143,6 @@
 		}
 	}
 
-	const emit = defineEmits(['click', 'change:sort-select', 'change:pagination-select'])
 	const emitClickEvent = (newCurrentPage: number): void => {
 		emit('click')
 		if (newCurrentPage !== null && newCurrentPage !== undefined) {

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import AmeliproAccordionResult from './AmeliproAccordionResult.vue'
+import { fn } from '@storybook/test'
 
 const meta = {
 	argTypes: {
@@ -21,9 +22,10 @@ type Story = StoryObj<typeof AmeliproAccordionResult>
 
 export const Default: Story = {
 	args: {
-		accordionContent: '[Slot: accordionContent]',
-		headingContent: '[Slot: headingContent]',
-		uniqueId: 'amelipro-accordion-result-unique-id',
+		'accordionContent': '[Slot: accordionContent]',
+		'headingContent': '[Slot: headingContent]',
+		'uniqueId': 'amelipro-accordion-result-unique-id',
+		'onOpen-close': fn(),
 	},
 	parameters: {
 		sourceCode: [
@@ -55,6 +57,7 @@ export const Default: Story = {
 <AmeliproAccordionResult
 	class="w-100"
 	v-bind="args"
+	@open-close="args['onOpen-close']"
 >
 	<template #headingContent>
 		[Slot: headingContent]

package/src/components/Amelipro/AmeliproAccordionResult/AmeliproAccordionResult.vue

@@ -29,10 +29,12 @@
 		},
 	})
 
+	const emit = defineEmits(['open-close'])
 	const opened = ref(props.isOpen)
 
 	const openClose = (): void => {
 		opened.value = !opened.value
+		emit('open-close', props.uniqueId, opened.value)
 	}
 
 	// Rendre publique la méthode openClose permet à un bouton ou à un composant externe de fermer/ouvrir l'accordéon

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

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import AmeliproAccordionResultList from './AmeliproAccordionResultList.vue'
 import type { IDataListItem } from '../types'
 import { computed, ref } from 'vue'
+import { fn } from '@storybook/test'
 
 const meta = {
 	argTypes: {
@@ -143,8 +144,9 @@ const items: IDataListItem[] = [
 export const Default: Story = {
 	args: {
 		items,
-		title: 'Exemple de liste de résultats',
-		uniqueId: 'amelipro-accordion-result-list-unique-id',
+		'title': 'Exemple de liste de résultats',
+		'uniqueId': 'amelipro-accordion-result-list-unique-id',
+		'onOpen-close': fn(),
 	},
 	parameters: {
 		sourceCode: [
@@ -261,6 +263,7 @@ export const Default: Story = {
 		template: `
 	<AmeliproAccordionResultList
 		v-bind="args"
+		@open-close="args['onOpen-close']"
 	>
 		<template #headingContent="item">
 			<p class="mb-0">

package/src/components/Amelipro/AmeliproAccordionResultList/AmeliproAccordionResultList.vue

@@ -122,8 +122,10 @@
 		}
 	})
 
+	const emit = defineEmits(['click', 'change:sort-select', 'change:pagination-select', 'open-close'])
 	const openClose = (id: number): void => {
 		openId.value = openId.value === String(id) ? null : String(id)
+		emit('open-close', id, openId.value)
 	}
 
 	const hideSelectLabel = (): void => {
@@ -133,7 +135,6 @@
 		}
 	}
 
-	const emit = defineEmits(['click', 'change:sort-select', 'change:pagination-select', 'open-close'])
 	const emitClickEvent = (newCurrentPage: number): void => {
 		emit('click')
 		if (newCurrentPage !== null && newCurrentPage !== undefined) {

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

@@ -0,0 +1,175 @@
+import { VueWrapper, mount, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import AmeliproCheckbox from '../AmeliproCheckbox.vue'
+import type { AmeliproCheckboxItem } from '../types'
+import { AmeliproMessage } from '@/components'
+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'
+import { attachToApp } from '@tests/helpers/utils'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproCheckbox> = {
+	ariaRequired: {
+		type: Boolean,
+		default: false,
+	},
+	checkbox: {
+		type: Object as PropType<AmeliproCheckboxItem>,
+		required: true,
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+	errorDefault: {
+		type: Boolean,
+		default: false,
+	},
+	isSwitch: {
+		type: Boolean,
+		default: false,
+	},
+	labelLeft: {
+		type: Boolean,
+		default: false,
+	},
+	modelValue: {
+		type: Boolean,
+		default: false,
+	},
+	requiredErrorMessage: {
+		type: String,
+		default: 'Sélection obligatoire',
+	},
+	uniqueId: {
+		type: String,
+		required: true,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproCheckbox> => ({
+	checkbox: {
+		label: 'Required checkbox label',
+		value: 'required-checkbox-value',
+	},
+	uniqueId: 'required-unique-id',
+})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproCheckbox> => ({
+	ariaRequired: true,
+	checkbox: {
+		description: 'Modified checkbox description',
+		label: 'Modified checkbox label',
+		value: 'modified-checkbox-value',
+	} as AmeliproCheckboxItem,
+	disabled: true,
+	errorDefault: true,
+	modelValue: true,
+	requiredErrorMessage: 'Modified required error message',
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproCheckbox)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproCheckbox', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe.todo('Setting props should update attributes of inner tags')
+
+	describe.todo('Setting props should update props or attributes of inner components')
+
+	describe('Events', () => {
+		let wrapper: VueWrapper<InstanceType<typeof AmeliproCheckbox>>
+		const inputWrapper = () => wrapper.find('[role="checkbox"]')
+
+		beforeEach(() => {
+			wrapper = mount(AmeliproCheckbox, {
+				attachTo: attachToApp(),
+				props: {
+					...requiredPropValues(),
+					checkbox: {
+						label: 'Exemple',
+						value: 'Valeur de la checkbox',
+					},
+				},
+			})
+		})
+
+		it('should test the input wrapper', () => {
+			expect(inputWrapper().attributes()).toMatchObject({
+				'aria-checked': 'false',
+				'aria-disabled': 'false',
+				'class': expect.stringContaining('amelipro-checkbox-input'),
+				'id': testHelper.default('uniqueId'),
+				'role': 'checkbox',
+				'tabindex': '0',
+			})
+		})
+
+		// TODO: Le contenu de emitted() semble buggé (non conforme à la doc)
+		it.skip('should react to input event', async () => {
+			expect(wrapper.emitted('input')).toBeUndefined()
+			await inputWrapper().trigger('input')
+			expect(wrapper.emitted('input')).toEqual([[true, 'Valeur de la checkbox']])
+		})
+	})
+
+	describe('errors', () => {
+		let wrapper: VueWrapper<InstanceType<typeof AmeliproCheckbox>>
+
+		beforeEach(() => {
+			wrapper = shallowMount(AmeliproCheckbox, {
+				props: {
+					...requiredPropValues(),
+					checkbox: {
+						description: 'The checkbox description',
+						label: 'the checkbox label',
+						value: 'the-checkbox-value',
+					} as AmeliproCheckboxItem,
+				},
+			})
+		})
+
+		it.skip('should display error message', async () => {
+			let componentWrapper = wrapper.findComponent(AmeliproMessage)
+			expect(componentWrapper.exists()).toBe(false)
+
+			await wrapper.setProps({ ariaRequired: true })
+			await wrapper.find('[role="checkbox"]').trigger('click')
+			await wrapper.find('[role="checkbox"]').trigger('click')
+			componentWrapper = wrapper.findComponent(AmeliproMessage)
+
+			expect(wrapper.find('[role="checkbox"]').attributes('aria-describedby')).toBe('the-id-error The checkbox description')
+			expect(componentWrapper.exists()).toBe(true)
+			expect(componentWrapper.find('.mb-0').text()).toBe('Sélection obligatoire')
+		})
+
+		it('should update label color classes', async () => {
+			const elementWrapper = wrapper.find('.checkbox-label')
+			expect(elementWrapper.exists()).toBe(true)
+			expect(elementWrapper.attributes('class')).toContain('text-ap-grey-darken-1')
+
+			await wrapper.setProps({ disabled: true })
+			expect(elementWrapper.exists()).toBe(true)
+			expect(elementWrapper.attributes('class')).toContain('text-ap-grey')
+
+			await wrapper.setProps({ disabled: false, ariaRequired: true })
+			await wrapper.find('[role="checkbox"]').trigger('click')
+			await wrapper.find('[role="checkbox"]').trigger('click')
+			expect(elementWrapper.exists()).toBe(true)
+			expect(elementWrapper.attributes('class')).toContain('checkbox-label text-ap-error')
+		})
+	})
+})

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

@@ -0,0 +1,88 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproCheckbox > Snapshots > renders the component with all properties filled in 1`] = `
+<div id="modified-unique-id-container">
+  <div class="
+    align-center
+    amelipro-checkbox
+    d-flex
+  ">
+    <div
+      aria-checked="true"
+      aria-describedby="Modified checkbox description"
+      aria-disabled="true"
+      aria-required="true"
+      class="
+        align-center
+        amelipro-checkbox-input
+        d-inline-flex
+        flex-row
+        mr-0
+        text-body-1
+      "
+      id="modified-unique-id"
+      role="checkbox"
+      tabindex="-1"
+    >
+      <span
+        class="
+          checkbox-label
+          text-ap-grey
+        "
+        id="modified-unique-id-label-text"
+      >
+        Modified checkbox label
+        <span
+          aria-hidden="true"
+          class="d-inline-flex"
+        >
+          &nbsp;*
+        </span>
+        <span class="d-sr-only">
+          &nbsp;Champ obligatoire
+        </span>
+      </span>
+    </div>
+  </div>
+  <!-- v-if -->
+</div>
+`;
+
+exports[`AmeliproCheckbox > Snapshots > renders the component with only required properties filled in 1`] = `
+<div id="required-unique-id-container">
+  <div class="
+    align-center
+    amelipro-checkbox
+    d-flex
+  ">
+    <div
+      aria-checked="false"
+      aria-disabled="false"
+      class="
+        align-center
+        amelipro-checkbox-input
+        d-inline-flex
+        flex-row
+        mr-0
+        text-body-1
+      "
+      id="required-unique-id"
+      role="checkbox"
+      tabindex="0"
+    >
+      <span
+        class="
+          checkbox-label
+          text-ap-grey-darken-1
+        "
+        id="required-unique-id-label-text"
+      >
+        Required checkbox label
+        <!-- v-if -->
+        <!-- v-if -->
+      </span>
+    </div>
+  </div>
+  <!-- v-if -->
+</div>
+`;