From 989dd653209bd55cf9df278a314a6c61bc05d088 Mon Sep 17 00:00:00 2001
From: Guillaume Lepoetre <guillaume.lepoetre@prestashop.com>
Date: Fri, 27 Oct 2023 16:48:13 +0200
Subject: [PATCH 01/14] feat: add data-test attribute

---
 .../components/accordion/src/accordion.ts     | 20 ++++++++
 .../components/accordion/src/accordion.vue    | 15 +++++-
 .../accordion/stories/accordion.stories.ts    | 15 ++++++
 packages/components/alert/src/alert.ts        | 15 ++++++
 packages/components/alert/src/alert.vue       |  6 ++-
 .../components/alert/stories/alert.stories.ts | 12 +++++
 packages/components/badge/src/badge.ts        |  5 ++
 packages/components/badge/src/badge.vue       |  6 ++-
 .../components/badge/stories/badge.stories.ts |  5 ++
 .../components/breadcrumb/src/breadcrumb.ts   |  3 +-
 .../components/breadcrumb/src/breadcrumb.vue  |  6 ++-
 .../breadcrumb/stories/breadcrumb.stories.ts  |  1 +
 packages/components/button/src/button.ts      | 15 ++++++
 packages/components/button/src/button.vue     |  3 ++
 .../button/stories/button.stories.ts          | 15 ++++++
 packages/components/checkbox/src/checkbox.ts  | 10 ++++
 packages/components/checkbox/src/checkbox.vue |  2 +
 .../checkbox/stories/checkbox.stories.ts      |  8 ++++
 packages/components/icon/src/icon.ts          |  5 ++
 packages/components/icon/src/icon.vue         |  7 ++-
 .../components/icon/stories/icon.stories.ts   |  4 ++
 packages/components/input/src/input.ts        | 10 ++++
 packages/components/input/src/input.vue       |  6 ++-
 .../components/input/stories/input.stories.ts |  8 ++++
 packages/components/label/src/label.ts        |  5 ++
 packages/components/label/src/label.vue       |  2 +-
 .../components/label/stories/label.stories.ts |  4 ++
 packages/components/link/src/link.ts          |  5 ++
 packages/components/link/src/link.vue         |  1 +
 .../components/link/stories/link.stories.ts   |  4 ++
 .../components/menu/src/menu-item-title.ts    |  8 +++-
 .../components/menu/src/menu-item-title.vue   |  2 +-
 .../menu/stories/menu-item-title.stories.ts   | 48 +++++++++++++++++++
 .../components/menu/stories/menu.stories.ts   |  2 +-
 packages/components/modal/src/modal.ts        | 25 ++++++++++
 packages/components/modal/src/modal.vue       |  8 +++-
 .../components/modal/stories/modal.stories.ts | 25 ++++++++++
 .../pagination/src/pagination-large.ts        | 15 ++++++
 .../pagination/src/pagination-large.vue       |  4 +-
 .../pagination/src/pagination-loader.ts       |  5 ++
 .../pagination/src/pagination-loader.vue      |  1 +
 .../pagination/src/pagination-medium.ts       | 15 ++++++
 .../pagination/src/pagination-medium.vue      |  4 +-
 .../pagination/src/pagination-mobile.ts       | 15 ++++++
 .../pagination/src/pagination-mobile.vue      |  4 +-
 .../pagination/src/pagination-small.ts        | 15 ++++++
 .../pagination/src/pagination-small.vue       |  4 +-
 .../components/pagination/src/pagination.ts   | 15 ++++++
 .../components/pagination/src/pagination.vue  | 13 +++++
 .../pagination/stories/pagination.stories.ts  | 36 ++++++++++++++
 .../progress-bar/src/progress-bar.ts          |  5 ++
 .../progress-bar/src/progress-bar.vue         |  1 +
 .../stories/progress-bar.stories.ts           |  6 +++
 .../src/progress-stepper-step.ts              | 15 ++++++
 .../src/progress-stepper-step.vue             |  8 +++-
 .../stories/progress-stepper-step.stories.ts  | 12 +++++
 packages/components/radio/src/radio.ts        | 10 ++++
 packages/components/radio/src/radio.vue       |  8 +++-
 .../components/radio/stories/radio.stories.ts | 10 ++++
 .../components/select/test/select.spec.ts     |  2 +-
 packages/components/tooltip/src/tooltip.ts    | 10 ++++
 packages/components/tooltip/src/tooltip.vue   |  2 +
 .../tooltip/stories/tooltip.stories.ts        |  8 ++++
 63 files changed, 563 insertions(+), 21 deletions(-)
 create mode 100644 packages/components/menu/stories/menu-item-title.stories.ts

diff --git a/packages/components/accordion/src/accordion.ts b/packages/components/accordion/src/accordion.ts
index 8c14194e..7ef6ac2f 100644
--- a/packages/components/accordion/src/accordion.ts
+++ b/packages/components/accordion/src/accordion.ts
@@ -7,21 +7,41 @@ export const accordionProps = buildProps({
     type: String,
     required: true,
   },
+  buttonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   title: {
     type: String,
     required: false,
     default: undefined,
   },
+  titleDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   subTitle: {
     type: String,
     required: false,
     default: undefined,
   },
+  subTitleDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   icon: {
     type: String,
     required: false,
     default: undefined,
   },
+  iconDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   disabled: {
     type: Boolean,
     required: false,
diff --git a/packages/components/accordion/src/accordion.vue b/packages/components/accordion/src/accordion.vue
index bebae64a..6657a4ad 100644
--- a/packages/components/accordion/src/accordion.vue
+++ b/packages/components/accordion/src/accordion.vue
@@ -11,6 +11,7 @@
       :aria-controls="id"
       class="puik-accordion__header"
       :disabled="disabled"
+      :data-test="buttonDataTest"
       @click="onClick"
     >
       <puik-icon
@@ -18,10 +19,20 @@
         class="puik-accordion__header__icon"
         :icon="icon"
         :font-size="24"
+        :data-test="iconDataTest"
       ></puik-icon>
       <div class="puik-accordion__header__content">
-        <div class="puik-accordion__header__content__title">{{ title }}</div>
-        <div v-if="subTitle" class="puik-accordion__header__content__sub-title">
+        <div
+          class="puik-accordion__header__content__title"
+          :data-test="titleDataTest"
+        >
+          {{ title }}
+        </div>
+        <div
+          v-if="subTitle"
+          class="puik-accordion__header__content__sub-title"
+          :data-test="subTitleDataTest"
+        >
           {{ subTitle }}
         </div>
       </div>
diff --git a/packages/components/accordion/stories/accordion.stories.ts b/packages/components/accordion/stories/accordion.stories.ts
index 9bd358e2..8d2a0d96 100644
--- a/packages/components/accordion/stories/accordion.stories.ts
+++ b/packages/components/accordion/stories/accordion.stories.ts
@@ -15,14 +15,26 @@ export default {
       control: 'text',
       description: 'Title displayed in the header',
     },
+    titleDataTest: {
+      control: 'text',
+      description: 'Set the data-test attribute for the title',
+    },
     subTitle: {
       control: 'text',
       description: 'Sub title displayed in the header',
     },
+    subTitleDataTest: {
+      control: 'text',
+      description: 'Set the data-test attribute for the sub title',
+    },
     icon: {
       control: 'text',
       description: 'Icon used in the header',
     },
+    iconDataTest: {
+      control: 'text',
+      description: 'Set the data-test attribute for the icon',
+    },
     disabled: {
       control: 'boolean',
       description: 'Set accordion disabled',
@@ -66,6 +78,9 @@ export const Default = {
     subTitle: 'Accordion subtitle',
     icon: 'home',
     disabled: false,
+    titleDataTest: '',
+    subTitleDataTest: '',
+    iconDataTest: '',
   },
 
   parameters: {
diff --git a/packages/components/alert/src/alert.ts b/packages/components/alert/src/alert.ts
index ac37d3a0..d81c172e 100644
--- a/packages/components/alert/src/alert.ts
+++ b/packages/components/alert/src/alert.ts
@@ -19,11 +19,21 @@ export const alertProps = buildProps({
     required: false,
     default: undefined,
   },
+  titleDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   description: {
     type: String,
     required: false,
     default: undefined,
   },
+  descriptionDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   variant: {
     type: String as PropType<PuikAlertVariant>,
     default: 'success',
@@ -37,6 +47,11 @@ export const alertProps = buildProps({
     required: false,
     default: undefined,
   },
+  buttonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   ariaLive: {
     type: String as PropType<'polite' | 'assertive'>,
     required: false,
diff --git a/packages/components/alert/src/alert.vue b/packages/components/alert/src/alert.vue
index 4cb775ba..5e842072 100644
--- a/packages/components/alert/src/alert.vue
+++ b/packages/components/alert/src/alert.vue
@@ -10,10 +10,13 @@
     <div class="puik-alert__content">
       <puik-icon :icon="icon" font-size="1.25rem" class="puik-alert__icon" />
       <div class="puik-alert__text">
-        <p v-if="title" class="puik-alert__title">{{ title }}</p>
+        <p v-if="title" class="puik-alert__title" :data-test="titleDataTest">
+          {{ title }}
+        </p>
         <span
           v-if="$slots.default || description"
           class="puik-alert__description"
+          :data-test="descriptionDataTest"
           ><slot>{{ description }}</slot></span
         >
       </div>
@@ -22,6 +25,7 @@
       v-if="buttonLabel"
       :variant="variant"
       class="puik-alert__button"
+      :button-data-test="buttonDataTest"
       @click="click"
     >
       {{ buttonLabel }}
diff --git a/packages/components/alert/stories/alert.stories.ts b/packages/components/alert/stories/alert.stories.ts
index 0f45a8b4..d0e349e7 100644
--- a/packages/components/alert/stories/alert.stories.ts
+++ b/packages/components/alert/stories/alert.stories.ts
@@ -44,6 +44,15 @@ export default {
       control: 'none',
       description: 'Set the alert description',
     },
+    titleDataTest: {
+      description: 'Set the data-test attribute for the title',
+    },
+    descriptionDataTest: {
+      description: 'Set the data-test attribute for the description',
+    },
+    buttonDataTest: {
+      description: 'Set the data-test attribute for the button',
+    },
   },
   args: {
     title: 'Title',
@@ -51,6 +60,9 @@ export default {
     variant: 'success',
     disableBorders: false,
     buttonLabel: 'Button',
+    titleDataTest: '',
+    descriptionDataTest: '',
+    buttonDataTest: '',
   },
 } as Meta
 
diff --git a/packages/components/badge/src/badge.ts b/packages/components/badge/src/badge.ts
index 04927ec2..26d6e333 100644
--- a/packages/components/badge/src/badge.ts
+++ b/packages/components/badge/src/badge.ts
@@ -17,6 +17,11 @@ export const badgeProps = buildProps({
     type: String as PropType<PuikBadgeVariant>,
     default: 'neutral',
   },
+  badgeDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type BadgeProps = ExtractPropTypes<typeof badgeProps>
diff --git a/packages/components/badge/src/badge.vue b/packages/components/badge/src/badge.vue
index 031efe10..888fde3f 100644
--- a/packages/components/badge/src/badge.vue
+++ b/packages/components/badge/src/badge.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="puik-badge" :class="[`puik-badge--${variant}`]">
+  <div
+    class="puik-badge"
+    :class="[`puik-badge--${variant}`]"
+    :data-test="badgeDataTest"
+  >
     <slot></slot>
   </div>
 </template>
diff --git a/packages/components/badge/stories/badge.stories.ts b/packages/components/badge/stories/badge.stories.ts
index 5ec5d5c7..b9c06ad5 100644
--- a/packages/components/badge/stories/badge.stories.ts
+++ b/packages/components/badge/stories/badge.stories.ts
@@ -25,10 +25,15 @@ export default {
         },
       },
     },
+    badgeDataTest: {
+      control: 'text',
+      description: 'Set the data-test attribute on the badge',
+    },
   },
   args: {
     default: 'Status',
     variant: 'neutral',
+    badgeDataTest: '',
   },
 } as Meta
 
diff --git a/packages/components/breadcrumb/src/breadcrumb.ts b/packages/components/breadcrumb/src/breadcrumb.ts
index 02f9e895..5bbe869c 100644
--- a/packages/components/breadcrumb/src/breadcrumb.ts
+++ b/packages/components/breadcrumb/src/breadcrumb.ts
@@ -7,7 +7,8 @@ export interface BreadcrumbItem {
   label: string
   to?: RouteLocationRaw
   href?: string
-  target?: string
+  target?: '_blank' | '_self' | '_parent' | '_top'
+  dataTest?: string
 }
 
 export const breadcrumbProps = buildProps({
diff --git a/packages/components/breadcrumb/src/breadcrumb.vue b/packages/components/breadcrumb/src/breadcrumb.vue
index f060fbd1..8d524d83 100644
--- a/packages/components/breadcrumb/src/breadcrumb.vue
+++ b/packages/components/breadcrumb/src/breadcrumb.vue
@@ -17,6 +17,7 @@
         :to="item.to"
         :href="item.href"
         :target="item.target"
+        :data-test="item.dataTest"
         size="sm"
       >
         {{ item.label }}
@@ -29,7 +30,10 @@
       ></PuikIcon>
     </div>
 
-    <div class="puik-breadcrumb__item--last">
+    <div
+      class="puik-breadcrumb__item--last"
+      :data-test="items[items.length - 1].dataTest"
+    >
       {{ items[items.length - 1].label }}
     </div>
   </nav>
diff --git a/packages/components/breadcrumb/stories/breadcrumb.stories.ts b/packages/components/breadcrumb/stories/breadcrumb.stories.ts
index 4b2459d6..9761907a 100644
--- a/packages/components/breadcrumb/stories/breadcrumb.stories.ts
+++ b/packages/components/breadcrumb/stories/breadcrumb.stories.ts
@@ -23,6 +23,7 @@ interface BreadBreadcrumbItem {
   to: string | undefined,
   href: string | undefined,
   target: '_blank' | '_self' | '_parent' | '_top' | undefined,
+  dataTest: string | undefined,
 }`,
         },
       },
diff --git a/packages/components/button/src/button.ts b/packages/components/button/src/button.ts
index 73db5e85..9c8a2fdf 100644
--- a/packages/components/button/src/button.ts
+++ b/packages/components/button/src/button.ts
@@ -48,11 +48,21 @@ export const buttonProps = buildProps({
     required: false,
     default: '',
   },
+  leftIconDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   rightIcon: {
     type: String,
     required: false,
     default: '',
   },
+  rightIconDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   to: {
     type: [Object, String] as PropType<RouteLocationRaw>,
     required: false,
@@ -68,6 +78,11 @@ export const buttonProps = buildProps({
     required: false,
     default: undefined,
   },
+  buttonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type ButtonProps = ExtractPropTypes<typeof buttonProps>
diff --git a/packages/components/button/src/button.vue b/packages/components/button/src/button.vue
index 9f70637a..828b9afc 100644
--- a/packages/components/button/src/button.vue
+++ b/packages/components/button/src/button.vue
@@ -10,6 +10,7 @@
       { 'puik-button--fluid': fluid },
     ]"
     :disabled="disabled"
+    :data-test="buttonDataTest"
     @click="setSelected"
   >
     <puik-icon
@@ -17,6 +18,7 @@
       :icon="leftIcon"
       :font-size="size !== 'sm' ? '1.25rem' : '1rem'"
       class="puik-button__left-icon"
+      :data-test="leftIconDataTest"
     />
     <slot></slot>
     <puik-icon
@@ -24,6 +26,7 @@
       :icon="rightIcon"
       :font-size="size !== 'sm' ? '1.25rem' : '1rem'"
       class="puik-button__right-icon"
+      :data-test="rightIconDataTest"
     />
   </component>
 </template>
diff --git a/packages/components/button/stories/button.stories.ts b/packages/components/button/stories/button.stories.ts
index 0406bdf0..401d5efe 100644
--- a/packages/components/button/stories/button.stories.ts
+++ b/packages/components/button/stories/button.stories.ts
@@ -71,6 +71,18 @@ export default {
       control: 'text',
       description: 'Set a link for the button (changes button to "a" html tag)',
     },
+    buttonDataTest: {
+      control: 'text',
+      description: 'Set a data-test attribute to the button',
+    },
+    leftIconDataTest: {
+      control: 'text',
+      description: 'Set a data-test attribute to the left icon',
+    },
+    rightIconDataTest: {
+      control: 'text',
+      description: 'Set a data-test attribute to the right icon',
+    },
   },
   args: {
     variant: 'primary',
@@ -82,6 +94,9 @@ export default {
     to: undefined,
     href: undefined,
     default: 'Add to cart',
+    buttonDataTest: '',
+    leftIconDataTest: '',
+    rightIconDataTest: '',
   },
 } as Meta
 
diff --git a/packages/components/checkbox/src/checkbox.ts b/packages/components/checkbox/src/checkbox.ts
index b443a474..e63526ca 100644
--- a/packages/components/checkbox/src/checkbox.ts
+++ b/packages/components/checkbox/src/checkbox.ts
@@ -12,6 +12,11 @@ export const checkboxProps = buildProps({
     required: false,
     default: undefined,
   },
+  labelDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   disabled: {
     type: Boolean,
     required: false,
@@ -22,6 +27,11 @@ export const checkboxProps = buildProps({
     required: false,
     default: false,
   },
+  inputDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type CheckboxProps = ExtractPropTypes<typeof checkboxProps>
diff --git a/packages/components/checkbox/src/checkbox.vue b/packages/components/checkbox/src/checkbox.vue
index aecc9ea4..e91fd61a 100644
--- a/packages/components/checkbox/src/checkbox.vue
+++ b/packages/components/checkbox/src/checkbox.vue
@@ -8,11 +8,13 @@
       type="checkbox"
       :indeterminate="indeterminate"
       :disabled="disabled"
+      :data-test="inputDataTest"
     />
     <label
       v-if="$slots.default || label"
       :for="id"
       class="puik-checkbox__label"
+      :data-test="labelDataTest"
     >
       <slot>{{ label }}</slot>
     </label>
diff --git a/packages/components/checkbox/stories/checkbox.stories.ts b/packages/components/checkbox/stories/checkbox.stories.ts
index c421eff8..636a2f7d 100644
--- a/packages/components/checkbox/stories/checkbox.stories.ts
+++ b/packages/components/checkbox/stories/checkbox.stories.ts
@@ -33,6 +33,12 @@ export default {
         },
       },
     },
+    inputDataTest: {
+      description: 'Set the input data-test attribute',
+    },
+    labelDataTest: {
+      description: 'Set the label data-test attribute',
+    },
   },
   args: {
     label: 'Label',
@@ -40,6 +46,8 @@ export default {
     indeterminate: false,
     disabled: false,
     modelValue: false,
+    inputDataTest: '',
+    labelDataTest: '',
   },
 } as Meta
 
diff --git a/packages/components/icon/src/icon.ts b/packages/components/icon/src/icon.ts
index 8ed7cc43..008b7611 100644
--- a/packages/components/icon/src/icon.ts
+++ b/packages/components/icon/src/icon.ts
@@ -7,6 +7,11 @@ export const iconProps = buildProps({
     type: String,
     required: true,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   nodeType: {
     type: String,
     default: 'div',
diff --git a/packages/components/icon/src/icon.vue b/packages/components/icon/src/icon.vue
index 22cd7bc0..6071cd73 100644
--- a/packages/components/icon/src/icon.vue
+++ b/packages/components/icon/src/icon.vue
@@ -1,5 +1,10 @@
 <template>
-  <component :is="nodeType" class="puik-icon" :style="style">
+  <component
+    :is="nodeType"
+    class="puik-icon"
+    :style="style"
+    :data-test="dataTest"
+  >
     {{ icon }}
   </component>
 </template>
diff --git a/packages/components/icon/stories/icon.stories.ts b/packages/components/icon/stories/icon.stories.ts
index a8b7e58c..4aaffbb6 100644
--- a/packages/components/icon/stories/icon.stories.ts
+++ b/packages/components/icon/stories/icon.stories.ts
@@ -31,6 +31,9 @@ export default {
         options: ['div', 'span'],
       },
     },
+    dataTest: {
+      description: 'Set the data-test attribute',
+    },
   },
 } as Meta
 
@@ -52,6 +55,7 @@ export const Default = {
     color: 'green',
     fontSize: 24,
     nodeType: 'span',
+    dataTest: '',
   },
 
   parameters: {
diff --git a/packages/components/input/src/input.ts b/packages/components/input/src/input.ts
index c64f5338..812a81b7 100644
--- a/packages/components/input/src/input.ts
+++ b/packages/components/input/src/input.ts
@@ -90,6 +90,16 @@ export const inputProps = buildProps({
     required: false,
     default: false,
   },
+  inputDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  errorTextDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type InputProps = ExtractPropTypes<typeof inputProps>
diff --git a/packages/components/input/src/input.vue b/packages/components/input/src/input.vue
index db774fbc..bbb031ce 100644
--- a/packages/components/input/src/input.vue
+++ b/packages/components/input/src/input.vue
@@ -17,6 +17,7 @@
         :min="type === 'number' ? min : undefined"
         :max="type === 'number' ? max : undefined"
         :step="type === 'number' ? step : undefined"
+        :data-test="inputDataTest"
         @focus="handleFocus"
         @blur="handleBlur"
       />
@@ -49,7 +50,10 @@
           class="puik-input__hint__error__icon"
           font-size="1.25rem"
         ></puik-icon>
-        <span class="puik-input__hint__error__text">
+        <span
+          class="puik-input__hint__error__text"
+          :data-test="errorTextDataTest"
+        >
           <slot name="error">{{ error }}</slot>
         </span>
       </div>
diff --git a/packages/components/input/stories/input.stories.ts b/packages/components/input/stories/input.stories.ts
index 5c2d25de..6e7bad25 100644
--- a/packages/components/input/stories/input.stories.ts
+++ b/packages/components/input/stories/input.stories.ts
@@ -93,6 +93,12 @@ export default {
       control: 'none',
       description: 'Append an icon or text to the input',
     },
+    inputDataTest: {
+      description: 'Set the data-test attribute on the input element',
+    },
+    errorTextDataTest: {
+      description: 'Set the data-test attribute on the error slot',
+    },
   },
 } as Meta
 
@@ -124,6 +130,8 @@ export const Default = {
     min: undefined,
     max: undefined,
     disabled: false,
+    inputDataTest: '',
+    errorTextDataTest: '',
   },
 
   parameters: {
diff --git a/packages/components/label/src/label.ts b/packages/components/label/src/label.ts
index 67b23ee8..4e25ff2a 100644
--- a/packages/components/label/src/label.ts
+++ b/packages/components/label/src/label.ts
@@ -2,6 +2,11 @@ import { buildProps } from '@puik/utils'
 import type { ExtractPropTypes } from 'vue'
 import type Label from './label.vue'
 export const labelProps = buildProps({
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   optional: {
     type: Boolean,
     required: false,
diff --git a/packages/components/label/src/label.vue b/packages/components/label/src/label.vue
index 69d5080b..a89c0d56 100644
--- a/packages/components/label/src/label.vue
+++ b/packages/components/label/src/label.vue
@@ -1,5 +1,5 @@
 <template>
-  <label class="puik-label" :for="props.for">
+  <label class="puik-label" :for="props.for" :data-test="dataTest">
     <slot></slot>
     <span v-if="required" class="puik-label--required">*</span>
     <span v-else-if="optional" class="puik-label--optional"
diff --git a/packages/components/label/stories/label.stories.ts b/packages/components/label/stories/label.stories.ts
index 59f8f91a..46815d0c 100644
--- a/packages/components/label/stories/label.stories.ts
+++ b/packages/components/label/stories/label.stories.ts
@@ -40,6 +40,9 @@ export default {
       control: 'text',
       description: 'Default slot to set label text',
     },
+    dataTest: {
+      description: 'Set the data-test attribute',
+    },
   },
 } as Meta
 
@@ -62,6 +65,7 @@ export const Default = {
     readonly: false,
     for: 'input',
     default: 'My Label',
+    dataTest: '',
   },
 
   parameters: {
diff --git a/packages/components/link/src/link.ts b/packages/components/link/src/link.ts
index 0d0d916f..e2b3afbe 100644
--- a/packages/components/link/src/link.ts
+++ b/packages/components/link/src/link.ts
@@ -34,6 +34,11 @@ export const linkProps = buildProps({
     required: false,
     default: undefined,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type LinkProps = ExtractPropTypes<typeof linkProps>
diff --git a/packages/components/link/src/link.vue b/packages/components/link/src/link.vue
index 54ee2b33..c298f39d 100644
--- a/packages/components/link/src/link.vue
+++ b/packages/components/link/src/link.vue
@@ -5,6 +5,7 @@
     :target="target"
     :title="title"
     :class="['puik-link', `puik-link--${size}`]"
+    :data-test="dataTest"
   >
     <slot></slot>
   </component>
diff --git a/packages/components/link/stories/link.stories.ts b/packages/components/link/stories/link.stories.ts
index 4093cfe0..b60e12c2 100644
--- a/packages/components/link/stories/link.stories.ts
+++ b/packages/components/link/stories/link.stories.ts
@@ -53,6 +53,9 @@ export default {
       control: 'text',
       description: 'Title displayed in tooltips then your cursor stay in link',
     },
+    dataTest: {
+      description: 'Set the data-test attribute',
+    },
   },
   args: {
     href: '#',
@@ -61,6 +64,7 @@ export default {
     default: "I'm a cool link",
     title: "I'm a tooltip for your link",
     size: 'md',
+    dataTest: '',
   },
 } as Meta
 
diff --git a/packages/components/menu/src/menu-item-title.ts b/packages/components/menu/src/menu-item-title.ts
index 294b5c64..e64742ce 100644
--- a/packages/components/menu/src/menu-item-title.ts
+++ b/packages/components/menu/src/menu-item-title.ts
@@ -2,7 +2,13 @@ import { buildProps } from '@puik/utils'
 import type { ExtractPropTypes } from 'vue'
 import type MenuItemTitle from './menu-item-title.vue'
 
-export const menuItemTitleProps = buildProps({} as const)
+export const menuItemTitleProps = buildProps({
+  titleDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+} as const)
 
 export type MenuItemTitleProps = ExtractPropTypes<typeof menuItemTitleProps>
 
diff --git a/packages/components/menu/src/menu-item-title.vue b/packages/components/menu/src/menu-item-title.vue
index c4802797..dcd7a9f4 100644
--- a/packages/components/menu/src/menu-item-title.vue
+++ b/packages/components/menu/src/menu-item-title.vue
@@ -1,5 +1,5 @@
 <template>
-  <h4 class="puik-menu-item-title">
+  <h4 class="puik-menu-item-title" :data-test="titleDataTest">
     <slot></slot>
   </h4>
 </template>
diff --git a/packages/components/menu/stories/menu-item-title.stories.ts b/packages/components/menu/stories/menu-item-title.stories.ts
new file mode 100644
index 00000000..de39c6f8
--- /dev/null
+++ b/packages/components/menu/stories/menu-item-title.stories.ts
@@ -0,0 +1,48 @@
+import PuikMenuItemTitle from '../src/menu-item-title.vue'
+import type { Meta, StoryFn, Args } from '@storybook/vue3'
+
+export default {
+  title: 'Components/Menu/MenuItemTitle',
+  component: PuikMenuItemTitle,
+  argTypes: {
+    default: {
+      control: 'text',
+      description: 'Default slot to set title text',
+    },
+    titleDataTest: {
+      description: 'Set the data-test attribute for title',
+      control: 'text',
+    },
+  },
+} as Meta
+
+const Template: StoryFn = (args: Args) => ({
+  components: {
+    PuikMenuItemTitle,
+  },
+  setup() {
+    return { args }
+  },
+  template: `<puik-menu-item-title v-bind="args">{{ args.default }}</puik-menu-item-title>`,
+})
+
+export const Default = {
+  render: Template,
+  args: {
+    default: 'Menu Item Title',
+    titleDataTest: '',
+  },
+
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<puik-menu-item-title>
+    Menu Item Title
+</puik-menu-item-title>
+            `,
+        language: 'html',
+      },
+    },
+  },
+}
diff --git a/packages/components/menu/stories/menu.stories.ts b/packages/components/menu/stories/menu.stories.ts
index 56f40a92..283dac5b 100644
--- a/packages/components/menu/stories/menu.stories.ts
+++ b/packages/components/menu/stories/menu.stories.ts
@@ -11,7 +11,7 @@ const menuAlignsJoined = menuAligns.join('|')
 const menuPositionsJoined = menuPositions.join('|')
 
 export default {
-  title: 'Components/Menu',
+  title: 'Components/Menu/Menu',
   component: PuikMenu,
   argTypes: {
     position: {
diff --git a/packages/components/modal/src/modal.ts b/packages/components/modal/src/modal.ts
index 8a0a8442..b81a1689 100644
--- a/packages/components/modal/src/modal.ts
+++ b/packages/components/modal/src/modal.ts
@@ -30,11 +30,21 @@ export const modalProps = buildProps({
     required: false,
     default: undefined,
   },
+  titleDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   mainButtonText: {
     type: String,
     required: false,
     default: undefined,
   },
+  mainButtonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   isMainButtonDisabled: {
     type: Boolean,
     required: false,
@@ -45,11 +55,21 @@ export const modalProps = buildProps({
     required: false,
     default: undefined,
   },
+  secondButtonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   sideButtonText: {
     type: String,
     required: false,
     default: undefined,
   },
+  sideButtonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   variant: {
     type: String as PropType<ModalVariantType>,
     required: false,
@@ -70,6 +90,11 @@ export const modalProps = buildProps({
     required: false,
     default: undefined,
   },
+  closeButtonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export const modalEmits = [
diff --git a/packages/components/modal/src/modal.vue b/packages/components/modal/src/modal.vue
index 7cfa5c50..dac3363e 100644
--- a/packages/components/modal/src/modal.vue
+++ b/packages/components/modal/src/modal.vue
@@ -22,7 +22,9 @@
             :is-disabled="!showTitleTooltip"
             class="puik-modal__dialogPanelContainer__dialogPanel__header__title"
           >
-            <h2 ref="modalTitleElem" class="title">{{ title }}</h2>
+            <h2 ref="modalTitleElem" class="title" :data-test="titleDataTest">
+              {{ title }}
+            </h2>
             <template #description>{{ title }}</template>
           </puik-tooltip>
 
@@ -31,6 +33,7 @@
             :aria-label="t('puik.modal.closeButtonLabel')"
             class="puik-modal__dialogPanelContainer__dialogPanel__header__close-button"
             variant="text"
+            :data-test="closeButtonDataTest"
             @click="sendCloseModalEvent()"
           >
             <puik-icon icon="close" :font-size="CLOSE_ICON_SIZE" />
@@ -47,6 +50,7 @@
             v-if="secondButtonText"
             class="puik-modal__dialogPanelContainer__dialogPanel__footer__button--second"
             :variant="secondButtonVariant"
+            :data-test="secondButtonDataTest"
             @click="$emit('button-second')"
           >
             {{ secondButtonText }}
@@ -56,6 +60,7 @@
             class="puik-modal__dialogPanelContainer__dialogPanel__footer__button--main"
             :variant="mainButtonVariant"
             :disabled="isMainButtonDisabled"
+            :data-test="mainButtonDataTest"
             @click="$emit('button-main')"
           >
             {{ mainButtonText }}
@@ -67,6 +72,7 @@
             v-if="PuikModalVariant.DIALOG === variant && sideButtonText"
             class="puik-modal__dialogPanelContainer__dialogPanel__footer__button--side"
             variant="text"
+            :data-test="sideButtonDataTest"
             @click="$emit('button-side')"
           >
             {{ sideButtonText }}
diff --git a/packages/components/modal/stories/modal.stories.ts b/packages/components/modal/stories/modal.stories.ts
index daae8f34..2644ff49 100644
--- a/packages/components/modal/stories/modal.stories.ts
+++ b/packages/components/modal/stories/modal.stories.ts
@@ -67,6 +67,10 @@ export default {
         },
       },
     },
+    titleDataTest: {
+      description: 'Set the data-test attribute of the title',
+      control: 'text',
+    },
     mainButtonText: {
       description: 'Set the text of the main button',
       control: 'text',
@@ -79,6 +83,10 @@ export default {
         },
       },
     },
+    mainButtonDataTest: {
+      description: 'Set the data-test attribute of the main button',
+      control: 'text',
+    },
     secondButtonText: {
       description: 'Set the text of the secondary button',
       control: 'text',
@@ -91,6 +99,10 @@ export default {
         },
       },
     },
+    secondButtonDataTest: {
+      description: 'Set the data-test attribute of the secondary button',
+      control: 'text',
+    },
     sideButtonText: {
       description: 'Set the text of the side button',
       control: 'text',
@@ -103,6 +115,10 @@ export default {
         },
       },
     },
+    sideButtonDataTest: {
+      description: 'Set the data-test attribute of the side button',
+      control: 'text',
+    },
     variant: {
       description: 'Set the style of the modal (use the PuikModalVariant enum)',
       control: 'select',
@@ -179,6 +195,10 @@ export enum PuikModalSize {
       description: 'Modal content',
       control: 'none',
     },
+    closeButtonDataTest: {
+      description: 'Set the data-test attribute of the close button',
+      control: 'text',
+    },
     'button-main': {
       control: 'none',
       description: 'Event emitted on main button click',
@@ -200,6 +220,11 @@ export enum PuikModalSize {
     titleIcon: 'home',
     variant: PuikModalVariant.DIALOG,
     size: PuikModalSize.SMALL,
+    titleDataTest: '',
+    mainButtonDataTest: '',
+    secondButtonDataTest: '',
+    sideButtonDataTest: '',
+    closeButtonDataTest: '',
   },
   parameters: {
     chromatic: { delay: 3000 },
diff --git a/packages/components/pagination/src/pagination-large.ts b/packages/components/pagination/src/pagination-large.ts
index 536bc2c6..08316006 100644
--- a/packages/components/pagination/src/pagination-large.ts
+++ b/packages/components/pagination/src/pagination-large.ts
@@ -37,6 +37,21 @@ export const paginationLargeProps = buildProps({
     required: false,
     default: undefined,
   },
+  labelDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  previousButtonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  nextButtonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type PaginationProps = ExtractPropTypes<typeof paginationLargeProps>
diff --git a/packages/components/pagination/src/pagination-large.vue b/packages/components/pagination/src/pagination-large.vue
index 0c54ab20..f325e05e 100644
--- a/packages/components/pagination/src/pagination-large.vue
+++ b/packages/components/pagination/src/pagination-large.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="puik-pagination__label">
+  <span class="puik-pagination__label" :data-test="labelDataTest">
     {{ label }}
   </span>
 
@@ -10,6 +10,7 @@
       class="puik-pagination__previous-button puik-pagination__button"
       left-icon="keyboard_arrow_left"
       variant="tertiary"
+      :button-data-test="previousButtonDataTest"
       @click="emit('update:page', page - 1)"
     >
       <span class="puik-pagination__previous-button-text">
@@ -45,6 +46,7 @@
       class="puik-pagination__button puik-pagination__next-button"
       right-icon="keyboard_arrow_right"
       variant="tertiary"
+      :button-data-test="nextButtonDataTest"
       @click="emit('update:page', page + 1)"
     >
       <span class="puik-pagination__next-button-text">
diff --git a/packages/components/pagination/src/pagination-loader.ts b/packages/components/pagination/src/pagination-loader.ts
index 1820d3ab..c57f269c 100644
--- a/packages/components/pagination/src/pagination-loader.ts
+++ b/packages/components/pagination/src/pagination-loader.ts
@@ -22,6 +22,11 @@ export const paginationLoaderProps = buildProps({
     required: false,
     default: undefined,
   },
+  nextButtonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type PaginationProps = ExtractPropTypes<typeof paginationLoaderProps>
diff --git a/packages/components/pagination/src/pagination-loader.vue b/packages/components/pagination/src/pagination-loader.vue
index 1187103c..88da8582 100644
--- a/packages/components/pagination/src/pagination-loader.vue
+++ b/packages/components/pagination/src/pagination-loader.vue
@@ -8,6 +8,7 @@
     variant="tertiary"
     class="puik-pagination__button puik-pagination__load-more-button"
     fluid
+    :button-data-test="nextButtonDataTest"
     @click="$emit('update:modelValue', modelValue + 1)"
   >
     {{ currentButtonLabel }}
diff --git a/packages/components/pagination/src/pagination-medium.ts b/packages/components/pagination/src/pagination-medium.ts
index 7a274ea7..577efeae 100644
--- a/packages/components/pagination/src/pagination-medium.ts
+++ b/packages/components/pagination/src/pagination-medium.ts
@@ -31,6 +31,21 @@ export const paginationMediumProps = buildProps({
     required: false,
     default: undefined,
   },
+  labelDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  previousButtonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  nextButtonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type PaginationProps = ExtractPropTypes<typeof paginationMediumProps>
diff --git a/packages/components/pagination/src/pagination-medium.vue b/packages/components/pagination/src/pagination-medium.vue
index 00108558..aecf6d34 100644
--- a/packages/components/pagination/src/pagination-medium.vue
+++ b/packages/components/pagination/src/pagination-medium.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="puik-pagination__label">
+  <span class="puik-pagination__label" :data-test="labelDataTest">
     {{ label }}
   </span>
 
@@ -10,6 +10,7 @@
       class="puik-pagination__previous-button puik-pagination__button"
       left-icon="keyboard_arrow_left"
       variant="secondary"
+      :button-data-test="previousButtonDataTest"
       @click="page -= 1"
     ></puik-button>
 
@@ -77,6 +78,7 @@
       class="puik-pagination__button puik-pagination__next-button"
       right-icon="keyboard_arrow_right"
       variant="secondary"
+      :button-data-test="nextButtonDataTest"
       @click="page += 1"
     ></puik-button>
   </div>
diff --git a/packages/components/pagination/src/pagination-mobile.ts b/packages/components/pagination/src/pagination-mobile.ts
index a2c20c30..9d1ced5a 100644
--- a/packages/components/pagination/src/pagination-mobile.ts
+++ b/packages/components/pagination/src/pagination-mobile.ts
@@ -22,6 +22,21 @@ export const paginationMobileProps = buildProps({
     required: false,
     default: undefined,
   },
+  labelDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  previousButtonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  nextButtonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type PaginationProps = ExtractPropTypes<typeof paginationMobileProps>
diff --git a/packages/components/pagination/src/pagination-mobile.vue b/packages/components/pagination/src/pagination-mobile.vue
index 9c6d7fdd..06cf0447 100644
--- a/packages/components/pagination/src/pagination-mobile.vue
+++ b/packages/components/pagination/src/pagination-mobile.vue
@@ -5,10 +5,11 @@
     class="puik-pagination__previous-button puik-pagination__button"
     left-icon="keyboard_arrow_left"
     variant="secondary"
+    :button-data-test="previousButtonDataTest"
     @click="emit('update:modelValue', modelValue - 1)"
   ></puik-button>
 
-  <span class="puik-pagination__label">
+  <span class="puik-pagination__label" :data-test="labelDataTest">
     {{ label }}
   </span>
 
@@ -18,6 +19,7 @@
     class="puik-pagination__button puik-pagination__next-button"
     right-icon="keyboard_arrow_right"
     variant="secondary"
+    :button-data-test="nextButtonDataTest"
     @click="emit('update:modelValue', modelValue + 1)"
   ></puik-button>
 </template>
diff --git a/packages/components/pagination/src/pagination-small.ts b/packages/components/pagination/src/pagination-small.ts
index c5878fb4..5cc1e166 100644
--- a/packages/components/pagination/src/pagination-small.ts
+++ b/packages/components/pagination/src/pagination-small.ts
@@ -22,6 +22,21 @@ export const paginationSmallProps = buildProps({
     required: false,
     default: undefined,
   },
+  labelDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  previousButtonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  nextButtonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type PaginationProps = ExtractPropTypes<typeof paginationSmallProps>
diff --git a/packages/components/pagination/src/pagination-small.vue b/packages/components/pagination/src/pagination-small.vue
index 8430a3f4..1c385c4b 100644
--- a/packages/components/pagination/src/pagination-small.vue
+++ b/packages/components/pagination/src/pagination-small.vue
@@ -1,11 +1,12 @@
 <template>
-  <span class="puik-pagination__label">
+  <span class="puik-pagination__label" :data-test="labelDataTest">
     {{ label }}
   </span>
 
   <puik-button
     :aria-label="t('puik.pagination.previous', { page: page - 1 })"
     :disabled="page <= 1 || disabled"
+    :button-data-test="previousButtonDataTest"
     class="puik-pagination__previous-button puik-pagination__button"
     left-icon="keyboard_arrow_left"
     variant="secondary"
@@ -15,6 +16,7 @@
   <puik-button
     :aria-label="t('puik.pagination.next', { page: page + 1 })"
     :disabled="page >= maxPage || disabled"
+    :button-data-test="nextButtonDataTest"
     class="puik-pagination__button puik-pagination__next-button"
     right-icon="keyboard_arrow_right"
     variant="secondary"
diff --git a/packages/components/pagination/src/pagination.ts b/packages/components/pagination/src/pagination.ts
index 612c00b9..e8c387d2 100644
--- a/packages/components/pagination/src/pagination.ts
+++ b/packages/components/pagination/src/pagination.ts
@@ -61,6 +61,21 @@ export const paginationProps = buildProps({
     required: false,
     default: false,
   },
+  labelDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  previousButtonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  nextButtonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type PaginationProps = ExtractPropTypes<typeof paginationProps>
diff --git a/packages/components/pagination/src/pagination.vue b/packages/components/pagination/src/pagination.vue
index da13ab09..41161381 100644
--- a/packages/components/pagination/src/pagination.vue
+++ b/packages/components/pagination/src/pagination.vue
@@ -11,6 +11,7 @@
       :label="currentLabel"
       :loader-button-label="loaderButtonLabel"
       :disabled="loaderButtonDisabled"
+      :next-button-data-test="nextButtonDataTest"
     />
 
     <div v-else class="puik-pagination__content">
@@ -18,12 +19,18 @@
         v-if="variant === PuikPaginationVariantEnum.small"
         v-model="currentPage"
         v-bind="commonPaginationProps"
+        :label-data-test="labelDataTest"
+        :previous-button-data-test="previousButtonDataTest"
+        :next-button-data-test="nextButtonDataTest"
       />
 
       <pagination-mobile
         v-if="variant === PuikPaginationVariantEnum.mobile"
         v-model="currentPage"
         v-bind="commonPaginationProps"
+        :previous-button-data-test="previousButtonDataTest"
+        :next-button-data-test="nextButtonDataTest"
+        :label-data-test="labelDataTest"
       />
 
       <pagination-medium
@@ -31,6 +38,9 @@
         v-model="currentPage"
         v-bind="commonPaginationProps"
         :total-item="totalItem"
+        :previous-button-data-test="previousButtonDataTest"
+        :next-button-data-test="nextButtonDataTest"
+        :label-data-test="labelDataTest"
       />
 
       <pagination-large
@@ -39,6 +49,9 @@
         :items-per-page="itemsPerPage"
         :total-item="totalItem"
         :items-per-page-options="itemsPerPageOptions"
+        :previous-button-data-test="previousButtonDataTest"
+        :next-button-data-test="nextButtonDataTest"
+        :label-data-test="labelDataTest"
         v-bind="commonPaginationProps"
         @update:items-per-page="emit('update:itemsPerPage', $event)"
       />
diff --git a/packages/components/pagination/stories/pagination.stories.ts b/packages/components/pagination/stories/pagination.stories.ts
index eb42c27a..ccd65702 100644
--- a/packages/components/pagination/stories/pagination.stories.ts
+++ b/packages/components/pagination/stories/pagination.stories.ts
@@ -90,6 +90,18 @@ export default {
         },
       },
     },
+    labelDataTest: {
+      control: 'text',
+      description: 'Set the label data-test attribute',
+      table: {
+        defaultValue: {
+          summary: 'undefined',
+        },
+        type: {
+          summary: 'string',
+        },
+      },
+    },
     loaderButtonLabel: {
       control: 'text',
       description: 'Set the text used in button on loader variant',
@@ -102,6 +114,30 @@ export default {
         },
       },
     },
+    previousButtonDataTest: {
+      control: 'text',
+      description: 'Set the previous button data-test attribute',
+      table: {
+        defaultValue: {
+          summary: 'undefined',
+        },
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    nextButtonDataTest: {
+      control: 'text',
+      description: 'Set the next button data-test attribute',
+      table: {
+        defaultValue: {
+          summary: 'undefined',
+        },
+        type: {
+          summary: 'string',
+        },
+      },
+    },
   },
   args: {
     variant: PuikPaginationVariantEnum.medium,
diff --git a/packages/components/progress-bar/src/progress-bar.ts b/packages/components/progress-bar/src/progress-bar.ts
index fe52d7f9..fb299e8d 100644
--- a/packages/components/progress-bar/src/progress-bar.ts
+++ b/packages/components/progress-bar/src/progress-bar.ts
@@ -11,6 +11,11 @@ export const progressBarProps = buildProps({
     type: String,
     default: '',
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type ProgressBarProps = ExtractPropTypes<typeof progressBarProps>
diff --git a/packages/components/progress-bar/src/progress-bar.vue b/packages/components/progress-bar/src/progress-bar.vue
index 72bb9a17..2737b6ba 100644
--- a/packages/components/progress-bar/src/progress-bar.vue
+++ b/packages/components/progress-bar/src/progress-bar.vue
@@ -3,6 +3,7 @@
     <div
       :class="barClass"
       :style="{ width: `${percentage}%` }"
+      :data-test="dataTest"
       class="progress-bar__content"
     />
   </div>
diff --git a/packages/components/progress-bar/stories/progress-bar.stories.ts b/packages/components/progress-bar/stories/progress-bar.stories.ts
index e8c9a0b9..d1d57ece 100644
--- a/packages/components/progress-bar/stories/progress-bar.stories.ts
+++ b/packages/components/progress-bar/stories/progress-bar.stories.ts
@@ -12,9 +12,15 @@ export default {
         max: 100,
       },
     },
+    dataTest: {
+      control: {
+        type: 'text',
+      },
+    },
   },
   args: {
     percentage: 50,
+    dataTest: '',
   },
 } as Meta
 
diff --git a/packages/components/progress-stepper/src/progress-stepper-step.ts b/packages/components/progress-stepper/src/progress-stepper-step.ts
index 3223a81d..3ca1572e 100644
--- a/packages/components/progress-stepper/src/progress-stepper-step.ts
+++ b/packages/components/progress-stepper/src/progress-stepper-step.ts
@@ -7,6 +7,21 @@ export const progressStepperStepProps = buildProps({
     type: [String, Number],
     required: true,
   },
+  stepButtonDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  textDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  additionalTextDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type ProgressStepperStepProps = ExtractPropTypes<
diff --git a/packages/components/progress-stepper/src/progress-stepper-step.vue b/packages/components/progress-stepper/src/progress-stepper-step.vue
index 7b439ea1..cb2b1753 100644
--- a/packages/components/progress-stepper/src/progress-stepper-step.vue
+++ b/packages/components/progress-stepper/src/progress-stepper-step.vue
@@ -9,16 +9,20 @@
       aria-live="polite"
       class="puik-progress-stepper-step__button"
       size="sm"
+      :button-data-test="stepButtonDataTest"
       @click="onClick"
     >
       <template v-if="!isCompleted">
         {{ step }}
       </template>
     </puik-button>
-    <span class="puik-progress-stepper-step__text">
+    <span class="puik-progress-stepper-step__text" :data-test="textDataTest">
       <slot name="text"></slot>
     </span>
-    <span class="puik-progress-stepper-step__additional-text">
+    <span
+      class="puik-progress-stepper-step__additional-text"
+      :data-test="additionalTextDataTest"
+    >
       <slot name="additional-text"></slot>
     </span>
   </div>
diff --git a/packages/components/progress-stepper/stories/progress-stepper-step.stories.ts b/packages/components/progress-stepper/stories/progress-stepper-step.stories.ts
index d3fbca4a..016239f2 100644
--- a/packages/components/progress-stepper/stories/progress-stepper-step.stories.ts
+++ b/packages/components/progress-stepper/stories/progress-stepper-step.stories.ts
@@ -15,14 +15,26 @@ export default {
         },
       },
     },
+    stepDataTest: {
+      description: 'Set the data-test of the step',
+      control: 'text',
+    },
     text: {
       description: 'Text of the step',
       control: 'text',
     },
+    textDataTest: {
+      description: 'Set the data-test of the text',
+      control: 'text',
+    },
     'additional-text': {
       description: 'Additional text of the step',
       control: 'text',
     },
+    additionalTextDataTest: {
+      description: 'Set the data-test of the additional text',
+      control: 'text',
+    },
     click: {
       description: 'Event emitted on click step',
       control: 'none',
diff --git a/packages/components/radio/src/radio.ts b/packages/components/radio/src/radio.ts
index 5217e99c..5df5d815 100644
--- a/packages/components/radio/src/radio.ts
+++ b/packages/components/radio/src/radio.ts
@@ -8,6 +8,11 @@ export const radioProps = buildProps({
     required: false,
     default: undefined,
   },
+  labelDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   name: {
     type: String,
     required: false,
@@ -28,6 +33,11 @@ export const radioProps = buildProps({
     required: false,
     default: false,
   },
+  inputDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type RadioProps = ExtractPropTypes<typeof radioProps>
diff --git a/packages/components/radio/src/radio.vue b/packages/components/radio/src/radio.vue
index dba853d7..8ac404b1 100644
--- a/packages/components/radio/src/radio.vue
+++ b/packages/components/radio/src/radio.vue
@@ -10,9 +10,15 @@
       class="puik-radio__input"
       type="radio"
       :name="name"
+      :data-test="inputDataTest"
       @focus="handleFocus"
     />
-    <label v-if="$slots.default || label" :for="id" class="puik-radio__label">
+    <label
+      v-if="$slots.default || label"
+      :for="id"
+      class="puik-radio__label"
+      :data-test="labelDataTest"
+    >
       <slot>{{ label }}</slot>
     </label>
   </div>
diff --git a/packages/components/radio/stories/radio.stories.ts b/packages/components/radio/stories/radio.stories.ts
index c3650f33..58cbcb7e 100644
--- a/packages/components/radio/stories/radio.stories.ts
+++ b/packages/components/radio/stories/radio.stories.ts
@@ -10,6 +10,10 @@ export default {
       control: 'text',
       description: 'Label of the radio button',
     },
+    labelDataTest: {
+      control: 'text',
+      description: 'Set the data-test attribute of the label',
+    },
     disabled: {
       control: 'boolean',
       description: 'Set if the radio button is disabled',
@@ -36,6 +40,10 @@ export default {
         },
       },
     },
+    inputDataTest: {
+      control: 'text',
+      description: 'Set the data-test attribute of the input',
+    },
   },
   args: {
     label: '',
@@ -43,6 +51,8 @@ export default {
     name: 'Slot by default',
     value: '',
     modelValue: '',
+    labelDataTest: '',
+    inputDataTest: '',
   },
 } as Meta
 
diff --git a/packages/components/select/test/select.spec.ts b/packages/components/select/test/select.spec.ts
index 40d81163..3c99546f 100644
--- a/packages/components/select/test/select.spec.ts
+++ b/packages/components/select/test/select.spec.ts
@@ -61,7 +61,7 @@ describe('Select tests', () => {
   })
 
   it('should display a placeholder', () => {
-    const placeholder = faker.random.word()
+    const placeholder = faker.lorem.sentence(1)
     factory(
       `<puik-select v-model="value" :placeholder="placeholder">
         <puik-option value="test" label="test" />
diff --git a/packages/components/tooltip/src/tooltip.ts b/packages/components/tooltip/src/tooltip.ts
index ec2a5c35..2bc9d7a9 100644
--- a/packages/components/tooltip/src/tooltip.ts
+++ b/packages/components/tooltip/src/tooltip.ts
@@ -10,11 +10,21 @@ export const tooltipProps = buildProps({
     required: false,
     default: undefined,
   },
+  titleDataTest: {
+    type: String,
+    required: false,
+    default: 'tooltip-title',
+  },
   description: {
     type: String,
     required: false,
     default: undefined,
   },
+  descriptionDataTest: {
+    type: String,
+    required: false,
+    default: 'tooltip-description',
+  },
   position: {
     type: String as PropType<PuikTooltipPosition>,
     required: false,
diff --git a/packages/components/tooltip/src/tooltip.vue b/packages/components/tooltip/src/tooltip.vue
index 3ca9b32a..6126c4cd 100644
--- a/packages/components/tooltip/src/tooltip.vue
+++ b/packages/components/tooltip/src/tooltip.vue
@@ -25,11 +25,13 @@
           <span
             v-if="$slots.title || title"
             class="puik-tooltip__tip__content__title"
+            :data-test="titleDataTest"
             ><slot name="title">{{ title }}</slot></span
           >
           <span
             v-if="$slots.description || description"
             class="puik-tooltip__tip__content__description"
+            :data-test="descriptionDataTest"
             ><slot name="description">{{ description }}</slot></span
           >
         </div>
diff --git a/packages/components/tooltip/stories/tooltip.stories.ts b/packages/components/tooltip/stories/tooltip.stories.ts
index a1f07c17..de4b862a 100644
--- a/packages/components/tooltip/stories/tooltip.stories.ts
+++ b/packages/components/tooltip/stories/tooltip.stories.ts
@@ -18,6 +18,9 @@ export default {
         },
       },
     },
+    titleDataTest: {
+      description: 'Set the data-test attribute on the title',
+    },
     description: {
       description: 'Set the tooltip description (also available as a prop)',
       table: {
@@ -26,6 +29,9 @@ export default {
         },
       },
     },
+    descriptionDataTest: {
+      description: 'Set the data-test attribute on the description',
+    },
     position: {
       control: 'select',
       description: 'Set the tooltip position',
@@ -80,6 +86,8 @@ export default {
     title: 'Title',
     description: 'This is a tooltip',
     position: 'top',
+    titleDataTest: '',
+    descriptionDataTest: '',
   },
 } as Meta
 

From 87757904331577afc6339407383252ee2f9aa3be Mon Sep 17 00:00:00 2001
From: Guillaume Lepoetre <guillaume.lepoetre@prestashop.com>
Date: Mon, 30 Oct 2023 11:33:42 +0100
Subject: [PATCH 02/14] feat: Add data-test for the select element

---
 packages/components/select/src/option.ts      |  4 ++++
 packages/components/select/src/option.vue     |  1 +
 packages/components/select/src/select.ts      | 15 +++++++++++++
 packages/components/select/src/select.vue     |  6 +++++-
 .../select/stories/select.stories.ts          | 21 +++++++++++++++++++
 5 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/packages/components/select/src/option.ts b/packages/components/select/src/option.ts
index 6e1a2903..d2d4d2c2 100644
--- a/packages/components/select/src/option.ts
+++ b/packages/components/select/src/option.ts
@@ -23,6 +23,10 @@ export const optionProps = buildProps({
     required: false,
     default: false,
   },
+  optionDataTest: {
+    type: String,
+    required: false,
+  },
 } as const)
 
 export type OptionProps = ExtractPropTypes<typeof optionProps>
diff --git a/packages/components/select/src/option.vue b/packages/components/select/src/option.vue
index b5171368..22efff69 100644
--- a/packages/components/select/src/option.vue
+++ b/packages/components/select/src/option.vue
@@ -12,6 +12,7 @@
         'puik-option--selected': selectedValue === value,
         'puik-option--disabled': disabled,
       }"
+      :data-test="optionDataTest"
     >
       <slot class="puik-option__label">{{ label }}</slot>
       <puik-icon
diff --git a/packages/components/select/src/select.ts b/packages/components/select/src/select.ts
index c632b7b7..82ac7575 100644
--- a/packages/components/select/src/select.ts
+++ b/packages/components/select/src/select.ts
@@ -78,6 +78,21 @@ export const selectProps = buildProps({
     required: false,
     default: true,
   },
+  selectDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  searchInputDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  noResultsDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type SelectProps = ExtractPropTypes<typeof selectProps>
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index 3f8f2149..30433a6e 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -22,6 +22,7 @@
           tabindex="-1"
           :readonly="open"
           type="text"
+          :data-test="selectDataTest"
           @input="
             handleAutoComplete(($event.target as HTMLInputElement)?.value)
           "
@@ -53,6 +54,7 @@
             v-model="query"
             class="puik-select__search"
             :placeholder="t('puik.select.searchPlaceholder')"
+            :input-data-test="searchInputDataTest"
           >
             <template #prepend
               ><puik-icon
@@ -69,6 +71,7 @@
                 : !filteredItems?.length)
             "
             class="puik-select__no-results"
+            :data-test="noResultsDataTest"
           >
             {{ noMatchText || `${t('puik.select.noResults')} ${query}` }}
           </p>
@@ -76,10 +79,11 @@
             <slot :options="filteredItems">
               <template v-if="options">
                 <puik-option
-                  v-for="option in filteredItems"
+                  v-for="(option, index) in filteredItems"
                   :key="option"
                   :label="option[labelKey]"
                   :value="isObject(option) ? option[valueKey] : option"
+                  :option-data-test="`dataTestOption-${index + 1}`"
                 />
               </template>
             </slot>
diff --git a/packages/components/select/stories/select.stories.ts b/packages/components/select/stories/select.stories.ts
index a34b96aa..0858f2f9 100644
--- a/packages/components/select/stories/select.stories.ts
+++ b/packages/components/select/stories/select.stories.ts
@@ -109,6 +109,27 @@ export default {
         category: 'Common',
       },
     },
+    selectDataTest: {
+      control: 'text',
+      description: 'Set the data-test attribute for the select',
+      table: {
+        category: 'Common',
+      },
+    },
+    searchInputDataTest: {
+      control: 'text',
+      description: 'Set the data-test attribute for the search input',
+      table: {
+        category: 'Searchable',
+      },
+    },
+    noResultsDataTest: {
+      control: 'text',
+      description: 'Set the data-test attribute for the no results message',
+      table: {
+        category: 'Searchable',
+      },
+    },
   },
   args: {
     labelKey: '',

From d0ffbe74f2bccfba57d94d705db8094db7deb460 Mon Sep 17 00:00:00 2001
From: Guillaume Lepoetre <guillaume.lepoetre@prestashop.com>
Date: Mon, 30 Oct 2023 14:29:36 +0100
Subject: [PATCH 03/14] feat: Add sidebar data-test

---
 packages/components/sidebar/src/sidebar-group-item.ts      | 5 +++++
 packages/components/sidebar/src/sidebar-group-item.vue     | 4 ++++
 packages/components/sidebar/src/sidebar-item.ts            | 5 +++++
 packages/components/sidebar/src/sidebar-item.vue           | 6 +++++-
 packages/components/sidebar/src/sidebar-title.ts           | 5 +++++
 packages/components/sidebar/src/sidebar-title.vue          | 7 ++++++-
 .../sidebar/stories/sidebar-group-item.stories.ts          | 4 ++++
 .../components/sidebar/stories/sidebar-item.stories.ts     | 4 ++++
 .../components/sidebar/stories/sidebar-title.stories.ts    | 4 ++++
 9 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/packages/components/sidebar/src/sidebar-group-item.ts b/packages/components/sidebar/src/sidebar-group-item.ts
index dc7dc984..059a07f6 100644
--- a/packages/components/sidebar/src/sidebar-group-item.ts
+++ b/packages/components/sidebar/src/sidebar-group-item.ts
@@ -21,6 +21,11 @@ export const sidebarGroupItemProps = buildProps({
     default: false,
     required: false,
   },
+  sidebarGroupItemDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type SidebarGroupItemProps = ExtractPropTypes<
diff --git a/packages/components/sidebar/src/sidebar-group-item.vue b/packages/components/sidebar/src/sidebar-group-item.vue
index 5697b649..df2334de 100644
--- a/packages/components/sidebar/src/sidebar-group-item.vue
+++ b/packages/components/sidebar/src/sidebar-group-item.vue
@@ -11,6 +11,9 @@
       :name="accordionName"
       :icon="icon"
       class="puik-sidebar-group-item__accordion"
+      :title-data-test="`${sidebarGroupItemDataTest}-title`"
+      :icon-data-test="`${sidebarGroupItemDataTest}-icon`"
+      :button-data-test="`${sidebarGroupItemDataTest}-button`"
     >
       <slot></slot>
     </puik-accordion>
@@ -20,6 +23,7 @@
           variant="text"
           fluid
           class="puik-sidebar-group-item__collapsed-button"
+          :button-data-test="`${sidebarGroupItemDataTest}-button`"
         >
           <puik-icon :icon="icon" font-size="1.25rem"></puik-icon>
         </puik-button>
diff --git a/packages/components/sidebar/src/sidebar-item.ts b/packages/components/sidebar/src/sidebar-item.ts
index b4b6a3df..881acf73 100644
--- a/packages/components/sidebar/src/sidebar-item.ts
+++ b/packages/components/sidebar/src/sidebar-item.ts
@@ -28,6 +28,11 @@ export const sidebarItemProps = buildProps({
     required: false,
     default: false,
   },
+  sidebarItemDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type SidebarItemProps = ExtractPropTypes<typeof sidebarItemProps>
diff --git a/packages/components/sidebar/src/sidebar-item.vue b/packages/components/sidebar/src/sidebar-item.vue
index 6154de2c..af107456 100644
--- a/packages/components/sidebar/src/sidebar-item.vue
+++ b/packages/components/sidebar/src/sidebar-item.vue
@@ -13,6 +13,7 @@
       fluid
       variant="text"
       class="puik-sidebar-item__button"
+      :button-data-test="`${sidebarItemDataTest}-menubuttonTitle`"
     >
       {{ title }}
     </puik-button>
@@ -27,8 +28,11 @@
     :href="href"
     fluid
     variant="text"
+    :button-data-test="`${sidebarItemDataTest}-buttonTitle`"
   >
-    <span v-if="isExpanded">{{ title }}</span>
+    <span v-if="isExpanded" :data-test="`${sidebarItemDataTest}-Title`">{{
+      title
+    }}</span>
   </puik-button>
 </template>
 
diff --git a/packages/components/sidebar/src/sidebar-title.ts b/packages/components/sidebar/src/sidebar-title.ts
index 150192a3..f76bfb10 100644
--- a/packages/components/sidebar/src/sidebar-title.ts
+++ b/packages/components/sidebar/src/sidebar-title.ts
@@ -8,6 +8,11 @@ export const sidebarTitleProps = buildProps({
     required: false,
     default: 'h3',
   },
+  sidebarTitleDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type SidebarTitleProps = ExtractPropTypes<typeof sidebarTitleProps>
diff --git a/packages/components/sidebar/src/sidebar-title.vue b/packages/components/sidebar/src/sidebar-title.vue
index cd87820d..2dd995ef 100644
--- a/packages/components/sidebar/src/sidebar-title.vue
+++ b/packages/components/sidebar/src/sidebar-title.vue
@@ -1,5 +1,10 @@
 <template>
-  <component :is="tag" v-if="isExpanded" class="puik-sidebar-title">
+  <component
+    :is="tag"
+    v-if="isExpanded"
+    class="puik-sidebar-title"
+    :data-test="sidebarTitleDataTest"
+  >
     <slot></slot>
   </component>
 </template>
diff --git a/packages/components/sidebar/stories/sidebar-group-item.stories.ts b/packages/components/sidebar/stories/sidebar-group-item.stories.ts
index 65e9c308..82249000 100644
--- a/packages/components/sidebar/stories/sidebar-group-item.stories.ts
+++ b/packages/components/sidebar/stories/sidebar-group-item.stories.ts
@@ -52,6 +52,10 @@ export default {
       control: 'none',
       description: 'Set the defaut content slot',
     },
+    sidebarGroupItemDataTest: {
+      control: 'text',
+      description: 'Set the data-test attribute on the sidebar group item',
+    },
   },
   args: {
     title: 'title',
diff --git a/packages/components/sidebar/stories/sidebar-item.stories.ts b/packages/components/sidebar/stories/sidebar-item.stories.ts
index 4010960c..f1f8ac26 100644
--- a/packages/components/sidebar/stories/sidebar-item.stories.ts
+++ b/packages/components/sidebar/stories/sidebar-item.stories.ts
@@ -67,6 +67,10 @@ export default {
       control: 'none',
       description: 'Set the defaut content slot',
     },
+    sidebarItemDataTest: {
+      control: 'text',
+      description: 'Set the data-test attribute on the item',
+    },
   },
   args: {
     title: 'title',
diff --git a/packages/components/sidebar/stories/sidebar-title.stories.ts b/packages/components/sidebar/stories/sidebar-title.stories.ts
index b0cd3c3b..63f1bf46 100644
--- a/packages/components/sidebar/stories/sidebar-title.stories.ts
+++ b/packages/components/sidebar/stories/sidebar-title.stories.ts
@@ -30,6 +30,10 @@ export default {
         },
       },
     },
+    sidebarTitleDataTest: {
+      control: 'text',
+      description: 'Set the data-test attribute on the sidebar title',
+    },
   },
   args: {
     tag: 'h3',

From 983b26babff859926cb0411bd16efeb79ecbdcb9 Mon Sep 17 00:00:00 2001
From: Guillaume Lepoetre <guillaume.lepoetre@prestashop.com>
Date: Mon, 30 Oct 2023 16:33:31 +0100
Subject: [PATCH 04/14] feat: Set data-test is to easy now

---
 .../components/accordion/src/accordion.ts     | 25 +++----------
 .../components/accordion/src/accordion.vue    |  8 ++--
 .../accordion/stories/accordion.stories.ts    | 20 +++-------
 packages/components/alert/src/alert.ts        | 20 +++-------
 packages/components/alert/src/alert.vue       | 10 +++--
 .../components/alert/stories/alert.stories.ts | 15 ++------
 packages/components/badge/src/badge.ts        |  2 +-
 packages/components/badge/src/badge.vue       |  2 +-
 .../components/badge/stories/badge.stories.ts |  3 +-
 packages/components/button/src/button.ts      | 12 +-----
 packages/components/button/src/button.vue     |  6 +--
 .../button/stories/button.stories.ts          | 16 ++------
 packages/components/checkbox/src/checkbox.ts  |  7 +---
 packages/components/checkbox/src/checkbox.vue |  4 +-
 .../checkbox/stories/checkbox.stories.ts      | 10 ++---
 packages/components/input/src/input.ts        |  7 +---
 packages/components/input/src/input.vue       |  4 +-
 .../components/input/stories/input.stories.ts | 10 ++---
 .../components/menu/src/menu-item-title.ts    |  2 +-
 .../components/menu/src/menu-item-title.vue   |  2 +-
 .../menu/stories/menu-item-title.stories.ts   |  4 +-
 packages/components/modal/src/modal.ts        | 22 +----------
 packages/components/modal/src/modal.vue       | 14 ++++---
 .../components/modal/stories/modal.stories.ts | 30 +++------------
 .../pagination/src/pagination-large.ts        | 12 +-----
 .../pagination/src/pagination-large.vue       |  6 +--
 .../pagination/src/pagination-loader.ts       |  2 +-
 .../pagination/src/pagination-loader.vue      |  2 +-
 .../pagination/src/pagination-medium.ts       | 12 +-----
 .../pagination/src/pagination-medium.vue      |  6 +--
 .../pagination/src/pagination-mobile.ts       | 12 +-----
 .../pagination/src/pagination-mobile.vue      |  6 +--
 .../pagination/src/pagination-small.ts        | 12 +-----
 .../pagination/src/pagination-small.vue       |  6 +--
 .../components/pagination/src/pagination.ts   | 12 +-----
 .../components/pagination/src/pagination.vue  | 18 +++------
 .../pagination/stories/pagination.stories.ts  | 37 ++-----------------
 .../src/progress-stepper-step.ts              | 12 +-----
 .../src/progress-stepper-step.vue             |  9 +++--
 .../stories/progress-stepper-step.stories.ts  | 13 ++-----
 packages/components/radio/src/radio.ts        |  7 +---
 packages/components/radio/src/radio.vue       |  4 +-
 .../components/radio/stories/radio.stories.ts | 11 ++----
 packages/components/select/src/option.ts      |  2 +-
 packages/components/select/src/option.vue     |  2 +-
 packages/components/select/src/select.ts      |  7 +---
 packages/components/select/src/select.vue     |  6 +--
 .../select/stories/select.stories.ts          | 19 ++--------
 .../sidebar/src/sidebar-group-item.ts         |  2 +-
 .../sidebar/src/sidebar-group-item.vue        |  6 +--
 .../components/sidebar/src/sidebar-item.ts    |  2 +-
 .../components/sidebar/src/sidebar-item.vue   |  8 ++--
 .../components/sidebar/src/sidebar-title.ts   |  2 +-
 .../components/sidebar/src/sidebar-title.vue  |  2 +-
 .../stories/sidebar-group-item.stories.ts     |  5 ++-
 .../sidebar/stories/sidebar-item.stories.ts   |  5 ++-
 .../sidebar/stories/sidebar-title.stories.ts  |  5 ++-
 57 files changed, 141 insertions(+), 386 deletions(-)

diff --git a/packages/components/accordion/src/accordion.ts b/packages/components/accordion/src/accordion.ts
index 7ef6ac2f..bf71a2b1 100644
--- a/packages/components/accordion/src/accordion.ts
+++ b/packages/components/accordion/src/accordion.ts
@@ -7,46 +7,31 @@ export const accordionProps = buildProps({
     type: String,
     required: true,
   },
-  buttonDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
   title: {
     type: String,
     required: false,
     default: undefined,
   },
-  titleDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
   subTitle: {
     type: String,
     required: false,
     default: undefined,
   },
-  subTitleDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
   icon: {
     type: String,
     required: false,
     default: undefined,
   },
-  iconDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
   disabled: {
     type: Boolean,
     required: false,
     default: false,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export const accordionEmits = ['click']
diff --git a/packages/components/accordion/src/accordion.vue b/packages/components/accordion/src/accordion.vue
index 6657a4ad..e3d1bdf4 100644
--- a/packages/components/accordion/src/accordion.vue
+++ b/packages/components/accordion/src/accordion.vue
@@ -11,7 +11,7 @@
       :aria-controls="id"
       class="puik-accordion__header"
       :disabled="disabled"
-      :data-test="buttonDataTest"
+      :data-test="`button-${dataTest}`"
       @click="onClick"
     >
       <puik-icon
@@ -19,19 +19,19 @@
         class="puik-accordion__header__icon"
         :icon="icon"
         :font-size="24"
-        :data-test="iconDataTest"
+        :data-test="`icon-${dataTest}`"
       ></puik-icon>
       <div class="puik-accordion__header__content">
         <div
           class="puik-accordion__header__content__title"
-          :data-test="titleDataTest"
+          :data-test="`title-${dataTest}`"
         >
           {{ title }}
         </div>
         <div
           v-if="subTitle"
           class="puik-accordion__header__content__sub-title"
-          :data-test="subTitleDataTest"
+          :data-test="`subTitle-${dataTest}`"
         >
           {{ subTitle }}
         </div>
diff --git a/packages/components/accordion/stories/accordion.stories.ts b/packages/components/accordion/stories/accordion.stories.ts
index 8d2a0d96..d9160e08 100644
--- a/packages/components/accordion/stories/accordion.stories.ts
+++ b/packages/components/accordion/stories/accordion.stories.ts
@@ -15,26 +15,14 @@ export default {
       control: 'text',
       description: 'Title displayed in the header',
     },
-    titleDataTest: {
-      control: 'text',
-      description: 'Set the data-test attribute for the title',
-    },
     subTitle: {
       control: 'text',
       description: 'Sub title displayed in the header',
     },
-    subTitleDataTest: {
-      control: 'text',
-      description: 'Set the data-test attribute for the sub title',
-    },
     icon: {
       control: 'text',
       description: 'Icon used in the header',
     },
-    iconDataTest: {
-      control: 'text',
-      description: 'Set the data-test attribute for the icon',
-    },
     disabled: {
       control: 'boolean',
       description: 'Set accordion disabled',
@@ -48,6 +36,11 @@ export default {
       control: 'none',
       description: 'Accordion content',
     },
+    dataTest: {
+      control: 'text',
+      description:
+        'Set the data-test attribute for the accordion `button-${dataTest}` `title-${dataTest}` `icon-${dataTest}` `subTitle-${dataTest}`',
+    },
   },
 } as Meta
 
@@ -78,9 +71,6 @@ export const Default = {
     subTitle: 'Accordion subtitle',
     icon: 'home',
     disabled: false,
-    titleDataTest: '',
-    subTitleDataTest: '',
-    iconDataTest: '',
   },
 
   parameters: {
diff --git a/packages/components/alert/src/alert.ts b/packages/components/alert/src/alert.ts
index d81c172e..2ebcab79 100644
--- a/packages/components/alert/src/alert.ts
+++ b/packages/components/alert/src/alert.ts
@@ -19,21 +19,11 @@ export const alertProps = buildProps({
     required: false,
     default: undefined,
   },
-  titleDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
   description: {
     type: String,
     required: false,
     default: undefined,
   },
-  descriptionDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
   variant: {
     type: String as PropType<PuikAlertVariant>,
     default: 'success',
@@ -47,16 +37,16 @@ export const alertProps = buildProps({
     required: false,
     default: undefined,
   },
-  buttonDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
   ariaLive: {
     type: String as PropType<'polite' | 'assertive'>,
     required: false,
     default: 'polite',
   },
+  alertDataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type AlertProps = ExtractPropTypes<typeof alertProps>
diff --git a/packages/components/alert/src/alert.vue b/packages/components/alert/src/alert.vue
index 5e842072..bd9bb409 100644
--- a/packages/components/alert/src/alert.vue
+++ b/packages/components/alert/src/alert.vue
@@ -10,13 +10,17 @@
     <div class="puik-alert__content">
       <puik-icon :icon="icon" font-size="1.25rem" class="puik-alert__icon" />
       <div class="puik-alert__text">
-        <p v-if="title" class="puik-alert__title" :data-test="titleDataTest">
+        <p
+          v-if="title"
+          class="puik-alert__title"
+          :data-test="`title-${alertDataTest}`"
+        >
           {{ title }}
         </p>
         <span
           v-if="$slots.default || description"
           class="puik-alert__description"
-          :data-test="descriptionDataTest"
+          :data-test="`description-${alertDataTest}`"
           ><slot>{{ description }}</slot></span
         >
       </div>
@@ -25,7 +29,7 @@
       v-if="buttonLabel"
       :variant="variant"
       class="puik-alert__button"
-      :button-data-test="buttonDataTest"
+      :button-data-test="`button-${alertDataTest}`"
       @click="click"
     >
       {{ buttonLabel }}
diff --git a/packages/components/alert/stories/alert.stories.ts b/packages/components/alert/stories/alert.stories.ts
index d0e349e7..a8be4a9e 100644
--- a/packages/components/alert/stories/alert.stories.ts
+++ b/packages/components/alert/stories/alert.stories.ts
@@ -44,14 +44,10 @@ export default {
       control: 'none',
       description: 'Set the alert description',
     },
-    titleDataTest: {
-      description: 'Set the data-test attribute for the title',
-    },
-    descriptionDataTest: {
-      description: 'Set the data-test attribute for the description',
-    },
-    buttonDataTest: {
-      description: 'Set the data-test attribute for the button',
+    alertDataTest: {
+      control: 'text',
+      description:
+        'Set the data-test attribute for the alert components `title-${alertDataTest}` `description-${alertDataTest}` `button-${alertDataTest}`',
     },
   },
   args: {
@@ -60,9 +56,6 @@ export default {
     variant: 'success',
     disableBorders: false,
     buttonLabel: 'Button',
-    titleDataTest: '',
-    descriptionDataTest: '',
-    buttonDataTest: '',
   },
 } as Meta
 
diff --git a/packages/components/badge/src/badge.ts b/packages/components/badge/src/badge.ts
index 26d6e333..bc2790e2 100644
--- a/packages/components/badge/src/badge.ts
+++ b/packages/components/badge/src/badge.ts
@@ -17,7 +17,7 @@ export const badgeProps = buildProps({
     type: String as PropType<PuikBadgeVariant>,
     default: 'neutral',
   },
-  badgeDataTest: {
+  dataTest: {
     type: String,
     required: false,
     default: undefined,
diff --git a/packages/components/badge/src/badge.vue b/packages/components/badge/src/badge.vue
index 888fde3f..692c7269 100644
--- a/packages/components/badge/src/badge.vue
+++ b/packages/components/badge/src/badge.vue
@@ -2,7 +2,7 @@
   <div
     class="puik-badge"
     :class="[`puik-badge--${variant}`]"
-    :data-test="badgeDataTest"
+    :data-test="dataTest"
   >
     <slot></slot>
   </div>
diff --git a/packages/components/badge/stories/badge.stories.ts b/packages/components/badge/stories/badge.stories.ts
index b9c06ad5..e77a28e4 100644
--- a/packages/components/badge/stories/badge.stories.ts
+++ b/packages/components/badge/stories/badge.stories.ts
@@ -25,7 +25,7 @@ export default {
         },
       },
     },
-    badgeDataTest: {
+    dataTest: {
       control: 'text',
       description: 'Set the data-test attribute on the badge',
     },
@@ -33,7 +33,6 @@ export default {
   args: {
     default: 'Status',
     variant: 'neutral',
-    badgeDataTest: '',
   },
 } as Meta
 
diff --git a/packages/components/button/src/button.ts b/packages/components/button/src/button.ts
index 9c8a2fdf..a6885676 100644
--- a/packages/components/button/src/button.ts
+++ b/packages/components/button/src/button.ts
@@ -48,21 +48,11 @@ export const buttonProps = buildProps({
     required: false,
     default: '',
   },
-  leftIconDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
   rightIcon: {
     type: String,
     required: false,
     default: '',
   },
-  rightIconDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
   to: {
     type: [Object, String] as PropType<RouteLocationRaw>,
     required: false,
@@ -78,7 +68,7 @@ export const buttonProps = buildProps({
     required: false,
     default: undefined,
   },
-  buttonDataTest: {
+  dataTest: {
     type: String,
     required: false,
     default: undefined,
diff --git a/packages/components/button/src/button.vue b/packages/components/button/src/button.vue
index 828b9afc..745abac1 100644
--- a/packages/components/button/src/button.vue
+++ b/packages/components/button/src/button.vue
@@ -10,7 +10,7 @@
       { 'puik-button--fluid': fluid },
     ]"
     :disabled="disabled"
-    :data-test="buttonDataTest"
+    :data-test="`button-${dataTest}`"
     @click="setSelected"
   >
     <puik-icon
@@ -18,7 +18,7 @@
       :icon="leftIcon"
       :font-size="size !== 'sm' ? '1.25rem' : '1rem'"
       class="puik-button__left-icon"
-      :data-test="leftIconDataTest"
+      :data-test="`leftIcon-${dataTest}`"
     />
     <slot></slot>
     <puik-icon
@@ -26,7 +26,7 @@
       :icon="rightIcon"
       :font-size="size !== 'sm' ? '1.25rem' : '1rem'"
       class="puik-button__right-icon"
-      :data-test="rightIconDataTest"
+      :data-test="`rightIcon-${dataTest}`"
     />
   </component>
 </template>
diff --git a/packages/components/button/stories/button.stories.ts b/packages/components/button/stories/button.stories.ts
index 401d5efe..33217b57 100644
--- a/packages/components/button/stories/button.stories.ts
+++ b/packages/components/button/stories/button.stories.ts
@@ -71,17 +71,10 @@ export default {
       control: 'text',
       description: 'Set a link for the button (changes button to "a" html tag)',
     },
-    buttonDataTest: {
+    dataTest: {
       control: 'text',
-      description: 'Set a data-test attribute to the button',
-    },
-    leftIconDataTest: {
-      control: 'text',
-      description: 'Set a data-test attribute to the left icon',
-    },
-    rightIconDataTest: {
-      control: 'text',
-      description: 'Set a data-test attribute to the right icon',
+      description:
+        'Set a data-test attribute to the button `button-${dataTest}` `left-icon-${dataTest}` `right-icon-${dataTest}`',
     },
   },
   args: {
@@ -94,9 +87,6 @@ export default {
     to: undefined,
     href: undefined,
     default: 'Add to cart',
-    buttonDataTest: '',
-    leftIconDataTest: '',
-    rightIconDataTest: '',
   },
 } as Meta
 
diff --git a/packages/components/checkbox/src/checkbox.ts b/packages/components/checkbox/src/checkbox.ts
index e63526ca..b47f0491 100644
--- a/packages/components/checkbox/src/checkbox.ts
+++ b/packages/components/checkbox/src/checkbox.ts
@@ -12,11 +12,6 @@ export const checkboxProps = buildProps({
     required: false,
     default: undefined,
   },
-  labelDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
   disabled: {
     type: Boolean,
     required: false,
@@ -27,7 +22,7 @@ export const checkboxProps = buildProps({
     required: false,
     default: false,
   },
-  inputDataTest: {
+  dataTest: {
     type: String,
     required: false,
     default: undefined,
diff --git a/packages/components/checkbox/src/checkbox.vue b/packages/components/checkbox/src/checkbox.vue
index e91fd61a..e641dd6c 100644
--- a/packages/components/checkbox/src/checkbox.vue
+++ b/packages/components/checkbox/src/checkbox.vue
@@ -8,13 +8,13 @@
       type="checkbox"
       :indeterminate="indeterminate"
       :disabled="disabled"
-      :data-test="inputDataTest"
+      :data-test="`input-${dataTest}`"
     />
     <label
       v-if="$slots.default || label"
       :for="id"
       class="puik-checkbox__label"
-      :data-test="labelDataTest"
+      :data-test="`label-${dataTest}`"
     >
       <slot>{{ label }}</slot>
     </label>
diff --git a/packages/components/checkbox/stories/checkbox.stories.ts b/packages/components/checkbox/stories/checkbox.stories.ts
index 636a2f7d..877b20ee 100644
--- a/packages/components/checkbox/stories/checkbox.stories.ts
+++ b/packages/components/checkbox/stories/checkbox.stories.ts
@@ -33,11 +33,9 @@ export default {
         },
       },
     },
-    inputDataTest: {
-      description: 'Set the input data-test attribute',
-    },
-    labelDataTest: {
-      description: 'Set the label data-test attribute',
+    dataTest: {
+      description:
+        'Set the data-test attribute for the label and the input `label-${dataTest}` `input-${dataTest}`}`',
     },
   },
   args: {
@@ -46,8 +44,6 @@ export default {
     indeterminate: false,
     disabled: false,
     modelValue: false,
-    inputDataTest: '',
-    labelDataTest: '',
   },
 } as Meta
 
diff --git a/packages/components/input/src/input.ts b/packages/components/input/src/input.ts
index 812a81b7..a921ae82 100644
--- a/packages/components/input/src/input.ts
+++ b/packages/components/input/src/input.ts
@@ -90,12 +90,7 @@ export const inputProps = buildProps({
     required: false,
     default: false,
   },
-  inputDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
-  errorTextDataTest: {
+  dataTest: {
     type: String,
     required: false,
     default: undefined,
diff --git a/packages/components/input/src/input.vue b/packages/components/input/src/input.vue
index bbb031ce..d5b709e0 100644
--- a/packages/components/input/src/input.vue
+++ b/packages/components/input/src/input.vue
@@ -17,7 +17,7 @@
         :min="type === 'number' ? min : undefined"
         :max="type === 'number' ? max : undefined"
         :step="type === 'number' ? step : undefined"
-        :data-test="inputDataTest"
+        :data-test="`input-${dataTest}`"
         @focus="handleFocus"
         @blur="handleBlur"
       />
@@ -52,7 +52,7 @@
         ></puik-icon>
         <span
           class="puik-input__hint__error__text"
-          :data-test="errorTextDataTest"
+          :data-test="`error-${dataTest}`"
         >
           <slot name="error">{{ error }}</slot>
         </span>
diff --git a/packages/components/input/stories/input.stories.ts b/packages/components/input/stories/input.stories.ts
index 6e7bad25..95ee4e43 100644
--- a/packages/components/input/stories/input.stories.ts
+++ b/packages/components/input/stories/input.stories.ts
@@ -93,11 +93,9 @@ export default {
       control: 'none',
       description: 'Append an icon or text to the input',
     },
-    inputDataTest: {
-      description: 'Set the data-test attribute on the input element',
-    },
-    errorTextDataTest: {
-      description: 'Set the data-test attribute on the error slot',
+    dataTest: {
+      description:
+        'Set the data-test attribute on the input and error text elements `input-${inputDataTest}` `error-${inputDataTest}`',
     },
   },
 } as Meta
@@ -130,8 +128,6 @@ export const Default = {
     min: undefined,
     max: undefined,
     disabled: false,
-    inputDataTest: '',
-    errorTextDataTest: '',
   },
 
   parameters: {
diff --git a/packages/components/menu/src/menu-item-title.ts b/packages/components/menu/src/menu-item-title.ts
index e64742ce..139d95d4 100644
--- a/packages/components/menu/src/menu-item-title.ts
+++ b/packages/components/menu/src/menu-item-title.ts
@@ -3,7 +3,7 @@ import type { ExtractPropTypes } from 'vue'
 import type MenuItemTitle from './menu-item-title.vue'
 
 export const menuItemTitleProps = buildProps({
-  titleDataTest: {
+  dataTest: {
     type: String,
     required: false,
     default: undefined,
diff --git a/packages/components/menu/src/menu-item-title.vue b/packages/components/menu/src/menu-item-title.vue
index dcd7a9f4..695ac726 100644
--- a/packages/components/menu/src/menu-item-title.vue
+++ b/packages/components/menu/src/menu-item-title.vue
@@ -1,5 +1,5 @@
 <template>
-  <h4 class="puik-menu-item-title" :data-test="titleDataTest">
+  <h4 class="puik-menu-item-title" :data-test="`title-${dataTest}`">
     <slot></slot>
   </h4>
 </template>
diff --git a/packages/components/menu/stories/menu-item-title.stories.ts b/packages/components/menu/stories/menu-item-title.stories.ts
index de39c6f8..c519c2f6 100644
--- a/packages/components/menu/stories/menu-item-title.stories.ts
+++ b/packages/components/menu/stories/menu-item-title.stories.ts
@@ -9,8 +9,8 @@ export default {
       control: 'text',
       description: 'Default slot to set title text',
     },
-    titleDataTest: {
-      description: 'Set the data-test attribute for title',
+    dataTest: {
+      description: 'Set the data-test attribute for title `title-${dataTest}`',
       control: 'text',
     },
   },
diff --git a/packages/components/modal/src/modal.ts b/packages/components/modal/src/modal.ts
index b81a1689..d17b5a0c 100644
--- a/packages/components/modal/src/modal.ts
+++ b/packages/components/modal/src/modal.ts
@@ -30,21 +30,11 @@ export const modalProps = buildProps({
     required: false,
     default: undefined,
   },
-  titleDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
   mainButtonText: {
     type: String,
     required: false,
     default: undefined,
   },
-  mainButtonDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
   isMainButtonDisabled: {
     type: Boolean,
     required: false,
@@ -55,21 +45,11 @@ export const modalProps = buildProps({
     required: false,
     default: undefined,
   },
-  secondButtonDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
   sideButtonText: {
     type: String,
     required: false,
     default: undefined,
   },
-  sideButtonDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
   variant: {
     type: String as PropType<ModalVariantType>,
     required: false,
@@ -90,7 +70,7 @@ export const modalProps = buildProps({
     required: false,
     default: undefined,
   },
-  closeButtonDataTest: {
+  dataTest: {
     type: String,
     required: false,
     default: undefined,
diff --git a/packages/components/modal/src/modal.vue b/packages/components/modal/src/modal.vue
index dac3363e..e18f0860 100644
--- a/packages/components/modal/src/modal.vue
+++ b/packages/components/modal/src/modal.vue
@@ -22,7 +22,11 @@
             :is-disabled="!showTitleTooltip"
             class="puik-modal__dialogPanelContainer__dialogPanel__header__title"
           >
-            <h2 ref="modalTitleElem" class="title" :data-test="titleDataTest">
+            <h2
+              ref="modalTitleElem"
+              class="title"
+              :data-test="`title-${dataTest}`"
+            >
               {{ title }}
             </h2>
             <template #description>{{ title }}</template>
@@ -33,7 +37,7 @@
             :aria-label="t('puik.modal.closeButtonLabel')"
             class="puik-modal__dialogPanelContainer__dialogPanel__header__close-button"
             variant="text"
-            :data-test="closeButtonDataTest"
+            :data-test="`closeButton-${dataTest}`"
             @click="sendCloseModalEvent()"
           >
             <puik-icon icon="close" :font-size="CLOSE_ICON_SIZE" />
@@ -50,7 +54,7 @@
             v-if="secondButtonText"
             class="puik-modal__dialogPanelContainer__dialogPanel__footer__button--second"
             :variant="secondButtonVariant"
-            :data-test="secondButtonDataTest"
+            :data-test="`secondButton-${dataTest}`"
             @click="$emit('button-second')"
           >
             {{ secondButtonText }}
@@ -60,7 +64,7 @@
             class="puik-modal__dialogPanelContainer__dialogPanel__footer__button--main"
             :variant="mainButtonVariant"
             :disabled="isMainButtonDisabled"
-            :data-test="mainButtonDataTest"
+            :data-test="`mainButton-${dataTest}`"
             @click="$emit('button-main')"
           >
             {{ mainButtonText }}
@@ -72,7 +76,7 @@
             v-if="PuikModalVariant.DIALOG === variant && sideButtonText"
             class="puik-modal__dialogPanelContainer__dialogPanel__footer__button--side"
             variant="text"
-            :data-test="sideButtonDataTest"
+            :data-test="`sideButton-${dataTest}`"
             @click="$emit('button-side')"
           >
             {{ sideButtonText }}
diff --git a/packages/components/modal/stories/modal.stories.ts b/packages/components/modal/stories/modal.stories.ts
index 2644ff49..93912477 100644
--- a/packages/components/modal/stories/modal.stories.ts
+++ b/packages/components/modal/stories/modal.stories.ts
@@ -67,10 +67,6 @@ export default {
         },
       },
     },
-    titleDataTest: {
-      description: 'Set the data-test attribute of the title',
-      control: 'text',
-    },
     mainButtonText: {
       description: 'Set the text of the main button',
       control: 'text',
@@ -83,10 +79,6 @@ export default {
         },
       },
     },
-    mainButtonDataTest: {
-      description: 'Set the data-test attribute of the main button',
-      control: 'text',
-    },
     secondButtonText: {
       description: 'Set the text of the secondary button',
       control: 'text',
@@ -99,10 +91,6 @@ export default {
         },
       },
     },
-    secondButtonDataTest: {
-      description: 'Set the data-test attribute of the secondary button',
-      control: 'text',
-    },
     sideButtonText: {
       description: 'Set the text of the side button',
       control: 'text',
@@ -115,10 +103,6 @@ export default {
         },
       },
     },
-    sideButtonDataTest: {
-      description: 'Set the data-test attribute of the side button',
-      control: 'text',
-    },
     variant: {
       description: 'Set the style of the modal (use the PuikModalVariant enum)',
       control: 'select',
@@ -191,14 +175,15 @@ export enum PuikModalSize {
         },
       },
     },
+    dataTest: {
+      description:
+        'Set the data-test attribute for modal `title-${dataTest}` `mainButton-${dataTest}` `secondButton-${dataTest}` `sideButton-${dataTest}` `closeButton-${dataTest}`',
+      control: 'text',
+    },
     default: {
       description: 'Modal content',
       control: 'none',
     },
-    closeButtonDataTest: {
-      description: 'Set the data-test attribute of the close button',
-      control: 'text',
-    },
     'button-main': {
       control: 'none',
       description: 'Event emitted on main button click',
@@ -220,11 +205,6 @@ export enum PuikModalSize {
     titleIcon: 'home',
     variant: PuikModalVariant.DIALOG,
     size: PuikModalSize.SMALL,
-    titleDataTest: '',
-    mainButtonDataTest: '',
-    secondButtonDataTest: '',
-    sideButtonDataTest: '',
-    closeButtonDataTest: '',
   },
   parameters: {
     chromatic: { delay: 3000 },
diff --git a/packages/components/pagination/src/pagination-large.ts b/packages/components/pagination/src/pagination-large.ts
index 08316006..aa3e87f4 100644
--- a/packages/components/pagination/src/pagination-large.ts
+++ b/packages/components/pagination/src/pagination-large.ts
@@ -37,17 +37,7 @@ export const paginationLargeProps = buildProps({
     required: false,
     default: undefined,
   },
-  labelDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
-  previousButtonDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
-  nextButtonDataTest: {
+  dataTest: {
     type: String,
     required: false,
     default: undefined,
diff --git a/packages/components/pagination/src/pagination-large.vue b/packages/components/pagination/src/pagination-large.vue
index f325e05e..9ca1dfcd 100644
--- a/packages/components/pagination/src/pagination-large.vue
+++ b/packages/components/pagination/src/pagination-large.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="puik-pagination__label" :data-test="labelDataTest">
+  <span class="puik-pagination__label" :data-test="`label-${dataTest}`">
     {{ label }}
   </span>
 
@@ -10,7 +10,7 @@
       class="puik-pagination__previous-button puik-pagination__button"
       left-icon="keyboard_arrow_left"
       variant="tertiary"
-      :button-data-test="previousButtonDataTest"
+      :data-test="`previousButton-${dataTest}`"
       @click="emit('update:page', page - 1)"
     >
       <span class="puik-pagination__previous-button-text">
@@ -46,7 +46,7 @@
       class="puik-pagination__button puik-pagination__next-button"
       right-icon="keyboard_arrow_right"
       variant="tertiary"
-      :button-data-test="nextButtonDataTest"
+      :data-test="`nextButton-${dataTest}`"
       @click="emit('update:page', page + 1)"
     >
       <span class="puik-pagination__next-button-text">
diff --git a/packages/components/pagination/src/pagination-loader.ts b/packages/components/pagination/src/pagination-loader.ts
index c57f269c..b5f621a7 100644
--- a/packages/components/pagination/src/pagination-loader.ts
+++ b/packages/components/pagination/src/pagination-loader.ts
@@ -22,7 +22,7 @@ export const paginationLoaderProps = buildProps({
     required: false,
     default: undefined,
   },
-  nextButtonDataTest: {
+  dataTest: {
     type: String,
     required: false,
     default: undefined,
diff --git a/packages/components/pagination/src/pagination-loader.vue b/packages/components/pagination/src/pagination-loader.vue
index 88da8582..e7f83294 100644
--- a/packages/components/pagination/src/pagination-loader.vue
+++ b/packages/components/pagination/src/pagination-loader.vue
@@ -8,7 +8,7 @@
     variant="tertiary"
     class="puik-pagination__button puik-pagination__load-more-button"
     fluid
-    :button-data-test="nextButtonDataTest"
+    :data-test="`loadMoreButton-${dataTest}`"
     @click="$emit('update:modelValue', modelValue + 1)"
   >
     {{ currentButtonLabel }}
diff --git a/packages/components/pagination/src/pagination-medium.ts b/packages/components/pagination/src/pagination-medium.ts
index 577efeae..e711f31b 100644
--- a/packages/components/pagination/src/pagination-medium.ts
+++ b/packages/components/pagination/src/pagination-medium.ts
@@ -31,17 +31,7 @@ export const paginationMediumProps = buildProps({
     required: false,
     default: undefined,
   },
-  labelDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
-  previousButtonDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
-  nextButtonDataTest: {
+  dataTest: {
     type: String,
     required: false,
     default: undefined,
diff --git a/packages/components/pagination/src/pagination-medium.vue b/packages/components/pagination/src/pagination-medium.vue
index aecf6d34..58067a8e 100644
--- a/packages/components/pagination/src/pagination-medium.vue
+++ b/packages/components/pagination/src/pagination-medium.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="puik-pagination__label" :data-test="labelDataTest">
+  <span class="puik-pagination__label" :data-test="`label-${dataTest}`">
     {{ label }}
   </span>
 
@@ -10,7 +10,7 @@
       class="puik-pagination__previous-button puik-pagination__button"
       left-icon="keyboard_arrow_left"
       variant="secondary"
-      :button-data-test="previousButtonDataTest"
+      :data-test="`previousButton-${dataTest}`"
       @click="page -= 1"
     ></puik-button>
 
@@ -78,7 +78,7 @@
       class="puik-pagination__button puik-pagination__next-button"
       right-icon="keyboard_arrow_right"
       variant="secondary"
-      :button-data-test="nextButtonDataTest"
+      :data-test="`nextButton-${dataTest}`"
       @click="page += 1"
     ></puik-button>
   </div>
diff --git a/packages/components/pagination/src/pagination-mobile.ts b/packages/components/pagination/src/pagination-mobile.ts
index 9d1ced5a..09041a14 100644
--- a/packages/components/pagination/src/pagination-mobile.ts
+++ b/packages/components/pagination/src/pagination-mobile.ts
@@ -22,17 +22,7 @@ export const paginationMobileProps = buildProps({
     required: false,
     default: undefined,
   },
-  labelDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
-  previousButtonDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
-  nextButtonDataTest: {
+  dataTest: {
     type: String,
     required: false,
     default: undefined,
diff --git a/packages/components/pagination/src/pagination-mobile.vue b/packages/components/pagination/src/pagination-mobile.vue
index 06cf0447..5479c173 100644
--- a/packages/components/pagination/src/pagination-mobile.vue
+++ b/packages/components/pagination/src/pagination-mobile.vue
@@ -5,11 +5,11 @@
     class="puik-pagination__previous-button puik-pagination__button"
     left-icon="keyboard_arrow_left"
     variant="secondary"
-    :button-data-test="previousButtonDataTest"
+    :data-test="`previousButton-${dataTest}`"
     @click="emit('update:modelValue', modelValue - 1)"
   ></puik-button>
 
-  <span class="puik-pagination__label" :data-test="labelDataTest">
+  <span class="puik-pagination__label" :data-test="`label-${dataTest}`">
     {{ label }}
   </span>
 
@@ -19,7 +19,7 @@
     class="puik-pagination__button puik-pagination__next-button"
     right-icon="keyboard_arrow_right"
     variant="secondary"
-    :button-data-test="nextButtonDataTest"
+    :data-test="`nextButton-${dataTest}`"
     @click="emit('update:modelValue', modelValue + 1)"
   ></puik-button>
 </template>
diff --git a/packages/components/pagination/src/pagination-small.ts b/packages/components/pagination/src/pagination-small.ts
index 5cc1e166..7deaf8a8 100644
--- a/packages/components/pagination/src/pagination-small.ts
+++ b/packages/components/pagination/src/pagination-small.ts
@@ -22,17 +22,7 @@ export const paginationSmallProps = buildProps({
     required: false,
     default: undefined,
   },
-  labelDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
-  previousButtonDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
-  nextButtonDataTest: {
+  dataTest: {
     type: String,
     required: false,
     default: undefined,
diff --git a/packages/components/pagination/src/pagination-small.vue b/packages/components/pagination/src/pagination-small.vue
index 1c385c4b..ac813ba9 100644
--- a/packages/components/pagination/src/pagination-small.vue
+++ b/packages/components/pagination/src/pagination-small.vue
@@ -1,12 +1,12 @@
 <template>
-  <span class="puik-pagination__label" :data-test="labelDataTest">
+  <span class="puik-pagination__label" :data-test="`label-${dataTest}`">
     {{ label }}
   </span>
 
   <puik-button
     :aria-label="t('puik.pagination.previous', { page: page - 1 })"
     :disabled="page <= 1 || disabled"
-    :button-data-test="previousButtonDataTest"
+    :data-test="`previousButton-${dataTest}`"
     class="puik-pagination__previous-button puik-pagination__button"
     left-icon="keyboard_arrow_left"
     variant="secondary"
@@ -16,7 +16,7 @@
   <puik-button
     :aria-label="t('puik.pagination.next', { page: page + 1 })"
     :disabled="page >= maxPage || disabled"
-    :button-data-test="nextButtonDataTest"
+    :data-test="`nextButton-${dataTest}`"
     class="puik-pagination__button puik-pagination__next-button"
     right-icon="keyboard_arrow_right"
     variant="secondary"
diff --git a/packages/components/pagination/src/pagination.ts b/packages/components/pagination/src/pagination.ts
index e8c387d2..528b57ef 100644
--- a/packages/components/pagination/src/pagination.ts
+++ b/packages/components/pagination/src/pagination.ts
@@ -61,17 +61,7 @@ export const paginationProps = buildProps({
     required: false,
     default: false,
   },
-  labelDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
-  previousButtonDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
-  nextButtonDataTest: {
+  dataTest: {
     type: String,
     required: false,
     default: undefined,
diff --git a/packages/components/pagination/src/pagination.vue b/packages/components/pagination/src/pagination.vue
index 41161381..668dc8e9 100644
--- a/packages/components/pagination/src/pagination.vue
+++ b/packages/components/pagination/src/pagination.vue
@@ -11,7 +11,7 @@
       :label="currentLabel"
       :loader-button-label="loaderButtonLabel"
       :disabled="loaderButtonDisabled"
-      :next-button-data-test="nextButtonDataTest"
+      :data-test="dataTest"
     />
 
     <div v-else class="puik-pagination__content">
@@ -19,18 +19,14 @@
         v-if="variant === PuikPaginationVariantEnum.small"
         v-model="currentPage"
         v-bind="commonPaginationProps"
-        :label-data-test="labelDataTest"
-        :previous-button-data-test="previousButtonDataTest"
-        :next-button-data-test="nextButtonDataTest"
+        :data-test="dataTest"
       />
 
       <pagination-mobile
         v-if="variant === PuikPaginationVariantEnum.mobile"
         v-model="currentPage"
         v-bind="commonPaginationProps"
-        :previous-button-data-test="previousButtonDataTest"
-        :next-button-data-test="nextButtonDataTest"
-        :label-data-test="labelDataTest"
+        :data-test="dataTest"
       />
 
       <pagination-medium
@@ -38,9 +34,7 @@
         v-model="currentPage"
         v-bind="commonPaginationProps"
         :total-item="totalItem"
-        :previous-button-data-test="previousButtonDataTest"
-        :next-button-data-test="nextButtonDataTest"
-        :label-data-test="labelDataTest"
+        :data-test="dataTest"
       />
 
       <pagination-large
@@ -49,9 +43,7 @@
         :items-per-page="itemsPerPage"
         :total-item="totalItem"
         :items-per-page-options="itemsPerPageOptions"
-        :previous-button-data-test="previousButtonDataTest"
-        :next-button-data-test="nextButtonDataTest"
-        :label-data-test="labelDataTest"
+        :data-test="dataTest"
         v-bind="commonPaginationProps"
         @update:items-per-page="emit('update:itemsPerPage', $event)"
       />
diff --git a/packages/components/pagination/stories/pagination.stories.ts b/packages/components/pagination/stories/pagination.stories.ts
index ccd65702..3cc34016 100644
--- a/packages/components/pagination/stories/pagination.stories.ts
+++ b/packages/components/pagination/stories/pagination.stories.ts
@@ -90,18 +90,6 @@ export default {
         },
       },
     },
-    labelDataTest: {
-      control: 'text',
-      description: 'Set the label data-test attribute',
-      table: {
-        defaultValue: {
-          summary: 'undefined',
-        },
-        type: {
-          summary: 'string',
-        },
-      },
-    },
     loaderButtonLabel: {
       control: 'text',
       description: 'Set the text used in button on loader variant',
@@ -114,29 +102,10 @@ export default {
         },
       },
     },
-    previousButtonDataTest: {
-      control: 'text',
-      description: 'Set the previous button data-test attribute',
-      table: {
-        defaultValue: {
-          summary: 'undefined',
-        },
-        type: {
-          summary: 'string',
-        },
-      },
-    },
-    nextButtonDataTest: {
+    dataTest: {
       control: 'text',
-      description: 'Set the next button data-test attribute',
-      table: {
-        defaultValue: {
-          summary: 'undefined',
-        },
-        type: {
-          summary: 'string',
-        },
-      },
+      description:
+        'Set the data-test attribute `nextButton-${dataTest}` `previousButton-${dataTest}` `label-${dataTest}` `loadMoreButton-${dataTest}` (only for loader variant)',
     },
   },
   args: {
diff --git a/packages/components/progress-stepper/src/progress-stepper-step.ts b/packages/components/progress-stepper/src/progress-stepper-step.ts
index 3ca1572e..0ab8a271 100644
--- a/packages/components/progress-stepper/src/progress-stepper-step.ts
+++ b/packages/components/progress-stepper/src/progress-stepper-step.ts
@@ -7,17 +7,7 @@ export const progressStepperStepProps = buildProps({
     type: [String, Number],
     required: true,
   },
-  stepButtonDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
-  textDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
-  additionalTextDataTest: {
+  dataTest: {
     type: String,
     required: false,
     default: undefined,
diff --git a/packages/components/progress-stepper/src/progress-stepper-step.vue b/packages/components/progress-stepper/src/progress-stepper-step.vue
index cb2b1753..0c4ae69e 100644
--- a/packages/components/progress-stepper/src/progress-stepper-step.vue
+++ b/packages/components/progress-stepper/src/progress-stepper-step.vue
@@ -9,19 +9,22 @@
       aria-live="polite"
       class="puik-progress-stepper-step__button"
       size="sm"
-      :button-data-test="stepButtonDataTest"
+      :data-test="`stepButton-${dataTest}`"
       @click="onClick"
     >
       <template v-if="!isCompleted">
         {{ step }}
       </template>
     </puik-button>
-    <span class="puik-progress-stepper-step__text" :data-test="textDataTest">
+    <span
+      class="puik-progress-stepper-step__text"
+      :data-test="`text-${dataTest}`"
+    >
       <slot name="text"></slot>
     </span>
     <span
       class="puik-progress-stepper-step__additional-text"
-      :data-test="additionalTextDataTest"
+      :data-test="`additionalText-${dataTest}`"
     >
       <slot name="additional-text"></slot>
     </span>
diff --git a/packages/components/progress-stepper/stories/progress-stepper-step.stories.ts b/packages/components/progress-stepper/stories/progress-stepper-step.stories.ts
index 016239f2..d8eb92b4 100644
--- a/packages/components/progress-stepper/stories/progress-stepper-step.stories.ts
+++ b/packages/components/progress-stepper/stories/progress-stepper-step.stories.ts
@@ -15,24 +15,17 @@ export default {
         },
       },
     },
-    stepDataTest: {
-      description: 'Set the data-test of the step',
-      control: 'text',
-    },
     text: {
       description: 'Text of the step',
       control: 'text',
     },
-    textDataTest: {
-      description: 'Set the data-test of the text',
-      control: 'text',
-    },
     'additional-text': {
       description: 'Additional text of the step',
       control: 'text',
     },
-    additionalTextDataTest: {
-      description: 'Set the data-test of the additional text',
+    dataTest: {
+      description:
+        'Set the data-test of the progress stepper step `stepButton-${dataTest}` `text-${dataTest}` `additionalText-${dataTest}`',
       control: 'text',
     },
     click: {
diff --git a/packages/components/radio/src/radio.ts b/packages/components/radio/src/radio.ts
index 5df5d815..c50fc0ce 100644
--- a/packages/components/radio/src/radio.ts
+++ b/packages/components/radio/src/radio.ts
@@ -8,11 +8,6 @@ export const radioProps = buildProps({
     required: false,
     default: undefined,
   },
-  labelDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
   name: {
     type: String,
     required: false,
@@ -33,7 +28,7 @@ export const radioProps = buildProps({
     required: false,
     default: false,
   },
-  inputDataTest: {
+  dataTest: {
     type: String,
     required: false,
     default: undefined,
diff --git a/packages/components/radio/src/radio.vue b/packages/components/radio/src/radio.vue
index 8ac404b1..90bebd60 100644
--- a/packages/components/radio/src/radio.vue
+++ b/packages/components/radio/src/radio.vue
@@ -10,14 +10,14 @@
       class="puik-radio__input"
       type="radio"
       :name="name"
-      :data-test="inputDataTest"
+      :data-test="`input-${dataTest}`"
       @focus="handleFocus"
     />
     <label
       v-if="$slots.default || label"
       :for="id"
       class="puik-radio__label"
-      :data-test="labelDataTest"
+      :data-test="`label-${dataTest}`"
     >
       <slot>{{ label }}</slot>
     </label>
diff --git a/packages/components/radio/stories/radio.stories.ts b/packages/components/radio/stories/radio.stories.ts
index 58cbcb7e..2f03bd64 100644
--- a/packages/components/radio/stories/radio.stories.ts
+++ b/packages/components/radio/stories/radio.stories.ts
@@ -10,10 +10,6 @@ export default {
       control: 'text',
       description: 'Label of the radio button',
     },
-    labelDataTest: {
-      control: 'text',
-      description: 'Set the data-test attribute of the label',
-    },
     disabled: {
       control: 'boolean',
       description: 'Set if the radio button is disabled',
@@ -40,9 +36,10 @@ export default {
         },
       },
     },
-    inputDataTest: {
+    dataTest: {
       control: 'text',
-      description: 'Set the data-test attribute of the input',
+      description:
+        'Set the data-test attribute of the input and the label `label-${dataTest}` `input-${dataTest}`',
     },
   },
   args: {
@@ -51,8 +48,6 @@ export default {
     name: 'Slot by default',
     value: '',
     modelValue: '',
-    labelDataTest: '',
-    inputDataTest: '',
   },
 } as Meta
 
diff --git a/packages/components/select/src/option.ts b/packages/components/select/src/option.ts
index d2d4d2c2..b49dba0e 100644
--- a/packages/components/select/src/option.ts
+++ b/packages/components/select/src/option.ts
@@ -23,7 +23,7 @@ export const optionProps = buildProps({
     required: false,
     default: false,
   },
-  optionDataTest: {
+  dataTest: {
     type: String,
     required: false,
   },
diff --git a/packages/components/select/src/option.vue b/packages/components/select/src/option.vue
index 22efff69..24d29cc4 100644
--- a/packages/components/select/src/option.vue
+++ b/packages/components/select/src/option.vue
@@ -12,7 +12,7 @@
         'puik-option--selected': selectedValue === value,
         'puik-option--disabled': disabled,
       }"
-      :data-test="optionDataTest"
+      :data-test="dataTest"
     >
       <slot class="puik-option__label">{{ label }}</slot>
       <puik-icon
diff --git a/packages/components/select/src/select.ts b/packages/components/select/src/select.ts
index 82ac7575..00aeb708 100644
--- a/packages/components/select/src/select.ts
+++ b/packages/components/select/src/select.ts
@@ -83,12 +83,7 @@ export const selectProps = buildProps({
     required: false,
     default: undefined,
   },
-  searchInputDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
-  noResultsDataTest: {
+  dataTest: {
     type: String,
     required: false,
     default: undefined,
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index 30433a6e..49ca0c10 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -54,7 +54,7 @@
             v-model="query"
             class="puik-select__search"
             :placeholder="t('puik.select.searchPlaceholder')"
-            :input-data-test="searchInputDataTest"
+            :data-test="`searchInput-${dataTest}`"
           >
             <template #prepend
               ><puik-icon
@@ -71,7 +71,7 @@
                 : !filteredItems?.length)
             "
             class="puik-select__no-results"
-            :data-test="noResultsDataTest"
+            :data-test="`noResults-${dataTest}`"
           >
             {{ noMatchText || `${t('puik.select.noResults')} ${query}` }}
           </p>
@@ -83,7 +83,7 @@
                   :key="option"
                   :label="option[labelKey]"
                   :value="isObject(option) ? option[valueKey] : option"
-                  :option-data-test="`dataTestOption-${index + 1}`"
+                  :data-test="`dataTestOption-${dataTest}-${index + 1}`"
                 />
               </template>
             </slot>
diff --git a/packages/components/select/stories/select.stories.ts b/packages/components/select/stories/select.stories.ts
index 0858f2f9..bfbcd35a 100644
--- a/packages/components/select/stories/select.stories.ts
+++ b/packages/components/select/stories/select.stories.ts
@@ -109,27 +109,14 @@ export default {
         category: 'Common',
       },
     },
-    selectDataTest: {
+    dataTest: {
       control: 'text',
-      description: 'Set the data-test attribute for the select',
+      description:
+        'Set the data-test attribute `searchInput-${dataTest}` `noResults-${dataTest}` `select-${dataTest}` `dataTestOption-${dataTest}-${index + 1}`',
       table: {
         category: 'Common',
       },
     },
-    searchInputDataTest: {
-      control: 'text',
-      description: 'Set the data-test attribute for the search input',
-      table: {
-        category: 'Searchable',
-      },
-    },
-    noResultsDataTest: {
-      control: 'text',
-      description: 'Set the data-test attribute for the no results message',
-      table: {
-        category: 'Searchable',
-      },
-    },
   },
   args: {
     labelKey: '',
diff --git a/packages/components/sidebar/src/sidebar-group-item.ts b/packages/components/sidebar/src/sidebar-group-item.ts
index 059a07f6..c1cfb797 100644
--- a/packages/components/sidebar/src/sidebar-group-item.ts
+++ b/packages/components/sidebar/src/sidebar-group-item.ts
@@ -21,7 +21,7 @@ export const sidebarGroupItemProps = buildProps({
     default: false,
     required: false,
   },
-  sidebarGroupItemDataTest: {
+  dataTest: {
     type: String,
     required: false,
     default: undefined,
diff --git a/packages/components/sidebar/src/sidebar-group-item.vue b/packages/components/sidebar/src/sidebar-group-item.vue
index df2334de..004620be 100644
--- a/packages/components/sidebar/src/sidebar-group-item.vue
+++ b/packages/components/sidebar/src/sidebar-group-item.vue
@@ -11,9 +11,7 @@
       :name="accordionName"
       :icon="icon"
       class="puik-sidebar-group-item__accordion"
-      :title-data-test="`${sidebarGroupItemDataTest}-title`"
-      :icon-data-test="`${sidebarGroupItemDataTest}-icon`"
-      :button-data-test="`${sidebarGroupItemDataTest}-button`"
+      :data-test="`sidebarAccordion-${dataTest}`"
     >
       <slot></slot>
     </puik-accordion>
@@ -23,7 +21,7 @@
           variant="text"
           fluid
           class="puik-sidebar-group-item__collapsed-button"
-          :button-data-test="`${sidebarGroupItemDataTest}-button`"
+          :data-test="`sidebarMenuButton-${dataTest}`"
         >
           <puik-icon :icon="icon" font-size="1.25rem"></puik-icon>
         </puik-button>
diff --git a/packages/components/sidebar/src/sidebar-item.ts b/packages/components/sidebar/src/sidebar-item.ts
index 881acf73..1bfdd318 100644
--- a/packages/components/sidebar/src/sidebar-item.ts
+++ b/packages/components/sidebar/src/sidebar-item.ts
@@ -28,7 +28,7 @@ export const sidebarItemProps = buildProps({
     required: false,
     default: false,
   },
-  sidebarItemDataTest: {
+  dataTest: {
     type: String,
     required: false,
     default: undefined,
diff --git a/packages/components/sidebar/src/sidebar-item.vue b/packages/components/sidebar/src/sidebar-item.vue
index af107456..0b815769 100644
--- a/packages/components/sidebar/src/sidebar-item.vue
+++ b/packages/components/sidebar/src/sidebar-item.vue
@@ -13,7 +13,7 @@
       fluid
       variant="text"
       class="puik-sidebar-item__button"
-      :button-data-test="`${sidebarItemDataTest}-menubuttonTitle`"
+      :data-test="`menubuttonTitle-${dataTest}`"
     >
       {{ title }}
     </puik-button>
@@ -28,11 +28,9 @@
     :href="href"
     fluid
     variant="text"
-    :button-data-test="`${sidebarItemDataTest}-buttonTitle`"
+    :data-test="`buttonTitle-${dataTest}`"
   >
-    <span v-if="isExpanded" :data-test="`${sidebarItemDataTest}-Title`">{{
-      title
-    }}</span>
+    <span v-if="isExpanded" :data-test="`title-${dataTest}`">{{ title }}</span>
   </puik-button>
 </template>
 
diff --git a/packages/components/sidebar/src/sidebar-title.ts b/packages/components/sidebar/src/sidebar-title.ts
index f76bfb10..3e8f42ab 100644
--- a/packages/components/sidebar/src/sidebar-title.ts
+++ b/packages/components/sidebar/src/sidebar-title.ts
@@ -8,7 +8,7 @@ export const sidebarTitleProps = buildProps({
     required: false,
     default: 'h3',
   },
-  sidebarTitleDataTest: {
+  dataTest: {
     type: String,
     required: false,
     default: undefined,
diff --git a/packages/components/sidebar/src/sidebar-title.vue b/packages/components/sidebar/src/sidebar-title.vue
index 2dd995ef..22022467 100644
--- a/packages/components/sidebar/src/sidebar-title.vue
+++ b/packages/components/sidebar/src/sidebar-title.vue
@@ -3,7 +3,7 @@
     :is="tag"
     v-if="isExpanded"
     class="puik-sidebar-title"
-    :data-test="sidebarTitleDataTest"
+    :data-test="`sidebarTitle-${dataTest}`"
   >
     <slot></slot>
   </component>
diff --git a/packages/components/sidebar/stories/sidebar-group-item.stories.ts b/packages/components/sidebar/stories/sidebar-group-item.stories.ts
index 82249000..e3ab8fe6 100644
--- a/packages/components/sidebar/stories/sidebar-group-item.stories.ts
+++ b/packages/components/sidebar/stories/sidebar-group-item.stories.ts
@@ -52,9 +52,10 @@ export default {
       control: 'none',
       description: 'Set the defaut content slot',
     },
-    sidebarGroupItemDataTest: {
+    dataTest: {
       control: 'text',
-      description: 'Set the data-test attribute on the sidebar group item',
+      description:
+        'Set the data-test attribute on the sidebar group item `sidebarAccordion-${dataTest}` `sidebarMenuButton-${dataTest}` ',
     },
   },
   args: {
diff --git a/packages/components/sidebar/stories/sidebar-item.stories.ts b/packages/components/sidebar/stories/sidebar-item.stories.ts
index f1f8ac26..41572548 100644
--- a/packages/components/sidebar/stories/sidebar-item.stories.ts
+++ b/packages/components/sidebar/stories/sidebar-item.stories.ts
@@ -67,9 +67,10 @@ export default {
       control: 'none',
       description: 'Set the defaut content slot',
     },
-    sidebarItemDataTest: {
+    dataTest: {
       control: 'text',
-      description: 'Set the data-test attribute on the item',
+      description:
+        'Set the data-test attribute on the item `menubuttonTitle-${dataTest}` `buttonTitle-${dataTest}` `title-${dataTest}`',
     },
   },
   args: {
diff --git a/packages/components/sidebar/stories/sidebar-title.stories.ts b/packages/components/sidebar/stories/sidebar-title.stories.ts
index 63f1bf46..ebcf35e8 100644
--- a/packages/components/sidebar/stories/sidebar-title.stories.ts
+++ b/packages/components/sidebar/stories/sidebar-title.stories.ts
@@ -30,9 +30,10 @@ export default {
         },
       },
     },
-    sidebarTitleDataTest: {
+    dataTest: {
       control: 'text',
-      description: 'Set the data-test attribute on the sidebar title',
+      description:
+        'Set the data-test attribute on the sidebar title `sidebarTitle-${dataTest}`',
     },
   },
   args: {

From 91b0ef46231ddec446324cd892afb799429d3dd0 Mon Sep 17 00:00:00 2001
From: Guillaume Lepoetre <guillaume.lepoetre@prestashop.com>
Date: Mon, 30 Oct 2023 16:51:58 +0100
Subject: [PATCH 05/14] feat: Add spinner data-test, update boutton

---
 packages/components/button/src/button.vue                    | 2 +-
 packages/components/button/stories/button.stories.ts         | 2 +-
 packages/components/spinner-loader/src/spinner-loader.ts     | 5 +++++
 packages/components/spinner-loader/src/spinner-loader.vue    | 1 +
 .../spinner-loader/stories/spinner-loader.stories.ts         | 4 ++++
 5 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/components/button/src/button.vue b/packages/components/button/src/button.vue
index 745abac1..25dcbca6 100644
--- a/packages/components/button/src/button.vue
+++ b/packages/components/button/src/button.vue
@@ -10,7 +10,7 @@
       { 'puik-button--fluid': fluid },
     ]"
     :disabled="disabled"
-    :data-test="`button-${dataTest}`"
+    :data-test="`${dataTest}`"
     @click="setSelected"
   >
     <puik-icon
diff --git a/packages/components/button/stories/button.stories.ts b/packages/components/button/stories/button.stories.ts
index 33217b57..a71e84a2 100644
--- a/packages/components/button/stories/button.stories.ts
+++ b/packages/components/button/stories/button.stories.ts
@@ -74,7 +74,7 @@ export default {
     dataTest: {
       control: 'text',
       description:
-        'Set a data-test attribute to the button `button-${dataTest}` `left-icon-${dataTest}` `right-icon-${dataTest}`',
+        'Set a data-test attribute to the button `${dataTest}` `left-icon-${dataTest}` `right-icon-${dataTest}`',
     },
   },
   args: {
diff --git a/packages/components/spinner-loader/src/spinner-loader.ts b/packages/components/spinner-loader/src/spinner-loader.ts
index 93a171cb..d2ea4486 100644
--- a/packages/components/spinner-loader/src/spinner-loader.ts
+++ b/packages/components/spinner-loader/src/spinner-loader.ts
@@ -33,6 +33,11 @@ export const spinnerLoaderProps = buildProps({
     required: false,
     default: 'bottom',
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: 'spinner-loader',
+  },
 } as const)
 
 export type SpinnerLoaderProps = ExtractPropTypes<typeof spinnerLoaderProps>
diff --git a/packages/components/spinner-loader/src/spinner-loader.vue b/packages/components/spinner-loader/src/spinner-loader.vue
index 332d8cf5..89b649d3 100644
--- a/packages/components/spinner-loader/src/spinner-loader.vue
+++ b/packages/components/spinner-loader/src/spinner-loader.vue
@@ -8,6 +8,7 @@
     ]"
     aria-live="polite"
     role="status"
+    :data-test="dataTest"
   >
     <div
       class="puik-spinner-loader__spinner"
diff --git a/packages/components/spinner-loader/stories/spinner-loader.stories.ts b/packages/components/spinner-loader/stories/spinner-loader.stories.ts
index 81f838b1..2578ff76 100644
--- a/packages/components/spinner-loader/stories/spinner-loader.stories.ts
+++ b/packages/components/spinner-loader/stories/spinner-loader.stories.ts
@@ -62,6 +62,10 @@ export default {
         },
       },
     },
+    dataTest: {
+      control: 'text',
+      description: 'Set the data-test attribute on the spinner loader',
+    },
   },
   args: {
     size: 'md',

From 29e76eefc9d168238134a9dafd0565a4f1274a9c Mon Sep 17 00:00:00 2001
From: Guillaume Lepoetre <guillaume.lepoetre@prestashop.com>
Date: Tue, 31 Oct 2023 17:34:37 +0100
Subject: [PATCH 06/14] feat: add data-test to PuikTag

---
 packages/components/tag/src/tag.ts             | 5 +++++
 packages/components/tag/src/tag.vue            | 3 ++-
 packages/components/tag/stories/tag.stories.ts | 5 +++++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/components/tag/src/tag.ts b/packages/components/tag/src/tag.ts
index f0b1ec83..e5eaf77a 100644
--- a/packages/components/tag/src/tag.ts
+++ b/packages/components/tag/src/tag.ts
@@ -52,6 +52,11 @@ export const tagProps = buildProps({
     Required: false,
     default: 'bottom',
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type TagProps = ExtractPropTypes<typeof tagProps>
diff --git a/packages/components/tag/src/tag.vue b/packages/components/tag/src/tag.vue
index 21f7bc8e..fec3e809 100644
--- a/packages/components/tag/src/tag.vue
+++ b/packages/components/tag/src/tag.vue
@@ -7,11 +7,12 @@
     ]"
   >
     <PuikIcon v-if="icon && icon != ''" :icon="icon" class="puik-tag__icon" />
-    <div class="puik-tag__content">
+    <div class="puik-tag__content" :data-test="`content-${dataTest}`">
       <puik-tooltip
         v-if="content?.length >= 30"
         :position="(tooltipPosition as PuikTooltipPosition)"
         :description="content"
+        :data-test="`tooltip-${dataTest}`"
       >
         <template #description>{{ content }}</template>
         {{ content }}
diff --git a/packages/components/tag/stories/tag.stories.ts b/packages/components/tag/stories/tag.stories.ts
index cc3d6251..b5c25d4d 100644
--- a/packages/components/tag/stories/tag.stories.ts
+++ b/packages/components/tag/stories/tag.stories.ts
@@ -103,6 +103,11 @@ export default {
         },
       },
     },
+    dataTest: {
+      description:
+        'Set the data-test attribute `content-${dataTest}` `tooltip-${dataTest}`',
+      control: 'text',
+    },
   },
   args: {
     id: 'puik-tag-id',

From 0b17aebd03fc9368a9a45bbfd5276d277f877028 Mon Sep 17 00:00:00 2001
From: Guillaume Lepoetre <guillaume.lepoetre@prestashop.com>
Date: Thu, 2 Nov 2023 08:29:19 +0100
Subject: [PATCH 07/14] fix: update select data-test

---
 packages/components/select/src/select.ts  | 5 -----
 packages/components/select/src/select.vue | 2 +-
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/components/select/src/select.ts b/packages/components/select/src/select.ts
index 00aeb708..80e44466 100644
--- a/packages/components/select/src/select.ts
+++ b/packages/components/select/src/select.ts
@@ -78,11 +78,6 @@ export const selectProps = buildProps({
     required: false,
     default: true,
   },
-  selectDataTest: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
   dataTest: {
     type: String,
     required: false,
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index 49ca0c10..d868a5ed 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -22,7 +22,7 @@
           tabindex="-1"
           :readonly="open"
           type="text"
-          :data-test="selectDataTest"
+          :data-test="`select-${dataTest}`"
           @input="
             handleAutoComplete(($event.target as HTMLInputElement)?.value)
           "

From 9a27bf0932062200dffbcaf6d7c26093cce161ed Mon Sep 17 00:00:00 2001
From: Guillaume Lepoetre <guillaume.lepoetre@prestashop.com>
Date: Thu, 2 Nov 2023 16:14:44 +0100
Subject: [PATCH 08/14] feat: add test

---
 .../accordion/test/accordion.spec.ts          | 25 ++++++++++
 packages/components/alert/test/alert.spec.ts  | 14 ++++++
 packages/components/badge/test/badge.spec.ts  |  5 ++
 .../breadcrumb/test/breadcrumb.spec.ts        | 21 +++++++--
 .../components/button/test/button.spec.ts     | 13 ++++++
 .../components/checkbox/test/checkbox.spec.ts |  6 +++
 packages/components/icon/test/icon.spec.ts    |  5 ++
 packages/components/input/test/input.spec.ts  | 15 ++++++
 packages/components/label/test/label.spec.ts  |  5 ++
 packages/components/link/test/link.spec.ts    |  5 ++
 .../menu/test/menu-item-title.spec.ts         | 34 ++++++++++++++
 packages/components/modal/test/modal.spec.ts  | 37 ++++++++++++++-
 .../pagination/test/pagination.spec.ts        | 26 +++++++++++
 .../progress-bar/test/progress-bar.spec.ts    |  6 +++
 .../test/progress-stepper-step.spec.ts        | 46 +++++++++++++++++++
 packages/components/radio/test/radio.spec.ts  |  8 ++++
 .../components/select/test/select.spec.ts     | 40 +++++++++++++++-
 .../test/spinner-loader.spec.ts               |  5 ++
 packages/components/tag/test/tag.spec.ts      |  8 ++++
 .../components/tooltip/test/tooltip.spec.ts   | 12 +++++
 20 files changed, 330 insertions(+), 6 deletions(-)
 create mode 100644 packages/components/menu/test/menu-item-title.spec.ts
 create mode 100644 packages/components/progress-stepper/test/progress-stepper-step.spec.ts

diff --git a/packages/components/accordion/test/accordion.spec.ts b/packages/components/accordion/test/accordion.spec.ts
index 1605a99d..456b9aee 100644
--- a/packages/components/accordion/test/accordion.spec.ts
+++ b/packages/components/accordion/test/accordion.spec.ts
@@ -152,4 +152,29 @@ describe('Accordion tests', () => {
 
     expect(getAccordionIcon(wrapper).text()).toBe(icon)
   })
+
+  it('should have data-test attribute on button, title, sub-title, icon', () => {
+    const template = `
+      <puik-accordion-group>
+        <puik-accordion name="accordion-1" icon="home" title="title" sub-title="sub-title" data-test="accordion">
+          Content
+        </puik-accordion>
+      </puik-accordion-group>
+    `
+    factory(template)
+
+    const accordion = getAccordion(wrapper)
+    expect(getAccordionHeader(accordion).attributes('data-test')).toBe(
+      'button-accordion'
+    )
+    expect(getAccordionTitle(accordion).attributes('data-test')).toBe(
+      'title-accordion'
+    )
+    expect(getAccordionSubTitle(accordion).attributes('data-test')).toBe(
+      'subTitle-accordion'
+    )
+    expect(getAccordionIcon(accordion).attributes('data-test')).toBe(
+      'icon-accordion'
+    )
+  })
 })
diff --git a/packages/components/alert/test/alert.spec.ts b/packages/components/alert/test/alert.spec.ts
index 05a5f5c7..d2bdcb6f 100644
--- a/packages/components/alert/test/alert.spec.ts
+++ b/packages/components/alert/test/alert.spec.ts
@@ -75,4 +75,18 @@ describe('Alert tests', () => {
     await findCloseButton().trigger('click')
     expect(wrapper.emitted('close')).toBeTruthy()
   })
+
+  it('should have a data-test attribute on title, description button and close button', () => {
+    factory({
+      title: faker.lorem.word(2),
+      description: faker.lorem.sentence(60),
+      buttonLabel: 'Button',
+      isClosable: true,
+      dataTest: 'alert',
+    })
+    expect(findTitle().attributes('data-test')).toBe('title-alert')
+    expect(findDesc().attributes('data-test')).toBe('description-alert')
+    expect(findButton().attributes('data-test')).toBe('button-alert')
+    expect(findCloseButton().attributes('data-test')).toBe('close-alert')
+  })
 })
diff --git a/packages/components/badge/test/badge.spec.ts b/packages/components/badge/test/badge.spec.ts
index 81eca07e..10e80c0f 100644
--- a/packages/components/badge/test/badge.spec.ts
+++ b/packages/components/badge/test/badge.spec.ts
@@ -47,4 +47,9 @@ describe('Badge tests', () => {
     )
     expect(findBadge().text()).toBe(slotDefault)
   })
+
+  it('should have a data-test attribute', () => {
+    factory({ 'data-test': 'test' })
+    expect(findBadge().attributes('data-test')).toBe('test')
+  })
 })
diff --git a/packages/components/breadcrumb/test/breadcrumb.spec.ts b/packages/components/breadcrumb/test/breadcrumb.spec.ts
index c2f5bcb4..49c77870 100644
--- a/packages/components/breadcrumb/test/breadcrumb.spec.ts
+++ b/packages/components/breadcrumb/test/breadcrumb.spec.ts
@@ -1,8 +1,9 @@
 import { mount } from '@vue/test-utils'
 import { describe, it, expect } from 'vitest'
 import PuikBreadcrumb from '../src/breadcrumb.vue'
-import type { MountingOptions, VueWrapper } from '@vue/test-utils'
+import { PuikLinkTarget } from '../../link'
 import type { BreadcrumbItem } from '../src/breadcrumb'
+import type { MountingOptions, VueWrapper } from '@vue/test-utils'
 
 describe('Breadcrumb tests', () => {
   let wrapper: VueWrapper<any>
@@ -29,7 +30,8 @@ describe('Breadcrumb tests', () => {
     {
       label: 'First link',
       href: '#',
-      target: '_blank',
+      target: PuikLinkTarget.BLANK,
+      dataTest: 'test-1',
     },
     {
       label: 'Second link',
@@ -38,6 +40,7 @@ describe('Breadcrumb tests', () => {
     {
       label: 'Third link',
       to: 'name',
+      dataTest: 'test-3',
     },
     {
       label: 'Last link',
@@ -51,17 +54,27 @@ describe('Breadcrumb tests', () => {
     factory()
     expect(wrapper.element.tagName).toBeFalsy()
   })
-  it('should first item be A with href', () => {
+  it('should first item be A with href and data-test', () => {
     factory({ items })
     const localItems = getBreadcrumbItems()
     expect(localItems[0].element.tagName).toBe('A')
     expect(localItems[0].element.getAttribute('href')).toBe(items[0].href)
+    expect(
+      localItems[0].element
+        .getAttribute('data-test')
+        .includes(items[0].dataTest)
+    )
   })
-  it('should third item be ROUTER-LINK with to', () => {
+  it('should third item be ROUTER-LINK with to and data-test', () => {
     factory({ items })
     const localItems = getBreadcrumbItems()
     expect(localItems[2].element.tagName).toBe('ROUTER-LINK')
     expect(localItems[2].element.getAttribute('to')).toBe(items[2].to)
+    expect(
+      localItems[2].element
+        .getAttribute('data-test')
+        .includes(items[2].dataTest)
+    )
   })
   it('should display only three separator icon', () => {
     factory({ items })
diff --git a/packages/components/button/test/button.spec.ts b/packages/components/button/test/button.spec.ts
index b83a1858..a209f85c 100644
--- a/packages/components/button/test/button.spec.ts
+++ b/packages/components/button/test/button.spec.ts
@@ -100,4 +100,17 @@ describe('Button tests', () => {
     factory({ href: '/test' })
     expect(findButton().element.tagName).toBe('A')
   })
+
+  it('should have a data-test attribute on global component, left-icon and right-icon', () => {
+    factory({
+      leftIcon: 'close',
+      rightIcon: 'close',
+      dataTest: 'button',
+    })
+    expect(findButton().attributes('data-test')).toBe('button')
+    expect(findButtonLeftIcon().attributes('data-test')).toBe('leftIcon-button')
+    expect(findButtonRightIcon().attributes('data-test')).toBe(
+      'rightIcon-button'
+    )
+  })
 })
diff --git a/packages/components/checkbox/test/checkbox.spec.ts b/packages/components/checkbox/test/checkbox.spec.ts
index 1cf8e87a..95bdfe05 100644
--- a/packages/components/checkbox/test/checkbox.spec.ts
+++ b/packages/components/checkbox/test/checkbox.spec.ts
@@ -93,4 +93,10 @@ describe('Checkbox tests', () => {
     await findLabel().trigger('click')
     expect(wrapper.vm.checkboxInputRef.click).not.toHaveBeenCalled()
   })
+
+  it('shouold have a data-test attribute on the input and the label', () => {
+    factory({ label: 'Label', modelValue: false, dataTest: 'test' })
+    expect(findInput().attributes('data-test')).toBe('input-test')
+    expect(findLabel().attributes('data-test')).toBe('label-test')
+  })
 })
diff --git a/packages/components/icon/test/icon.spec.ts b/packages/components/icon/test/icon.spec.ts
index 1a67a17e..2c872007 100644
--- a/packages/components/icon/test/icon.spec.ts
+++ b/packages/components/icon/test/icon.spec.ts
@@ -68,4 +68,9 @@ describe('Icon tests', () => {
 
     expect(findIcon().element.nodeName).toBe('SPAN')
   })
+
+  it('should have a data-test attribute', () => {
+    factory({ 'data-test': 'test' })
+    expect(findIcon().attributes('data-test')).toBe('test')
+  })
 })
diff --git a/packages/components/input/test/input.spec.ts b/packages/components/input/test/input.spec.ts
index ea0070cf..d69f2dac 100644
--- a/packages/components/input/test/input.spec.ts
+++ b/packages/components/input/test/input.spec.ts
@@ -10,6 +10,7 @@ describe('Input tests', () => {
   const findWrapper = () => wrapper.find('.puik-input__wrapper')
   const findHint = () => wrapper.find('.puik-input__hint__text')
   const findError = () => wrapper.find('.puik-input__hint__error')
+  const findErrorMessage = () => wrapper.find('.puik-input__hint__error__text')
   const findIncrement = () => wrapper.find('.puik-input__controls__increment')
   const findDecrement = () => wrapper.find('.puik-input__controls__decrement')
   const findRevealPassword = () => wrapper.find('.puik-input__reveal-password')
@@ -183,4 +184,18 @@ describe('Input tests', () => {
     expect(findAppend().exists).toBeTruthy()
     expect(findAppend().text()).toBe('$')
   })
+
+  it('should have a data-tes attribut for the input and the error message', () => {
+    const error = 'This is an error message'
+    factory(
+      { modelValue: 'value', type: 'text', dataTest: 'test' },
+      {
+        slots: {
+          error,
+        },
+      }
+    )
+    expect(findField().attributes('data-test')).toBe('input-test')
+    expect(findErrorMessage().attributes('data-test')).toBe('error-test')
+  })
 })
diff --git a/packages/components/label/test/label.spec.ts b/packages/components/label/test/label.spec.ts
index 9648e751..2ee952dc 100644
--- a/packages/components/label/test/label.spec.ts
+++ b/packages/components/label/test/label.spec.ts
@@ -76,4 +76,9 @@ describe('Label tests', () => {
     )
     expect(findLabelReadonly().exists()).toBeTruthy()
   })
+
+  it('should have a data-test attribute', () => {
+    factory({ 'data-test': 'test' })
+    expect(findLabel().attributes('data-test')).toBe('test')
+  })
 })
diff --git a/packages/components/link/test/link.spec.ts b/packages/components/link/test/link.spec.ts
index eeefe1bd..78d4b0ba 100644
--- a/packages/components/link/test/link.spec.ts
+++ b/packages/components/link/test/link.spec.ts
@@ -36,4 +36,9 @@ describe('Link tests', () => {
     factory({ href: '/test', size: 'sm' })
     expect(findLink().classes()).toContain('puik-link--sm')
   })
+
+  it('should have a data-test attribute', () => {
+    factory({ href: '/test', 'data-test': 'test' })
+    expect(findLink().attributes('data-test')).toBe('test')
+  })
 })
diff --git a/packages/components/menu/test/menu-item-title.spec.ts b/packages/components/menu/test/menu-item-title.spec.ts
new file mode 100644
index 00000000..d52cc942
--- /dev/null
+++ b/packages/components/menu/test/menu-item-title.spec.ts
@@ -0,0 +1,34 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import PuikMenuItemTitle from './../src/menu-item-title.vue'
+import type { MountingOptions, VueWrapper } from '@vue/test-utils'
+
+export function factoryMenu(
+  template: string,
+  options: MountingOptions<any> = {}
+) {
+  return mount({
+    components: {
+      PuikMenuItemTitle,
+    },
+    template,
+    ...options,
+  })
+}
+
+export const getTitle = (wrapper) => wrapper.find('.puik-menu-item-title')
+
+describe('Menu title tests', () => {
+  let wrapper: VueWrapper<any>
+
+  it('should be a vue instance and have a data-test attribut', () => {
+    wrapper = factoryMenu(`
+        <puik-menu-item-title data-test="test">
+          Title
+        </puik-menu-item-title>
+    `)
+    expect(wrapper).toBeTruthy()
+    expect(getTitle(wrapper).text()).toBe('Title')
+    expect(wrapper.attributes('data-test')).toBe('title-test')
+  })
+})
diff --git a/packages/components/modal/test/modal.spec.ts b/packages/components/modal/test/modal.spec.ts
index 115472cd..2f821073 100644
--- a/packages/components/modal/test/modal.spec.ts
+++ b/packages/components/modal/test/modal.spec.ts
@@ -45,8 +45,9 @@ describe('Modal tests', () => {
     wrapper.find('.puik-modal__dialogPanelContainer__dialogPanel__header')
 
   const homeTitleIcon = 'home'
+  const findTitle = () => wrapper.find('.title')
 
-  const factory = (
+  const factory = async (
     propsData: Record<string, any> = {},
     options: MountingOptions<any> = {}
   ) => {
@@ -231,4 +232,38 @@ describe('Modal tests', () => {
 
     expect(findHeader().exists()).toBeFalsy()
   })
+
+  it('should have a data-test attribute on title, mainButton, secondButton and closeButton', async () => {
+    await factory({
+      title: 'Awesome title',
+      mainButtonText: 'Awesome main',
+      secondButtonText: 'Awesome second',
+      isOpen: true,
+      hasCloseButton: true,
+      dataTest: 'test',
+    })
+    expect(findTitle().attributes('data-test')).toBe('title-test')
+    expect(findMainButton().attributes('data-test')).toBe('mainButton-test')
+    expect(findSecondaryButton().attributes('data-test')).toBe(
+      'secondButton-test'
+    )
+    expect(findCloseButton().attributes('data-test')).toBe('closeButton-test')
+  })
+  it('should have a data-test attribute on side button', async () => {
+    const sideButtonText = 'Awesome side button'
+
+    await factory({
+      title: 'Awesome title',
+      mainButtonText: 'Awesome main',
+      secondButtonText: 'Awesome second',
+      isOpen: true,
+      titleIcon: homeTitleIcon,
+      variant: PuikModalVariant.DIALOG,
+      sideButtonText,
+      dataTest: 'test',
+    })
+    expect(findSideButton().exists()).toBeTruthy()
+    expect(findSideButton().text()).toBe(sideButtonText)
+    expect(findSideButton().attributes('data-test')).toBe('sideButton-test')
+  })
 })
diff --git a/packages/components/pagination/test/pagination.spec.ts b/packages/components/pagination/test/pagination.spec.ts
index a8d36f4e..a3061f2a 100644
--- a/packages/components/pagination/test/pagination.spec.ts
+++ b/packages/components/pagination/test/pagination.spec.ts
@@ -296,4 +296,30 @@ describe('Pagination tests', () => {
     expect(options[1].text()).toBe('2')
     expect(options.length).toBe(2)
   })
+
+  it('should have a data-test attribute on nextButton, previousButton and label', () => {
+    factory({
+      ...propsData,
+      variant: PuikPaginationVariantEnum.large,
+      dataTest: 'test',
+    })
+
+    expect(findPreviousButton().attributes('data-test')).toBe(
+      'previousButton-test'
+    )
+    expect(findNextButton().attributes('data-test')).toBe('nextButton-test')
+    expect(findLabel().attributes('data-test')).toBe('label-test')
+  })
+
+  it('should have a data-test attribute on loaderButton', () => {
+    factory({
+      ...propsData,
+      variant: PuikPaginationVariantEnum.loader,
+      dataTest: 'test',
+    })
+
+    expect(findLoaderButton().attributes('data-test')).toBe(
+      'loadMoreButton-test'
+    )
+  })
 })
diff --git a/packages/components/progress-bar/test/progress-bar.spec.ts b/packages/components/progress-bar/test/progress-bar.spec.ts
index b4195dca..f4d71b4b 100644
--- a/packages/components/progress-bar/test/progress-bar.spec.ts
+++ b/packages/components/progress-bar/test/progress-bar.spec.ts
@@ -30,4 +30,10 @@ describe('ProgressBar tests', () => {
       true
     )
   })
+
+  it('should have a data-test attribute', () => {
+    factory({ ...defaultProps, dataTest: 'test' })
+    const progressBarContent = wrapper.find('.progress-bar__content')
+    expect(progressBarContent.attributes('data-test')).toBe('test')
+  })
 })
diff --git a/packages/components/progress-stepper/test/progress-stepper-step.spec.ts b/packages/components/progress-stepper/test/progress-stepper-step.spec.ts
new file mode 100644
index 00000000..d3fdc9ab
--- /dev/null
+++ b/packages/components/progress-stepper/test/progress-stepper-step.spec.ts
@@ -0,0 +1,46 @@
+import { nextTick, ref } from 'vue'
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import PuikProgressStepper from '../src/progress-stepper.vue'
+import PuikProgressStepperStep from '../src/progress-stepper-step.vue'
+import type { VueWrapper } from '@vue/test-utils'
+
+describe('ProgressStepperStep tests', () => {
+  let wrapper: VueWrapper<any>
+  const factory = () => {
+    wrapper = mount({
+      template: `
+      <puik-progress-stepper v-model="currentStep">
+        <puik-progress-stepper-step :step="1" data-test="test">
+          <template #text>Text step 1</template>
+          <template #additional-text>Additional text step 1</template>
+        </puik-progress-stepper-step>
+      </puik-progress-stepper>
+      `,
+      components: {
+        PuikProgressStepper,
+        PuikProgressStepperStep,
+      },
+      setup() {
+        const currentStep = ref(1)
+        return { currentStep }
+      },
+    })
+  }
+
+  const getStep = () => wrapper.findComponent(PuikProgressStepperStep)
+  const getButton = () => getStep().find('.puik-progress-stepper-step__button')
+  const getText = () => getStep().find('.puik-progress-stepper-step__text')
+  const getAdditionalText = () =>
+    getStep().find('.puik-progress-stepper-step__additional-text')
+
+  it('should have a step with data-test on button, text and additionnalText', () => {
+    factory()
+    const button = getButton()
+    const text = getText()
+    const additionalText = getAdditionalText()
+    expect(button.attributes('data-test')).toBe('stepButton-test')
+    expect(text.attributes('data-test')).toBe('text-test')
+    expect(additionalText.attributes('data-test')).toBe('additionalText-test')
+  })
+})
diff --git a/packages/components/radio/test/radio.spec.ts b/packages/components/radio/test/radio.spec.ts
index 442e5f74..a72871a1 100644
--- a/packages/components/radio/test/radio.spec.ts
+++ b/packages/components/radio/test/radio.spec.ts
@@ -83,4 +83,12 @@ describe('Radio tests', () => {
     )
     expect(findLabel().text()).toContain('Custom label')
   })
+
+  it('should have a data-test attribute on label and input', () => {
+    factory({ label: 'Label', modelValue: false, dataTest: 'test' })
+    const label = findLabel()
+    const input = findInput()
+    expect(label.attributes('data-test')).toBe('label-test')
+    expect(input.attributes('data-test')).toBe('input-test')
+  })
 })
diff --git a/packages/components/select/test/select.spec.ts b/packages/components/select/test/select.spec.ts
index 3c99546f..e02ac8b0 100644
--- a/packages/components/select/test/select.spec.ts
+++ b/packages/components/select/test/select.spec.ts
@@ -74,7 +74,7 @@ describe('Select tests', () => {
     expect(findSelected().attributes('placeholder')).toBe(placeholder)
   })
 
-  it('should be in an error state', () => {
+  it('should be in an error state with', () => {
     const error = faker.lorem.sentence()
     factory(
       `<puik-select v-model="value" :error="error">
@@ -337,4 +337,42 @@ describe('Select tests', () => {
     await findAllOptions().at(0)?.trigger('click')
     expect(findSelected().element.value).toBe('Custom Label')
   })
+
+  it('should have a data-test attribute on select, searchInput noResults and options', async () => {
+    const items = [
+      {
+        label: 'Test',
+        value: 'test',
+      },
+      {
+        label: 'Test2',
+        value: 'test2',
+      },
+      {
+        label: 'Test3',
+        value: 'test3',
+      },
+    ]
+    const query = 'Test4'
+    factory(
+      `<puik-select v-slot="{ options }"  v-model="value" :options="items" data-test="test" noMatchText="No results">
+        <puik-option v-for="(option, index) in options" :value="option" :label="option.label" :data-test="'option-test-' + (index + 1)"/>
+      </puik-select>`,
+      () => ({
+        items,
+        value: {},
+      })
+    )
+
+    const select = wrapper.find('.puik-select__selected')
+    expect(select.attributes('data-test')).toBe('select-test')
+    await findSelect().trigger('click')
+    const field = wrapper.find('.puik-input__field')
+    expect(field.attributes('data-test')).toBe('input-searchInput-test')
+    const option = wrapper.findAll('.puik-option')
+    expect(option[2].attributes('data-test')).toBe('option-test-3')
+    await findInputComponent().setValue(query)
+    const noResults = wrapper.find('.puik-select__no-results')
+    expect(noResults.attributes('data-test')).toBe('noResults-test')
+  })
 })
diff --git a/packages/components/spinner-loader/test/spinner-loader.spec.ts b/packages/components/spinner-loader/test/spinner-loader.spec.ts
index c3355508..583c67fd 100644
--- a/packages/components/spinner-loader/test/spinner-loader.spec.ts
+++ b/packages/components/spinner-loader/test/spinner-loader.spec.ts
@@ -63,4 +63,9 @@ describe('SpinnerLoader tests', () => {
     expect(findLabel().exists()).toBeTruthy()
     expect(findLabel().text()).toBe(label)
   })
+
+  it('should have a data-test attribute', () => {
+    factory({ 'data-test': 'test' })
+    expect(findComponent().attributes('data-test')).toBe('test')
+  })
 })
diff --git a/packages/components/tag/test/tag.spec.ts b/packages/components/tag/test/tag.spec.ts
index bd3bd926..5139e57c 100644
--- a/packages/components/tag/test/tag.spec.ts
+++ b/packages/components/tag/test/tag.spec.ts
@@ -55,4 +55,12 @@ describe('Tag tests', () => {
     factory({ disabled: true })
     expect(findTag().classes()).toContain('puik-tag--disabled')
   })
+
+  it('should have a data-test attribute for the content', () => {
+    factory({
+      content: 'long content for displaying the tooltip',
+      'data-test': 'test',
+    })
+    expect(findTagContent().attributes('data-test')).toBe('content-test')
+  })
 })
diff --git a/packages/components/tooltip/test/tooltip.spec.ts b/packages/components/tooltip/test/tooltip.spec.ts
index 72b35035..7594feda 100644
--- a/packages/components/tooltip/test/tooltip.spec.ts
+++ b/packages/components/tooltip/test/tooltip.spec.ts
@@ -9,6 +9,7 @@ describe('Tooltip tests', () => {
   const findDescription = () =>
     wrapper.find('.puik-tooltip__tip__content__description')
   const findToolTip = () => wrapper.find('.puik-tooltip__tip')
+  const findWrapper = () => wrapper.find('.puik-tooltip__wrapper')
 
   const factory = (
     propsData: Record<string, any> = {},
@@ -73,4 +74,15 @@ describe('Tooltip tests', () => {
       '200px'
     )
   })
+
+  it('should have a data-test attribute for the content, the title and the description', () => {
+    factory({
+      title: 'long title for displaying the tooltip',
+      description: 'long description for displaying the tooltip',
+      'data-test': 'test',
+    })
+    expect(findTitle().attributes('data-test')).toBe('title-test')
+    expect(findDescription().attributes('data-test')).toBe('description-test')
+    expect(findWrapper().attributes('data-test')).toBe('content-test')
+  })
 })

From c76a51e2e57eee29f9a3839b5b9fdcfb7bf4e961 Mon Sep 17 00:00:00 2001
From: Guillaume Lepoetre <guillaume.lepoetre@prestashop.com>
Date: Thu, 2 Nov 2023 16:15:25 +0100
Subject: [PATCH 09/14] fix: update BreadcrumbItem type

---
 packages/components/breadcrumb/src/breadcrumb.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/breadcrumb/src/breadcrumb.ts b/packages/components/breadcrumb/src/breadcrumb.ts
index 5bbe869c..94ad999f 100644
--- a/packages/components/breadcrumb/src/breadcrumb.ts
+++ b/packages/components/breadcrumb/src/breadcrumb.ts
@@ -3,11 +3,12 @@ import type { RouteLocationRaw } from 'vue-router'
 import type { ExtractPropTypes, PropType } from 'vue'
 import type Breadcrumb from './breadcrumb.vue'
 
+import type { PuikTargetString } from '../../link/src/link'
 export interface BreadcrumbItem {
   label: string
   to?: RouteLocationRaw
   href?: string
-  target?: '_blank' | '_self' | '_parent' | '_top'
+  target?: PuikTargetString
   dataTest?: string
 }
 

From 50c6abcd7d9f03b75c0fab5d72e77c446b046158 Mon Sep 17 00:00:00 2001
From: Guillaume Lepoetre <guillaume.lepoetre@prestashop.com>
Date: Thu, 2 Nov 2023 16:15:47 +0100
Subject: [PATCH 10/14] fix: update stories

---
 .../checkbox/stories/checkbox.stories.ts       |  1 +
 .../components/input/stories/input.stories.ts  |  3 ++-
 .../select/stories/select.stories.ts           |  2 +-
 .../tooltip/stories/tooltip.stories.ts         | 18 ++++++++++--------
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/components/checkbox/stories/checkbox.stories.ts b/packages/components/checkbox/stories/checkbox.stories.ts
index 877b20ee..fd725641 100644
--- a/packages/components/checkbox/stories/checkbox.stories.ts
+++ b/packages/components/checkbox/stories/checkbox.stories.ts
@@ -36,6 +36,7 @@ export default {
     dataTest: {
       description:
         'Set the data-test attribute for the label and the input `label-${dataTest}` `input-${dataTest}`}`',
+      control: 'text',
     },
   },
   args: {
diff --git a/packages/components/input/stories/input.stories.ts b/packages/components/input/stories/input.stories.ts
index 95ee4e43..4fe82475 100644
--- a/packages/components/input/stories/input.stories.ts
+++ b/packages/components/input/stories/input.stories.ts
@@ -95,7 +95,8 @@ export default {
     },
     dataTest: {
       description:
-        'Set the data-test attribute on the input and error text elements `input-${inputDataTest}` `error-${inputDataTest}`',
+        'Set the data-test attribute on the input and error text elements `input-${dataTest}` `error-${dataTest}`',
+      control: 'text',
     },
   },
 } as Meta
diff --git a/packages/components/select/stories/select.stories.ts b/packages/components/select/stories/select.stories.ts
index bfbcd35a..c38c6d1d 100644
--- a/packages/components/select/stories/select.stories.ts
+++ b/packages/components/select/stories/select.stories.ts
@@ -112,7 +112,7 @@ export default {
     dataTest: {
       control: 'text',
       description:
-        'Set the data-test attribute `searchInput-${dataTest}` `noResults-${dataTest}` `select-${dataTest}` `dataTestOption-${dataTest}-${index + 1}`',
+        'Set the data-test attribute `searchInput-${dataTest}` `noResults-${dataTest}` `select-${dataTest}` `option-${dataTest}-${index + 1}`',
       table: {
         category: 'Common',
       },
diff --git a/packages/components/tooltip/stories/tooltip.stories.ts b/packages/components/tooltip/stories/tooltip.stories.ts
index de4b862a..8a528e64 100644
--- a/packages/components/tooltip/stories/tooltip.stories.ts
+++ b/packages/components/tooltip/stories/tooltip.stories.ts
@@ -18,9 +18,6 @@ export default {
         },
       },
     },
-    titleDataTest: {
-      description: 'Set the data-test attribute on the title',
-    },
     description: {
       description: 'Set the tooltip description (also available as a prop)',
       table: {
@@ -29,9 +26,6 @@ export default {
         },
       },
     },
-    descriptionDataTest: {
-      description: 'Set the data-test attribute on the description',
-    },
     position: {
       control: 'select',
       description: 'Set the tooltip position',
@@ -81,13 +75,21 @@ export default {
         },
       },
     },
+    dataTest: {
+      control: 'text',
+      description:
+        'Set the data-test attribute on the tooltip `content-${dataTest}` `title-${dataTest}` `description-${dataTest}`',
+      table: {
+        defaultValue: {
+          summary: undefined,
+        },
+      },
+    },
   },
   args: {
     title: 'Title',
     description: 'This is a tooltip',
     position: 'top',
-    titleDataTest: '',
-    descriptionDataTest: '',
   },
 } as Meta
 

From 737102705516d648b2e04adb3cf875218aa7b74f Mon Sep 17 00:00:00 2001
From: Guillaume Lepoetre <guillaume.lepoetre@prestashop.com>
Date: Thu, 2 Nov 2023 16:16:35 +0100
Subject: [PATCH 11/14] fix: update options data-test name

---
 packages/components/select/src/select.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index d868a5ed..fafc3701 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -83,7 +83,7 @@
                   :key="option"
                   :label="option[labelKey]"
                   :value="isObject(option) ? option[valueKey] : option"
-                  :data-test="`dataTestOption-${dataTest}-${index + 1}`"
+                  :data-test="`option-${dataTest}-${index + 1}`"
                 />
               </template>
             </slot>

From b2d915890ed07b5791d50bb43d9e2be04a87ce4d Mon Sep 17 00:00:00 2001
From: Guillaume Lepoetre <guillaume.lepoetre@prestashop.com>
Date: Thu, 2 Nov 2023 16:17:05 +0100
Subject: [PATCH 12/14] fix: update data-test name for tooltip

---
 packages/components/tooltip/src/tooltip.ts  | 15 +++++----------
 packages/components/tooltip/src/tooltip.vue | 10 +++++++---
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/packages/components/tooltip/src/tooltip.ts b/packages/components/tooltip/src/tooltip.ts
index 2bc9d7a9..ab99d67c 100644
--- a/packages/components/tooltip/src/tooltip.ts
+++ b/packages/components/tooltip/src/tooltip.ts
@@ -10,21 +10,11 @@ export const tooltipProps = buildProps({
     required: false,
     default: undefined,
   },
-  titleDataTest: {
-    type: String,
-    required: false,
-    default: 'tooltip-title',
-  },
   description: {
     type: String,
     required: false,
     default: undefined,
   },
-  descriptionDataTest: {
-    type: String,
-    required: false,
-    default: 'tooltip-description',
-  },
   position: {
     type: String as PropType<PuikTooltipPosition>,
     required: false,
@@ -50,6 +40,11 @@ export const tooltipProps = buildProps({
     required: false,
     default: 500,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: 'tooltip',
+  },
 } as const)
 
 export type TooltipProps = ExtractPropTypes<typeof tooltipProps>
diff --git a/packages/components/tooltip/src/tooltip.vue b/packages/components/tooltip/src/tooltip.vue
index 6126c4cd..68134c10 100644
--- a/packages/components/tooltip/src/tooltip.vue
+++ b/packages/components/tooltip/src/tooltip.vue
@@ -6,7 +6,11 @@
     @mouseover="updateTooltip"
     @mouseleave="start"
   >
-    <div ref="tooltipWrapper" class="puik-tooltip__wrapper">
+    <div
+      ref="tooltipWrapper"
+      class="puik-tooltip__wrapper"
+      :data-test="`content-${dataTest}`"
+    >
       <slot></slot>
     </div>
     <Transition
@@ -25,13 +29,13 @@
           <span
             v-if="$slots.title || title"
             class="puik-tooltip__tip__content__title"
-            :data-test="titleDataTest"
+            :data-test="`title-${dataTest}`"
             ><slot name="title">{{ title }}</slot></span
           >
           <span
             v-if="$slots.description || description"
             class="puik-tooltip__tip__content__description"
-            :data-test="descriptionDataTest"
+            :data-test="`description-${dataTest}`"
             ><slot name="description">{{ description }}</slot></span
           >
         </div>

From 61f16d84152e1f8d1c60f0d639db31841fb21808 Mon Sep 17 00:00:00 2001
From: Guillaume Lepoetre <guillaume.lepoetre@prestashop.com>
Date: Thu, 2 Nov 2023 17:16:48 +0100
Subject: [PATCH 13/14] fix: add condition to display data-test attribute

---
 .../components/accordion/src/accordion.vue    | 10 ++++++----
 packages/components/alert/src/alert.vue       | 10 ++++++----
 packages/components/badge/src/badge.vue       |  2 +-
 .../components/breadcrumb/src/breadcrumb.vue  |  8 ++++++--
 packages/components/button/src/button.vue     |  6 +++---
 packages/components/checkbox/src/checkbox.vue |  4 ++--
 packages/components/icon/src/icon.vue         |  2 +-
 packages/components/input/src/input.vue       |  4 ++--
 packages/components/label/src/label.vue       |  2 +-
 packages/components/link/src/link.vue         |  2 +-
 .../components/menu/src/menu-item-title.vue   |  5 ++++-
 packages/components/modal/src/modal.vue       | 20 ++++++++++++++-----
 .../pagination/src/pagination-large.vue       | 11 +++++++---
 .../pagination/src/pagination-loader.vue      |  4 +++-
 .../pagination/src/pagination-medium.vue      | 11 +++++++---
 .../pagination/src/pagination-mobile.vue      | 11 +++++++---
 .../pagination/src/pagination-small.vue       | 11 +++++++---
 .../progress-bar/src/progress-bar.vue         |  2 +-
 .../src/progress-stepper-step.vue             |  8 +++++---
 packages/components/radio/src/radio.vue       |  4 ++--
 packages/components/select/src/option.vue     |  2 +-
 packages/components/select/src/select.vue     | 16 +++++++++++----
 .../sidebar/src/sidebar-group-item.vue        |  8 ++++++--
 .../components/sidebar/src/sidebar-item.vue   | 12 ++++++++---
 .../components/sidebar/src/sidebar-title.vue  |  2 +-
 .../spinner-loader/src/spinner-loader.vue     |  2 +-
 packages/components/tag/src/tag.vue           |  7 +++++--
 packages/components/tooltip/src/tooltip.vue   |  8 +++++---
 28 files changed, 131 insertions(+), 63 deletions(-)

diff --git a/packages/components/accordion/src/accordion.vue b/packages/components/accordion/src/accordion.vue
index e3d1bdf4..c54e078f 100644
--- a/packages/components/accordion/src/accordion.vue
+++ b/packages/components/accordion/src/accordion.vue
@@ -11,7 +11,7 @@
       :aria-controls="id"
       class="puik-accordion__header"
       :disabled="disabled"
-      :data-test="`button-${dataTest}`"
+      :data-test="dataTest != undefined ? `button-${dataTest}` : undefined"
       @click="onClick"
     >
       <puik-icon
@@ -19,19 +19,21 @@
         class="puik-accordion__header__icon"
         :icon="icon"
         :font-size="24"
-        :data-test="`icon-${dataTest}`"
+        :data-test="dataTest != undefined ? `icon-${dataTest}` : undefined"
       ></puik-icon>
       <div class="puik-accordion__header__content">
         <div
           class="puik-accordion__header__content__title"
-          :data-test="`title-${dataTest}`"
+          :data-test="dataTest != undefined ? `title-${dataTest}` : undefined"
         >
           {{ title }}
         </div>
         <div
           v-if="subTitle"
           class="puik-accordion__header__content__sub-title"
-          :data-test="`subTitle-${dataTest}`"
+          :data-test="
+            dataTest != undefined ? `subTitle-${dataTest}` : undefined
+          "
         >
           {{ subTitle }}
         </div>
diff --git a/packages/components/alert/src/alert.vue b/packages/components/alert/src/alert.vue
index 761cb692..4992e0e4 100644
--- a/packages/components/alert/src/alert.vue
+++ b/packages/components/alert/src/alert.vue
@@ -14,14 +14,16 @@
           <p
             v-if="title"
             class="puik-alert__title"
-            :data-test="`title-${dataTest}`"
+            :data-test="dataTest != undefined ? `title-${dataTest}` : undefined"
           >
             {{ title }}
           </p>
           <span
             v-if="$slots.default || description"
             class="puik-alert__description"
-            :data-test="`description-${dataTest}`"
+            :data-test="
+              dataTest != undefined ? `description-${dataTest}` : undefined
+            "
             ><slot>{{ description }}</slot></span
           >
         </div>
@@ -30,7 +32,7 @@
         v-if="buttonLabel"
         :variant="variant"
         class="puik-alert__button"
-        :data-test="`button-${dataTest}`"
+        :data-test="dataTest != undefined ? `button-${dataTest}` : undefined"
         @click="click"
       >
         {{ buttonLabel }}
@@ -42,7 +44,7 @@
       icon="close"
       font-size="1.5rem"
       class="puik-alert__close"
-      :data-test="`close-${dataTest}`"
+      :data-test="dataTest != undefined ? `close-${dataTest}` : undefined"
       @click="close"
     />
   </div>
diff --git a/packages/components/badge/src/badge.vue b/packages/components/badge/src/badge.vue
index 692c7269..41480b27 100644
--- a/packages/components/badge/src/badge.vue
+++ b/packages/components/badge/src/badge.vue
@@ -2,7 +2,7 @@
   <div
     class="puik-badge"
     :class="[`puik-badge--${variant}`]"
-    :data-test="dataTest"
+    :data-test="dataTest ?? undefined"
   >
     <slot></slot>
   </div>
diff --git a/packages/components/breadcrumb/src/breadcrumb.vue b/packages/components/breadcrumb/src/breadcrumb.vue
index 8d524d83..9aba01fd 100644
--- a/packages/components/breadcrumb/src/breadcrumb.vue
+++ b/packages/components/breadcrumb/src/breadcrumb.vue
@@ -17,7 +17,7 @@
         :to="item.to"
         :href="item.href"
         :target="item.target"
-        :data-test="item.dataTest"
+        :data-test="item.dataTest ? item.dataTest : undefined"
         size="sm"
       >
         {{ item.label }}
@@ -32,7 +32,11 @@
 
     <div
       class="puik-breadcrumb__item--last"
-      :data-test="items[items.length - 1].dataTest"
+      :data-test="
+        items[items.length - 1].dataTest
+          ? items[items.length - 1].dataTest
+          : undefined
+      "
     >
       {{ items[items.length - 1].label }}
     </div>
diff --git a/packages/components/button/src/button.vue b/packages/components/button/src/button.vue
index 25dcbca6..1d6f36e2 100644
--- a/packages/components/button/src/button.vue
+++ b/packages/components/button/src/button.vue
@@ -10,7 +10,7 @@
       { 'puik-button--fluid': fluid },
     ]"
     :disabled="disabled"
-    :data-test="`${dataTest}`"
+    :data-test="dataTest ?? undefined"
     @click="setSelected"
   >
     <puik-icon
@@ -18,7 +18,7 @@
       :icon="leftIcon"
       :font-size="size !== 'sm' ? '1.25rem' : '1rem'"
       class="puik-button__left-icon"
-      :data-test="`leftIcon-${dataTest}`"
+      :data-test="dataTest != undefined ? `leftIcon-${dataTest}` : undefined"
     />
     <slot></slot>
     <puik-icon
@@ -26,7 +26,7 @@
       :icon="rightIcon"
       :font-size="size !== 'sm' ? '1.25rem' : '1rem'"
       class="puik-button__right-icon"
-      :data-test="`rightIcon-${dataTest}`"
+      :data-test="dataTest != undefined ? `rightIcon-${dataTest}` : undefined"
     />
   </component>
 </template>
diff --git a/packages/components/checkbox/src/checkbox.vue b/packages/components/checkbox/src/checkbox.vue
index e641dd6c..7f322ca1 100644
--- a/packages/components/checkbox/src/checkbox.vue
+++ b/packages/components/checkbox/src/checkbox.vue
@@ -8,13 +8,13 @@
       type="checkbox"
       :indeterminate="indeterminate"
       :disabled="disabled"
-      :data-test="`input-${dataTest}`"
+      :data-test="dataTest != undefined ? `input-${dataTest}` : undefined"
     />
     <label
       v-if="$slots.default || label"
       :for="id"
       class="puik-checkbox__label"
-      :data-test="`label-${dataTest}`"
+      :data-test="dataTest != undefined ? `label-${dataTest}` : undefined"
     >
       <slot>{{ label }}</slot>
     </label>
diff --git a/packages/components/icon/src/icon.vue b/packages/components/icon/src/icon.vue
index 6071cd73..168af7d8 100644
--- a/packages/components/icon/src/icon.vue
+++ b/packages/components/icon/src/icon.vue
@@ -3,7 +3,7 @@
     :is="nodeType"
     class="puik-icon"
     :style="style"
-    :data-test="dataTest"
+    :data-test="dataTest ?? undefined"
   >
     {{ icon }}
   </component>
diff --git a/packages/components/input/src/input.vue b/packages/components/input/src/input.vue
index d5b709e0..612603b6 100644
--- a/packages/components/input/src/input.vue
+++ b/packages/components/input/src/input.vue
@@ -17,7 +17,7 @@
         :min="type === 'number' ? min : undefined"
         :max="type === 'number' ? max : undefined"
         :step="type === 'number' ? step : undefined"
-        :data-test="`input-${dataTest}`"
+        :data-test="dataTest != undefined ? `input-${dataTest}` : undefined"
         @focus="handleFocus"
         @blur="handleBlur"
       />
@@ -52,7 +52,7 @@
         ></puik-icon>
         <span
           class="puik-input__hint__error__text"
-          :data-test="`error-${dataTest}`"
+          :data-test="dataTest != undefined ? `error-${dataTest}` : undefined"
         >
           <slot name="error">{{ error }}</slot>
         </span>
diff --git a/packages/components/label/src/label.vue b/packages/components/label/src/label.vue
index a89c0d56..13ea1f0e 100644
--- a/packages/components/label/src/label.vue
+++ b/packages/components/label/src/label.vue
@@ -1,5 +1,5 @@
 <template>
-  <label class="puik-label" :for="props.for" :data-test="dataTest">
+  <label class="puik-label" :for="props.for" :data-test="dataTest ?? undefined">
     <slot></slot>
     <span v-if="required" class="puik-label--required">*</span>
     <span v-else-if="optional" class="puik-label--optional"
diff --git a/packages/components/link/src/link.vue b/packages/components/link/src/link.vue
index 6335004d..09b0e78a 100644
--- a/packages/components/link/src/link.vue
+++ b/packages/components/link/src/link.vue
@@ -5,7 +5,7 @@
     :target="target"
     :title="title"
     :class="['puik-link', `puik-link--${size}`]"
-    :data-test="dataTest"
+    :data-test="dataTest ?? undefined"
   >
     <slot></slot>
 
diff --git a/packages/components/menu/src/menu-item-title.vue b/packages/components/menu/src/menu-item-title.vue
index 695ac726..8f44715f 100644
--- a/packages/components/menu/src/menu-item-title.vue
+++ b/packages/components/menu/src/menu-item-title.vue
@@ -1,5 +1,8 @@
 <template>
-  <h4 class="puik-menu-item-title" :data-test="`title-${dataTest}`">
+  <h4
+    class="puik-menu-item-title"
+    :data-test="dataTest != undefined ? `title-${dataTest}` : undefined"
+  >
     <slot></slot>
   </h4>
 </template>
diff --git a/packages/components/modal/src/modal.vue b/packages/components/modal/src/modal.vue
index e18f0860..cee405d3 100644
--- a/packages/components/modal/src/modal.vue
+++ b/packages/components/modal/src/modal.vue
@@ -25,7 +25,9 @@
             <h2
               ref="modalTitleElem"
               class="title"
-              :data-test="`title-${dataTest}`"
+              :data-test="
+                dataTest != undefined ? `title-${dataTest}` : undefined
+              "
             >
               {{ title }}
             </h2>
@@ -37,7 +39,9 @@
             :aria-label="t('puik.modal.closeButtonLabel')"
             class="puik-modal__dialogPanelContainer__dialogPanel__header__close-button"
             variant="text"
-            :data-test="`closeButton-${dataTest}`"
+            :data-test="
+              dataTest != undefined ? `closeButton-${dataTest}` : undefined
+            "
             @click="sendCloseModalEvent()"
           >
             <puik-icon icon="close" :font-size="CLOSE_ICON_SIZE" />
@@ -54,7 +58,9 @@
             v-if="secondButtonText"
             class="puik-modal__dialogPanelContainer__dialogPanel__footer__button--second"
             :variant="secondButtonVariant"
-            :data-test="`secondButton-${dataTest}`"
+            :data-test="
+              dataTest != undefined ? `secondButton-${dataTest}` : undefined
+            "
             @click="$emit('button-second')"
           >
             {{ secondButtonText }}
@@ -64,7 +70,9 @@
             class="puik-modal__dialogPanelContainer__dialogPanel__footer__button--main"
             :variant="mainButtonVariant"
             :disabled="isMainButtonDisabled"
-            :data-test="`mainButton-${dataTest}`"
+            :data-test="
+              dataTest != undefined ? `mainButton-${dataTest}` : undefined
+            "
             @click="$emit('button-main')"
           >
             {{ mainButtonText }}
@@ -76,7 +84,9 @@
             v-if="PuikModalVariant.DIALOG === variant && sideButtonText"
             class="puik-modal__dialogPanelContainer__dialogPanel__footer__button--side"
             variant="text"
-            :data-test="`sideButton-${dataTest}`"
+            :data-test="
+              dataTest != undefined ? `sideButton-${dataTest}` : undefined
+            "
             @click="$emit('button-side')"
           >
             {{ sideButtonText }}
diff --git a/packages/components/pagination/src/pagination-large.vue b/packages/components/pagination/src/pagination-large.vue
index 9ca1dfcd..b25b1042 100644
--- a/packages/components/pagination/src/pagination-large.vue
+++ b/packages/components/pagination/src/pagination-large.vue
@@ -1,5 +1,8 @@
 <template>
-  <span class="puik-pagination__label" :data-test="`label-${dataTest}`">
+  <span
+    class="puik-pagination__label"
+    :data-test="dataTest != undefined ? `label-${dataTest}` : undefined"
+  >
     {{ label }}
   </span>
 
@@ -10,7 +13,9 @@
       class="puik-pagination__previous-button puik-pagination__button"
       left-icon="keyboard_arrow_left"
       variant="tertiary"
-      :data-test="`previousButton-${dataTest}`"
+      :data-test="
+        dataTest != undefined ? `previousButton-${dataTest}` : undefined
+      "
       @click="emit('update:page', page - 1)"
     >
       <span class="puik-pagination__previous-button-text">
@@ -46,7 +51,7 @@
       class="puik-pagination__button puik-pagination__next-button"
       right-icon="keyboard_arrow_right"
       variant="tertiary"
-      :data-test="`nextButton-${dataTest}`"
+      :data-test="dataTest != undefined ? `nextButton-${dataTest}` : undefined"
       @click="emit('update:page', page + 1)"
     >
       <span class="puik-pagination__next-button-text">
diff --git a/packages/components/pagination/src/pagination-loader.vue b/packages/components/pagination/src/pagination-loader.vue
index e7f83294..24d618f3 100644
--- a/packages/components/pagination/src/pagination-loader.vue
+++ b/packages/components/pagination/src/pagination-loader.vue
@@ -8,7 +8,9 @@
     variant="tertiary"
     class="puik-pagination__button puik-pagination__load-more-button"
     fluid
-    :data-test="`loadMoreButton-${dataTest}`"
+    :data-test="
+      dataTest != undefined ? `loadMoreButton-${dataTest}` : undefined
+    "
     @click="$emit('update:modelValue', modelValue + 1)"
   >
     {{ currentButtonLabel }}
diff --git a/packages/components/pagination/src/pagination-medium.vue b/packages/components/pagination/src/pagination-medium.vue
index 58067a8e..01573dd5 100644
--- a/packages/components/pagination/src/pagination-medium.vue
+++ b/packages/components/pagination/src/pagination-medium.vue
@@ -1,5 +1,8 @@
 <template>
-  <span class="puik-pagination__label" :data-test="`label-${dataTest}`">
+  <span
+    class="puik-pagination__label"
+    :data-test="dataTest != undefined ? `label-${dataTest}` : undefined"
+  >
     {{ label }}
   </span>
 
@@ -10,7 +13,9 @@
       class="puik-pagination__previous-button puik-pagination__button"
       left-icon="keyboard_arrow_left"
       variant="secondary"
-      :data-test="`previousButton-${dataTest}`"
+      :data-test="
+        dataTest != undefined ? `previousButton-${dataTest}` : undefined
+      "
       @click="page -= 1"
     ></puik-button>
 
@@ -78,7 +83,7 @@
       class="puik-pagination__button puik-pagination__next-button"
       right-icon="keyboard_arrow_right"
       variant="secondary"
-      :data-test="`nextButton-${dataTest}`"
+      :data-test="dataTest != undefined ? `nextButton-${dataTest}` : undefined"
       @click="page += 1"
     ></puik-button>
   </div>
diff --git a/packages/components/pagination/src/pagination-mobile.vue b/packages/components/pagination/src/pagination-mobile.vue
index 5479c173..677b36e4 100644
--- a/packages/components/pagination/src/pagination-mobile.vue
+++ b/packages/components/pagination/src/pagination-mobile.vue
@@ -5,11 +5,16 @@
     class="puik-pagination__previous-button puik-pagination__button"
     left-icon="keyboard_arrow_left"
     variant="secondary"
-    :data-test="`previousButton-${dataTest}`"
+    :data-test="
+      dataTest != undefined ? `previousButton-${dataTest}` : undefined
+    "
     @click="emit('update:modelValue', modelValue - 1)"
   ></puik-button>
 
-  <span class="puik-pagination__label" :data-test="`label-${dataTest}`">
+  <span
+    class="puik-pagination__label"
+    :data-test="dataTest != undefined ? `label-${dataTest}` : undefined"
+  >
     {{ label }}
   </span>
 
@@ -19,7 +24,7 @@
     class="puik-pagination__button puik-pagination__next-button"
     right-icon="keyboard_arrow_right"
     variant="secondary"
-    :data-test="`nextButton-${dataTest}`"
+    :data-test="dataTest != undefined ? `nextButton-${dataTest}` : undefined"
     @click="emit('update:modelValue', modelValue + 1)"
   ></puik-button>
 </template>
diff --git a/packages/components/pagination/src/pagination-small.vue b/packages/components/pagination/src/pagination-small.vue
index ac813ba9..09ae9cfb 100644
--- a/packages/components/pagination/src/pagination-small.vue
+++ b/packages/components/pagination/src/pagination-small.vue
@@ -1,12 +1,17 @@
 <template>
-  <span class="puik-pagination__label" :data-test="`label-${dataTest}`">
+  <span
+    class="puik-pagination__label"
+    :data-test="dataTest != undefined ? `label-${dataTest}` : undefined"
+  >
     {{ label }}
   </span>
 
   <puik-button
     :aria-label="t('puik.pagination.previous', { page: page - 1 })"
     :disabled="page <= 1 || disabled"
-    :data-test="`previousButton-${dataTest}`"
+    :data-test="
+      dataTest != undefined ? `previousButton-${dataTest}` : undefined
+    "
     class="puik-pagination__previous-button puik-pagination__button"
     left-icon="keyboard_arrow_left"
     variant="secondary"
@@ -16,7 +21,7 @@
   <puik-button
     :aria-label="t('puik.pagination.next', { page: page + 1 })"
     :disabled="page >= maxPage || disabled"
-    :data-test="`nextButton-${dataTest}`"
+    :data-test="dataTest != undefined ? `nextButton-${dataTest}` : undefined"
     class="puik-pagination__button puik-pagination__next-button"
     right-icon="keyboard_arrow_right"
     variant="secondary"
diff --git a/packages/components/progress-bar/src/progress-bar.vue b/packages/components/progress-bar/src/progress-bar.vue
index 2737b6ba..331cf2d4 100644
--- a/packages/components/progress-bar/src/progress-bar.vue
+++ b/packages/components/progress-bar/src/progress-bar.vue
@@ -3,7 +3,7 @@
     <div
       :class="barClass"
       :style="{ width: `${percentage}%` }"
-      :data-test="dataTest"
+      :data-test="dataTest ?? undefined"
       class="progress-bar__content"
     />
   </div>
diff --git a/packages/components/progress-stepper/src/progress-stepper-step.vue b/packages/components/progress-stepper/src/progress-stepper-step.vue
index 0c4ae69e..09893641 100644
--- a/packages/components/progress-stepper/src/progress-stepper-step.vue
+++ b/packages/components/progress-stepper/src/progress-stepper-step.vue
@@ -9,7 +9,7 @@
       aria-live="polite"
       class="puik-progress-stepper-step__button"
       size="sm"
-      :data-test="`stepButton-${dataTest}`"
+      :data-test="dataTest != undefined ? `stepButton-${dataTest}` : undefined"
       @click="onClick"
     >
       <template v-if="!isCompleted">
@@ -18,13 +18,15 @@
     </puik-button>
     <span
       class="puik-progress-stepper-step__text"
-      :data-test="`text-${dataTest}`"
+      :data-test="dataTest != undefined ? `text-${dataTest}` : undefined"
     >
       <slot name="text"></slot>
     </span>
     <span
       class="puik-progress-stepper-step__additional-text"
-      :data-test="`additionalText-${dataTest}`"
+      :data-test="
+        dataTest != undefined ? `additionalText-${dataTest}` : undefined
+      "
     >
       <slot name="additional-text"></slot>
     </span>
diff --git a/packages/components/radio/src/radio.vue b/packages/components/radio/src/radio.vue
index 90bebd60..3eeafb3a 100644
--- a/packages/components/radio/src/radio.vue
+++ b/packages/components/radio/src/radio.vue
@@ -10,14 +10,14 @@
       class="puik-radio__input"
       type="radio"
       :name="name"
-      :data-test="`input-${dataTest}`"
+      :data-test="dataTest != undefined ? `input-${dataTest}` : undefined"
       @focus="handleFocus"
     />
     <label
       v-if="$slots.default || label"
       :for="id"
       class="puik-radio__label"
-      :data-test="`label-${dataTest}`"
+      :data-test="dataTest != undefined ? `label-${dataTest}` : undefined"
     >
       <slot>{{ label }}</slot>
     </label>
diff --git a/packages/components/select/src/option.vue b/packages/components/select/src/option.vue
index 24d29cc4..1e170210 100644
--- a/packages/components/select/src/option.vue
+++ b/packages/components/select/src/option.vue
@@ -12,7 +12,7 @@
         'puik-option--selected': selectedValue === value,
         'puik-option--disabled': disabled,
       }"
-      :data-test="dataTest"
+      :data-test="dataTest ?? undefined"
     >
       <slot class="puik-option__label">{{ label }}</slot>
       <puik-icon
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index fafc3701..750eced0 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -22,7 +22,7 @@
           tabindex="-1"
           :readonly="open"
           type="text"
-          :data-test="`select-${dataTest}`"
+          :data-test="dataTest != undefined ? `select-${dataTest}` : undefined"
           @input="
             handleAutoComplete(($event.target as HTMLInputElement)?.value)
           "
@@ -54,7 +54,9 @@
             v-model="query"
             class="puik-select__search"
             :placeholder="t('puik.select.searchPlaceholder')"
-            :data-test="`searchInput-${dataTest}`"
+            :data-test="
+              dataTest != undefined ? `searchInput-${dataTest}` : undefined
+            "
           >
             <template #prepend
               ><puik-icon
@@ -71,7 +73,9 @@
                 : !filteredItems?.length)
             "
             class="puik-select__no-results"
-            :data-test="`noResults-${dataTest}`"
+            :data-test="
+              dataTest != undefined ? `noResults-${dataTest}` : undefined
+            "
           >
             {{ noMatchText || `${t('puik.select.noResults')} ${query}` }}
           </p>
@@ -83,7 +87,11 @@
                   :key="option"
                   :label="option[labelKey]"
                   :value="isObject(option) ? option[valueKey] : option"
-                  :data-test="`option-${dataTest}-${index + 1}`"
+                  :data-test="
+                    dataTest != undefined
+                      ? `option-${dataTest}-${index + 1}`
+                      : undefined
+                  "
                 />
               </template>
             </slot>
diff --git a/packages/components/sidebar/src/sidebar-group-item.vue b/packages/components/sidebar/src/sidebar-group-item.vue
index 004620be..e0e7e24c 100644
--- a/packages/components/sidebar/src/sidebar-group-item.vue
+++ b/packages/components/sidebar/src/sidebar-group-item.vue
@@ -11,7 +11,9 @@
       :name="accordionName"
       :icon="icon"
       class="puik-sidebar-group-item__accordion"
-      :data-test="`sidebarAccordion-${dataTest}`"
+      :data-test="
+        dataTest != undefined ? `sidebarAccordion-${dataTest}` : undefined
+      "
     >
       <slot></slot>
     </puik-accordion>
@@ -21,7 +23,9 @@
           variant="text"
           fluid
           class="puik-sidebar-group-item__collapsed-button"
-          :data-test="`sidebarMenuButton-${dataTest}`"
+          :data-test="
+            dataTest != undefined ? `sidebarMenuButton-${dataTest}` : undefined
+          "
         >
           <puik-icon :icon="icon" font-size="1.25rem"></puik-icon>
         </puik-button>
diff --git a/packages/components/sidebar/src/sidebar-item.vue b/packages/components/sidebar/src/sidebar-item.vue
index 0b815769..6d9705b5 100644
--- a/packages/components/sidebar/src/sidebar-item.vue
+++ b/packages/components/sidebar/src/sidebar-item.vue
@@ -13,7 +13,9 @@
       fluid
       variant="text"
       class="puik-sidebar-item__button"
-      :data-test="`menubuttonTitle-${dataTest}`"
+      :data-test="
+        dataTest != undefined ? `menubuttonTitle-${dataTest}` : undefined
+      "
     >
       {{ title }}
     </puik-button>
@@ -28,9 +30,13 @@
     :href="href"
     fluid
     variant="text"
-    :data-test="`buttonTitle-${dataTest}`"
+    :data-test="dataTest != undefined ? `buttonTitle-${dataTest}` : undefined"
   >
-    <span v-if="isExpanded" :data-test="`title-${dataTest}`">{{ title }}</span>
+    <span
+      v-if="isExpanded"
+      :data-test="dataTest != undefined ? `title-${dataTest}` : undefined"
+      >{{ title }}</span
+    >
   </puik-button>
 </template>
 
diff --git a/packages/components/sidebar/src/sidebar-title.vue b/packages/components/sidebar/src/sidebar-title.vue
index 22022467..baed4111 100644
--- a/packages/components/sidebar/src/sidebar-title.vue
+++ b/packages/components/sidebar/src/sidebar-title.vue
@@ -3,7 +3,7 @@
     :is="tag"
     v-if="isExpanded"
     class="puik-sidebar-title"
-    :data-test="`sidebarTitle-${dataTest}`"
+    :data-test="dataTest != undefined ? `sidebarTitle-${dataTest}` : undefined"
   >
     <slot></slot>
   </component>
diff --git a/packages/components/spinner-loader/src/spinner-loader.vue b/packages/components/spinner-loader/src/spinner-loader.vue
index 89b649d3..a9dc11be 100644
--- a/packages/components/spinner-loader/src/spinner-loader.vue
+++ b/packages/components/spinner-loader/src/spinner-loader.vue
@@ -8,7 +8,7 @@
     ]"
     aria-live="polite"
     role="status"
-    :data-test="dataTest"
+    :data-test="dataTest ?? undefined"
   >
     <div
       class="puik-spinner-loader__spinner"
diff --git a/packages/components/tag/src/tag.vue b/packages/components/tag/src/tag.vue
index fec3e809..dec7e99f 100644
--- a/packages/components/tag/src/tag.vue
+++ b/packages/components/tag/src/tag.vue
@@ -7,12 +7,15 @@
     ]"
   >
     <PuikIcon v-if="icon && icon != ''" :icon="icon" class="puik-tag__icon" />
-    <div class="puik-tag__content" :data-test="`content-${dataTest}`">
+    <div
+      class="puik-tag__content"
+      :data-test="dataTest != undefined ? `content-${dataTest}` : undefined"
+    >
       <puik-tooltip
         v-if="content?.length >= 30"
         :position="(tooltipPosition as PuikTooltipPosition)"
         :description="content"
-        :data-test="`tooltip-${dataTest}`"
+        :data-test="dataTest != undefined ? `tooltip-${dataTest}` : undefined"
       >
         <template #description>{{ content }}</template>
         {{ content }}
diff --git a/packages/components/tooltip/src/tooltip.vue b/packages/components/tooltip/src/tooltip.vue
index 68134c10..d50fa1c9 100644
--- a/packages/components/tooltip/src/tooltip.vue
+++ b/packages/components/tooltip/src/tooltip.vue
@@ -9,7 +9,7 @@
     <div
       ref="tooltipWrapper"
       class="puik-tooltip__wrapper"
-      :data-test="`content-${dataTest}`"
+      :data-test="dataTest != undefined ? `content-${dataTest}` : undefined"
     >
       <slot></slot>
     </div>
@@ -29,13 +29,15 @@
           <span
             v-if="$slots.title || title"
             class="puik-tooltip__tip__content__title"
-            :data-test="`title-${dataTest}`"
+            :data-test="dataTest != undefined ? `title-${dataTest}` : undefined"
             ><slot name="title">{{ title }}</slot></span
           >
           <span
             v-if="$slots.description || description"
             class="puik-tooltip__tip__content__description"
-            :data-test="`description-${dataTest}`"
+            :data-test="
+              dataTest != undefined ? `description-${dataTest}` : undefined
+            "
             ><slot name="description">{{ description }}</slot></span
           >
         </div>

From e685da6756cae5fc37b2a5996312a91fc1551b54 Mon Sep 17 00:00:00 2001
From: Guillaume Lepoetre <guillaume.lepoetre@prestashop.com>
Date: Fri, 10 Nov 2023 15:54:46 +0100
Subject: [PATCH 14/14] fix: Update condition

---
 packages/components/badge/src/badge.vue                   | 2 +-
 packages/components/button/src/button.vue                 | 2 +-
 packages/components/icon/src/icon.vue                     | 2 +-
 packages/components/label/src/label.vue                   | 2 +-
 packages/components/link/src/link.vue                     | 2 +-
 packages/components/progress-bar/src/progress-bar.vue     | 2 +-
 packages/components/select/src/option.vue                 | 2 +-
 packages/components/spinner-loader/src/spinner-loader.vue | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/components/badge/src/badge.vue b/packages/components/badge/src/badge.vue
index 41480b27..692c7269 100644
--- a/packages/components/badge/src/badge.vue
+++ b/packages/components/badge/src/badge.vue
@@ -2,7 +2,7 @@
   <div
     class="puik-badge"
     :class="[`puik-badge--${variant}`]"
-    :data-test="dataTest ?? undefined"
+    :data-test="dataTest"
   >
     <slot></slot>
   </div>
diff --git a/packages/components/button/src/button.vue b/packages/components/button/src/button.vue
index 1d6f36e2..5c095584 100644
--- a/packages/components/button/src/button.vue
+++ b/packages/components/button/src/button.vue
@@ -10,7 +10,7 @@
       { 'puik-button--fluid': fluid },
     ]"
     :disabled="disabled"
-    :data-test="dataTest ?? undefined"
+    :data-test="dataTest"
     @click="setSelected"
   >
     <puik-icon
diff --git a/packages/components/icon/src/icon.vue b/packages/components/icon/src/icon.vue
index 168af7d8..6071cd73 100644
--- a/packages/components/icon/src/icon.vue
+++ b/packages/components/icon/src/icon.vue
@@ -3,7 +3,7 @@
     :is="nodeType"
     class="puik-icon"
     :style="style"
-    :data-test="dataTest ?? undefined"
+    :data-test="dataTest"
   >
     {{ icon }}
   </component>
diff --git a/packages/components/label/src/label.vue b/packages/components/label/src/label.vue
index 13ea1f0e..a89c0d56 100644
--- a/packages/components/label/src/label.vue
+++ b/packages/components/label/src/label.vue
@@ -1,5 +1,5 @@
 <template>
-  <label class="puik-label" :for="props.for" :data-test="dataTest ?? undefined">
+  <label class="puik-label" :for="props.for" :data-test="dataTest">
     <slot></slot>
     <span v-if="required" class="puik-label--required">*</span>
     <span v-else-if="optional" class="puik-label--optional"
diff --git a/packages/components/link/src/link.vue b/packages/components/link/src/link.vue
index 09b0e78a..6335004d 100644
--- a/packages/components/link/src/link.vue
+++ b/packages/components/link/src/link.vue
@@ -5,7 +5,7 @@
     :target="target"
     :title="title"
     :class="['puik-link', `puik-link--${size}`]"
-    :data-test="dataTest ?? undefined"
+    :data-test="dataTest"
   >
     <slot></slot>
 
diff --git a/packages/components/progress-bar/src/progress-bar.vue b/packages/components/progress-bar/src/progress-bar.vue
index 331cf2d4..2737b6ba 100644
--- a/packages/components/progress-bar/src/progress-bar.vue
+++ b/packages/components/progress-bar/src/progress-bar.vue
@@ -3,7 +3,7 @@
     <div
       :class="barClass"
       :style="{ width: `${percentage}%` }"
-      :data-test="dataTest ?? undefined"
+      :data-test="dataTest"
       class="progress-bar__content"
     />
   </div>
diff --git a/packages/components/select/src/option.vue b/packages/components/select/src/option.vue
index 1e170210..24d29cc4 100644
--- a/packages/components/select/src/option.vue
+++ b/packages/components/select/src/option.vue
@@ -12,7 +12,7 @@
         'puik-option--selected': selectedValue === value,
         'puik-option--disabled': disabled,
       }"
-      :data-test="dataTest ?? undefined"
+      :data-test="dataTest"
     >
       <slot class="puik-option__label">{{ label }}</slot>
       <puik-icon
diff --git a/packages/components/spinner-loader/src/spinner-loader.vue b/packages/components/spinner-loader/src/spinner-loader.vue
index a9dc11be..89b649d3 100644
--- a/packages/components/spinner-loader/src/spinner-loader.vue
+++ b/packages/components/spinner-loader/src/spinner-loader.vue
@@ -8,7 +8,7 @@
     ]"
     aria-live="polite"
     role="status"
-    :data-test="dataTest ?? undefined"
+    :data-test="dataTest"
   >
     <div
       class="puik-spinner-loader__spinner"