@cnamts/synapse 1.0.13 → 1.0.15

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

@@ -1,16 +1,272 @@
-import { mount } from '@vue/test-utils'
-import { expect, describe, it } from 'vitest'
+import { VueWrapper, mount, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
 import AmeliproTextArea from '../AmeliproTextArea.vue'
+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 type { ValidateOnType } from '../../types'
+import type { ValidationRule } from '@/utils/rules/types'
 
-describe('AmeliproTextArea', () => {
-	it('render correctly', async () => {
-		const wrapper = mount(AmeliproTextArea, {
-			props: {
-				label: 'Mon label',
-				uniqueId: 'my-textarea-id',
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproTextArea> = {
+	ariaRequired: {
+		type: Boolean,
+		default: false,
+	},
+	classes: {
+		type: String,
+		default: undefined,
+	},
+	counter: {
+		type: Number,
+		default: 255,
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+	globalMaxWidth: {
+		type: String,
+		default: undefined,
+	},
+	globalMinWidth: {
+		type: String,
+		default: undefined,
+	},
+	globalWidth: {
+		type: String,
+		default: undefined,
+	},
+	horizontal: {
+		type: Boolean,
+		default: false,
+	},
+	inputMaxWidth: {
+		type: String,
+		default: undefined,
+	},
+	inputMinWidth: {
+		type: String,
+		default: undefined,
+	},
+	label: {
+		type: String,
+		required: true,
+	},
+	labelMaxWidth: {
+		type: String,
+		default: undefined,
+	},
+	labelMinWidth: {
+		type: String,
+		default: undefined,
+	},
+	modelValue: {
+		type: String,
+		default: undefined,
+	},
+	readonly: {
+		type: Boolean,
+		default: false,
+	},
+	rules: {
+		type: Array as PropType<ValidationRule[]>,
+		default: () => [],
+	},
+	uniqueId: {
+		type: String,
+		required: true,
+	},
+	validateOn: {
+		default: undefined,
+		type: String as PropType<ValidateOnType>,
+		validator(value: string): boolean {
+			return ['lazy', 'blur', 'input', 'submit', 'blur lazy', 'input lazy', 'submit lazy', 'lazy blur', 'lazy input', 'lazy submit'].includes(value.toLowerCase())
+		},
+	},
+}
+
+const requiredPropValues = (): ComponentProps<typeof AmeliproTextArea> => ({
+	label: 'Required label',
+	uniqueId: 'required-unique-id',
+})
+
+const modifiedPropValues = (): ComponentProps<typeof AmeliproTextArea> => ({
+	ariaRequired: true,
+	classes: 'modified-classes',
+	counter: 100,
+	disabled: true,
+	globalMaxWidth: '300px',
+	globalMinWidth: '100px',
+	globalWidth: '200px',
+	horizontal: true,
+	inputMaxWidth: '150px',
+	inputMinWidth: '50px',
+	label: 'Modified label',
+	labelMaxWidth: '120px',
+	labelMinWidth: '60px',
+	modelValue: 'Modified model value',
+	readonly: true,
+	rules: [() => true],
+	uniqueId: 'modified-unique-id',
+	validateOn: 'input',
+})
+
+const VTextareaStub = {
+	name: 'VTextarea',
+	inheritAttrs: false,
+	props: ['disabled', 'readonly', 'modelValue'],
+	template: `
+		<textarea
+			v-if="!$slots.append"
+			v-bind="$attrs"
+			:disabled="disabled"
+			:readonly="readonly"
+			:modelvalue="modelValue"
+		/>
+		<div v-else>
+			<textarea
+				v-bind="$attrs"
+				:disabled="disabled"
+				:readonly="readonly"
+				:modelvalue="modelValue"
+			/>
+			<slot name="append" />
+		</div>
+	`,
+}
+
+const testHelper = new TestHelper(AmeliproTextArea)
+testHelper
+	.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+	.setMountOptions({
+		global: {
+			stubs: {
+				VTextarea: VTextareaStub,
 			},
+		},
+	})
+
+describe('AmeliproTextArea', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproTextArea>>
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproTextArea, {
+				props: requiredPropValues(),
+				global: {
+					stubs: {
+						VTextarea: VTextareaStub,
+					},
+				},
+			})
+		})
+
+		it('prop uniqueId sets attribute id on root container', async () => {
+			expect(vueWrapper.attributes('id')).toBe(`${testHelper.default('uniqueId')}-container`)
+			const { uniqueId } = modifiedPropValues()
+			await vueWrapper.setProps({ uniqueId })
+			expect(vueWrapper.attributes('id')).toBe(`${testHelper.modified('uniqueId')}-container`)
 		})
 
-		expect(wrapper.html()).toMatchSnapshot()
+		it('prop label sets label text', async () => {
+			expect(vueWrapper.find('.amelipro-textarea__label').text()).toContain(testHelper.default('label'))
+			const { label } = modifiedPropValues()
+			await vueWrapper.setProps({ label })
+			expect(vueWrapper.find('.amelipro-textarea__label').text()).toContain(testHelper.modified('label'))
+		})
+	})
+
+	describe('Setting props should update props or attributes of inner components', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproTextArea>>
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproTextArea, {
+				props: requiredPropValues(),
+				global: {
+					stubs: {
+						VTextarea: VTextareaStub,
+					},
+				},
+			})
+		})
+
+		it('prop disabled sets prop disabled on VTextarea', async () => {
+			expect(vueWrapper.findComponent({ name: 'VTextarea' }).props('disabled')).toBe(testHelper.default('disabled'))
+			const { disabled } = modifiedPropValues()
+			await vueWrapper.setProps({ disabled })
+			expect(vueWrapper.findComponent({ name: 'VTextarea' }).props('disabled')).toBe(testHelper.modified('disabled'))
+		})
+
+		it('prop readonly sets prop readonly on VTextarea', async () => {
+			expect(vueWrapper.findComponent({ name: 'VTextarea' }).props('readonly')).toBe(testHelper.default('readonly'))
+			const { readonly } = modifiedPropValues()
+			await vueWrapper.setProps({ readonly })
+			expect(vueWrapper.findComponent({ name: 'VTextarea' }).props('readonly')).toBe(testHelper.modified('readonly'))
+		})
+	})
+
+	describe('Slots', () => {
+		it('displays slot content in labelInfo', () => {
+			const vueWrapper = shallowMount(AmeliproTextArea, {
+				props: requiredPropValues(),
+				slots: { labelInfo: '<div id="slot-content">Slot Content</div>' },
+				global: {
+					stubs: {
+						VTextarea: VTextareaStub,
+					},
+				},
+			})
+			expect(vueWrapper.find('#slot-content').text()).toBe('Slot Content')
+		})
+		it('displays slot content in append', () => {
+			const vueWrapper = mount(AmeliproTextArea, {
+				props: requiredPropValues(),
+				slots: { append: '<div id="append-content">Append Content</div>' },
+				global: {
+					stubs: {
+						VTextarea: VTextareaStub,
+					},
+				},
+			})
+			expect(vueWrapper.find('#append-content').text()).toBe('Append Content')
+		})
+	})
+
+	describe('Events', () => {
+		it('emits update:model-value on input change', async () => {
+			const vueWrapper = mount(AmeliproTextArea, {
+				props: requiredPropValues(),
+				global: {
+					stubs: {
+						VTextarea: VTextareaStub,
+					},
+				},
+			})
+			await vueWrapper.findComponent({ name: 'VTextarea' }).vm.$emit('update:modelValue', 'foo')
+			await vueWrapper.vm.$nextTick()
+			expect(vueWrapper.emitted('update:model-value')).toBeTruthy()
+		})
+		it('emits change on change event', async () => {
+			const vueWrapper = mount(AmeliproTextArea, {
+				props: requiredPropValues(),
+				global: {
+					stubs: {
+						VTextarea: VTextareaStub,
+					},
+				},
+			})
+			await vueWrapper.findComponent({ name: 'VTextarea' }).vm.$emit('change')
+			await vueWrapper.vm.$nextTick()
+			expect(vueWrapper.emitted('change')).toBeTruthy()
+		})
 	})
 })

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

@@ -1,181 +1,124 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`AmeliproTextArea > render correctly 1`] = `
+exports[`AmeliproTextArea > Snapshots > renders the component with all properties filled in 1`] = `
 <div
   class="
     amelipro-textarea
     d-flex
     flex-column
+    flex-md-row
+    modified-classes
+  "
+  id="modified-unique-id-container"
+  style="
+    margin-bottom: 12px;
+    max-width: 300px;
+    min-width: 100px;
+    width: 200px;
   "
-  id="my-textarea-id-container"
-  style="margin-bottom: 12px;"
 >
   <div class="
-    align-start
+    align-baseline
     d-inline-flex
+    mb-1
+    mr-md-2
+    mt-md-2
   ">
     <label
       class="
         amelipro-textarea__label
         mr-2
       "
-      for="my-textarea-id"
-      id="my-textarea-id-label"
+      for="modified-unique-id"
+      id="modified-unique-id-label"
+      style="
+        max-width: 120px;
+        min-width: 60px;
+      "
     >
-      Mon label
-      <!-- v-if -->
+      Modified label
+      <span>
+        <span aria-hidden="true">
+          &nbsp;*
+        </span>
+        <span class="d-sr-only">
+          &nbsp;Champ obligatoire
+        </span>
+      </span>
     </label>
   </div>
+  <textarea
+    aria-describedby="modified-unique-id-error"
+    aria-required="true"
+    auto-grow=""
+    bg-color="ap-grey-lighten-2"
+    class="amelipro-textarea-input"
+    color="ap-blue-darken-1"
+    counter="100"
+    disabled=""
+    id="modified-unique-id"
+    modelvalue="Modified model value"
+    readonly=""
+    rules="() => true,(value) => {
+    let valid;
+    if (Array.isArray(value)) {
+      valid = value.length !== 0;
+    } else if (typeof value === "string") {
+      valid = value.trim() !== "";
+    } else {
+      valid = value !== null && value !== void 0;
+    }
+    return valid || __vite_ssr_import_0__.ruleMessage(errorMessages, "default");
+  }"
+    style="
+      max-width: 150px;
+      min-width: 50px;
+      background-color: transparent;
+    "
+    validate-on="input"
+    variant="outlined"
+  ></textarea>
+</div>
+`;
+
+exports[`AmeliproTextArea > Snapshots > renders the component with only required properties filled in 1`] = `
+<div
+  class="
+    amelipro-textarea
+    d-flex
+    flex-column
+  "
+  id="required-unique-id-container"
+  style="margin-bottom: 12px;"
+>
   <div class="
-    amelipro-textarea-input
-    v-input
-    v-input--density-default
-    v-input--horizontal
-    v-locale--is-ltr
-    v-text-field
-    v-textarea
-    v-textarea--auto-grow
-    v-textarea--no-resize
-    v-theme--light
+    align-baseline
+    d-inline-flex
+    mb-1
   ">
-    <!---->
-    <div class="v-input__control">
-      <div class="
-        bg-ap-white
-        v-field
-        v-field--has-background
-        v-field--no-label
-        v-field--variant-outlined
-        v-locale--is-ltr
-        v-theme--light
-      ">
-        <div class="v-field__overlay"></div>
-        <div class="v-field__loader">
-          <div
-            aria-hidden="true"
-            aria-valuemax="100"
-            aria-valuemin="0"
-            class="
-              v-locale--is-ltr
-              v-progress-linear
-              v-theme--light
-            "
-            role="progressbar"
-            style="
-              top: 0px;
-              height: 0px;
-              --v-progress-linear-height: 2px;
-            "
-          >
-            <!---->
-            <div
-              class="
-                bg-ap-blue-darken-1
-                v-progress-linear__background
-              "
-              style="opacity: NaN;"
-            ></div>
-            <div
-              class="
-                bg-ap-blue-darken-1
-                v-progress-linear__buffer
-              "
-              style="
-                opacity: NaN;
-                width: 0%;
-              "
-            ></div>
-            <transition-stub
-              appear="false"
-              css="true"
-              name="fade-transition"
-              persisted="false"
-            >
-              <div class="v-progress-linear__indeterminate">
-                <div class="
-                  bg-ap-blue-darken-1
-                  long
-                  v-progress-linear__indeterminate
-                "></div>
-                <div class="
-                  bg-ap-blue-darken-1
-                  short
-                  v-progress-linear__indeterminate
-                "></div>
-              </div>
-            </transition-stub>
-            <!---->
-          </div>
-        </div>
-        <!---->
-        <div
-          class="v-field__field"
-          data-no-activator=""
-        >
-          <!---->
-          <!---->
-          <!---->
-          <textarea
-            aria-describedby="my-textarea-id-error"
-            aria-required="false"
-            class="v-field__input"
-            id="my-textarea-id"
-            rows="5"
-          ></textarea>
-          <textarea
-            aria-hidden="true"
-            class="
-              v-field__input
-              v-textarea__sizer
-            "
-            id="my-textarea-id-sizer"
-            readonly=""
-          ></textarea>
-          <!---->
-        </div>
-        <!---->
-        <!---->
-        <div class="v-field__outline">
-          <div class="v-field__outline__start"></div>
-          <!---->
-          <div class="v-field__outline__end"></div>
-          <!---->
-        </div>
-      </div>
-    </div>
-    <!---->
-    <div
-      aria-live="polite"
-      class="v-input__details"
-      id="my-textarea-id-messages"
-      role="alert"
+    <label
+      class="
+        amelipro-textarea__label
+        mr-2
+      "
+      for="required-unique-id"
+      id="required-unique-id-label"
     >
-      <transition-group-stub
-        appear="false"
-        class="v-messages"
-        css="true"
-        name="slide-y-transition"
-        persisted="false"
-        tag="div"
-      >
-        <!---->
-      </transition-group-stub>
-      <!---->
-      <span></span>
-      <transition-stub
-        appear="false"
-        css="true"
-        name="slide-y-transition"
-        persisted="false"
-      >
-        <div
-          class="v-counter"
-          style="display: none;"
-        >
-          0 / 255
-        </div>
-      </transition-stub>
-    </div>
+      Required label
+      <!-- v-if -->
+    </label>
   </div>
+  <textarea
+    aria-describedby="required-unique-id-error"
+    aria-required="false"
+    auto-grow=""
+    bg-color="ap-white"
+    class="amelipro-textarea-input"
+    color="ap-blue-darken-1"
+    counter="255"
+    id="required-unique-id"
+    rules=""
+    variant="outlined"
+  ></textarea>
 </div>
 `;

package/src/components/Amelipro/AmeliproTextField/AmeliproTextField.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-	/* eslint-disable vuejs-accessibility/label-has-for */
-	import { type PropType, computed, onMounted, ref } from 'vue'
+/* eslint-disable vuejs-accessibility/label-has-for */
+	import { computed, onMounted, type PropType, ref } from 'vue'
 	import type { IndexedObject, ValidateOnType } from '../types'
 	import AmeliproMessage from '../AmeliproMessage/AmeliproMessage.vue'
 	import type { InputTextField } from './types'
@@ -267,7 +267,7 @@
 			:class="fieldClasses"
 		>
 			<div
-				class="d-inline-flex align-start"
+				class="d-inline-flex align-baseline mb-1"
 				:class="labelClasses"
 			>
 				<label
@@ -289,7 +289,10 @@
 					</span>
 				</label>
 
-				<slot name="labelInfo" />
+				<slot
+					class="mb-1"
+					name="labelInfo"
+				/>
 			</div>
 
 			<VTextField
@@ -372,7 +375,6 @@
 	}
 
 	.amelipro-text-field__label {
-		margin-bottom: 4px;
 		font-size: apTokens.$font-size-xs;
 		font-weight: apTokens.$label-font-weight;
 	}