feat: Add data-test for the select element

PrestaShopCorp · Oct 30, 2023 · 8775790 · 8775790
1 parent 989dd65
commit 8775790
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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,17 +71,19 @@
                 : !filteredItems?.length)
             "
             class="puik-select__no-results"
+            :data-test="noResultsDataTest"
           >
             {{ noMatchText || `${t('puik.select.noResults')} ${query}` }}
           </p>
           <ul class="puik-select__options-list">
             <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
@@ -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: '',