@cnamts/synapse 1.0.12 → 1.0.14

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

@@ -0,0 +1,248 @@
+import { VueWrapper, mount, shallowMount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import type { AmeliproStep } from '../types'
+import AmeliproStepBtn from '../AmeliproStepBtn/AmeliproStepBtn.vue'
+import { AmeliproStepper } from '@/components'
+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'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproStepper> = {
+	centered: {
+		type: Boolean,
+		default: false,
+	},
+	finalStepBtn: {
+		type: String,
+		default: 'Transmettre',
+	},
+	hideBackBtn: {
+		type: Boolean,
+		default: false,
+	},
+	items: {
+		type: Array as PropType<AmeliproStep[]>,
+		default: () => [],
+	},
+	manualChangeStep: {
+		type: Boolean,
+		default: false,
+	},
+	nextBtnLabel: {
+		type: String,
+		default: 'Suivant',
+	},
+	noDefaultStyle: {
+		type: Boolean,
+		default: false,
+	},
+	previousBtnLabel: {
+		type: String,
+		default: 'Précédent',
+	},
+	uniqueId: {
+		type: String,
+		default: undefined,
+	},
+	value: {
+		type: Number,
+		default: 0,
+	},
+}
+
+const steps = (): AmeliproStep[] => [
+	{
+		disabled: false,
+		label: 'etape 1',
+		titleDisabled: false,
+	},
+	{
+		disabled: false,
+		label: 'etape 2',
+		titleDisabled: false,
+	},
+	{
+		disabled: false,
+		label: 'etape 3',
+		titleDisabled: false,
+	},
+]
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproStepper> => ({})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproStepper> => ({
+	centered: true,
+	finalStepBtn: 'Modified final step',
+	hideBackBtn: true,
+	items: [
+		{
+			disabled: false,
+			label: 'Modified step label 1',
+			titleDisabled: false,
+		},
+		{
+			disabled: false,
+			label: 'Modified step label 2',
+			titleDisabled: false,
+		},
+		{
+			disabled: false,
+			label: 'Modified step label 3',
+			titleDisabled: false,
+		},
+	],
+	manualChangeStep: true,
+	nextBtnLabel: 'Modified next label',
+	noDefaultStyle: true,
+	previousBtnLabel: 'Modified previous label',
+	uniqueId: 'modified-unique-id',
+	value: 1,
+})
+
+const testHelper = new TestHelper(AmeliproStepper)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproStepper', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	const displayWrapper = mount(DisplayTestComponent)
+
+	describe('Setting props should update props or attributes of inner tags', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproStepper>>
+		displayWrapper.vm.setMdAndUp(true)
+
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproStepper, { props: requiredPropValues() })
+		})
+
+		afterEach(() => {
+			displayWrapper.vm.resetDefaults()
+		})
+
+		it('prop centered sets list class', async () => {
+			expect(vueWrapper.find('.amelipro-stepper__list').classes('justify-center')).toBe(testHelper.default('centered'))
+			await vueWrapper.setProps({ centered: testHelper.modified('centered') })
+			expect(vueWrapper.find('.amelipro-stepper__list').classes('justify-center')).toBe(testHelper.modified('centered'))
+		})
+
+		it('prop finalStepBtn sets button text of final step', async () => {
+			vueWrapper = mount(AmeliproStepper, {
+				props: {
+					...requiredPropValues(),
+					items: testHelper.modified('items'),
+					value: 2,
+				},
+			})
+			expect(vueWrapper.find('.amelipro-stepper__btn--final').text()).toBe(testHelper.default('finalStepBtn'))
+			await vueWrapper.setProps({ finalStepBtn: testHelper.modified('finalStepBtn') })
+			expect(vueWrapper.find('.amelipro-stepper__btn--final').text()).toBe(testHelper.modified('finalStepBtn'))
+		})
+
+		it('prop hideBackBtn sets visibility of back button', async () => {
+			vueWrapper = shallowMount(AmeliproStepper, {
+				props: {
+					...requiredPropValues(),
+					items: testHelper.modified('items'),
+					value: 1,
+				},
+			})
+			expect(vueWrapper.find('.amelipro-stepper__btn--previous').exists()).toBe(!testHelper.default('hideBackBtn'))
+			await vueWrapper.setProps({ hideBackBtn: testHelper.modified('hideBackBtn') })
+			expect(vueWrapper.find('.amelipro-stepper__btn--previous').exists()).toBe(!testHelper.modified('hideBackBtn'))
+		})
+
+		it('prop items sets step list', async () => {
+			expect(vueWrapper.findAll('.amelipro-stepper__item').length).toBe(testHelper.default('items').length)
+			await vueWrapper.setProps({ items: testHelper.modified('items') })
+			expect(vueWrapper.findAll('.amelipro-stepper__item').length).toBe(testHelper.modified('items').length)
+		})
+
+		it('prop nextBtnLabel sets label of the Next button', async () => {
+			vueWrapper = mount(AmeliproStepper, {
+				props: {
+					...requiredPropValues(),
+					items: testHelper.modified('items'),
+				},
+			})
+			expect(vueWrapper.find('.amelipro-stepper__btn--next').text()).toBe(testHelper.default('nextBtnLabel'))
+			await vueWrapper.setProps({ nextBtnLabel: testHelper.modified('nextBtnLabel') })
+			expect(vueWrapper.find('.amelipro-stepper__btn--next').text()).toBe(testHelper.modified('nextBtnLabel'))
+		})
+
+		it('prop noDefaultStyle sets the use of default content class', async () => {
+			expect(vueWrapper.find('.amelipro-stepper__content').classes('amelipro-stepper__content--default')).toBe(!testHelper.default('noDefaultStyle'))
+			await vueWrapper.setProps({ noDefaultStyle: testHelper.modified('noDefaultStyle') })
+			expect(vueWrapper.find('.amelipro-stepper__content').classes('amelipro-stepper__content--default')).toBe(!testHelper.modified('noDefaultStyle'))
+		})
+
+		it('prop previousBtnLabel sets label of the Previous button', async () => {
+			vueWrapper = mount(AmeliproStepper, {
+				props: {
+					...requiredPropValues(),
+					items: testHelper.modified('items'),
+					value: 2,
+				},
+			})
+			expect(vueWrapper.find('.amelipro-stepper__btn--previous').text()).toBe(testHelper.default('previousBtnLabel'))
+			await vueWrapper.setProps({ previousBtnLabel: testHelper.modified('previousBtnLabel') })
+			expect(vueWrapper.find('.amelipro-stepper__btn--previous').text()).toBe(testHelper.modified('previousBtnLabel'))
+		})
+	})
+
+	describe('Events', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproStepper>>
+
+		beforeEach(() => {
+			vueWrapper = mount(AmeliproStepper, {
+				props: {
+					...requiredPropValues(),
+					items: steps(),
+				},
+			})
+		})
+
+		it('emits "next-step" event when next button is clicked', async () => {
+			expect(vueWrapper.emitted('next-step')).toBeUndefined()
+
+			await vueWrapper.find('.amelipro-stepper__btn--next').trigger('click')
+			expect(vueWrapper.emitted('next-step')).toStrictEqual([[1]])
+		})
+
+		it('emits "previous-step" event when previous button is clicked', async () => {
+			expect(vueWrapper.emitted('previous-step')).toBeUndefined()
+
+			await vueWrapper.setProps({ value: 1 })
+			await vueWrapper.find('.amelipro-stepper__btn--previous').trigger('click')
+			expect(vueWrapper.emitted('previous-step')).toStrictEqual([[0]])
+		})
+
+		it('emits "change-step" event when a step is clicked', async () => {
+			expect(vueWrapper.emitted('change-step')).toBeUndefined()
+
+			await vueWrapper.setProps({ value: 1 })
+			expect(vueWrapper.findAllComponents(AmeliproStepBtn).at(0)?.exists()).toBe(true)
+			await vueWrapper.findAllComponents(AmeliproStepBtn).at(0)?.find('button').trigger('click')
+			expect(vueWrapper.emitted('change-step')).toStrictEqual([[0]])
+		})
+
+		it('emits "submit" event when final step is clicked', async () => {
+			expect(vueWrapper.emitted('submit')).toBeUndefined()
+
+			await vueWrapper.setProps({ value: 2 })
+			await vueWrapper.find('.amelipro-stepper__btn--final').trigger('click')
+			expect(vueWrapper.emitted('submit')).toStrictEqual([[]])
+		})
+	})
+})

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

@@ -0,0 +1,179 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproStepper > Snapshots > renders the component with all properties filled in 1`] = `
+<div
+  class="amelipro-stepper"
+  id="modified-unique-id-container"
+>
+  <!-- desktop version -->
+  <div
+    class="amelipro-stepper__headings--desktop"
+    id="modified-unique-id-container"
+  >
+    <ol
+      class="
+        align-end
+        amelipro-stepper__list
+        d-flex
+        flex-row
+        flex-wrap
+        justify-center
+        list-style-none
+      "
+      id="modified-unique-id-step-list"
+      role="tablist"
+    >
+      <li
+        class="amelipro-stepper__item"
+        id="modified-unique-id-step-item-0"
+      >
+        <amelipro-step-btn-stub
+          disabled="false"
+          isactive="false"
+          uniqueid="modified-unique-id-step-btn-0"
+        ></amelipro-step-btn-stub>
+      </li>
+      <li
+        class="amelipro-stepper__item"
+        id="modified-unique-id-step-item-1"
+      >
+        <amelipro-step-btn-stub
+          disabled="false"
+          isactive="true"
+          uniqueid="modified-unique-id-step-btn-1"
+        ></amelipro-step-btn-stub>
+      </li>
+      <li
+        class="amelipro-stepper__item"
+        id="modified-unique-id-step-item-2"
+      >
+        <amelipro-step-btn-stub
+          disabled="false"
+          isactive="false"
+          uniqueid="modified-unique-id-step-btn-2"
+        ></amelipro-step-btn-stub>
+      </li>
+    </ol>
+  </div>
+  <div
+    class="
+      amelipro-stepper__content
+      ap-white
+    "
+    id="modified-unique-id-current-step-content"
+  ></div>
+  <div
+    class="
+      align-center
+      amelipro-stepper__actions
+      d-flex
+      flex-column
+      flex-sm-row
+      justify-sm-space-between
+      mt-4
+    "
+    id="modified-unique-id-footer"
+  >
+    <div class="
+      d-flex
+      d-sm-inline-flex
+      flex-column
+      flex-sm-row
+      next-step-btn__wrapper
+      order-sm-1
+    ">
+      <!-- v-if -->
+      <amelipro-btn-stub
+        badge="false"
+        badgebgcolor="ap-pink"
+        badgecolor="ap-white"
+        bordered="false"
+        class="
+          amelipro-stepper__btn--next
+          order-sm-1
+        "
+        color="ap-blue-darken-1"
+        disabled="false"
+        hovercolor="ap-blue-darken-2"
+        hoverunderline="false"
+        iconbgcolor="transparent"
+        iconbordered="false"
+        iconleft="false"
+        infoblock="false"
+        minheight="2.5rem"
+        size="60px"
+        text="false"
+        textcolor="ap-white"
+        type="button"
+        underline="false"
+        uniqueid="modified-unique-id-footer-next-btn"
+      ></amelipro-btn-stub>
+      <!-- v-if -->
+    </div>
+    <div class="
+      d-flex
+      flex-column
+      flex-sm-row
+      justify-start
+      w-100
+    ">
+      <div></div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AmeliproStepper > Snapshots > renders the component with only required properties filled in 1`] = `
+<div class="amelipro-stepper">
+  <!-- desktop version -->
+  <div class="amelipro-stepper__headings--desktop">
+    <ol
+      class="
+        align-end
+        amelipro-stepper__list
+        d-flex
+        flex-row
+        flex-wrap
+        list-style-none
+      "
+      role="tablist"
+    ></ol>
+  </div>
+  <div class="
+    amelipro-stepper__content
+    amelipro-stepper__content--default
+    ap-white
+  "></div>
+  <div class="
+    align-center
+    amelipro-stepper__actions
+    d-flex
+    flex-column
+    flex-sm-row
+    justify-sm-end
+    mt-4
+  ">
+    <div class="
+      d-flex
+      d-sm-inline-flex
+      flex-column
+      flex-sm-row
+      next-step-btn__wrapper
+      order-sm-1
+    ">
+      <!-- v-if -->
+      <!-- v-if -->
+      <!-- v-if -->
+    </div>
+    <div class="
+      d-flex
+      flex-column
+      flex-sm-row
+      justify-start
+      w-100
+    ">
+      <div></div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/Amelipro/AmeliproTable/AmeliproTable.stories.ts

@@ -3,7 +3,8 @@ import AmeliproMessage from '../AmeliproMessage/AmeliproMessage.vue'
 import AmeliproTable from './AmeliproTable.vue'
 import type { AmeliproTableHeader } from './types'
 import type { IDataListItem } from '../types'
-import { ref, computed } from 'vue'
+import { computed, ref } from 'vue'
+
 const meta = {
 	argTypes: {
 		'`item-${headers[cellIndex].name}`': { description: 'Slot généré automatiquement pour chaque colonne (`name` nom de la colonne dans headers) vous devez y bind la ligne, pour permettre de renseigner autres chose que des données textuelles si besoin. Le contenu du slot apparaît seulement si la valeur de la cellule concernée est `undefined`.' },
@@ -610,10 +611,10 @@ export const PaginationEtTri: Story = {
 		uniqueId: 'table-pagination-tri',
 		itemsToDisplayDesktop: 2,
 		itemsToDisplayMobile: 1,
-		sortSelectDefaultValue: 'name-desc',
+		sortSelectDefaultValue: 'desc',
 		sortSelectItems: [
-			{ title: 'Nom croissant', value: 'name-asc' },
-			{ title: 'Nom décroissant', value: 'name-desc' },
+			{ title: 'Nom croissant', value: 'asc' },
+			{ title: 'Nom décroissant', value: 'desc' },
 		],
 		sortSelectLabel: 'Trier par',
 		sortSelectPlaceholder: 'Choisir un tri',
@@ -632,10 +633,10 @@ export const PaginationEtTri: Story = {
         unique-id="table-pagination-tri"
         :items-to-display-desktop="2"
         :items-to-display-mobile="1"
-		sort-select-default-value="name-desc"
+		sort-select-default-value="name"
         :sort-select-items="[
-            { title: 'Nom croissant', value: 'name-asc' },
-            { title: 'Nom décroissant', value: 'name-desc' }
+            { title: 'Nom croissant', value: 'asc' },
+            { title: 'Nom décroissant', value: 'desc' }
         ]"
         sort-select-label="Trier par"
         sort-select-placeholder="Choisir un tri"
@@ -671,10 +672,10 @@ const sortValue = ref('name-asc')
 
 const sortedDataList = computed(() => {
 	const list = [...(args.dataList ?? [])]
-	if (sortValue.value === 'name-asc') {
+	if (sortValue.value === 'asc') {
 		return list.sort((a, b) => (String(a.name ?? '')).localeCompare(String(b.name ?? '')))
 	}
-	if (sortValue.value === 'name-desc') {
+	if (sortValue.value === 'desc') {
 		return list.sort((a, b) => (String(b.name ?? '')).localeCompare(String(a.name ?? '')))
 	}
 	return list
@@ -692,7 +693,7 @@ function onSortAsc(event: Event, header: string) {
 
 function onSortDesc(event: Event, header: string) {
 	if (header === 'name') {
-		sortValue.value = 'name-desc'
+		sortValue.value = 'desc'
 	}
 }
 </script>`,
@@ -705,10 +706,10 @@ function onSortDesc(event: Event, header: string) {
 			const sortValue = ref('name-asc')
 			const sortedDataList = computed(() => {
 				const list = [...(args.dataList ?? [])]
-				if (sortValue.value === 'name-asc') {
+				if (sortValue.value === 'asc') {
 					return list.sort((a, b) => (String(a.name ?? '')).localeCompare(String(b.name ?? '')))
 				}
-				if (sortValue.value === 'name-desc') {
+				if (sortValue.value === 'desc') {
 					return list.sort((a, b) => (String(b.name ?? '')).localeCompare(String(a.name ?? '')))
 				}
 				return list
@@ -725,7 +726,7 @@ function onSortDesc(event: Event, header: string) {
 
 			function onSortDesc(header: string) {
 				if (header === 'name') {
-					sortValue.value = 'name-desc'
+					sortValue.value = 'desc'
 				}
 			}
 			return { args, sortedDataList, onSortChange, onSortAsc, onSortDesc }

package/src/components/Amelipro/AmeliproTable/AmeliproTable.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 	import type { AmeliproTableCell, AmeliproTableHeader } from './types'
 	import type { IDataListItem, IndexedObject } from '../types'
-	import { type PropType, computed, onMounted, onUpdated, ref, watch } from 'vue'
+	import { computed, onMounted, onUpdated, type PropType, ref, watch } from 'vue'
 	import AmeliproIconBtn from '../AmeliproIconBtn/AmeliproIconBtn.vue'
 	import AmeliproPagination from '../AmeliproPagination/AmeliproPagination.vue'
 	import AmeliproSelect from '../AmeliproSelect/AmeliproSelect.vue'
@@ -191,6 +191,7 @@
 			currentPage.value = 1
 		}
 	}
+	watch(sortSelectModel, emitSortSelectChange, { immediate: true })
 </script>
 
 <template>

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

@@ -58,8 +58,9 @@ exports[`AmeliproTable > render correctly 1`] = `
           w-100
         ">
           <div class="
-            align-start
+            align-baseline
             d-inline-flex
+            mb-1
           ">
             <label
               class="
@@ -302,7 +303,10 @@ exports[`AmeliproTable > render correctly 1`] = `
                     data-no-activator=""
                   >
                     <span
-                      class="d-sr-only"
+                      class="
+                        amelipro-btn__label
+                        d-sr-only
+                      "
                       id="amelipro-table-id-table-header-cell-0-asc-sort-btn-btn-label"
                     >
                       tri asc
@@ -384,7 +388,10 @@ exports[`AmeliproTable > render correctly 1`] = `
                     data-no-activator=""
                   >
                     <span
-                      class="d-sr-only"
+                      class="
+                        amelipro-btn__label
+                        d-sr-only
+                      "
                       id="amelipro-table-id-table-header-cell-0-desc-sort-btn-btn-label"
                     >
                       tri desc

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

@@ -0,0 +1,129 @@
+import { VueWrapper, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import AmeliproTabBtn from '../AmeliproTabBtn.vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { ExpectedPropOptions } from '@tests/types'
+import TestHelper from '@tests/helpers/TestHelper'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproTabBtn> = {
+	controls: {
+		type: String,
+		required: true,
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+	notification: {
+		type: Number,
+		default: undefined,
+	},
+	pills: {
+		type: Boolean,
+		default: false,
+	},
+	selected: {
+		type: Boolean,
+		default: false,
+	},
+	tabindex: {
+		type: Number,
+		required: true,
+	},
+	uniqueId: {
+		type: String,
+		required: true,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproTabBtn> => ({
+	controls: 'required-controls',
+	tabindex: 1,
+	uniqueId: 'required-unique-id',
+})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproTabBtn> => ({
+	controls: 'modified-controls',
+	disabled: true,
+	notification: 1,
+	pills: true,
+	selected: true,
+	tabindex: 0,
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproTabBtn)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproTabBtn', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update props or attributes of inner tags', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproTabBtn>>
+
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproTabBtn, { props: requiredPropValues() })
+		})
+
+		it('prop controls sets attribute aria-controls', async () => {
+			expect(vueWrapper.find('.amelipro-tab__btn').attributes('aria-controls')).toBe(testHelper.default('controls'))
+			await vueWrapper.setProps({ controls: testHelper.modified('controls') })
+			expect(vueWrapper.find('.amelipro-tab__btn').attributes('aria-controls')).toBe(testHelper.modified('controls'))
+		})
+
+		it('prop disabled sets attribute & class disabled', async () => {
+			expect(vueWrapper.find('.amelipro-tab__btn').attributes('disabled')).toBeUndefined()
+			expect(vueWrapper.find('.amelipro-tab__btn').classes('disabled')).toBe(testHelper.default('disabled'))
+			await vueWrapper.setProps({ disabled: testHelper.modified('disabled') })
+			expect(vueWrapper.find('.amelipro-tab__btn').attributes('disabled')).toBe('')
+			expect(vueWrapper.find('.amelipro-tab__btn').classes('disabled')).toBe(testHelper.modified('disabled'))
+		})
+
+		it('prop notification sets notification content', async () => {
+			expect(vueWrapper.find('.amelipro-tab__btn-notification').exists()).toBe(false)
+			await vueWrapper.setProps({ notification: testHelper.modified('notification') })
+			expect(vueWrapper.find('.amelipro-tab__btn-notification').exists()).toBe(true)
+			expect(vueWrapper.find('.amelipro-tab__btn-notification').text()).toBe(String(testHelper.modified('notification')))
+		})
+
+		it('prop pills sets button class & style', async () => {
+			expect(vueWrapper.find('.amelipro-tab__btn').classes()).toEqual([
+				'amelipro-tab__btn',
+				'px-4',
+				'py-2',
+				'text-uppercase',
+			])
+			expect(vueWrapper.find('.amelipro-tab__btn').attributes('style')).toBe('background-color: #E6F6FC; border: 1px solid #DDDEDE; color: #00749C;')
+
+			await vueWrapper.setProps({ pills: testHelper.modified('pills') })
+			expect(vueWrapper.find('.amelipro-tab__btn').classes()).toEqual([
+				'amelipro-tab__btn',
+				'mr-2',
+				'amelipro-tab__btn--pills',
+			])
+			expect(vueWrapper.find('.amelipro-tab__btn').attributes('style')).toBe('background-color: #FFFFFF; border: 1px solid #00749C; color: #00749C; margin-bottom: 8px; position: relative;')
+		})
+
+		it('prop selected sets button style', async () => {
+			expect(vueWrapper.find('.amelipro-tab__btn').attributes('style')).toBe('background-color: #E6F6FC; border: 1px solid #DDDEDE; color: #00749C;')
+			await vueWrapper.setProps({ selected: testHelper.modified('selected') })
+			expect(vueWrapper.find('.amelipro-tab__btn').attributes('style')).toBe('background-color: #00749C; border: 1px solid #00749C; color: #FFFFFF;')
+		})
+
+		it('prop tabindex sets attribute aria-tabindex', async () => {
+			expect(vueWrapper.find('.amelipro-tab__btn').attributes('tabindex')).toBe(String(testHelper.default('tabindex')))
+			await vueWrapper.setProps({ tabindex: testHelper.modified('tabindex') })
+			expect(vueWrapper.find('.amelipro-tab__btn').attributes('tabindex')).toBe(String(testHelper.modified('tabindex')))
+		})
+	})
+})