refactor!: Rename data-test to data-test-id attribute (resolves #987

)
Vuepic · Oct 31, 2024 · 06529e6 · 06529e6
1 parent 5ffb954
commit 06529e6
Show file tree

Hide file tree

Showing 17 changed files with 97 additions and 98 deletions.
diff --git a/src/VueDatePicker/components/ActionRow.vue b/src/VueDatePicker/components/ActionRow.vue
@@ -55,7 +55,7 @@
                         type="button"
                         class="dp__action_button dp__action_select"
                         :disabled="disabled"
-                        data-test="select-button"
+                        data-test-id="select-button"
                         @keydown="checkKeyDown($event, () => selectDate())"
                         @click="selectDate"
                     >

diff --git a/src/VueDatePicker/components/Common/SelectionOverlay.vue b/src/VueDatePicker/components/Common/SelectionOverlay.vue
@@ -36,7 +36,7 @@
                         :aria-selected="col.active || undefined"
                         :aria-disabled="col.disabled || undefined"
                         tabindex="0"
-                        :data-test="col.text"
+                        :data-test-id="col.text"
                         @click.prevent="onClick(col)"
                         @keydown="checkKeyDown($event, () => onClick(col), true)"
                         @mouseover="setHoverValue(col.value)"

diff --git a/src/VueDatePicker/components/DatePicker/DpCalendar.vue b/src/VueDatePicker/components/DatePicker/DpCalendar.vue
@@ -10,7 +10,7 @@
                     :key="i"
                     class="dp__calendar_header_item"
                     role="gridcell"
-                    data-test="calendar-header"
+                    data-test-id="calendar-header"
                     :aria-label="defaultedAriaLabels?.weekDay?.(i)"
                 >
                     <slot v-if="$slots['calendar-header']" name="calendar-header" :day="dayVal" :index="i" />
@@ -44,7 +44,7 @@
                             :aria-disabled="dayVal.classData.dp__cell_disabled || undefined"
                             :aria-label="defaultedAriaLabels?.day?.(dayVal)"
                             :tabindex="!dayVal.current && hideOffsetDates ? undefined : 0"
-                            :data-test="dayVal.value"
+                            :data-test-id="dayVal.value"
                             @click.prevent="onDateSelect($event, dayVal)"
                             @touchend="onDateSelect($event, dayVal, false)"
                             @keydown="checkKeyDown($event, () => $emit('select-date', dayVal))"

diff --git a/src/VueDatePicker/components/DatePicker/DpHeader.vue b/src/VueDatePicker/components/DatePicker/DpHeader.vue
@@ -39,7 +39,7 @@
                             class="dp__btn dp__month_year_select"
                             :class="{ 'dp--hidden-el': overlayOpen }"
                             :aria-label="`${type.text}-${type.ariaLabel}`"
-                            :data-test="`${type.type}-toggle-overlay-${instance}`"
+                            :data-test-id="`${type.type}-toggle-overlay-${instance}`"
                             @click="type.toggle"
                             @keydown="checkKeyDown($event, () => type.toggle(), true)"
                         >

diff --git a/src/VueDatePicker/components/DatepickerInput.vue b/src/VueDatePicker/components/DatepickerInput.vue
@@ -27,7 +27,7 @@
                 v-if="!$slots['dp-input']"
                 :id="uid ? `dp-input-${uid}` : undefined"
                 ref="inputRef"
-                data-test="dp-input"
+                data-test-id="dp-input"
                 :name="name"
                 :class="inputClass"
                 :inputmode="defaultedTextInput.enabled ? 'text' : 'none'"
@@ -69,7 +69,7 @@
                 @keydown="checkKeyDown($event, () => onClear($event), true, onClearKeydown)"
                 @click.prevent="onClear($event)"
             >
-                <CancelIcon class="dp__input_icons" data-test="clear-icon" />
+                <CancelIcon class="dp__input_icons" data-test-id="clear-icon" />
             </button>
         </div>
     </div>

diff --git a/src/VueDatePicker/components/DatepickerMenu.vue b/src/VueDatePicker/components/DatepickerMenu.vue
@@ -49,7 +49,7 @@
                             :style="preset.style || {}"
                             class="dp__btn dp--preset-range"
                             :class="{ 'dp--preset-range-collapsed': collapse }"
-                            :data-test="preset.testId ?? undefined"
+                            :data-test-id="preset.testId ?? undefined"
                             @click.prevent="presetDate(preset.value, preset.noTz)"
                             @keydown="checkKeyDown($event, () => presetDate(preset.value, preset.noTz), true)"
                         >

diff --git a/src/VueDatePicker/components/QuarterPicker/QuarterPicker.vue b/src/VueDatePicker/components/QuarterPicker/QuarterPicker.vue
@@ -30,7 +30,7 @@
                             'dp--qr-btn-disabled': quarter.disabled,
                             'dp--highlighted': quarter.highlighted,
                         }"
-                        :data-test="quarter.value"
+                        :data-test-id="quarter.value"
                         :disabled="quarter.disabled"
                         @click="selectQuarter(quarter.value, instance, quarter.disabled)"
                         @mouseover="setHoverDate(quarter.value)"

diff --git a/src/VueDatePicker/components/TimePicker/TimeInput.vue b/src/VueDatePicker/components/TimePicker/TimeInput.vue
@@ -20,7 +20,7 @@
                         dp__inc_dec_button_disabled: disabledArrowUpBtn(timeInput.type),
                         'dp--hidden-el': timeOverlayOpen,
                     }"
-                    :data-test="`${timeInput.type}-time-inc-btn-${props.order}`"
+                    :data-test-id="`${timeInput.type}-time-inc-btn-${props.order}`"
                     :aria-label="defaultedAriaLabels?.incrementValue(timeInput.type)"
                     tabindex="0"
                     @keydown="
@@ -60,7 +60,7 @@
                     }"
                     :disabled="checkOverlayDisabled(timeInput.type)"
                     tabindex="0"
-                    :data-test="`${timeInput.type}-toggle-overlay-btn-${props.order}`"
+                    :data-test-id="`${timeInput.type}-toggle-overlay-btn-${props.order}`"
                     @keydown="checkKeyDown($event, () => toggleOverlay(timeInput.type), true)"
                     @click="toggleOverlay(timeInput.type)"
                 >
@@ -83,7 +83,7 @@
                         dp__inc_dec_button_disabled: disabledArrowDownBtn(timeInput.type),
                         'dp--hidden-el': timeOverlayOpen,
                     }"
-                    :data-test="`${timeInput.type}-time-dec-btn-${props.order}`"
+                    :data-test-id="`${timeInput.type}-time-dec-btn-${props.order}`"
                     :aria-label="defaultedAriaLabels?.decrementValue(timeInput.type)"
                     tabindex="0"
                     @keydown="

diff --git a/src/VueDatePicker/components/TimePicker/TimePicker.vue b/src/VueDatePicker/components/TimePicker/TimePicker.vue
@@ -8,7 +8,7 @@
             :class="{ ...toggleButtonClass, 'dp--hidden-el': showTimePicker }"
             :aria-label="defaultedAriaLabels?.openTimePicker"
             :tabindex="noOverlayFocus ? undefined : 0"
-            data-test="open-time-picker-btn"
+            data-test-id="open-time-picker-btn"
             @keydown="checkKeyDown($event, () => toggleTimePicker(true))"
             @click="toggleTimePicker(true)"
         >

diff --git a/src/VueDatePicker/components/shared/YearModePicker.vue b/src/VueDatePicker/components/shared/YearModePicker.vue
@@ -16,7 +16,7 @@
             class="dp__btn dp--year-select"
             type="button"
             :aria-label="`${year}-${defaultedAriaLabels?.openYearsOverlay}`"
-            :data-test="`year-mode-btn-${instance}`"
+            :data-test-id="`year-mode-btn-${instance}`"
             @click="() => toggleYearPicker(false)"
             @keydown.enter="() => toggleYearPicker(false)"
         >