@cnamts/synapse 1.0.13 → 1.0.15

package/src/components/Amelipro/AmeliproTabs/AmeliproTabBtn/__tests__/__snapshots__/AmeliproTabBtn.spec.ts.snap

@@ -0,0 +1,81 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproTabBtn > Snapshots > renders the component with all properties filled in 1`] = `
+<button
+  aria-controls="modified-controls"
+  aria-selected="true"
+  class="
+    amelipro-tab__btn
+    amelipro-tab__btn--pills
+    disabled
+    mr-2
+    selected
+  "
+  disabled=""
+  id="modified-unique-id"
+  role="tab"
+  style="
+    background-color: #FFFFFF;
+    border: 1px solid #00749C;
+    color: #00749C;
+    margin-bottom: 8px;
+    position: relative;
+  "
+  tabindex="0"
+  type="button"
+>
+  <span
+    class="
+      align-center
+      amelipro-tab__btn__content
+      d-flex
+    "
+    id="modified-unique-id-notification-content"
+  >
+    <span
+      class="
+        amelipro-tab__btn-notification
+        ap-white--text
+        d-block
+        ml-4
+      "
+      id="modified-unique-id-notification-text"
+    >
+      1
+    </span>
+  </span>
+</button>
+`;
+
+exports[`AmeliproTabBtn > Snapshots > renders the component with only required properties filled in 1`] = `
+<button
+  aria-controls="required-controls"
+  aria-selected="false"
+  class="
+    amelipro-tab__btn
+    px-4
+    py-2
+    text-uppercase
+  "
+  id="required-unique-id"
+  role="tab"
+  style="
+    background-color: #E6F6FC;
+    border: 1px solid #DDDEDE;
+    color: #00749C;
+  "
+  tabindex="1"
+  type="button"
+>
+  <span
+    class="
+      align-center
+      amelipro-tab__btn__content
+      d-flex
+    "
+    id="required-unique-id-notification-content"
+  >
+    <!-- v-if -->
+  </span>
+</button>
+`;

package/src/components/Amelipro/AmeliproTabs/AmeliproTabs.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 	import type { AmeliproTab, AmeliproTabsSelect } from './types'
-	import { type PropType, computed, onMounted, onUpdated, ref, watch } from 'vue'
+	import { computed, onMounted, onUpdated, type PropType, ref, watch } from 'vue'
 	import AmeliproSelect from '../AmeliproSelect/AmeliproSelect.vue'
 	import AmeliproTabBtn from './AmeliproTabBtn/AmeliproTabBtn.vue'
 	import type { SelectItem } from '../AmeliproSelect/types'
@@ -207,7 +207,7 @@
 					:id="uniqueId"
 					:aria-label="ariaLabel"
 					:aria-labelledby="ariaLabelledby"
-					class="d-flex flex-column flex-sm-row align-center align-sm-end flex-wrap justify-center justify-sm-start amelipro-tabs__btn-group__wrapper"
+					class="d-flex flex-column flex-sm-row align-center flex-nowrap justify-center justify-sm-start amelipro-tabs__btn-group__wrapper"
 					role="tablist"
 				>
 					<AmeliproTabBtn

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

@@ -0,0 +1,234 @@
+import { describe, expect, it } from 'vitest'
+import AmeliproSelect from '@/components/Amelipro/AmeliproSelect/AmeliproSelect.vue'
+import type { AmeliproTab } from '../types'
+import AmeliproTabs from '../AmeliproTabs.vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import { DisplayTestComponent } from '@tests/helpers/utils'
+import type { ExpectedPropOptions } from '@tests/types'
+import type { PropType } from 'vue'
+import TestHelper from '@tests/helpers/TestHelper'
+import { mount } from '@vue/test-utils'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproTabs> = {
+	ariaLabel: {
+		type: String,
+		default: undefined,
+	},
+	ariaLabelledby: {
+		type: String,
+		default: undefined,
+	},
+	btnGroupClasses: {
+		type: String,
+		default: undefined,
+	},
+	items: {
+		type: Array as PropType<AmeliproTab[]>,
+		default: () => [],
+	},
+	noTabDefaultStyle: {
+		type: Boolean,
+		default: false,
+	},
+	pills: {
+		type: Boolean,
+		default: false,
+	},
+	uniqueId: {
+		type: String,
+		required: true,
+	},
+	value: {
+		type: Number,
+		default: 0,
+	},
+}
+
+const requiredPropValues = (): ComponentProps<typeof AmeliproTabs> => ({ uniqueId: 'required-unique-id' })
+
+const modifiedPropValues = (): ComponentProps<typeof AmeliproTabs> => ({
+	ariaLabel: 'Modified aria label',
+	ariaLabelledby: 'modified-aria-labelledby',
+	btnGroupClasses: 'modified-btn-group-classes',
+	items: [
+		{ disabled: false, label: 'Modified tab label 1' },
+		{ disabled: false, label: 'Modified tab label 2' },
+		{ disabled: false, label: 'Modified tab label 3', notification: 1 },
+	],
+	noTabDefaultStyle: true,
+	pills: true,
+	uniqueId: 'modified-unique-id',
+	value: 1,
+})
+
+const testHelper = new TestHelper(AmeliproTabs)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproTabs', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	const vueWrapper = mount(AmeliproTabs, {
+		autoAttach: true,
+		props: modifiedPropValues(),
+		stubs: { AmeliproSelect },
+	})
+
+	const displayWrapper = mount(DisplayTestComponent)
+
+	describe.skip('getters', () => {
+		it('test mobileItems', async () => {
+			displayWrapper.vm.setMdAndUp(false)
+			await vueWrapper.setProps({ pills: false })
+			await vueWrapper.find('#test-id-select-label').trigger('click')
+			expect(vueWrapper.findAll('[role="option"]').length).toStrictEqual(testHelper.modified('items').length)
+			displayWrapper.vm.setMdAndUp(true)
+		})
+	})
+
+	describe.skip('functions', () => {
+		it('test hideSelectLabel', async () => {
+			displayWrapper.vm.setMdAndUp(false)
+			await vueWrapper.setProps({ pills: false })
+			await vueWrapper.vm.$nextTick()
+			expect(vueWrapper.find('#test-id-select-label').classes('d-sr-only')).toBeTruthy()
+			displayWrapper.vm.setMdAndUp(true)
+		})
+
+		it('test setDefaultValues', async () => {
+			expect(vueWrapper.find('button[aria-controls="test-id-tab-panel-0"]').attributes('tabindex')).toStrictEqual('-1')
+			expect(vueWrapper.find('button[aria-controls="test-id-tab-panel-1"]').attributes('tabindex')).toStrictEqual('0')
+			expect(vueWrapper.find('button[aria-controls="test-id-tab-panel-2"]').attributes('tabindex')).toStrictEqual('-1')
+
+			expect(vueWrapper.find('#test-id-tab-panel-0').attributes('tabindex')).toStrictEqual('-1')
+			expect(vueWrapper.find('#test-id-tab-panel-1').attributes('tabindex')).toStrictEqual('0')
+			expect(vueWrapper.find('#test-id-tab-panel-2').attributes('tabindex')).toStrictEqual('-1')
+
+			await vueWrapper.setProps({ value: 0 })
+			await vueWrapper.vm.$nextTick()
+
+			expect(vueWrapper.find('button[aria-controls="test-id-tab-panel-0"]').attributes('tabindex')).toStrictEqual('0')
+			expect(vueWrapper.find('button[aria-controls="test-id-tab-panel-1"]').attributes('tabindex')).toStrictEqual('-1')
+			expect(vueWrapper.find('button[aria-controls="test-id-tab-panel-2"]').attributes('tabindex')).toStrictEqual('-1')
+
+			expect(vueWrapper.find('#test-id-tab-panel-0').attributes('tabindex')).toStrictEqual('0')
+			expect(vueWrapper.find('#test-id-tab-panel-1').attributes('tabindex')).toStrictEqual('-1')
+			expect(vueWrapper.find('#test-id-tab-panel-2').attributes('tabindex')).toStrictEqual('-1')
+		})
+
+		it('test onClick', async () => {
+			await vueWrapper.setProps({ value: testHelper.modified('value') })
+			await vueWrapper.vm.$nextTick()
+			const btn1 = vueWrapper.find('button[aria-controls="test-id-tab-panel-0"]')
+			const btn2 = vueWrapper.find('button[aria-controls="test-id-tab-panel-1"]')
+			expect(btn1.attributes('tabindex')).toStrictEqual('-1')
+			expect(btn2.attributes('tabindex')).toStrictEqual('0')
+			expect(vueWrapper.emitted('change-tab')).toBeUndefined()
+			await btn1.trigger('click')
+			expect(btn1.attributes('tabindex')).toStrictEqual('0')
+			expect(btn2.attributes('tabindex')).toStrictEqual('-1')
+			expect(vueWrapper.emitted('change-tab')).toStrictEqual([[0]])
+		})
+
+		it('test pressLeft', async () => {
+			const wrapper2 = mount(AmeliproTabs, {
+				autoAttach: true,
+				props: {
+					...modifiedPropValues(),
+					value: 0,
+				},
+				stubs: { AmeliproSelect },
+			})
+			const btn1 = wrapper2.find('button[aria-controls="test-id-tab-panel-0"]')
+			const btn2 = wrapper2.find('button[aria-controls="test-id-tab-panel-1"]')
+			const btn3 = wrapper2.find('button[aria-controls="test-id-tab-panel-2"]')
+			expect(btn1.attributes('tabindex')).toStrictEqual('0')
+			expect(btn2.attributes('tabindex')).toStrictEqual('-1')
+			expect(btn3.attributes('tabindex')).toStrictEqual('-1')
+			expect(wrapper2.emitted('change-tab')).toBeUndefined()
+			await btn1.trigger('keyup.left')
+			expect(btn1.attributes('tabindex')).toStrictEqual('-1')
+			expect(btn2.attributes('tabindex')).toStrictEqual('-1')
+			expect(btn3.attributes('tabindex')).toStrictEqual('0')
+			expect(wrapper2.emitted('change-tab')).toStrictEqual([[2]])
+			expect(document.activeElement?.getAttribute('aria-controls')).toStrictEqual('test-id-tab-panel-2')
+			wrapper2.unmount()
+		})
+
+		it('test pressRight', async () => {
+			const wrapper3 = mount(AmeliproTabs, {
+				autoAttach: true,
+				props: {
+					...modifiedPropValues(),
+					value: 0,
+				},
+				stubs: { AmeliproSelect },
+			})
+			const btn1 = wrapper3.find('button[aria-controls="test-id-tab-panel-0"]')
+			const btn2 = wrapper3.find('button[aria-controls="test-id-tab-panel-1"]')
+			const btn3 = wrapper3.find('button[aria-controls="test-id-tab-panel-2"]')
+			expect(btn1.attributes('tabindex')).toStrictEqual('0')
+			expect(btn2.attributes('tabindex')).toStrictEqual('-1')
+			expect(btn3.attributes('tabindex')).toStrictEqual('-1')
+			expect(wrapper3.emitted('change-tab')).toBeUndefined()
+			await btn1.trigger('keyup.right')
+			expect(btn1.attributes('tabindex')).toStrictEqual('-1')
+			expect(btn2.attributes('tabindex')).toStrictEqual('0')
+			expect(btn3.attributes('tabindex')).toStrictEqual('-1')
+			expect(wrapper3.emitted('change-tab')).toStrictEqual([[1]])
+			expect(document.activeElement?.getAttribute('aria-controls')).toStrictEqual('test-id-tab-panel-1')
+			wrapper3.unmount()
+		})
+
+		it('test pressHome', async () => {
+			const wrapper4 = mount(AmeliproTabs, {
+				autoAttach: true,
+				props: modifiedPropValues(),
+				stubs: { AmeliproSelect },
+			})
+			const btn1 = wrapper4.find('button[aria-controls="test-id-tab-panel-0"]')
+			const btn2 = wrapper4.find('button[aria-controls="test-id-tab-panel-1"]')
+			const btn3 = wrapper4.find('button[aria-controls="test-id-tab-panel-2"]')
+			expect(btn1.attributes('tabindex')).toStrictEqual('-1')
+			expect(btn2.attributes('tabindex')).toStrictEqual('0')
+			expect(btn3.attributes('tabindex')).toStrictEqual('-1')
+			expect(wrapper4.emitted('change-tab')).toBeUndefined()
+			await btn1.trigger('keyup.home')
+			expect(btn1.attributes('tabindex')).toStrictEqual('0')
+			expect(btn2.attributes('tabindex')).toStrictEqual('-1')
+			expect(btn3.attributes('tabindex')).toStrictEqual('-1')
+			expect(wrapper4.emitted('change-tab')).toStrictEqual([[0]])
+			expect(document.activeElement?.getAttribute('aria-controls')).toStrictEqual('test-id-tab-panel-0')
+			wrapper4.unmount()
+		})
+
+		it('test pressEnd', async () => {
+			const wrapper5 = mount(AmeliproTabs, {
+				autoAttach: true,
+				props: modifiedPropValues(),
+				stubs: { AmeliproSelect },
+			})
+			const btn1 = wrapper5.find('button[aria-controls="test-id-tab-panel-0"]')
+			const btn2 = wrapper5.find('button[aria-controls="test-id-tab-panel-1"]')
+			const btn3 = wrapper5.find('button[aria-controls="test-id-tab-panel-2"]')
+			expect(btn1.attributes('tabindex')).toStrictEqual('-1')
+			expect(btn2.attributes('tabindex')).toStrictEqual('0')
+			expect(btn3.attributes('tabindex')).toStrictEqual('-1')
+			expect(wrapper5.emitted('change-tab')).toBeUndefined()
+			await btn1.trigger('keyup.end')
+			expect(btn1.attributes('tabindex')).toStrictEqual('-1')
+			expect(btn2.attributes('tabindex')).toStrictEqual('-1')
+			expect(btn3.attributes('tabindex')).toStrictEqual('0')
+			expect(wrapper5.emitted('change-tab')).toStrictEqual([[2]])
+			expect(document.activeElement?.getAttribute('aria-controls')).toStrictEqual('test-id-tab-panel-2')
+			wrapper5.unmount()
+		})
+	})
+})

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

@@ -0,0 +1,122 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproTabs > Snapshots > renders the component with all properties filled in 1`] = `
+<div
+  class="amelipro-tabs"
+  id="modified-unique-id-container"
+>
+  <div
+    class="amelipro-tabs--desktop"
+    id="modified-unique-id-desktop"
+  >
+    <div class="
+      amelipro-tabs__btn-group
+      modified-btn-group-classes
+    ">
+      <div
+        aria-label="Modified aria label"
+        aria-labelledby="modified-aria-labelledby"
+        class="
+          align-center
+          amelipro-tabs__btn-group__wrapper
+          d-flex
+          flex-column
+          flex-nowrap
+          flex-sm-row
+          justify-center
+          justify-sm-start
+        "
+        id="modified-unique-id"
+        role="tablist"
+      >
+        <amelipro-tab-btn-stub
+          class=""
+          controls="modified-unique-id-tab-panel-0"
+          disabled="false"
+          pills="true"
+          selected="false"
+          tabindex="-1"
+          uniqueid="modified-unique-id-tab-btn-0"
+        ></amelipro-tab-btn-stub>
+        <amelipro-tab-btn-stub
+          class=""
+          controls="modified-unique-id-tab-panel-1"
+          disabled="false"
+          pills="true"
+          selected="true"
+          tabindex="0"
+          uniqueid="modified-unique-id-tab-btn-1"
+        ></amelipro-tab-btn-stub>
+        <amelipro-tab-btn-stub
+          class=""
+          controls="modified-unique-id-tab-panel-2"
+          disabled="false"
+          notification="1"
+          pills="true"
+          selected="false"
+          tabindex="-1"
+          uniqueid="modified-unique-id-tab-btn-2"
+        ></amelipro-tab-btn-stub>
+      </div>
+    </div>
+    <div
+      class="
+        amelipro-tabs__tab
+        tabpanel
+      "
+      id="modified-unique-id-tab-panel-0"
+      role="tabpanel"
+      style="display: none;"
+      tabindex="-1"
+    ></div>
+    <div
+      class="
+        amelipro-tabs__tab
+        tabpanel
+      "
+      id="modified-unique-id-tab-panel-1"
+      role="tabpanel"
+      tabindex="0"
+    ></div>
+    <div
+      class="
+        amelipro-tabs__tab
+        tabpanel
+      "
+      id="modified-unique-id-tab-panel-2"
+      role="tabpanel"
+      style="display: none;"
+      tabindex="-1"
+    ></div>
+  </div>
+</div>
+`;
+
+exports[`AmeliproTabs > Snapshots > renders the component with only required properties filled in 1`] = `
+<div
+  class="amelipro-tabs"
+  id="required-unique-id-container"
+>
+  <div
+    class="amelipro-tabs--desktop"
+    id="required-unique-id-desktop"
+  >
+    <div class="amelipro-tabs__btn-group">
+      <div
+        class="
+          align-center
+          amelipro-tabs__btn-group__wrapper
+          d-flex
+          flex-column
+          flex-nowrap
+          flex-sm-row
+          justify-center
+          justify-sm-start
+        "
+        id="required-unique-id"
+        role="tablist"
+      ></div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/Amelipro/AmeliproTextArea/AmeliproTextArea.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 AmeliproMessage from '../AmeliproMessage/AmeliproMessage.vue'
 	import type { IndexedObject, ValidateOnType } from '../types'
 	import type { InputTextArea } from './types'
@@ -216,7 +216,7 @@
 		:style="globalFieldStyles"
 	>
 		<div
-			class="d-inline-flex align-start"
+			class="d-inline-flex align-baseline mb-1"
 			:class="labelClasses"
 		>
 			<label
@@ -238,7 +238,10 @@
 				</span>
 			</label>
 
-			<slot name="labelInfo" />
+			<slot
+				class="mb-1"
+				name="labelInfo"
+			/>
 		</div>
 
 		<VTextarea
@@ -303,7 +306,6 @@
 	}
 
 	.amelipro-textarea__label {
-		margin-bottom: 4px;
 		font-size: apTokens.$font-size-xs;
 		font-weight: apTokens.$label-font-weight;
 	}