Skip to content

Commit 6f493be

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

File tree

18 files changed

+223
-96
lines changed

18 files changed

+223
-96
lines changed

‎e2e/testcafe-devextreme/tests/scheduler/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/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/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/dragAndDrop/T1235433.ts‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
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+
description: string[],
14+
times: string[],
15+
) => {
16+
await t.drag(appointment.element, -200, 0)
17+
.expect(appointment.date.roleDescription)
18+
.contains(description[0])
19+
.expect(appointment.date.time)
20+
.eql(times[0]);
21+
22+
await t.drag(appointment.element, 0, 200)
23+
.expect(appointment.date.roleDescription)
24+
.contains(description[1])
25+
.expect(appointment.date.time)
26+
.eql(times[1]);
27+
28+
await t.drag(appointment.element, 200, 0)
29+
.expect(appointment.date.roleDescription)
30+
.contains(description[2])
31+
.expect(appointment.date.time)
32+
.eql(times[2]);
33+
34+
await t.drag(appointment.element, 0, -200)
35+
.expect(appointment.date.roleDescription)
36+
.contains(description[3])
37+
.expect(appointment.date.time)
38+
.eql(times[3]);
39+
};
40+
const appointmentDescriptions = [
41+
'February 2, 2021, Group: Low Priority',
42+
'February 2, 2021, Group: High Priority',
43+
'February 2, 2021, Group: High Priority',
44+
'February 2, 2021, Group: Low Priority',
45+
];
46+
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'];
47+
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'];
48+
49+
test('T1235433: Scheduler - Drag-n-Drop works inside the group with virtual scrolling', async (t) => {
50+
const scheduler = new Scheduler('#container');
51+
52+
await t.expect(scheduler.element.exists).ok();
53+
54+
await t.debug();
55+
56+
await dragAppointmentByCircle(t, scheduler.getAppointment('Book 1'), appointmentDescriptions, appointment1Times);
57+
await scrollTo(1400, 0);
58+
await dragAppointmentByCircle(t, scheduler.getAppointment('Book 2'), appointmentDescriptions, appointment2Times);
59+
60+
await t.click(scheduler.toolbar.viewSwitcher.getButton('Timeline Work Week').element)
61+
.expect(scheduler.checkViewType('timelineWorkWeek'))
62+
.ok();
63+
await scrollTo(2400, 0);
64+
await dragAppointmentByCircle(t, scheduler.getAppointment('Book 1'), appointmentDescriptions, appointment1Times);
65+
await scrollTo(3400, 0);
66+
await dragAppointmentByCircle(t, scheduler.getAppointment('Book 2'), appointmentDescriptions, appointment2Times);
67+
68+
await t.click(scheduler.toolbar.viewSwitcher.getButton('Timeline Month').element)
69+
.expect(scheduler.checkViewType('timelineMonth'))
70+
.ok();
71+
await dragAppointmentByCircle(t, scheduler.getAppointment('Book 1'), [
72+
'February 1, 2021, Group: Low Priority',
73+
'February 1, 2021, Group: High Priority',
74+
'February 2, 2021, Group: High Priority',
75+
'February 2, 2021, Group: Low Priority',
76+
], [
77+
appointment1Times[2],
78+
appointment1Times[2],
79+
appointment1Times[2],
80+
appointment1Times[2],
81+
]);
82+
await scrollTo(1000, 0);
83+
await dragAppointmentByCircle(t, scheduler.getAppointment('Book 3'), [
84+
'February 7, 2021, Group: Low Priority',
85+
'February 7, 2021, Group: High Priority',
86+
'February 8, 2021, Group: High Priority',
87+
'February 8, 2021, Group: Low Priority',
88+
], [
89+
appointment2Times[2],
90+
appointment2Times[2],
91+
appointment2Times[2],
92+
appointment2Times[2],
93+
]);
94+
}).before(async () => createWidget('dxScheduler', {
95+
timeZone: 'America/Los_Angeles',
96+
dataSource: [
97+
{
98+
text: 'Book 1',
99+
startDate: new Date('2021-02-02T18:00:00.000Z'),
100+
endDate: new Date('2021-02-02T19:00:00.000Z'),
101+
priority: 1,
102+
}, {
103+
text: 'Book 2',
104+
startDate: new Date('2021-02-03T01:00:00.000Z'),
105+
endDate: new Date('2021-02-03T02:15:00.000Z'),
106+
priority: 1,
107+
}, {
108+
text: 'Book 3',
109+
startDate: new Date('2021-02-09T01:00:00.000Z'),
110+
endDate: new Date('2021-02-09T02:15:00.000Z'),
111+
priority: 1,
112+
},
113+
],
114+
views: ['timelineDay', 'timelineWorkWeek', 'timelineMonth'],
115+
currentView: 'timelineDay',
116+
currentDate: new Date('2021-02-02T17:00:00.000Z'),
117+
firstDayOfWeek: 0,
118+
scrolling: { mode: 'virtual' },
119+
startDayHour: 8,
120+
endDayHour: 20,
121+
cellDuration: 60,
122+
groups: ['priority'],
123+
useDropDownViewSwitcher: false,
124+
resources: [{
125+
fieldExpr: 'priority',
126+
dataSource: [
127+
{ id: 1, text: 'Low Priority', color: 'green' },
128+
{ id: 2, text: 'High Priority', color: 'blue' },
129+
],
130+
label: 'Priority',
131+
}],
132+
height: 580,
133+
}));

‎e2e/testcafe-devextreme/tests/scheduler/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/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+
});

‎e2e/testcafe-devextreme/tests/scheduler/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'));
@@ -15,7 +15,7 @@ test.skip('Appointment should not repaint after scrolling if present on viewport
1515
await setStyleAttribute(element, 'background-color: red;');
1616
await t.expect(await getStyleAttribute(element)).eql('transform: translate(525px, 200px); width: 49px; height: 100px; background-color: red;');
1717

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

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

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

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

‎e2e/testcafe-devextreme/tests/scheduler/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/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/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,
@@ -46,7 +46,7 @@ test('Virtual scrolling layout in scheduler views when horizontal grouping is en
4646
await takeScreenshot(`virtual-scrolling-${view.type}-before-scroll-horizontal-grouping-scaling.png`),
4747
).ok();
4848

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

5151
// NOTE: waiting for async scrollable
5252
await t

0 commit comments

Comments
 (0)