T1235433: fix Drag-n-Drop inside the group with virtual scrolling (#2…

…9138)

Co-authored-by: Vladimir Bushmanov <vladimir.bushmanov@devexpress.com>

e2e/testcafe-devextreme/tests/scheduler/common/cellsSelection/bothDirectionsVirtualScrolling.ts

@@ -1,8 +1,8 @@
 import Scheduler from 'devextreme-testcafe-models/scheduler';
 import url from '../../../../helpers/getPageUrl';
+import { scrollTo } from '../../utils';
 import {
   createScheduler,
-  scrollTo,
   checkSelectionWhenFocusedInViewport,
   checkSelectionWhenFocusedIsNotInViewport,
   checkAllDayCellsWhenInViewport,

e2e/testcafe-devextreme/tests/scheduler/common/cellsSelection/init/widget.setup.ts

@@ -54,13 +54,6 @@ Promise<void> => ClientFunction(
   },
 )();
 
-export const scrollTo = ClientFunction((x, y) => {
-  const instance = ($('#container') as any).dxScheduler('instance');
-  const scrollable = instance.getWorkSpaceScrollable();
-
-  scrollable.scrollTo({ y, x });
-});
-
 export const checkSelectionWhenFocusedInViewport = async (
   t: TestController,
   scheduler: Scheduler,

e2e/testcafe-devextreme/tests/scheduler/common/cellsSelection/virtualScrollingCellSelection.ts

@@ -1,8 +1,8 @@
 import Scheduler from 'devextreme-testcafe-models/scheduler';
 import url from '../../../../helpers/getPageUrl';
+import { scrollTo } from '../../utils';
 import {
   createScheduler,
-  scrollTo,
   selectCells,
   moveMouse,
   checkSelectionWhenFocusedInViewport,

e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/T1235433.ts

@@ -0,0 +1,123 @@
+import Scheduler from 'devextreme-testcafe-models/scheduler';
+import type Appointment from 'devextreme-testcafe-models/scheduler/appointment';
+import { createWidget } from '../../../../helpers/createWidget';
+import url from '../../../../helpers/getPageUrl';
+import { scrollTo } from '../../utils';
+
+fixture.disablePageReloads`Scheduler Drag-and-Drop inside Group`
+  .page(url(__dirname, '../../../container.html'));
+
+const dragAppointmentByCircle = async (
+  t: TestController,
+  appointment: Appointment,
+  times: string[],
+) => {
+  await t.drag(appointment.element, -200, 0)
+    .expect(appointment.date.time)
+    .eql(times[0]);
+
+  await t.drag(appointment.element, 0, 200)
+    .expect(appointment.date.time)
+    .eql(times[1]);
+
+  await t.drag(appointment.element, 200, 0)
+    .expect(appointment.date.time)
+    .eql(times[2]);
+
+  await t.drag(appointment.element, 0, -200)
+    .expect(appointment.date.time)
+    .eql(times[3]);
+};
+const appointment1Times = ['9:00 AM - 10:00 AM', '9:00 AM - 10:00 AM', '10:00 AM - 11:00 AM', '10:00 AM - 11:00 AM'];
+const appointment2Times = ['4:00 PM - 5:15 PM', '4:00 PM - 5:15 PM', '5:00 PM - 6:15 PM', '5:00 PM - 6:15 PM'];
+const schedulerConfig = {
+  timeZone: 'America/Los_Angeles',
+  dataSource: [
+    {
+      text: 'Book 1',
+      startDate: new Date('2021-02-02T18:00:00.000Z'),
+      endDate: new Date('2021-02-02T19:00:00.000Z'),
+      priority: 1,
+    }, {
+      text: 'Book 2',
+      startDate: new Date('2021-02-03T01:00:00.000Z'),
+      endDate: new Date('2021-02-03T02:15:00.000Z'),
+      priority: 1,
+    }, {
+      text: 'Book 3',
+      startDate: new Date('2021-02-09T01:00:00.000Z'),
+      endDate: new Date('2021-02-09T02:15:00.000Z'),
+      priority: 1,
+    },
+  ],
+  views: ['timelineDay', 'timelineWorkWeek', 'timelineMonth'],
+  currentView: 'timelineDay',
+  currentDate: new Date('2021-02-02T17:00:00.000Z'),
+  firstDayOfWeek: 0,
+  scrolling: { mode: 'virtual' },
+  startDayHour: 8,
+  endDayHour: 20,
+  cellDuration: 60,
+  groups: ['priority'],
+  useDropDownViewSwitcher: false,
+  resources: [{
+    fieldExpr: 'priority',
+    dataSource: [
+      { id: 1, text: 'Low Priority', color: 'green' },
+      { id: 2, text: 'High Priority', color: 'blue' },
+    ],
+    label: 'Priority',
+  }],
+  height: 580,
+};
+
+test('T1235433: Scheduler - Drag-n-Drop works inside the group with virtual scrolling', async (t) => {
+  const scheduler = new Scheduler('#container');
+
+  await t.expect(scheduler.element.exists).ok();
+
+  await dragAppointmentByCircle(t, scheduler.getAppointment('Book 1'), appointment1Times);
+  await scrollTo(1400, 0);
+  await dragAppointmentByCircle(t, scheduler.getAppointment('Book 2'), appointment2Times);
+
+  await t.click(scheduler.toolbar.viewSwitcher.getButton('Timeline Work Week').element)
+    .expect(scheduler.checkViewType('timelineWorkWeek'))
+    .ok();
+  await scrollTo(2400, 0);
+  await dragAppointmentByCircle(t, scheduler.getAppointment('Book 1'), appointment1Times);
+  await scrollTo(3400, 0);
+  await dragAppointmentByCircle(t, scheduler.getAppointment('Book 2'), appointment2Times);
+}).before(async () => createWidget('dxScheduler', schedulerConfig));
+
+test('T1235433: Scheduler - Drag-n-Drop works inside the group with virtual scrolling (Timeline Month)', async (t) => {
+  const scheduler = new Scheduler('#container');
+
+  await t.expect(scheduler.element.exists).ok();
+
+  await dragAppointmentByCircle(t, scheduler.getAppointment('Book 1'), [
+    '1: 1.1',
+    '2: 1.1',
+    '2: 1.2',
+    '1: 1.2',
+  ]);
+  await scrollTo(1000, 0);
+  await dragAppointmentByCircle(t, scheduler.getAppointment('Book 3'), [
+    '1: 1.8',
+    '2: 1.8',
+    '2: 1.9',
+    '1: 1.9',
+  ]);
+}).before(async () => createWidget('dxScheduler', {
+  ...schedulerConfig,
+  currentView: 'timelineMonth',
+  appointmentTemplate({ appointmentData }) {
+    return $(`
+      <div style="display: contents">
+        <div class="dx-scheduler-appointment-title">${appointmentData.text}</div>
+        <div class="dx-scheduler-appointment-content-details">
+          <div class="dx-scheduler-appointment-content-date">${appointmentData.priority}: ${appointmentData.startDate.getMonth()}.${appointmentData.startDate.getDate()}</div>
+        </div>
+      </div>
+    `);
+  },
+}));

e2e/testcafe-devextreme/tests/scheduler/common/layout/templates/appointmentTemplateTargetedData.ts

@@ -8,7 +8,7 @@ import { createWidget } from '../../../../../helpers/createWidget';
 import url from '../../../../../helpers/getPageUrl';
 
 import { generateOptionMatrix } from '../../../../../helpers/generateOptionMatrix';
-import { scrollTo } from '../../virtualScrolling/utils';
+import { scrollToDate } from '../../../utils';
 
 fixture.disablePageReloads`Layout:Templates:appointmentTemplate:targetedData`
   .page(url(__dirname, '../../../../container.html'));
@@ -263,7 +263,7 @@ testOptions.forEach(({
 
     // eslint-disable-next-line no-restricted-syntax
     for (const { date, group } of scrollOptions) {
-      await scrollTo(date, group);
+      await scrollToDate(date, group);
       await t.wait(50);
     }
   });

e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/appointments.ts

@@ -3,7 +3,7 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import { getStyleAttribute, setStyleAttribute } from '../../../../helpers/domUtils';
 import { createWidget } from '../../../../helpers/createWidget';
 import url from '../../../../helpers/getPageUrl';
-import { scrollTo } from './utils';
+import { scrollToDate } from '../../utils';
 
 fixture.disablePageReloads`Scheduler: Virtual Scrolling`
   .page(url(__dirname, '../../../container.html'));
@@ -16,7 +16,7 @@ test.skip('Appointment should not repaint after scrolling if present on viewport
   await setStyleAttribute(element, 'background-color: red;');
   await t.expect(await getStyleAttribute(element)).eql('transform: translate(525px, 200px); width: 49px; height: 100px; background-color: red;');
 
-  await scrollTo(new Date(2020, 8, 17, 4));
+  await scrollToDate(new Date(2020, 8, 17, 4));
 
   await t.expect(await getStyleAttribute(element)).eql('transform: translate(525px, 200px); width: 49px; height: 100px; background-color: red;');
 }).before(async () => {
@@ -46,7 +46,7 @@ test('The appointment should render correctly when scrolling vertically (T126342
   const scheduler = new Scheduler('#container');
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-  await scrollTo(new Date('2024-11-12T09:00:00+0100'));
+  await scrollToDate(new Date('2024-11-12T09:00:00+0100'));
 
   await takeScreenshot('T1263428-virtual-scrolling-render-appointment.png', scheduler.element);
 

e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/layout.ts

@@ -2,11 +2,11 @@ import { createScreenshotsComparer, compareScreenshot } from 'devextreme-screens
 import Scheduler from 'devextreme-testcafe-models/scheduler';
 import { createWidget } from '../../../../helpers/createWidget';
 import url from '../../../../helpers/getPageUrl';
+import { scrollToDate } from '../../utils';
 import {
   resources,
   createDataSetForScreenShotTests,
   views,
-  scrollTo,
   horizontalViews,
   scrollConfig,
   groupedByDateViews,
@@ -43,13 +43,13 @@ test('Virtual scrolling layout in scheduler views', async (t) => {
     const view = views[i];
 
     await scheduler.option('currentView', view.type);
-    await scrollTo(scrollConfig[i].firstDate);
+    await scrollToDate(scrollConfig[i].firstDate);
 
     await t.expect(
       await takeScreenshot(`virtual-scrolling-${view.type}-after-scroll.png`),
     ).ok();
 
-    await scrollTo(scrollConfig[i].lastDate);
+    await scrollToDate(scrollConfig[i].lastDate);
 
     await t.expect(
       await takeScreenshot(`virtual-scrolling-${view.type}-before-scroll.png`),
@@ -73,13 +73,13 @@ test('Virtual scrolling layout in scheduler views when horizontal grouping is en
     const view = views[i];
 
     await scheduler.option('currentView', view.type);
-    await scrollTo(scrollConfig[i].firstDate, { resourceId: 6 });
+    await scrollToDate(scrollConfig[i].firstDate, { resourceId: 6 });
 
     await t.expect(
       await takeScreenshot(`virtual-scrolling-${view.type}-after-scroll-horizontal-grouping.png`),
     ).ok();
 
-    await scrollTo(scrollConfig[i].lastDate, { resourceId: 0 });
+    await scrollToDate(scrollConfig[i].lastDate, { resourceId: 0 });
 
     await t.expect(
       await takeScreenshot(`virtual-scrolling-${view.type}-before-scroll-horizontal-grouping.png`),
@@ -107,13 +107,13 @@ test('Virtual scrolling layout in scheduler views when grouping by date is enabl
 
     await scheduler.option('currentView', view.type);
 
-    await scrollTo(scrollConfig[i].firstDate, { resourceId: 3 });
+    await scrollToDate(scrollConfig[i].firstDate, { resourceId: 3 });
 
     await t.expect(
       await takeScreenshot(`virtual-scrolling-${view.type}-after-scroll-grouping-by-date.png`),
     ).ok();
 
-    await scrollTo(scrollConfig[i].lastDate, { resourceId: 0 });
+    await scrollToDate(scrollConfig[i].lastDate, { resourceId: 0 });
 
     await t.expect(
       await takeScreenshot(`virtual-scrolling-${view.type}-before-scroll-grouping-by-date.png`),

e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/utils.ts

@@ -105,12 +105,6 @@ export const createDataSetForScreenShotTests = (): Record<string, unknown>[] =>
   return result;
 };
 
-export const scrollTo = ClientFunction((date: Date, groups?: Record<string, unknown>) => {
-  const instance = ($('#container') as any).dxScheduler('instance');
-
-  instance.scrollTo(date, groups);
-});
-
 export const scrollConfig = [{
   firstDate: new Date(2021, 0, 7),
   lastDate: new Date(2021, 0, 1),

e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/zooming.ts

@@ -2,10 +2,10 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import Scheduler from 'devextreme-testcafe-models/scheduler';
 import { createWidget } from '../../../../helpers/createWidget';
 import url from '../../../../helpers/getPageUrl';
+import { scrollToDate } from '../../utils';
 import {
   resources,
   views,
-  scrollTo,
   horizontalViews,
   setZoomLevel,
   scrollConfig,
@@ -48,7 +48,7 @@ test('Virtual scrolling layout in scheduler views when horizontal grouping is en
       await takeScreenshot(`virtual-scrolling-${view.type}-before-scroll-horizontal-grouping-scaling.png`),
     ).ok();
 
-    await scrollTo(scrollConfig[i].firstDate, { resourceId: 7 });
+    await scrollToDate(scrollConfig[i].firstDate, { resourceId: 7 });
 
     // NOTE: waiting for async scrollable
     await t

e2e/testcafe-devextreme/tests/scheduler/utils.ts

@@ -0,0 +1,14 @@
+import { ClientFunction } from 'testcafe';
+
+export const scrollTo = ClientFunction((x, y) => {
+  const instance = ($('#container') as any).dxScheduler('instance');
+  const scrollable = instance.getWorkSpaceScrollable();
+
+  scrollable.scrollTo({ y, x });
+});
+
+export const scrollToDate = ClientFunction((date: Date, groups?: Record<string, unknown>) => {
+  const instance = ($('#container') as any).dxScheduler('instance');
+
+  instance.scrollTo(date, groups);
+});

packages/devextreme/js/__internal/core/utils/date.ts

@@ -7,7 +7,10 @@ const addOffsets = (date: Date, offsets: number[]): Date => {
 
   return new Date(newDateMs);
 };
+// eslint-disable-next-line max-len
+const isValidDate = (date: unknown): boolean => Boolean(date && !isNaN(new Date(date as Date).valueOf()));
 
 export const dateUtilsTs = {
   addOffsets,
+  isValidDate,
 };