@cnamts/synapse 1.0.22 → 1.0.24

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

@@ -0,0 +1,151 @@
+// @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 SyTextArea from '../SyTextArea.vue'
+
+describe('SyTextArea – accessibility (axe)', () => {
+	it('has no obvious axe violations with default props', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				label: 'Description',
+			},
+			modelValue: '',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextArea - default props', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with value', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				label: 'Description',
+			},
+			modelValue: 'Ceci est une description',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextArea - with value', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with required field', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				label: 'Description',
+				required: true,
+			},
+			modelValue: '',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextArea - required field', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with error messages', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				label: 'Description',
+				required: true,
+			},
+			modelValue: '',
+		})
+
+		// Trigger validation
+		await wrapper.find('textarea').trigger('blur')
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextArea - with errors', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with max lines constraint', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				label: 'Description',
+				maxLines: 3,
+			},
+			modelValue: 'Ligne 1\nLigne 2\nLigne 3\nLigne 4',
+		})
+
+		// Trigger validation
+		await wrapper.find('textarea').trigger('blur')
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextArea - with max lines violation', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with custom rules', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				label: 'Description',
+				rules: [(value: string) => value.length >= 10 || 'Minimum 10 caractères'],
+			},
+			modelValue: 'Court',
+		})
+
+		// Trigger validation
+		await wrapper.find('textarea').trigger('blur')
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextArea - with custom rules', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with different variant', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				label: 'Description',
+				variant: 'filled',
+			},
+			modelValue: 'Texte de test',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextArea - filled variant', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with custom color', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				label: 'Description',
+				color: 'secondary',
+			},
+			modelValue: 'Texte de test',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextArea - custom color', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with background color', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				label: 'Description',
+				bgColor: 'grey-lighten-2',
+			},
+			modelValue: 'Texte de test',
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextArea - background color', {
+			ignoreRules: ['region'],
+		})
+	})
+})

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

@@ -1,6 +1,5 @@
 import { it, describe, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import { nextTick } from 'vue'
+import { flushPromises, mount } from '@vue/test-utils'
 import SyTextArea from '../SyTextArea.vue'
 
 describe('SyTextArea', () => {
@@ -126,11 +125,16 @@ describe('SyTextArea', () => {
 			},
 		})
 		const textarea = wrapper.find('textarea')
+		await textarea.trigger('focus')
 		await textarea.setValue('content\ncontent\ncontent\ncontent\ncontent\ncontent')
+		await textarea.trigger('blur')
+
 		expect(wrapper.text()).toContain('Ce champ ne peut pas dépasser 5 lignes')
 
+		await textarea.trigger('focus')
 		await textarea.setValue('content\ncontent\ncontent\ncontent\ncontent')
-		await nextTick()
+		await textarea.trigger('blur')
+
 		expect(wrapper.text()).not.toContain('Ce champ ne peut pas dépasser 5 lignes')
 	})
 
@@ -201,4 +205,123 @@ describe('SyTextArea', () => {
 
 		expect(textarea.element.value).toBe('new  value')
 	})
+
+	it('shows custom error from customRules in custom validation mode', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				modelValue: '',
+				label: 'Description des symptomes',
+				isValidateOnBlur: false,
+				customRules: [
+					{
+						type: 'custom',
+						options: {
+							validate: (value: string) => value.includes('ok'),
+							message: 'Le texte doit contenir ok',
+						},
+					},
+				],
+			},
+		})
+
+		const textarea = wrapper.find('textarea')
+		await textarea.trigger('focus')
+		await textarea.setValue('test')
+		await textarea.trigger('blur')
+		await flushPromises()
+
+		const isValid = await (wrapper.vm as { validateOnSubmit: () => Promise<boolean> }).validateOnSubmit()
+		expect(isValid).toBe(false)
+	})
+
+	it('shows vuetify rule error when useVuetifyValidation is true', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				modelValue: '',
+				label: 'Description des symptomes',
+				useVuetifyValidation: true,
+				rules: [
+					(value: string) => value.includes('ok') || 'Erreur Vuetify personnalisée',
+				],
+			},
+		})
+
+		const textarea = wrapper.find('textarea')
+		await textarea.trigger('focus')
+		await textarea.setValue('test')
+		await textarea.trigger('blur')
+		await flushPromises()
+
+		expect(wrapper.text()).toContain('Erreur Vuetify personnalisée')
+	})
+
+	it('shows custom warning from customWarningRules in custom validation mode', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				modelValue: '',
+				label: 'Description des symptomes',
+				isValidateOnBlur: false,
+				customRules: [
+					{
+						type: 'custom',
+						options: {
+							validate: () => true,
+						},
+					},
+				],
+				customWarningRules: [
+					{
+						type: 'custom',
+						options: {
+							warningMessage: 'Avertissement personnalisé',
+							validate: () => false,
+						},
+					},
+				],
+			},
+		})
+
+		const textarea = wrapper.find('textarea')
+		await textarea.trigger('focus')
+		await textarea.setValue('valeur')
+		await textarea.trigger('blur')
+		await flushPromises()
+
+		expect(wrapper.text()).toContain('Avertissement personnalisé')
+	})
+
+	it('shows custom success from customSuccessRules in custom validation mode', async () => {
+		const wrapper = mount(SyTextArea, {
+			props: {
+				modelValue: '',
+				label: 'Description des symptomes',
+				isValidateOnBlur: false,
+				customRules: [
+					{
+						type: 'custom',
+						options: {
+							validate: () => true,
+						},
+					},
+				],
+				customSuccessRules: [
+					{
+						type: 'custom',
+						options: {
+							successMessage: 'Succès personnalisé',
+							validate: () => true,
+						},
+					},
+				],
+			},
+		})
+
+		const textarea = wrapper.find('textarea')
+		await textarea.trigger('focus')
+		await textarea.setValue('valeur')
+		await textarea.trigger('blur')
+		await flushPromises()
+
+		expect(wrapper.text()).toContain('Succès personnalisé')
+	})
 })

package/src/components/SyTextArea/useDefaultValidationRules.ts

@@ -0,0 +1,74 @@
+import { computed, type Ref } from 'vue'
+import { locales } from './locales'
+import type { ValidationRule as SyValidationRule } from '@/composables/validation/useValidation'
+
+export type TextareaRule = (value: string) => boolean | string
+
+export function useDefaultValidationRules(params: {
+	required: Ref<boolean>
+	maxLines: Ref<number | undefined>
+	hasInteracted: Ref<boolean>
+}) {
+	const vuetifyRules = computed<TextareaRule[]>(() => {
+		const rules: TextareaRule[] = []
+
+		rules.push((value: string) => {
+			if (params.required.value && params.hasInteracted.value && !value) {
+				return locales.required
+			}
+			return true
+		})
+
+		rules.push((value: string) => {
+			if (params.maxLines.value === undefined) {
+				return true
+			}
+
+			const lines = value.split('\n').length
+			if (lines > params.maxLines.value) {
+				return locales.maxLines(params.maxLines.value)
+			}
+
+			return true
+		})
+
+		return rules
+	})
+
+	const customRules = computed<SyValidationRule[]>(() => {
+		const rules: SyValidationRule[] = []
+
+		if (params.required.value) {
+			rules.push({
+				type: 'custom',
+				options: {
+					validate: (value: string) => {
+						if (!params.hasInteracted.value) {
+							return true
+						}
+						return !!value || locales.required
+					},
+				},
+			})
+		}
+
+		if (params.maxLines.value !== undefined) {
+			rules.push({
+				type: 'custom',
+				options: {
+					validate: (value: string) => {
+						const lines = value.split('\n').length
+						return lines <= params.maxLines.value! || locales.maxLines(params.maxLines.value!)
+					},
+				},
+			})
+		}
+
+		return rules
+	})
+
+	return {
+		vuetifyRules,
+		customRules,
+	}
+}

package/src/components/Tables/SyServerTable/SyServerTable.mdx

@@ -67,6 +67,31 @@ Exemple d'utilisation :
 />
 `}/>
 
+### Click des lignes
+
+La prop `clickableRow` active le clic sur toute la ligne du tableau. Quand cette prop vaut `true`, un clic sur une ligne émet l'événement `row-click` avec l'item correspondant.
+
+Les lignes deviennent également focusables au clavier afin de pouvoir être activées avec <kbd>Entrée</kbd> ou <kbd>Espace</kbd>.
+
+Les éléments interactifs déjà présents dans la ligne, comme les cases à cocher, liens ou boutons, conservent leur comportement propre et ne déclenchent pas `row-click`.
+
+L'événement `row-click` est  lorsqu'une ligne est activée alors que `clickableRow` est à `true`.
+
+- Payload : l'objet de la ligne cliquée
+- Cas pris en charge : clic souris sur la ligne, activation clavier via <kbd>Entrée</kbd> ou <kbd>Espace</kbd>
+- Cas exclus : interaction avec un élément interactif imbriqué dans la ligne
+
+Exemple :
+<Source dark code={`
+<SyServerTable
+  :items="items"
+  :headers="headers"
+  :server-items-length="totalItems"
+  clickable-row
+  @row-click="handleRowClick"
+/>
+`}/>
+
 ### Slot item
 Le composant permet de personnaliser l'affichage des contenus en utilisant le slot `item`. Vous pouvez définir la structure de chaque contenu en fonction de vos besoins.