feat: Add sidebar data-test

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

Hide file tree

Showing 9 changed files with 42 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -30,6 +30,10 @@ export default {
         },
       },
     },
+    sidebarTitleDataTest: {
+      control: 'text',
+      description: 'Set the data-test attribute on the sidebar title',
+    },
   },
   args: {
     tag: 'h3',