@cnamts/synapse 1.0.11 → 1.0.13

package/src/components/Amelipro/AmeliproCheckboxGroup/{tests → __tests__}/__snapshots__/AmeliproCheckboxGroup.spec.ts.snap

@@ -1,12 +1,14 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`AmeliproCheckboxGroup > render correctly 1`] = `
-<div id="my-checkbox-group-id-container">
+exports[`AmeliproCheckboxGroup > Snapshots > renders the component with all properties filled in 1`] = `
+<div id="modified-unique-id-container">
   <div class="
+    align-md-start
     amelipro-checkbox-group
-    classic
     d-flex
     flex-column
+    flex-md-row
+    pills
   ">
     <div class="
       align-center
@@ -18,37 +20,49 @@ exports[`AmeliproCheckboxGroup > render correctly 1`] = `
         class="
           amelipro-checkbox-group__label
           d-inline-flex
-          mb-1
+          margin-label
+          mb-0
+          mb-md-4
         "
-        id="my-checkbox-group-id"
+        id="modified-unique-id"
       >
-        Libellé du groupe
-        <!-- v-if -->
-        <!-- v-if -->
+        Modified group label
+        <span
+          aria-hidden="true"
+          class="d-inline-flex"
+        >
+          &nbsp;*
+        </span>
+        <span class="d-sr-only">
+          &nbsp;Champ obligatoire
+        </span>
       </p>
     </div>
     <div
-      aria-labelledby="my-checkbox-group-id"
-      aria-required="false"
-      class="amelipro-checkbox-group__wrapper"
+      aria-disabled="true"
+      aria-labelledby="modified-unique-id"
+      aria-required="true"
+      class="
+        amelipro-checkbox-group__wrapper
+        mt-2
+      "
       role="group"
     >
       <ul
         class="
           amelipro-checkbox-group__list
           d-flex
-          flex-column
           flex-wrap
           list-style-none
         "
-        id="my-checkbox-group-id-list"
+        id="modified-unique-id-list"
       >
         <li
           class="
             amelipro-checkbox-group__item
-            mb-4
+            mb-2
           "
-          id="my-checkbox-group-id-item-0"
+          id="modified-unique-id-item-0"
         >
           <div class="
             align-center
@@ -56,28 +70,31 @@ exports[`AmeliproCheckboxGroup > render correctly 1`] = `
             d-flex
           ">
             <div
-              aria-checked="true"
+              aria-checked="false"
+              aria-describedby="Modified item description 1"
               aria-disabled="true"
               class="
                 align-center
                 amelipro-checkbox-group__item-input
                 d-inline-flex
                 flex-row
+                mr-0
                 mr-2
+                mr-md-2
                 text-body-1
               "
-              id="my-checkbox-group-id-input-0"
+              id="modified-unique-id-input-0"
               role="checkbox"
               tabindex="-1"
             >
               <span
                 class="
                   checkbox-label
-                  text-ap-grey
+                  text-ap-grey-darken-1
                 "
-                id="my-checkbox-group-id-label-text-0"
+                id="modified-unique-id-label-text-0"
               >
-                1
+                Modified item label 1
               </span>
             </div>
           </div>
@@ -86,9 +103,9 @@ exports[`AmeliproCheckboxGroup > render correctly 1`] = `
         <li
           class="
             amelipro-checkbox-group__item
-            mb-4
+            mb-2
           "
-          id="my-checkbox-group-id-item-1"
+          id="modified-unique-id-item-1"
         >
           <div class="
             align-center
@@ -96,68 +113,31 @@ exports[`AmeliproCheckboxGroup > render correctly 1`] = `
             d-flex
           ">
             <div
-              aria-checked="false"
-              aria-describedby="ma-tooltip"
+              aria-checked="true"
+              aria-describedby="Modified item description 2"
               aria-disabled="true"
               class="
                 align-center
                 amelipro-checkbox-group__item-input
                 d-inline-flex
                 flex-row
+                mr-0
                 mr-2
+                mr-md-2
                 text-body-1
               "
-              id="my-checkbox-group-id-input-1"
+              id="modified-unique-id-input-1"
               role="checkbox"
               tabindex="-1"
-            >
-              <span
-                class="
-                  checkbox-label
-                  text-ap-grey
-                "
-                id="my-checkbox-group-id-label-text-1"
-              >
-                2
-              </span>
-            </div>
-          </div>
-          <!-- v-if -->
-        </li>
-        <li
-          class="
-            amelipro-checkbox-group__item
-            mb-4
-          "
-          id="my-checkbox-group-id-item-2"
-        >
-          <div class="
-            align-center
-            amelipro-checkbox-group__item__wrapper
-            d-flex
-          ">
-            <div
-              aria-checked="false"
-              class="
-                align-center
-                amelipro-checkbox-group__item-input
-                d-inline-flex
-                flex-row
-                mr-2
-                text-body-1
-              "
-              id="my-checkbox-group-id-input-2"
-              role="checkbox"
-              tabindex="0"
             >
               <span
                 class="
                   checkbox-label
                   text-ap-grey-darken-1
                 "
-                id="my-checkbox-group-id-label-text-2"
+                id="modified-unique-id-label-text-1"
               >
-                3
+                Modified item label 2
               </span>
             </div>
           </div>
@@ -166,9 +146,9 @@ exports[`AmeliproCheckboxGroup > render correctly 1`] = `
         <li
           class="
             amelipro-checkbox-group__item
-            mb-4
+            mb-2
           "
-          id="my-checkbox-group-id-item-3"
+          id="modified-unique-id-item-2"
         >
           <div class="
             align-center
@@ -176,38 +156,92 @@ exports[`AmeliproCheckboxGroup > render correctly 1`] = `
             d-flex
           ">
             <div
-              aria-checked="false"
+              aria-checked="true"
+              aria-describedby="Modified item description 3"
+              aria-disabled="true"
               class="
                 align-center
                 amelipro-checkbox-group__item-input
                 d-inline-flex
                 flex-row
+                mr-0
                 mr-2
+                mr-md-2
                 text-body-1
               "
-              id="my-checkbox-group-id-input-3"
+              id="modified-unique-id-input-2"
               role="checkbox"
-              tabindex="0"
+              tabindex="-1"
             >
               <span
                 class="
                   checkbox-label
                   text-ap-grey-darken-1
                 "
-                id="my-checkbox-group-id-label-text-3"
+                id="modified-unique-id-label-text-2"
               >
-                4
+                Modified item label 3
               </span>
             </div>
           </div>
           <!-- v-if -->
         </li>
+      </ul>
+    </div>
+  </div>
+  <!-- v-if -->
+</div>
+`;
+
+exports[`AmeliproCheckboxGroup > Snapshots > renders the component with only required properties filled in 1`] = `
+<div id="required-unique-id-container">
+  <div class="
+    amelipro-checkbox-group
+    classic
+    d-flex
+    flex-column
+  ">
+    <div class="
+      align-center
+      amelipro-checkbox-group__label-wrapper
+      d-flex
+      mr-2
+    ">
+      <p
+        class="
+          amelipro-checkbox-group__label
+          d-inline-flex
+          mb-1
+        "
+        id="required-unique-id"
+      >
+        required-group-label
+        <!-- v-if -->
+        <!-- v-if -->
+      </p>
+    </div>
+    <div
+      aria-labelledby="required-unique-id"
+      aria-required="false"
+      class="amelipro-checkbox-group__wrapper"
+      role="group"
+    >
+      <ul
+        class="
+          amelipro-checkbox-group__list
+          d-flex
+          flex-column
+          flex-wrap
+          list-style-none
+        "
+        id="required-unique-id-list"
+      >
         <li
           class="
             amelipro-checkbox-group__item
             mb-4
           "
-          id="my-checkbox-group-id-item-4"
+          id="required-unique-id-item-0"
         >
           <div class="
             align-center
@@ -215,7 +249,7 @@ exports[`AmeliproCheckboxGroup > render correctly 1`] = `
             d-flex
           ">
             <div
-              aria-checked="false"
+              aria-checked="true"
               class="
                 align-center
                 amelipro-checkbox-group__item-input
@@ -224,7 +258,7 @@ exports[`AmeliproCheckboxGroup > render correctly 1`] = `
                 mr-2
                 text-body-1
               "
-              id="my-checkbox-group-id-input-4"
+              id="required-unique-id-input-0"
               role="checkbox"
               tabindex="0"
             >
@@ -233,9 +267,9 @@ exports[`AmeliproCheckboxGroup > render correctly 1`] = `
                   checkbox-label
                   text-ap-grey-darken-1
                 "
-                id="my-checkbox-group-id-label-text-4"
+                id="required-unique-id-label-text-0"
               >
-                5
+                Required item label
               </span>
             </div>
           </div>

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

@@ -0,0 +1,92 @@
+import { VueWrapper, mount, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import AmeliproChips from '../AmeliproChips.vue'
+import { AmeliproIconBtn } from '@/components'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { ExpectedPropOptions } from '@tests/types'
+import TestHelper from '@tests/helpers/TestHelper'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproChips> = {
+	text: {
+		type: String,
+		required: true,
+	},
+	uniqueId: {
+		type: String,
+		required: true,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproChips> => ({
+	text: 'Required text',
+	uniqueId: 'required-unique-id',
+})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproChips> => ({
+	text: 'Modified text',
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproChips)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproChips', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproChips>>
+
+		describe('root', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproChips, { props: requiredPropValues() })
+			})
+
+			it('prop uniqueId sets attribute id', async () => {
+				expect(vueWrapper.attributes('id')).toBe(testHelper.default('uniqueId'))
+
+				const { uniqueId } = modifiedPropValues()
+				await vueWrapper.setProps({ uniqueId })
+				expect(vueWrapper.attributes('id')).toBe(testHelper.modified('uniqueId'))
+			})
+		})
+	})
+
+	describe('Setting props should update props or attributes of inner components', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproChips>>
+
+		describe('AmeliproIconBtn', () => {
+			beforeEach(() => {
+				vueWrapper = shallowMount(AmeliproChips, { props: requiredPropValues() })
+			})
+
+			it('prop text sets prop btnLabel & attribute title', async () => {
+				expect(vueWrapper.findComponent(AmeliproIconBtn).props('btnLabel')).toBe(`supprimer ${testHelper.default('text')}`)
+				expect(vueWrapper.findComponent(AmeliproIconBtn).attributes('title')).toBe(`supprimer ${testHelper.default('text')}`)
+
+				const { text } = modifiedPropValues()
+				await vueWrapper.setProps({ text })
+				expect(vueWrapper.findComponent(AmeliproIconBtn).props('btnLabel')).toBe(`supprimer ${testHelper.modified('text')}`)
+				expect(vueWrapper.findComponent(AmeliproIconBtn).attributes('title')).toBe(`supprimer ${testHelper.modified('text')}`)
+			})
+		})
+	})
+
+	describe('Events', () => {
+		it('emit click on click', async () => {
+			const wrapper = mount(AmeliproChips, { props: modifiedPropValues() })
+			expect(wrapper.emitted('click')).toBeUndefined()
+			await wrapper.findComponent(AmeliproIconBtn).trigger('click')
+			expect(wrapper.emitted('click')).toStrictEqual([[testHelper.modified('uniqueId')]])
+		})
+	})
+})

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

@@ -0,0 +1,81 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproChips > Snapshots > renders the component with all properties filled in 1`] = `
+<div
+  class="
+    amelipro-chips
+    d-inline-block
+  "
+  id="modified-unique-id"
+>
+  <p class="
+    amelipro-chips__text
+    d-inline-block
+    mb-0
+  ">
+    <span class="truncate-text">
+      Modified text
+    </span>
+  </p>
+  <amelipro-icon-btn-stub
+    badge="false"
+    bordered="false"
+    btnlabel="supprimer Modified text"
+    class="
+      amelipro-chips__btn
+      ml-4
+    "
+    icon="closeNoCircle"
+    iconbgcolor="transparent"
+    iconcolor="ap-blue-darken-1"
+    iconhoverbgcolor="transparent"
+    iconhovercolor="ap-blue-darken-2"
+    large="true"
+    medium="false"
+    small="false"
+    title="supprimer Modified text"
+    uniqueid="modified-unique-id-btn"
+    xlarge="false"
+  ></amelipro-icon-btn-stub>
+</div>
+`;
+
+exports[`AmeliproChips > Snapshots > renders the component with only required properties filled in 1`] = `
+<div
+  class="
+    amelipro-chips
+    d-inline-block
+  "
+  id="required-unique-id"
+>
+  <p class="
+    amelipro-chips__text
+    d-inline-block
+    mb-0
+  ">
+    <span class="truncate-text">
+      Required text
+    </span>
+  </p>
+  <amelipro-icon-btn-stub
+    badge="false"
+    bordered="false"
+    btnlabel="supprimer Required text"
+    class="
+      amelipro-chips__btn
+      ml-4
+    "
+    icon="closeNoCircle"
+    iconbgcolor="transparent"
+    iconcolor="ap-blue-darken-1"
+    iconhoverbgcolor="transparent"
+    iconhovercolor="ap-blue-darken-2"
+    large="true"
+    medium="false"
+    small="false"
+    title="supprimer Required text"
+    uniqueid="required-unique-id-btn"
+    xlarge="false"
+  ></amelipro-icon-btn-stub>
+</div>
+`;