Merge pull request #235 from PrestaShopCorp/EB-1111-data-test

feat: add data-test attribute

packages/components/accordion/src/accordion.ts

@@ -27,6 +27,11 @@ export const accordionProps = buildProps({
     required: false,
     default: false,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export const accordionEmits = ['click']

packages/components/accordion/src/accordion.vue

@@ -11,17 +11,30 @@
       :aria-controls="id"
       class="puik-accordion__header"
       :disabled="disabled"
+      :data-test="dataTest != undefined ? `button-${dataTest}` : undefined"
       @click="onClick"
     >
       <puik-icon
         v-if="icon"
         class="puik-accordion__header__icon"
         :icon="icon"
         :font-size="24"
+        :data-test="dataTest != undefined ? `icon-${dataTest}` : undefined"
       ></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="dataTest != undefined ? `title-${dataTest}` : undefined"
+        >
+          {{ title }}
+        </div>
+        <div
+          v-if="subTitle"
+          class="puik-accordion__header__content__sub-title"
+          :data-test="
+            dataTest != undefined ? `subTitle-${dataTest}` : undefined
+          "
+        >
           {{ subTitle }}
         </div>
       </div>

packages/components/accordion/stories/accordion.stories.ts

@@ -36,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
 

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'
+    )
+  })
 })

packages/components/alert/src/alert.ts

@@ -47,6 +47,11 @@ export const alertProps = buildProps({
     required: false,
     default: 'polite',
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type AlertProps = ExtractPropTypes<typeof alertProps>

packages/components/alert/src/alert.vue

@@ -11,10 +11,19 @@
       <div class="puik-alert__content">
         <PuikIcon :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="dataTest != undefined ? `title-${dataTest}` : undefined"
+          >
+            {{ title }}
+          </p>
           <span
             v-if="$slots.default || description"
             class="puik-alert__description"
+            :data-test="
+              dataTest != undefined ? `description-${dataTest}` : undefined
+            "
             ><slot>{{ description }}</slot></span
           >
         </div>
@@ -23,6 +32,7 @@
         v-if="buttonLabel"
         :variant="variant"
         class="puik-alert__button"
+        :data-test="dataTest != undefined ? `button-${dataTest}` : undefined"
         @click="click"
       >
         {{ buttonLabel }}
@@ -34,6 +44,7 @@
       icon="close"
       font-size="1.5rem"
       class="puik-alert__close"
+      :data-test="dataTest != undefined ? `close-${dataTest}` : undefined"
       @click="close"
     />
   </div>

packages/components/alert/stories/alert.stories.ts

@@ -47,6 +47,11 @@ export default {
       control: 'none',
       description: 'Set the alert description',
     },
+    dataTest: {
+      control: 'text',
+      description:
+        'Set the data-test attribute for the alert components `title-${dataTest}` `description-${dataTest}` `button-${dataTest}` `close-${dataTest}`',
+    },
   },
   args: {
     title: 'Title',

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')
+  })
 })

packages/components/badge/src/badge.ts

@@ -17,6 +17,11 @@ export const badgeProps = buildProps({
     type: String as PropType<PuikBadgeVariant>,
     default: 'neutral',
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type BadgeProps = ExtractPropTypes<typeof badgeProps>

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="dataTest"
+  >
     <slot></slot>
   </div>
 </template>

packages/components/badge/stories/badge.stories.ts

@@ -25,6 +25,10 @@ export default {
         },
       },
     },
+    dataTest: {
+      control: 'text',
+      description: 'Set the data-test attribute on the badge',
+    },
   },
   args: {
     default: 'Status',

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')
+  })
 })

packages/components/breadcrumb/src/breadcrumb.ts

@@ -3,11 +3,13 @@ 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?: string
+  target?: PuikTargetString
+  dataTest?: string
 }
 
 export const breadcrumbProps = buildProps({

packages/components/breadcrumb/src/breadcrumb.vue

@@ -17,6 +17,7 @@
         :to="item.to"
         :href="item.href"
         :target="item.target"
+        :data-test="item.dataTest ? item.dataTest : undefined"
         size="sm"
       >
         {{ item.label }}
@@ -29,7 +30,14 @@
       ></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].dataTest
+          : undefined
+      "
+    >
       {{ items[items.length - 1].label }}
     </div>
   </nav>

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,
 }`,
         },
       },

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 })

packages/components/button/src/button.ts

@@ -68,6 +68,11 @@ export const buttonProps = buildProps({
     required: false,
     default: undefined,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type ButtonProps = ExtractPropTypes<typeof buttonProps>

packages/components/button/src/button.vue

@@ -10,20 +10,23 @@
       { 'puik-button--fluid': fluid },
     ]"
     :disabled="disabled"
+    :data-test="dataTest"
     @click="setSelected"
   >
     <puik-icon
       v-if="leftIcon"
       :icon="leftIcon"
       :font-size="size !== 'sm' ? '1.25rem' : '1rem'"
       class="puik-button__left-icon"
+      :data-test="dataTest != undefined ? `leftIcon-${dataTest}` : undefined"
     />
     <slot></slot>
     <puik-icon
       v-if="rightIcon"
       :icon="rightIcon"
       :font-size="size !== 'sm' ? '1.25rem' : '1rem'"
       class="puik-button__right-icon"
+      :data-test="dataTest != undefined ? `rightIcon-${dataTest}` : undefined"
     />
   </component>
 </template>

packages/components/button/stories/button.stories.ts

@@ -71,6 +71,11 @@ export default {
       control: 'text',
       description: 'Set a link for the button (changes button to "a" html tag)',
     },
+    dataTest: {
+      control: 'text',
+      description:
+        'Set a data-test attribute to the button `${dataTest}` `left-icon-${dataTest}` `right-icon-${dataTest}`',
+    },
   },
   args: {
     variant: 'primary',

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'
+    )
+  })
 })

packages/components/checkbox/src/checkbox.ts

@@ -22,6 +22,11 @@ export const checkboxProps = buildProps({
     required: false,
     default: false,
   },
+  dataTest: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
 } as const)
 
 export type CheckboxProps = ExtractPropTypes<typeof checkboxProps>