refactor!: Add dp- prefix to calendar cell ids, match the data-test-id attributes to the same value (fixes #1051)

Author: Jasenkoo

src/VueDatePicker/components/DatePicker/DpCalendar.vue

@@ -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-id="dayVal.value"
+                            :data-test-id="getCellId(dayVal.value)"
                             @click.prevent="onDateSelect($event, dayVal)"
                             @touchend="onDateSelect($event, dayVal, false)"
                             @keydown="checkKeyDown($event, () => $emit('select-date', dayVal))"

src/VueDatePicker/utils/date-utils.ts

@@ -443,7 +443,7 @@ export const checkHighlightYear = (defaultedHighlight: Highlight | HighlightFn,
 };
 
 export const getCellId = (date: Date) => {
-    return format(date, 'yyyy-MM-dd');
+    return `dp-${format(date, 'yyyy-MM-dd')}`;
 };
 
 export const getBeforeAndAfterInRange = (range: number, date: Date) => {

tests/unit/behaviour.spec.ts

@@ -24,6 +24,7 @@ import { resetDateTime } from '@/utils/date-utils';
 import {
     clickCalendarDate,
     clickSelectBtn,
+    getCalendarCell,
     getCellClasses,
     getMonthName,
     hoverCalendarDate,
@@ -94,11 +95,11 @@ describe('It should validate various picker scenarios', () => {
     it('Should not switch calendars in 1 month range with multi-calendars enabled (#472)', async () => {
         const start = set(new Date(), { month: 5 });
         const dp = await openMenu({ multiCalendars: true, range: true, startDate: start });
-        const firstDate = resetDateTime(start);
-        const secondDate = resetDateTime(set(firstDate, { month: getMonth(addMonths(firstDate, 1)), date: 15 }));
+        // const firstDate = resetDateTime(start);
+        const end = set(start, { month: getMonth(addMonths(start, 1)), date: 15 });
 
-        const firstDateEl = dp.find(`[data-test-id="${firstDate}"]`);
-        const secondDateEl = dp.find(`[data-test-id="${secondDate}"]`);
+        const firstDateEl = getCalendarCell(dp, start);
+        const secondDateEl = getCalendarCell(dp, end);
 
         await firstDateEl.trigger('click');
         await secondDateEl.trigger('click');
@@ -246,23 +247,20 @@ describe('It should validate various picker scenarios', () => {
     });
 
     it('Should not break flow on changing months and years when calendar is first step (#553)', async () => {
-        const start = startOfYear(new Date());
+        const start = addDays(startOfYear(new Date()), 1);
         const flow = [FlowStep.calendar, FlowStep.time];
         const dp = await openMenu({ flow, startDate: start });
-        const today = resetDateTime(start);
-        const nextMonth = addMonths(today, 1);
+        const nextMonth = addMonths(start, 1);
 
-        await clickCalendarDate(dp, today);
+        await clickCalendarDate(dp, start);
 
         expect(dp.html()).toContain('dp__overlay');
 
         await reOpenMenu(dp);
 
         await dp.find(`[data-test-id="month-toggle-overlay-0"]`).trigger('click');
         await dp.find(`[data-test-id="${getMonthName(nextMonth)}"]`).trigger('click');
-
-        const cell = dp.find(`[data-test-id="${nextMonth}"]`);
-
+        const cell = getCalendarCell(dp, nextMonth);
         expect(cell.html()).toBeTruthy();
         dp.unmount();
     });
@@ -297,7 +295,7 @@ describe('It should validate various picker scenarios', () => {
 
         const selectRange = async () => {
             await clickCalendarDate(dp, today);
-            await dp.find(`[data-test-id="${secondDate}"]`).trigger('click');
+            await getCalendarCell(dp, secondDate).trigger('click');
         };
 
         await selectRange();
@@ -401,7 +399,7 @@ describe('It should validate various picker scenarios', () => {
 
         const dp = await openMenu({ highlight });
 
-        const calendarCell = dp.find(`[data-test-id="${resetDateTime(start)}"]`).find('.dp__cell_inner');
+        const calendarCell = getCalendarCell(dp, start).find('.dp__cell_inner');
 
         expect(calendarCell.classes()).toContain('dp__cell_highlight');
 

tests/unit/components/Calendar.spec.ts

@@ -6,6 +6,7 @@ import DatepickerMenu from '@/components/DatepickerMenu.vue';
 import DatePicker from '@/components/DatePicker/DatePicker.vue';
 
 import { resetDateTime } from '@/utils/date-utils';
+import { getCalendarCell } from '../../utils.ts';
 import type { ComponentPublicInstance } from 'vue';
 
 const mountCalendar = async () => {
@@ -46,7 +47,7 @@ describe('Calendar component', () => {
         await menu.vm.$nextTick();
         const calendar = menu.findComponent(DpCalendar);
 
-        await calendar.find(`[data-test-id="${resetDateTime(new Date())}"]`).trigger('mouseenter');
+        await getCalendarCell(calendar, new Date()).trigger('mouseenter');
         await calendar.vm.$nextTick();
 
         expect(calendar.html()).toContain('dp__marker_tooltip');
@@ -55,7 +56,7 @@ describe('Calendar component', () => {
     it('Should emit hover date on mouse over', async () => {
         const { calendar, date } = await mountCalendar();
 
-        await calendar.find(`[data-test-id="${resetDateTime(date)}"]`).trigger('mouseenter');
+        await getCalendarCell(calendar, date).trigger('mouseenter');
         await calendar.vm.$nextTick();
 
         expect(calendar.emitted()).toHaveProperty('set-hover-date');
@@ -65,7 +66,7 @@ describe('Calendar component', () => {
     it('Should emit date when calendar day is clicked', async () => {
         const { calendar, date } = await mountCalendar();
 
-        await calendar.find(`[data-test-id="${resetDateTime(date)}"]`).trigger('click');
+        await getCalendarCell(calendar, date).trigger('click');
         await calendar.vm.$nextTick();
 
         expect(calendar.emitted()).toHaveProperty('select-date');

tests/utils.ts

@@ -1,9 +1,9 @@
 import { flushPromises, mount, VueWrapper } from '@vue/test-utils';
+import { format } from 'date-fns';
 
 import VueDatePicker from '@/VueDatePicker.vue';
 
 import type { AllPropsType } from '@/props';
-import { resetDateTime } from '@/utils/date-utils';
 
 export const openMenu = async (
     props: Partial<AllPropsType>,
@@ -45,9 +45,9 @@ export const clickSelectBtn = async (dp: VueWrapper<any>) => {
 };
 
 export const padZero = (val: number) => (val < 10 ? `0${val}` : val);
-
+// `dp-${format(date, 'yyyy-MM-dd')}`
 export const getCalendarCell = (dp: VueWrapper<any>, date: Date) => {
-    return dp.find(`[data-test-id="${resetDateTime(date)}"]`);
+    return dp.find(`[data-test-id="dp-${format(date, 'yyyy-MM-dd')}"]`);
 };
 
 export const getCellClasses = (dp: VueWrapper<any>, date: Date) => {