feat: Set data-test is to easy now

PrestaShopCorp · Oct 30, 2023 · 983b26b · 983b26b
1 parent d0ffbe7
commit 983b26b
Show file tree

Hide file tree

Showing 57 changed files with 141 additions and 386 deletions.
diff --git 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
@@ -11,27 +11,27 @@
       :aria-controls="id"
       class="puik-accordion__header"
       :disabled="disabled"
-      :data-test="buttonDataTest"
+      :data-test="`button-${dataTest}`"
       @click="onClick"
     >
       <puik-icon
         v-if="icon"
         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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -25,15 +25,14 @@ export default {
         },
       },
     },
-    badgeDataTest: {
+    dataTest: {
       control: 'text',
       description: 'Set the data-test attribute on the badge',
     },
   },
   args: {
     default: 'Status',
     variant: 'neutral',
-    badgeDataTest: '',
   },
 } as Meta
 

diff --git 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
@@ -10,23 +10,23 @@
       { 'puik-button--fluid': fluid },
     ]"
     :disabled="disabled"
-    :data-test="buttonDataTest"
+    :data-test="`button-${dataTest}`"
     @click="setSelected"
   >
     <puik-icon
       v-if="leftIcon"
       :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
       v-if="rightIcon"
       :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
@@ -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
@@ -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
@@ -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>