Merge pull request #260 from PrestaShopCorp/fix-data-test

fix: try to fix first parent who don't have a data-test by default

packages/components/accordion/src/accordion.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="puik-accordion"
+    :data-test="dataTest"
     :class="{
       'puik-accordion--expanded': isExpanded,
       'puik-accordion--disabled': disabled,

packages/components/accordion/test/accordion.spec.ts

@@ -17,6 +17,8 @@ const factory = (template: string, options: MountingOptions<any> = {}) => {
 }
 
 export const getAccordion = (wrapper) => wrapper.findComponent(PuikAccordion)
+export const getAccordionContainer = (component) =>
+  component.find('.puik-accordion')
 export const getAccordionContent = (component) =>
   component.find('.puik-accordion__content')
 export const getAccordionHeader = (component) =>
@@ -153,7 +155,7 @@ describe('Accordion tests', () => {
     expect(getAccordionIcon(wrapper).text()).toBe(icon)
   })
 
-  it('should have data-test attribute on button, title, sub-title, icon', () => {
+  it('should have data-test attribute on accordion container div, 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">
@@ -164,6 +166,9 @@ describe('Accordion tests', () => {
     factory(template)
 
     const accordion = getAccordion(wrapper)
+    expect(getAccordionContainer(accordion).attributes('data-test')).toBe(
+      'accordion'
+    )
     expect(getAccordionHeader(accordion).attributes('data-test')).toBe(
       'button-accordion'
     )

packages/components/alert/src/alert.vue

@@ -6,6 +6,7 @@
       { 'puik-alert--no-borders': disableBorders },
     ]"
     :aria-live="ariaLive"
+    :data-test="dataTest"
   >
     <div class="puik-alert__container">
       <div class="puik-alert__content">

packages/components/alert/test/alert.spec.ts

@@ -76,14 +76,15 @@ describe('Alert tests', () => {
     expect(wrapper.emitted('close')).toBeTruthy()
   })
 
-  it('should have a data-test attribute on title, description button and close button', () => {
+  it('should have a data-test attribute on container div, title, description button and close button', () => {
     factory({
       title: faker.lorem.word(2),
       description: faker.lorem.sentence(60),
       buttonLabel: 'Button',
       isClosable: true,
       dataTest: 'alert',
     })
+    expect(findAlert().attributes('data-test')).toBe('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')

packages/components/avatar/src/avatar.vue

@@ -2,6 +2,7 @@
   <div
     :id="id"
     :class="`puik-avatar puik-avatar--${size} puik-avatar--${type} puik-avatar--${mode}`"
+    :data-test="dataTest"
   >
     <img
       v-if="src && type == PuikAvatarType.PHOTO"

packages/components/avatar/test/avatar.spec.ts

@@ -57,6 +57,14 @@ describe('Avatar tests', () => {
     expect(findImg().attributes().alt).toBe('alt-img')
   })
 
+  it('should have data-test attribute on container div of avatar', () => {
+    factory({
+      type: 'initials',
+      dataTest: 'example',
+    })
+    expect(findAvatar().attributes('data-test')).toBe('example')
+  })
+
   it('should have data-test attribute on initials wrapper', () => {
     factory({
       type: 'initials',

packages/components/checkbox/src/checkbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="puik-checkbox">
+  <div class="puik-checkbox" :data-test="dataTest">
     <input
       :id="id"
       ref="checkboxInputRef"

packages/components/checkbox/test/checkbox.spec.ts

@@ -6,6 +6,7 @@ import type { MountingOptions, VueWrapper } from '@vue/test-utils'
 
 describe('Checkbox tests', () => {
   let wrapper: VueWrapper<any>
+  const findCheckbox = () => wrapper.find('.puik-checkbox')
   const findInput = () => wrapper.find('.puik-checkbox__input')
   const findLabel = () => wrapper.find('.puik-checkbox__label')
 
@@ -94,8 +95,9 @@ describe('Checkbox tests', () => {
     expect(wrapper.vm.checkboxInputRef.click).not.toHaveBeenCalled()
   })
 
-  it('shouold have a data-test attribute on the input and the label', () => {
+  it('should have a data-test attribute on the container div, the input and the label', () => {
     factory({ label: 'Label', modelValue: false, dataTest: 'test' })
+    expect(findCheckbox().attributes('data-test')).toBe('test')
     expect(findInput().attributes('data-test')).toBe('input-test')
     expect(findLabel().attributes('data-test')).toBe('label-test')
   })

packages/components/input/src/input.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="puik-input">
+  <div class="puik-input" :data-test="dataTest">
     <div class="puik-input__wrapper" :class="inputClasses">
       <div v-if="$slots.prepend" class="puik-input__prepend">
         <slot name="prepend"></slot>

packages/components/input/test/input.spec.ts

@@ -7,6 +7,7 @@ describe('Input tests', () => {
   let wrapper: VueWrapper<any>
 
   const findField = () => wrapper.find('.puik-input__field')
+  const findInput = () => wrapper.find('.puik-input')
   const findWrapper = () => wrapper.find('.puik-input__wrapper')
   const findHint = () => wrapper.find('.puik-input__hint__text')
   const findError = () => wrapper.find('.puik-input__hint__error')
@@ -185,7 +186,7 @@ describe('Input tests', () => {
     expect(findAppend().text()).toBe('$')
   })
 
-  it('should have a data-tes attribut for the input and the error message', () => {
+  it('should have a data-tes attribut for the container div, the input and the error message', () => {
     const error = 'This is an error message'
     factory(
       { modelValue: 'value', type: 'text', dataTest: 'test' },
@@ -195,6 +196,7 @@ describe('Input tests', () => {
         },
       }
     )
+    expect(findInput().attributes('data-test')).toBe('test')
     expect(findField().attributes('data-test')).toBe('input-test')
     expect(findErrorMessage().attributes('data-test')).toBe('error-test')
   })

packages/components/modal/src/modal.vue

@@ -3,6 +3,7 @@
     :open="isOpen"
     class="puik-modal"
     :class="[`puik-modal--${variant}`, `puik-modal--${size}`]"
+    :data-test="dataTest"
     @close="sendCloseModalEvent()"
   >
     <div class="puik-modal__dialogPanelContainer">

packages/components/modal/test/modal.spec.ts

@@ -233,7 +233,7 @@ describe('Modal tests', () => {
     expect(findHeader().exists()).toBeFalsy()
   })
 
-  it('should have a data-test attribute on title, mainButton, secondButton and closeButton', async () => {
+  it('should have a data-test attribute on container div, title, mainButton, secondButton and closeButton', async () => {
     await factory({
       title: 'Awesome title',
       mainButtonText: 'Awesome main',
@@ -242,6 +242,7 @@ describe('Modal tests', () => {
       hasCloseButton: true,
       dataTest: 'test',
     })
+    expect(findModal().attributes('data-test')).toBe('test')
     expect(findTitle().attributes('data-test')).toBe('title-test')
     expect(findMainButton().attributes('data-test')).toBe('mainButton-test')
     expect(findSecondaryButton().attributes('data-test')).toBe(

packages/components/pagination/src/pagination.vue

@@ -4,6 +4,7 @@
     :class="[`puik-pagination--${variant}`]"
     role="navigation"
     :aria-label="t('puik.pagination.ariaLabel')"
+    :data-test="dataTest"
   >
     <pagination-loader
       v-if="variant === PuikPaginationVariantEnum.loader"

packages/components/pagination/test/pagination.spec.ts

@@ -297,7 +297,7 @@ describe('Pagination tests', () => {
     expect(options.length).toBe(2)
   })
 
-  it('should have a data-test attribute on nextButton, previousButton and label', () => {
+  it('should have a data-test attribute on container nav, nextButton, previousButton and label', () => {
     factory({
       ...propsData,
       variant: PuikPaginationVariantEnum.large,
@@ -307,6 +307,7 @@ describe('Pagination tests', () => {
     expect(findPreviousButton().attributes('data-test')).toBe(
       'previousButton-test'
     )
+    expect(findPagination().attributes('data-test')).toBe('test')
     expect(findNextButton().attributes('data-test')).toBe('nextButton-test')
     expect(findLabel().attributes('data-test')).toBe('label-test')
   })

packages/components/progress-bar/src/progress-bar.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="progress-bar__container">
+  <div class="progress-bar__container" :data-test="dataTest">
     <div
       :class="barClass"
       :style="{ width: `${percentage}%` }"
-      :data-test="dataTest"
+      :data-test="dataTest != undefined ? `bar-${dataTest}` : undefined"
       class="progress-bar__content"
     />
   </div>

packages/components/progress-bar/test/progress-bar.spec.ts

@@ -31,9 +31,11 @@ describe('ProgressBar tests', () => {
     )
   })
 
-  it('should have a data-test attribute', () => {
+  it('should have a data-test attribute on progressBar container and content', () => {
     factory({ ...defaultProps, dataTest: 'test' })
+    const progressBarContainer = wrapper.find('.progress-bar__container')
     const progressBarContent = wrapper.find('.progress-bar__content')
-    expect(progressBarContent.attributes('data-test')).toBe('test')
+    expect(progressBarContainer.attributes('data-test')).toBe('test')
+    expect(progressBarContent.attributes('data-test')).toBe('bar-test')
   })
 })

packages/components/progress-stepper/src/progress-stepper-step.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="puik-progress-stepper-step">
+  <div class="puik-progress-stepper-step" :data-test="dataTest">
     <puik-button
       :aria-current="isCurrentStep ? 'step' : undefined"
       :aria-label="step"

packages/components/progress-stepper/test/progress-stepper-step.spec.ts

@@ -29,16 +29,20 @@ describe('ProgressStepperStep tests', () => {
   }
 
   const getStep = () => wrapper.findComponent(PuikProgressStepperStep)
+  const getProgressStepperStep = () =>
+    getStep().find('.puik-progress-stepper-step')
   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', () => {
+  it('should have a step with data-test on container div, button, text and additionnalText', () => {
     factory()
+    const container = getProgressStepperStep()
     const button = getButton()
     const text = getText()
     const additionalText = getAdditionalText()
+    expect(container.attributes('data-test')).toBe('test')
     expect(button.attributes('data-test')).toBe('stepButton-test')
     expect(text.attributes('data-test')).toBe('text-test')
     expect(additionalText.attributes('data-test')).toBe('additionalText-test')

packages/components/radio/src/radio.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="puik-radio">
+  <div class="puik-radio" :data-test="dataTest">
     <input
       :id="id"
       ref="radioInputRef"

packages/components/radio/test/radio.spec.ts

@@ -7,6 +7,7 @@ import type { MountingOptions, VueWrapper } from '@vue/test-utils'
 
 describe('Radio tests', () => {
   let wrapper: VueWrapper<any>
+  const findInputContainer = () => wrapper.find('.puik-radio')
   const findInput = () => wrapper.find('.puik-radio__input')
   const findLabel = () => wrapper.find('.puik-radio__label')
 
@@ -84,10 +85,12 @@ describe('Radio tests', () => {
     expect(findLabel().text()).toContain('Custom label')
   })
 
-  it('should have a data-test attribute on label and input', () => {
+  it('should have a data-test attribute on container div, label and input', () => {
     factory({ label: 'Label', modelValue: false, dataTest: 'test' })
+    const container = findInputContainer()
     const label = findLabel()
     const input = findInput()
+    expect(container.attributes('data-test')).toBe('test')
     expect(label.attributes('data-test')).toBe('label-test')
     expect(input.attributes('data-test')).toBe('input-test')
   })

packages/components/sidebar/src/sidebar-group-item.vue

@@ -4,6 +4,7 @@
     :class="{
       'puik-sidebar-group-item--active': active,
     }"
+    :data-test="dataTest"
   >
     <puik-accordion
       v-if="isExpanded"

packages/components/sidebar/src/sidebar-item.vue

@@ -4,6 +4,7 @@
     v-slot="{ active: focused }"
     class="puik-sidebar-item"
     :class="{ 'puik-sidebar-item--active': active }"
+    :data-test="dataTest"
   >
     <puik-button
       :aria-label="title"

packages/components/sidebar/test/sidebar-group-item.spec.ts

@@ -16,6 +16,8 @@ const factory = (template: string, options: MountingOptions<any> = {}) => {
   })
 }
 
+const getSidebarGroupItemContainer = () =>
+  wrapper.find('.puik-sidebar-group-item')
 const getIcon = () => wrapper.find('.puik-sidebar-group-item .puik-icon')
 const getAccordion = () => wrapper.find('.puik-sidebar-group-item__accordion')
 const getAccordionTitle = () =>
@@ -112,4 +114,16 @@ describe('Sidebar tests', () => {
     await getMenuButton().trigger('click')
     expect(getMenuContent().exists()).toBeTruthy()
   })
+
+  it('should render data-test attribute on container div', async () => {
+    const template = `
+      <puik-sidebar>
+        <puik-sidebar-group-item title="group" icon="store" data-test="test">
+          <puik-sidebar-item icon="home" title="title"></puik-sidebar-item>
+        </puik-sidebar-group-item>
+      </puik-sidebar>
+    `
+    factory(template)
+    expect(getSidebarGroupItemContainer().attributes('data-test')).toBe('test')
+  })
 })

packages/components/sidebar/test/sidebar-item.spec.ts

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils'
 import { describe, it, expect } from 'vitest'
 import { PuikSidebar, PuikSidebarItem } from '../..'
+import { PuikMenuItem } from './../../menu/index'
 import type { MountingOptions, VueWrapper } from '@vue/test-utils'
 
 let wrapper: VueWrapper<any>
@@ -9,12 +10,15 @@ const factory = (template: string, options: MountingOptions<any> = {}) => {
     components: {
       PuikSidebarItem,
       PuikSidebar,
+      PuikMenuItem,
     },
     template,
     ...options,
   })
 }
 
+const getSideBarItem = () => wrapper.find('.puik-sidebar-item')
+const getSideBarItemLabel = () => wrapper.find('.puik-sidebar-item span')
 const getItemButton = () => wrapper.find('.puik-sidebar-item__button')
 
 describe('Sidebar tests', () => {
@@ -69,4 +73,15 @@ describe('Sidebar tests', () => {
     factory(template)
     expect(getItemButton().text()).toBe('title')
   })
+
+  it('should render a data-test attribute on sidebar item button and label (if sidebar is expanded)', () => {
+    const template = `
+      <puik-sidebar :expanded="true">
+        <puik-sidebar-item title="title" data-test="test"/>
+      </puik-sidebar>
+    `
+    factory(template)
+    expect(getSideBarItem().attributes('data-test')).toBe('buttonTitle-test')
+    expect(getSideBarItemLabel().attributes('data-test')).toBe('title-test')
+  })
 })

packages/components/tag/src/tag.vue

@@ -5,6 +5,7 @@
       `puik-tag puik-tag--${variant as PuikTagColorVariant} puik-tag--${size as PuikTagSizeVariant}`,
       { 'puik-tag--disabled': disabled },
     ]"
+    :data-test="dataTest"
   >
     <PuikIcon v-if="icon && icon != ''" :icon="icon" class="puik-tag__icon" />
     <div class="puik-tag__content">

packages/components/tag/test/tag.spec.ts

@@ -56,11 +56,12 @@ describe('Tag tests', () => {
     expect(findTag().classes()).toContain('puik-tag--disabled')
   })
 
-  it('should have a data-test attribute for the content', () => {
+  it('should have a data-test attribute for the container div and the content', () => {
     factory({
       content: 'long content for displaying the tooltip',
       'data-test': 'test',
     })
+    expect(findTag().attributes('data-test')).toBe('test')
     expect(findTagContent().attributes('data-test')).toBe('content-test')
   })
 })

packages/components/tooltip/src/tooltip.vue

@@ -3,6 +3,7 @@
     class="puik-tooltip"
     tabindex="0"
     :aria-describedby="id"
+    :data-test="dataTest"
     @mouseover="updateTooltip"
     @mouseleave="start"
   >