@cnamts/synapse 0.0.10-alpha → 0.0.12-alpha

package/src/components/Customs/SyTextField/tests/SyTextField.spec.ts

@@ -1,36 +1,56 @@
+import { describe, it, expect, beforeEach } from 'vitest'
 import { mount } from '@vue/test-utils'
-import SyTextField from '../SyTextField.vue'
-import { expect, describe, it } from 'vitest'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
 import { VIcon } from 'vuetify/components'
-import { vuetify } from '@tests/unit/setup'
 
-describe('SyTextField', () => {
-	const factory = (props = {}, slots = {}) => {
-		return mount(SyTextField, {
-			props,
-			slots,
+import SyTextField from '../SyTextField.vue'
+import type { IconType } from '../types'
+
+const vuetify = createVuetify({
+	components,
+	directives,
+})
+
+describe('SyTextField.vue', () => {
+	let wrapper: ReturnType<typeof mount<typeof SyTextField>>
+
+	beforeEach(() => {
+		wrapper = mount(SyTextField, {
 			global: {
 				plugins: [vuetify],
 			},
+			props: {
+				modelValue: undefined,
+				required: true,
+				showSuccessMessages: true,
+				outlined: true,
+			},
 		})
-	}
+	})
 
 	it('renders correctly with default props', () => {
-		const wrapper = factory()
 		expect(wrapper.exists()).toBe(true)
-		expect(wrapper.findComponent(VIcon).exists()).toBe(false) // No icons by default
+		expect(wrapper.findComponent({ name: 'VIcon' }).exists()).toBe(false) // No icons by default
 	})
 
 	it('applies the correct variant style', () => {
-		const wrapper = factory({ variantStyle: 'filled' })
+		wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			props: { variantStyle: 'filled' },
+		})
 		const textField = wrapper.findComponent({ name: 'VTextField' })
 		expect(textField.props('variant')).toBe('filled')
 	})
 
 	it('renders default slots correctly', () => {
-		const wrapper = factory({}, {
-			prepend: '<div data-testid="prepend-slot">Prepend Slot Content</div>',
-			append: '<div data-testid="append-slot">Append Slot Content</div>',
+		wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			slots: {
+				prepend: '<div data-testid="prepend-slot">Prepend Slot Content</div>',
+				append: '<div data-testid="append-slot">Append Slot Content</div>',
+			},
 		})
 
 		const prependSlot = wrapper.find('.v-field--prepended')
@@ -41,9 +61,12 @@ describe('SyTextField', () => {
 	})
 
 	it('renders inner slots correctly', () => {
-		const wrapper = factory({}, {
-			'prepend-inner': '<div data-testid="prepend-inner-slot">Prepend Inner Slot Content</div>',
-			'append-inner': '<div data-testid="append-inner-slot">Append Inner Slot Content</div>',
+		wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			slots: {
+				'prepend-inner': '<div data-testid="prepend-inner-slot">Prepend Inner Slot Content</div>',
+				'append-inner': '<div data-testid="append-inner-slot">Append Inner Slot Content</div>',
+			},
 		})
 
 		const prependInnerSlot = wrapper.find('[data-testid="prepend-inner-slot"]')
@@ -55,37 +78,167 @@ describe('SyTextField', () => {
 		expect(appendInnerSlot.text()).toBe('Append Inner Slot Content')
 	})
 
-	it('matches snapshot', () => {
-		const wrapper = factory({
-			prependIcon: 'info',
-			appendIcon: 'success',
-			prependInnerIcon: 'warning',
-			appendInnerIcon: 'error',
-			variantStyle: 'filled',
-			isClearable: true,
-			showDivider: true,
+	it('should update icon when validation state changes', async () => {
+		wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			props: { appendInnerIcon: 'success' as IconType },
+		})
+		expect(wrapper.props('appendInnerIcon')).toBe('success')
+	})
+
+	it('should update icon when validation state changes with warning', async () => {
+		wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			props: { appendInnerIcon: 'warning' as IconType },
+		})
+		expect(wrapper.props('appendInnerIcon')).toBe('warning')
+	})
+
+	it('should update icon when validation state changes with error', async () => {
+		wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			props: { appendInnerIcon: 'error' as IconType },
+		})
+		expect(wrapper.props('appendInnerIcon')).toBe('error')
+	})
+
+	it('should update icon when validation state changes with success', async () => {
+		wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			props: { appendInnerIcon: 'success' as IconType },
+		})
+		expect(wrapper.props('appendInnerIcon')).toBe('success')
+	})
+
+	it('emits prepend-icon-click event when prepend icon is clicked', async () => {
+		const wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			props: { prependIcon: 'info' as IconType },
+		})
+
+		await wrapper.vm.$nextTick()
+		const prependIcon = wrapper.findComponent(VIcon)
+		expect(prependIcon.exists()).toBe(true)
+		await prependIcon.trigger('click')
+		await wrapper.vm.$nextTick()
+		expect(wrapper.emitted('prepend-icon-click')).toBeTruthy()
+	})
+
+	it('emits append-icon-click event when append icon is clicked', async () => {
+		const wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			props: { appendIcon: 'info' as IconType },
 		})
 
-		expect(wrapper.html()).toMatchSnapshot()
+		await wrapper.vm.$nextTick()
+		const appendIcon = wrapper.findComponent(VIcon)
+		expect(appendIcon.exists()).toBe(true)
+		await appendIcon.trigger('click')
+		await wrapper.vm.$nextTick()
+		expect(wrapper.emitted('append-icon-click')).toBeTruthy()
 	})
 
-	it('returns error color for appendInnerIcon when value is error', () => {
-		const wrapper = factory({ appendInnerIcon: 'error' })
-		expect(wrapper.vm.appendInnerIconColor).toBe('error')
+	it('shows validation error message', async () => {
+		const wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			props: {
+				required: true,
+				label: 'Test Field',
+			},
+		})
+		await wrapper.find('input').trigger('blur')
+		await wrapper.vm.$nextTick()
+		expect(wrapper.find('.v-messages').text()).toContain('Le champ Test Field est requis')
 	})
 
-	it('returns success color for appendInnerIcon when value is success', () => {
-		const wrapper = factory({ appendInnerIcon: 'success' })
-		expect(wrapper.vm.appendInnerIconColor).toBe('success')
+	it('validates field with custom rules', async () => {
+		const customRule = {
+			type: 'custom',
+			options: {
+				validate: (value: string) => value.length > 2,
+				message: 'Test error message',
+			},
+		}
+
+		wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			props: { customRules: [customRule] },
+		})
+
+		await wrapper.setProps({ modelValue: 'ab' })
+		await wrapper.find('input').trigger('blur')
+		await wrapper.vm.$nextTick()
+
+		const messages = wrapper.find('.v-messages')
+		expect(messages.text()).toContain('Test error message')
+	})
+
+	it('validates field with custom warning rules', async () => {
+		const warningRule = {
+			type: 'custom',
+			options: {
+				validate: (value: string) => value.length <= 3,
+				message: 'Test warning message',
+				isWarning: true,
+			},
+		}
+
+		const wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			props: {
+				modelValue: 'test',
+				customWarningRules: [warningRule],
+				showSuccessMessages: true,
+				label: 'Test Field',
+			},
+		})
+
+		await wrapper.vm.$nextTick()
+		await wrapper.find('input').trigger('blur')
+		await wrapper.vm.$nextTick()
+
+		const messages = wrapper.find('.v-messages')
+		expect(messages.exists()).toBe(true)
+		expect(messages.text()).toContain('Attention : Test Field peut contenir une erreur')
 	})
 
-	it('returns default color for appendInnerIcon when value is info', () => {
-		const wrapper = factory({ appendInnerIcon: 'info' })
-		expect(wrapper.vm.appendInnerIconColor).toBe('black')
+	it('maintains input value without validation rules', async () => {
+		wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+		})
+		const input = wrapper.find('input')
+
+		await input.setValue('test value')
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['test value'])
 	})
 
-	it('returns default color for appendInnerIcon when value is undefined', () => {
-		const wrapper = factory({ appendInnerIcon: undefined })
-		expect(wrapper.vm.appendInnerIconColor).toBe('black')
+	it('validates field immediately when isValidateOnBlur is false', async () => {
+		const customRule = {
+			type: 'custom',
+			options: {
+				validate: (value: string) => value.length > 2,
+				message: 'Test error message',
+			},
+		}
+
+		wrapper = mount(SyTextField, {
+			global: { plugins: [vuetify] },
+			props: {
+				customRules: [customRule],
+				isValidateOnBlur: false,
+			},
+		})
+
+		await wrapper.setProps({ modelValue: 'ab' })
+		await wrapper.vm.$nextTick()
+
+		const messages = wrapper.find('.v-messages')
+		expect(messages.text()).toContain('Test error message')
+
+		// Vérifie que l'erreur disparaît quand la valeur devient valide
+		await wrapper.setProps({ modelValue: 'abc' })
+		await wrapper.vm.$nextTick()
+
+		expect(messages.text()).not.toContain('Test error message')
 	})
 })

package/src/components/Customs/SyTextField/tests/__snapshots__/SyTextField.spec.ts.snap

@@ -1,58 +1,56 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SyTextField > matches snapshot 1`] = `
-"<div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field">
-  <div class="v-input__prepend"><i class="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z mdi v-icon notranslate v-theme--light v-icon--size-default text-error v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="custom label - bouton info"></i>
-    <!---->
-  </div>
+"<div data-v-8f0b2baf="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--error v-text-field error-field">
+  <!---->
   <div class="v-input__control">
-    <div class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-filled v-theme--light v-locale--is-ltr">
+    <div class="v-field v-field--appended v-field--center-affix v-field--error v-field--prepended v-field--variant-outlined v-theme--light v-locale--is-ltr">
       <div class="v-field__overlay"></div>
       <div class="v-field__loader">
         <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
           <!---->
-          <div class="v-progress-linear__background bg-primary" style="opacity: NaN;"></div>
-          <div class="v-progress-linear__buffer bg-primary" style="opacity: NaN; width: 0%;"></div>
+          <div class="v-progress-linear__background bg-error" style="opacity: NaN;"></div>
+          <div class="v-progress-linear__buffer bg-error" style="opacity: NaN; width: 0%;"></div>
           <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
             <div class="v-progress-linear__indeterminate">
-              <div class="v-progress-linear__indeterminate long bg-primary"></div>
-              <div class="v-progress-linear__indeterminate short bg-primary"></div>
+              <div class="v-progress-linear__indeterminate long bg-error"></div>
+              <div class="v-progress-linear__indeterminate short bg-error"></div>
             </div>
           </transition-stub>
           <!---->
         </div>
       </div>
       <div class="v-field__prepend-inner">
-        <!----><i class="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16 mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true" aria-label="custom label - bouton warning"></i>
-        <hr class="v-divider v-divider--vertical v-theme--light text-primary mt-4 pa-1" style="height: 25px; border-right-width: 2px; --v-border-opacity: 1;" aria-orientation="vertical" role="separator">
+        <!---->
+        <!--v-if-->
+        <!--v-if-->
       </div>
-      <div class="v-field__field" data-no-activator=""><label class="v-label v-field-label v-field-label--floating" aria-hidden="true" for="input-0">
-          <!---->custom label
-        </label><label class="v-label v-field-label" for="input-0">
+      <div class="v-field__field" data-no-activator="">
+        <!----><label class="v-label v-field-label" for="input-0">
           <!---->custom label
         </label>
-        <!----><input size="1" type="text" id="input-0" aria-describedby="input-0-messages" aria-label="custom label" display-asterisk="false" no-icon="false" class="v-field__input">
+        <!----><input size="1" type="text" id="input-0" aria-describedby="input-0-messages" aria-label="custom label" display-asterisk="false" no-icon="false" class="v-field__input" value="">
         <!---->
       </div>
-      <transition-stub name="expand-x-transition" appear="false" persisted="false" css="true">
-        <div class="v-field__clearable" style="display: none;"><i class="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="Clear custom label"></i></div>
-      </transition-stub>
-      <div class="v-field__append-inner">
-        <!--v-if--><i class="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z mdi v-icon notranslate v-theme--light v-icon--size-default text-error error-icon" aria-hidden="true" aria-label="custom label - bouton error"></i>
+      <!---->
+      <div class="v-field__append-inner"><i data-v-8f0b2baf="" class="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i>
+        <!--v-if-->
         <!---->
       </div>
       <div class="v-field__outline">
-        <!---->
+        <div class="v-field__outline__start"></div>
+        <div class="v-field__outline__notch"><label class="v-label v-field-label v-field-label--floating" aria-hidden="true" for="input-0">
+            <!---->custom label
+          </label></div>
+        <div class="v-field__outline__end"></div>
         <!---->
       </div>
     </div>
   </div>
-  <div class="v-input__append">
-    <!----><i class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-error v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="custom label - bouton success"></i>
-  </div>
+  <!---->
   <div id="input-0-messages" class="v-input__details" role="alert" aria-live="polite">
     <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages">
-      <!---->
+      <div class="v-messages__message">Test error message</div>
     </transition-group-stub>
     <!---->
   </div>

package/src/components/Customs/SyTextField/types.d.ts

@@ -1,3 +1,4 @@
 export type IconType = 'info' | 'success' | 'warning' | 'error' | 'close' | 'calendar' | undefined
 export type VariantStyle = 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'underlined'
 export type ColorType = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error'
+export type ValidateOnType = 'eager' | 'lazy' | 'blur' | 'input' | 'submit' | 'invalid-input' | 'blur lazy' | 'input lazy' | 'submit lazy' | 'invalid-input lazy' | 'blur eager' | 'input eager' | 'submit eager' | 'invalid-input eager' | 'lazy blur' | 'lazy input' | 'lazy submit' | 'lazy invalid-input' | 'eager blur' | 'eager input' | 'eager submit' | 'eager invalid-input' | undefined

package/src/components/DatePicker/DatePicker.mdx

@@ -5,7 +5,11 @@ import * as DatePickerStories from "./DatePicker.stories.ts";
 
 # DatePicker
 
-Le composant `DatePicker` est un champ qui permet de sélectionner une date via un calendrier, avec une option pour sélectionner une plage de dates.
+Le composant `DatePicker` est disponible en deux variantes :
+- La version avec un calendrier interactif pour sélectionner une date ou un range,
+- La version (avec la prop `no-calendar`) qui propose uniquement un champ de saisie textuelle pour entrer la date manuellement et permettre aux robots de la renseigner automatiquement.
+
+Nous ferons évoluer le composant pour qu'il propose les 2 en même temps.
 
 <Canvas story={{height: '550px'}} of={DatePickerStories.Default}/>
 
@@ -112,6 +116,27 @@ Les séparateurs peuvent être `/`, `-` ou `.`
 - **Description** : Active la sélection d'une plage de dates
 - **Défaut** : `false`
 
+### noCalendar
+- **Type** : `boolean`
+- **Description** : Désactive l\'affichage du calendrier (saisie manuelle uniquement), elle permet les copier coller et le passage de robots.
+- **Défaut** : `false`
+
+## Utilisation de noCalendar
+
+L'option `noCalendar` est particulièrement utile dans les cas suivants :
+
+### Cas d'utilisation
+- **Saisie rapide** : Permet aux utilisateurs de saisir directement une date sans avoir à naviguer dans un calendrier
+- **Copier-coller** : Facilite le copier-coller de dates depuis d'autres sources
+- **Automatisation** : Compatible avec les tests automatisés et les robots qui doivent interagir avec le champ de date
+- **Accessibilité** : Offre une alternative pour les utilisateurs qui préfèrent ou doivent utiliser le clavier
+
+### Bonnes pratiques
+- Toujours spécifier le format de date attendu via la prop `format` pour guider l'utilisateur
+- Utiliser la prop `placeholder` pour indiquer le format de saisie attendu
+- Combiner avec la prop `required` si le champ est obligatoire
+- Penser à ajouter des règles de validation personnalisées si nécessaire
+
 ## Apparence
 
 ### displayIcon
@@ -129,6 +154,17 @@ Les séparateurs peuvent être `/`, `-` ou `.`
 - **Description** : Masque toutes les icônes
 - **Défaut** : `false`
 
+### Exemple
+```vue
+<DatePicker
+  v-model="date"
+  no-calendar
+  format="DD/MM/YYYY"
+  placeholder="JJ/MM/AAAA"
+  required
+/>
+```
+
 ## Validation
 
 ### customRules