Skip to content

Commit bb06846

Browse files
AmbrozyAmbrozy
authored
T1235433: fix Drag-n-Drop inside the group with virtual scrolling (DevExpress#29138)
Co-authored-by: Vladimir Bushmanov <[email protected]>
1 parent b0ce7c2 commit bb06846

File tree

18 files changed

+213
-96
lines changed

18 files changed

+213
-96
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import Scheduler from 'devextreme-testcafe-models/scheduler';
22
import url from '../../../../helpers/getPageUrl';
3+
import { scrollTo } from '../../utils';
34
import {
45
createScheduler,
5-
scrollTo,
66
checkSelectionWhenFocusedInViewport,
77
checkSelectionWhenFocusedIsNotInViewport,
88
checkAllDayCellsWhenInViewport,

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

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,6 @@ Promise<void> => ClientFunction(
5454
},
5555
)();
5656

57-
export const scrollTo = ClientFunction((x, y) => {
58-
const instance = ($('#container') as any).dxScheduler('instance');
59-
const scrollable = instance.getWorkSpaceScrollable();
60-
61-
scrollable.scrollTo({ y, x });
62-
});
63-
6457
export const checkSelectionWhenFocusedInViewport = async (
6558
t: TestController,
6659
scheduler: Scheduler,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import Scheduler from 'devextreme-testcafe-models/scheduler';
22
import url from '../../../../helpers/getPageUrl';
3+
import { scrollTo } from '../../utils';
34
import {
45
createScheduler,
5-
scrollTo,
66
selectCells,
77
moveMouse,
88
checkSelectionWhenFocusedInViewport,

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

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import Scheduler from 'devextreme-testcafe-models/scheduler';
2+
import type Appointment from 'devextreme-testcafe-models/scheduler/appointment';
3+
import { createWidget } from '../../../../helpers/createWidget';
4+
import url from '../../../../helpers/getPageUrl';
5+
import { scrollTo } from '../../utils';
6+
7+
fixture.disablePageReloads`Scheduler Drag-and-Drop inside Group`
8+
.page(url(__dirname, '../../../container.html'));
9+
10+
const dragAppointmentByCircle = async (
11+
t: TestController,
12+
appointment: Appointment,
13+
times: string[],
14+
) => {
15+
await t.drag(appointment.element, -200, 0)
16+
.expect(appointment.date.time)
17+
.eql(times[0]);
18+
19+
await t.drag(appointment.element, 0, 200)
20+
.expect(appointment.date.time)
21+
.eql(times[1]);
22+
23+
await t.drag(appointment.element, 200, 0)
24+
.expect(appointment.date.time)
25+
.eql(times[2]);
26+
27+
await t.drag(appointment.element, 0, -200)
28+
.expect(appointment.date.time)
29+
.eql(times[3]);
30+
};
31+
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'];
32+
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'];
33+
const schedulerConfig = {
34+
timeZone: 'America/Los_Angeles',
35+
dataSource: [
36+
{
37+
text: 'Book 1',
38+
startDate: new Date('2021-02-02T18:00:00.000Z'),
39+
endDate: new Date('2021-02-02T19:00:00.000Z'),
40+
priority: 1,
41+
}, {
42+
text: 'Book 2',
43+
startDate: new Date('2021-02-03T01:00:00.000Z'),
44+
endDate: new Date('2021-02-03T02:15:00.000Z'),
45+
priority: 1,
46+
}, {
47+
text: 'Book 3',
48+
startDate: new Date('2021-02-09T01:00:00.000Z'),
49+
endDate: new Date('2021-02-09T02:15:00.000Z'),
50+
priority: 1,
51+
},
52+
],
53+
views: ['timelineDay', 'timelineWorkWeek', 'timelineMonth'],
54+
currentView: 'timelineDay',
55+
currentDate: new Date('2021-02-02T17:00:00.000Z'),
56+
firstDayOfWeek: 0,
57+
scrolling: { mode: 'virtual' },
58+
startDayHour: 8,
59+
endDayHour: 20,
60+
cellDuration: 60,
61+
groups: ['priority'],
62+
useDropDownViewSwitcher: false,
63+
resources: [{
64+
fieldExpr: 'priority',
65+
dataSource: [
66+
{ id: 1, text: 'Low Priority', color: 'green' },
67+
{ id: 2, text: 'High Priority', color: 'blue' },
68+
],
69+
label: 'Priority',
70+
}],
71+
height: 580,
72+
};
73+
74+
test('T1235433: Scheduler - Drag-n-Drop works inside the group with virtual scrolling', async (t) => {
75+
const scheduler = new Scheduler('#container');
76+
77+
await t.expect(scheduler.element.exists).ok();
78+
79+
await dragAppointmentByCircle(t, scheduler.getAppointment('Book 1'), appointment1Times);
80+
await scrollTo(1400, 0);
81+
await dragAppointmentByCircle(t, scheduler.getAppointment('Book 2'), appointment2Times);
82+
83+
await t.click(scheduler.toolbar.viewSwitcher.getButton('Timeline Work Week').element)
84+
.expect(scheduler.checkViewType('timelineWorkWeek'))
85+
.ok();
86+
await scrollTo(2400, 0);
87+
await dragAppointmentByCircle(t, scheduler.getAppointment('Book 1'), appointment1Times);
88+
await scrollTo(3400, 0);
89+
await dragAppointmentByCircle(t, scheduler.getAppointment('Book 2'), appointment2Times);
90+
}).before(async () => createWidget('dxScheduler', schedulerConfig));
91+
92+
test('T1235433: Scheduler - Drag-n-Drop works inside the group with virtual scrolling (Timeline Month)', async (t) => {
93+
const scheduler = new Scheduler('#container');
94+
95+
await t.expect(scheduler.element.exists).ok();
96+
97+
await dragAppointmentByCircle(t, scheduler.getAppointment('Book 1'), [
98+
'1: 1.1',
99+
'2: 1.1',
100+
'2: 1.2',
101+
'1: 1.2',
102+
]);
103+
await scrollTo(1000, 0);
104+
await dragAppointmentByCircle(t, scheduler.getAppointment('Book 3'), [
105+
'1: 1.8',
106+
'2: 1.8',
107+
'2: 1.9',
108+
'1: 1.9',
109+
]);
110+
}).before(async () => createWidget('dxScheduler', {
111+
...schedulerConfig,
112+
currentView: 'timelineMonth',
113+
appointmentTemplate({ appointmentData }) {
114+
return $(`
115+
<div style="display: contents">
116+
<div class="dx-scheduler-appointment-title">${appointmentData.text}</div>
117+
<div class="dx-scheduler-appointment-content-details">
118+
<div class="dx-scheduler-appointment-content-date">${appointmentData.priority}: ${appointmentData.startDate.getMonth()}.${appointmentData.startDate.getDate()}</div>
119+
</div>
120+
</div>
121+
`);
122+
},
123+
}));

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { createWidget } from '../../../../../helpers/createWidget';
88
import url from '../../../../../helpers/getPageUrl';
99

1010
import { generateOptionMatrix } from '../../../../../helpers/generateOptionMatrix';
11-
import { scrollTo } from '../../virtualScrolling/utils';
11+
import { scrollToDate } from '../../../utils';
1212

1313
fixture.disablePageReloads`Layout:Templates:appointmentTemplate:targetedData`
1414
.page(url(__dirname, '../../../../container.html'));
@@ -263,7 +263,7 @@ testOptions.forEach(({
263263

264264
// eslint-disable-next-line no-restricted-syntax
265265
for (const { date, group } of scrollOptions) {
266-
await scrollTo(date, group);
266+
await scrollToDate(date, group);
267267
await t.wait(50);
268268
}
269269
});

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
33
import { getStyleAttribute, setStyleAttribute } from '../../../../helpers/domUtils';
44
import { createWidget } from '../../../../helpers/createWidget';
55
import url from '../../../../helpers/getPageUrl';
6-
import { scrollTo } from './utils';
6+
import { scrollToDate } from '../../utils';
77

88
fixture.disablePageReloads`Scheduler: Virtual Scrolling`
99
.page(url(__dirname, '../../../container.html'));
@@ -16,7 +16,7 @@ test.skip('Appointment should not repaint after scrolling if present on viewport
1616
await setStyleAttribute(element, 'background-color: red;');
1717
await t.expect(await getStyleAttribute(element)).eql('transform: translate(525px, 200px); width: 49px; height: 100px; background-color: red;');
1818

19-
await scrollTo(new Date(2020, 8, 17, 4));
19+
await scrollToDate(new Date(2020, 8, 17, 4));
2020

2121
await t.expect(await getStyleAttribute(element)).eql('transform: translate(525px, 200px); width: 49px; height: 100px; background-color: red;');
2222
}).before(async () => {
@@ -46,7 +46,7 @@ test('The appointment should render correctly when scrolling vertically (T126342
4646
const scheduler = new Scheduler('#container');
4747
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
4848

49-
await scrollTo(new Date('2024-11-12T09:00:00+0100'));
49+
await scrollToDate(new Date('2024-11-12T09:00:00+0100'));
5050

5151
await takeScreenshot('T1263428-virtual-scrolling-render-appointment.png', scheduler.element);
5252

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import { createScreenshotsComparer, compareScreenshot } from 'devextreme-screens
22
import Scheduler from 'devextreme-testcafe-models/scheduler';
33
import { createWidget } from '../../../../helpers/createWidget';
44
import url from '../../../../helpers/getPageUrl';
5+
import { scrollToDate } from '../../utils';
56
import {
67
resources,
78
createDataSetForScreenShotTests,
89
views,
9-
scrollTo,
1010
horizontalViews,
1111
scrollConfig,
1212
groupedByDateViews,
@@ -43,13 +43,13 @@ test('Virtual scrolling layout in scheduler views', async (t) => {
4343
const view = views[i];
4444

4545
await scheduler.option('currentView', view.type);
46-
await scrollTo(scrollConfig[i].firstDate);
46+
await scrollToDate(scrollConfig[i].firstDate);
4747

4848
await t.expect(
4949
await takeScreenshot(`virtual-scrolling-${view.type}-after-scroll.png`),
5050
).ok();
5151

52-
await scrollTo(scrollConfig[i].lastDate);
52+
await scrollToDate(scrollConfig[i].lastDate);
5353

5454
await t.expect(
5555
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
7373
const view = views[i];
7474

7575
await scheduler.option('currentView', view.type);
76-
await scrollTo(scrollConfig[i].firstDate, { resourceId: 6 });
76+
await scrollToDate(scrollConfig[i].firstDate, { resourceId: 6 });
7777

7878
await t.expect(
7979
await takeScreenshot(`virtual-scrolling-${view.type}-after-scroll-horizontal-grouping.png`),
8080
).ok();
8181

82-
await scrollTo(scrollConfig[i].lastDate, { resourceId: 0 });
82+
await scrollToDate(scrollConfig[i].lastDate, { resourceId: 0 });
8383

8484
await t.expect(
8585
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
107107

108108
await scheduler.option('currentView', view.type);
109109

110-
await scrollTo(scrollConfig[i].firstDate, { resourceId: 3 });
110+
await scrollToDate(scrollConfig[i].firstDate, { resourceId: 3 });
111111

112112
await t.expect(
113113
await takeScreenshot(`virtual-scrolling-${view.type}-after-scroll-grouping-by-date.png`),
114114
).ok();
115115

116-
await scrollTo(scrollConfig[i].lastDate, { resourceId: 0 });
116+
await scrollToDate(scrollConfig[i].lastDate, { resourceId: 0 });
117117

118118
await t.expect(
119119
await takeScreenshot(`virtual-scrolling-${view.type}-before-scroll-grouping-by-date.png`),

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -105,12 +105,6 @@ export const createDataSetForScreenShotTests = (): Record<string, unknown>[] =>
105105
return result;
106106
};
107107

108-
export const scrollTo = ClientFunction((date: Date, groups?: Record<string, unknown>) => {
109-
const instance = ($('#container') as any).dxScheduler('instance');
110-
111-
instance.scrollTo(date, groups);
112-
});
113-
114108
export const scrollConfig = [{
115109
firstDate: new Date(2021, 0, 7),
116110
lastDate: new Date(2021, 0, 1),

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
22
import Scheduler from 'devextreme-testcafe-models/scheduler';
33
import { createWidget } from '../../../../helpers/createWidget';
44
import url from '../../../../helpers/getPageUrl';
5+
import { scrollToDate } from '../../utils';
56
import {
67
resources,
78
views,
8-
scrollTo,
99
horizontalViews,
1010
setZoomLevel,
1111
scrollConfig,
@@ -48,7 +48,7 @@ test('Virtual scrolling layout in scheduler views when horizontal grouping is en
4848
await takeScreenshot(`virtual-scrolling-${view.type}-before-scroll-horizontal-grouping-scaling.png`),
4949
).ok();
5050

51-
await scrollTo(scrollConfig[i].firstDate, { resourceId: 7 });
51+
await scrollToDate(scrollConfig[i].firstDate, { resourceId: 7 });
5252

5353
// NOTE: waiting for async scrollable
5454
await t

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { ClientFunction } from 'testcafe';
2+
3+
export const scrollTo = ClientFunction((x, y) => {
4+
const instance = ($('#container') as any).dxScheduler('instance');
5+
const scrollable = instance.getWorkSpaceScrollable();
6+
7+
scrollable.scrollTo({ y, x });
8+
});
9+
10+
export const scrollToDate = ClientFunction((date: Date, groups?: Record<string, unknown>) => {
11+
const instance = ($('#container') as any).dxScheduler('instance');
12+
13+
instance.scrollTo(date, groups);
14+
});

0 commit comments

Comments
 (0)