Merge pull request #471 from storyblok/feat/work-1388-add-data-testid…

…-in-datepicker-and-more refactor(WORK-1388): add data-testid in datepicker and textfield
storyblok · Nov 8, 2023 · 302e873 · 302e873
2 parents 0303efd + 0a66c67
commit 302e873
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 5 deletions.
diff --git a/src/components/DataTable/components/SbDataTableHeader.vue b/src/components/DataTable/components/SbDataTableHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <thead :data-testid="dataTestid">
-    <tr>
+    <tr :data-testid="`${dataTestid}-list-column`">
       <th
         v-if="allowSelection && isMultiple"
         class="sb-data-table__head-cell"

diff --git a/src/components/Datepicker/Datepicker.vue b/src/components/Datepicker/Datepicker.vue
@@ -17,6 +17,7 @@
         :model-value="internalValueFormatted"
         :error="invalidDate"
         :inline-label="inlineLabel"
+        :data-testid="`${baseDataTestId}-input`"
         clearable
         @icon-click="handleInputClick"
         @clear="handleClear"
@@ -51,6 +52,7 @@
           isMonthView,
           isTimeView,
           modelValue: internalDate,
+          dataTestid: baseDataTestId,
         }"
         @previous-month="handlePreviousMonth"
         @next-month="handleNextMonth"
@@ -66,20 +68,23 @@
         :max-date="maxDate"
         :minute-range="minuteRange"
         :disabled-past="disabledPast"
+        :data-testid="baseDataTestId"
         @update:model-value="handleComponentsInput"
         @input-minutes="handleMinutesInput"
       />
 
       <div class="sb-datepicker__actions">
         <button
           class="sb-datepicker__action-button"
+          :data-testid="`${baseDataTestId}-cancel`"
           @click="handleCancelAction"
         >
           Cancel
         </button>
 
         <button
           class="sb-datepicker__action-button sb-datepicker__action-button--primary"
+          :data-testid="`${baseDataTestId}-apply`"
           @click="handleDoneAction"
         >
           Apply
@@ -219,6 +224,10 @@ export default {
   }),
 
   computed: {
+    baseDataTestId() {
+      const dataTestid = this.$attrs['data-testid']
+      return dataTestid ? dataTestid : 'sb-datepicker'
+    },
     isInputReadonly() {
       return this.minuteRange > 1
     },

diff --git a/src/components/Datepicker/components/DatepickerDays.vue b/src/components/Datepicker/components/DatepickerDays.vue
@@ -10,6 +10,7 @@
         'sb-datepicker-days__item--current': dayItem.current,
         'sb-datepicker-days__item--disabled': dayItem.disabled,
       }"
+      :data-testid="dayItem.dataTestid"
       @click="($evt) => handleDayClick($evt, dayItem)"
     >
       {{ dayItem.label }}
@@ -44,6 +45,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    dataTestid: {
+      type: String,
+      default: null,
+    },
   },
 
   emits: ['update:modelValue'],
@@ -64,6 +69,7 @@ export default {
           checked: false,
           current: false,
           disabled: this.isDisabledDay(dateValue),
+          dataTestid: this.getDataTestid(dateValue),
         })
       }
 
@@ -77,6 +83,7 @@ export default {
           checked: dayjs(this.modelValue).isSame(dateValue, 'day'),
           current: dayjs().isSame(dateValue, 'day'),
           disabled: this.isDisabledDay(dateValue),
+          dataTestid: this.getDataTestid(dateValue),
         })
       }
 
@@ -91,6 +98,7 @@ export default {
           checked: false,
           current: false,
           disabled: this.isDisabledDay(dateValue),
+          dataTestid: this.getDataTestid(dateValue),
         })
       }
 
@@ -134,6 +142,10 @@ export default {
         this.isMaxDateDisabled(dateValue)
       )
     },
+    
+    getDataTestid(date) {
+      return `${this.dataTestid}-day-${dayjs(date).format('MM-DD-YYYY')}`
+    },
   },
 }
 </script>
diff --git a/src/components/Datepicker/components/DatepickerHeader.vue b/src/components/Datepicker/components/DatepickerHeader.vue
@@ -4,6 +4,7 @@
       <button
         class="sb-datepicker-header__button"
         :disabled="isDisabled"
+        :data-testid="`${dataTestid}-header-previous-month`"
         @click="handlePreviousClick"
       >
         <SbIcon name="chevron-left" :color="iconColor" />
@@ -30,6 +31,7 @@
       <button
         class="sb-datepicker-header__button"
         :disabled="isDisabled"
+        :data-testid="`${dataTestid}-header-next-month`"  
         @click="handleNextClick"
       >
         <SbIcon name="chevron-right" :color="iconColor" />
@@ -65,6 +67,10 @@ export default {
       type: String,
       default: null,
     },
+    dataTestid: {
+      type: String,
+      default: null,
+    },
   },
 
   emits: ['change-month', 'change-year', 'next-month', 'previous-month'],

diff --git a/src/components/Datepicker/components/DatepickerMonths.vue b/src/components/Datepicker/components/DatepickerMonths.vue
@@ -5,6 +5,7 @@
       :key="index"
       class="sb-datepicker-months__item"
       :class="{ 'sb-datepicker-months__item--active': monthItem.checked }"
+      :data-testid="monthItem.dataTestid"
       @click="($evt) => handleMonthClick($evt, monthItem.label)"
     >
       {{ monthItem.label }}
@@ -26,6 +27,10 @@ export default {
       type: String,
       default: null,
     },
+    dataTestid: {
+      type: String,
+      default: null,
+    },
   },
 
   emits: ['update:modelValue'],
@@ -53,6 +58,7 @@ export default {
         return {
           checked: dayjs(this.internalDate).format('MMM') === month,
           label: month,
+          dataTestid: `${this.dataTestid}-month-${month}`,
         }
       })
     },

diff --git a/src/components/Datepicker/components/DatepickerYears.vue b/src/components/Datepicker/components/DatepickerYears.vue
@@ -5,6 +5,7 @@
       :key="index"
       class="sb-datepicker-years__item"
       :class="{ 'sb-datepicker-years__item--active': yearItem.checked }"
+      :data-testid="yearItem.dataTestid"
       @click="($evt) => handleYearClick($evt, yearItem.label)"
     >
       {{ yearItem.label }}
@@ -27,6 +28,10 @@ export default {
       type: String,
       default: null,
     },
+    dataTestid: {
+      type: String,
+      default: null,
+    },
   },
 
   emits: ['update:modelValue'],
@@ -45,6 +50,7 @@ export default {
         return {
           label: year,
           checked: year === this.currentYear,
+          dataTestid: `${this.dataTestid}-year-${year}`,
         }
       })
     },

diff --git a/src/components/TextField/SbTextField.vue b/src/components/TextField/SbTextField.vue
@@ -9,6 +9,7 @@
       <span
         v-if="inlineLabel"
         class="sb-textfield__inner-label"
+        :data-testid="baseDataTestId"
         @click="$refs.textfield.focus()"
       >
         {{ inlineLabel }}
@@ -69,7 +70,7 @@
           :name="iconLeft"
           class="sb-textfield__icon sb-textfield__icon--left"
           :color="iconColor"
-          data-testid="sb-textfield-icon-click"
+          :data-testid="`${baseDataTestId}-icon-click`"
           @click="handleIconClick"
         />
         <SbTooltip
@@ -83,7 +84,7 @@
             :name="iconLeft"
             class="sb-textfield__icon sb-textfield__icon--left"
             :color="iconColor"
-            data-testid="sb-textfield-icon-click"
+            :data-testid="`${baseDataTestId}-icon-click`"
             @click="handleIconClick"
           />
         </SbTooltip>
@@ -92,15 +93,15 @@
           :name="iconRight"
           class="sb-textfield__icon sb-textfield__icon--right"
           :color="iconColor"
-          data-testid="sb-textfield-icon-click"
+          :data-testid="`${baseDataTestId}-icon-click`"
           @click="handleIconClick"
         />
         <SbIcon
           v-if="internalIconRight && type === 'password'"
           :name="internalIconRight"
           class="sb-textfield__icon sb-textfield__icon--right"
           :color="iconColor"
-          data-testid="sb-textfield-icon-click"
+          :data-testid="`${baseDataTestId}-icon-click`"
           @click="handleShowHidePassword"
         />
         <SbIcon
@@ -109,6 +110,7 @@
           name="x-clear"
           :class="computedClearIconClasses"
           :color="iconColor"
+          :data-testid="`${baseDataTestId}-icon-clear`"
           @click="handleClearableClick"
         />
       </div>
@@ -191,6 +193,11 @@ export default {
   ],
 
   computed: {
+    baseDataTestId() {
+      const dataTestid = this.$attrs['data-testid']
+      return dataTestid ? dataTestid : 'sb-textfield'
+    },
+    
     hasValue() {
       return this.computedValue !== null && ('' + this.computedValue).length > 0
     },