@cnamts/synapse 1.0.22 → 1.0.23

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

@@ -0,0 +1,163 @@
+// @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 LunarCalendar from '../LunarCalendar.vue'
+
+describe('LunarCalendar – accessibility (axe)', () => {
+	it('has no obvious axe violations with default props', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+			},
+			modelValue: '',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - default props', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with value', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+			},
+			modelValue: '15/08/2023',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - with value', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with required field', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				required: true,
+			},
+			modelValue: '',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - required field', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with error messages', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				required: true,
+			},
+			modelValue: 'invalid',
+		})
+
+		// Trigger validation
+		await wrapper.find('input').trigger('blur')
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - with errors', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with success messages', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				successMessages: 'Date valide',
+			},
+			modelValue: '15/08/2023',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - with success messages', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with clearable field', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				isClearable: true,
+			},
+			modelValue: '15/08/2023',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - clearable field', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with prepend icon', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				displayPrependIcon: true,
+				displayAppendIcon: false,
+			},
+			modelValue: '',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - with prepend icon', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with append icon', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				displayPrependIcon: false,
+				displayAppendIcon: true,
+			},
+			modelValue: '',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - with append icon', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with year constraints', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				minYear: 1900,
+				maxYear: 2023,
+			},
+			modelValue: '15/08/2023',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - with year constraints', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with placeholder', async () => {
+		const wrapper = mount(LunarCalendar, {
+			props: {
+				label: 'Date de naissance lunaire',
+				placeholder: 'JJ/MM/AAAA',
+			},
+			modelValue: '',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'LunarCalendar - with placeholder', {
+			ignoreRules: ['region'],
+		})
+	})
+})

package/src/components/MaintenancePage/MaintenancePage.vue

@@ -34,7 +34,7 @@
 <template>
 	<StatusPage
 		:heading-level="headingLevel"
-		:unique-id="props.uniqueId"
+		:unique-id="props.uniqueId ?? undefined"
 		:page-title="pageTitle"
 		:message="message"
 		:code="code"

package/src/components/MaintenancePage/tests/MaintenancePage.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { shallowMount } from '@vue/test-utils'
+import { mount, shallowMount } from '@vue/test-utils'
 import StatusPage from '../../StatusPage/StatusPage.vue'
 import MaintenancePage from '../MaintenancePage.vue'
 
@@ -26,11 +26,10 @@ describe('MaintenancePage', () => {
 		expect(statusPage.props('code')).toBeDefined()
 	})
 
-	it('passes a uniqueId prop to StatusPage', () => {
-		const wrapper = shallowMount(MaintenancePage)
-		const statusPage = wrapper.findComponent(StatusPage)
+	it('uses a generated uniqueId', () => {
+		const wrapper = mount(MaintenancePage)
 
-		expect(statusPage.props('uniqueId')).toBeDefined()
+		expect(wrapper.find('.vd-page-container').attributes('id')).toMatch(/^[-a-z0-9]+-container$/)
 	})
 
 	it('passes a custom uniqueId prop to StatusPage', () => {

package/src/components/MaintenancePage/tests/__snapshots__/MaintenancePage.spec.ts.snap

@@ -9,6 +9,5 @@ exports[`MaintenancePage > renders correctly 1`] = `
   hidebtn="true"
   message="L’application n’est pas disponible pour le moment, veuillez nous excuser pour la gêne occasionnée."
   pagetitle="Maintenance en cours"
-  uniqueid=""
 ></status-page-stub>
 `;

package/src/components/MonthPicker/MonthPicker.mdx

@@ -0,0 +1,35 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+import * as MonthPicker from './MonthPicker.stories';
+
+<Meta of={MonthPicker} />
+
+<div className="header">
+  <h1>MonthPicker</h1>
+  <p>L’élément `MonthPicker` est utilisé pour sélectionner un mois et une année. Il est composé d'un champ de saisie et d'un sélecteur visuel.</p>
+</div>
+
+<Canvas
+    of={MonthPicker.Default}
+/>
+
+# API
+
+<Controls of={MonthPicker.Default} />
+
+# Exemple d'utilisation
+
+<Source dark code={`
+<script setup lang="ts">
+    import { MonthPicker } from '@cnamts/synapse'
+    import { ref } from 'vue'
+
+    const selectedMonth = ref<string | undefined>(undefined) // format: MM/YYYY
+</script>
+
+<template>
+    <MonthPicker
+        label="Début du projet"
+        v-model="selectedMonth"
+    />
+</template>
+`} />