Skip to content

Commit ac33c9f

Browse files
sjbursjbur
authored
Scheduler: cover the public method scrollTo with the necessary tests (DevExpress#31175)
1 parent 2a8b81f commit ac33c9f

File tree

2 files changed

+313
-0
lines changed

2 files changed

+313
-0
lines changed

‎e2e/testcafe-devextreme/tests/scheduler/common/scrollTo.ts‎

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
import { ClientFunction } from 'testcafe';
2+
import Scheduler from 'devextreme-testcafe-models/scheduler';
3+
import { createWidget } from '../../../helpers/createWidget';
4+
import url from '../../../helpers/getPageUrl';
5+
6+
fixture.disablePageReloads`Scheduler: ScrollTo`
7+
.page(url(__dirname, '../../container.html'));
8+
9+
const createScheduler = async (options): Promise<void> => createWidget('dxScheduler', options);
10+
11+
const scrollToDate = ClientFunction(() => {
12+
const instance = ($('#container') as any).dxScheduler('instance');
13+
const currentDate = instance.option('currentDate');
14+
const date = new Date(currentDate.getTime());
15+
date.setHours(date.getHours() + 6, 30, 0, 0);
16+
instance.scrollTo(date);
17+
});
18+
19+
const scrollToDateWithGroups = ClientFunction(() => {
20+
const instance = ($('#container') as any).dxScheduler('instance');
21+
const currentDate = instance.option('currentDate');
22+
const date = new Date(currentDate.getTime());
23+
date.setHours(date.getHours() + 6, 30, 0, 0);
24+
instance.scrollTo(date, { priority: 1 });
25+
});
26+
27+
const scrollToAllDay = ClientFunction(() => {
28+
const instance = ($('#container') as any).dxScheduler('instance');
29+
const currentDate = instance.option('currentDate');
30+
const date = new Date(currentDate.getTime());
31+
date.setHours(date.getHours() + 6, 30, 0, 0);
32+
instance.scrollTo(date, undefined, true);
33+
});
34+
35+
test('ScrollTo works correctly with week and day views', async (t) => {
36+
const scheduler = new Scheduler('#container');
37+
38+
const views = [{ name: 'week', initValue: 0 }, { name: 'day', initValue: 0 }];
39+
40+
// eslint-disable-next-line no-restricted-syntax
41+
for (const view of views) {
42+
const { name, initValue } = view;
43+
44+
await scheduler.option('currentView', name);
45+
await scheduler.option('useNative', true);
46+
await t.wait(2000);
47+
48+
await scrollToDate();
49+
await t.wait(3000);
50+
51+
await t
52+
.expect(scheduler.workSpaceScroll.top).gt(initValue, `Work space is scrolled in ${name} view`);
53+
}
54+
}).before(async () => createScheduler({
55+
dataSource: [],
56+
views: ['week', 'day'],
57+
currentView: 'week',
58+
currentDate: new Date(2019, 5, 1, 9, 40),
59+
firstDayOfWeek: 0,
60+
startDayHour: 0,
61+
endDayHour: 20,
62+
height: 580,
63+
}));
64+
65+
test('ScrollTo works correctly with grouping in week view', async (t) => {
66+
const scheduler = new Scheduler('#container');
67+
68+
await scheduler.option('currentView', 'week');
69+
await scheduler.option('useNative', true);
70+
await t.wait(2000);
71+
72+
const initialTop = await scheduler.workSpaceScroll.top;
73+
74+
await scrollToDateWithGroups();
75+
await t.wait(3000);
76+
77+
await t
78+
.expect(scheduler.workSpaceScroll.top).gt(initialTop, 'Work space is scrolled with groups');
79+
}).before(async () => createScheduler({
80+
dataSource: [],
81+
views: ['week'],
82+
currentView: 'week',
83+
currentDate: new Date(2019, 5, 1, 9, 40),
84+
firstDayOfWeek: 0,
85+
startDayHour: 0,
86+
endDayHour: 20,
87+
groups: ['priority'],
88+
resources: [{
89+
fieldExpr: 'priority',
90+
dataSource: [
91+
{ id: 1, text: 'High Priority' },
92+
{ id: 2, text: 'Low Priority' },
93+
],
94+
}],
95+
height: 580,
96+
}));
97+
98+
test('ScrollTo works correctly with all-day panel', async (t) => {
99+
const scheduler = new Scheduler('#container');
100+
101+
await scheduler.option('currentView', 'week');
102+
await scheduler.option('useNative', true);
103+
104+
const initValue = 0;
105+
const expectedTopValue = 0;
106+
107+
await t
108+
.expect(scheduler.workSpaceScroll.top).eql(initValue, 'Work space has init scroll position');
109+
110+
await scrollToAllDay();
111+
await t.wait(3000);
112+
113+
await t
114+
.expect(scheduler.workSpaceScroll.top).eql(expectedTopValue, 'Work space is scrolled to all-day panel');
115+
}).before(async () => createScheduler({
116+
dataSource: [],
117+
views: ['week'],
118+
currentView: 'week',
119+
currentDate: new Date(2019, 5, 1, 9, 40),
120+
firstDayOfWeek: 0,
121+
startDayHour: 0,
122+
endDayHour: 20,
123+
showAllDayPanel: true,
124+
height: 580,
125+
}));
126+
127+
test('ScrollTo works correctly with RTL mode', async (t) => {
128+
const scheduler = new Scheduler('#container');
129+
130+
await scheduler.option('currentView', 'week');
131+
await scheduler.option('useNative', true);
132+
await scheduler.option('rtlEnabled', true);
133+
await t.wait(2000);
134+
135+
const initialBrowserTop = await scheduler.workSpaceScroll.top;
136+
137+
await scrollToDate();
138+
await t.wait(3000);
139+
140+
const browserTop = await ClientFunction(() => ($('#container') as any).dxScheduler('instance').getWorkSpaceScrollable().scrollTop())();
141+
142+
await t
143+
.expect(browserTop).gt(initialBrowserTop, 'Work space is scrolled in RTL');
144+
}).before(async () => createScheduler({
145+
dataSource: [],
146+
views: ['week'],
147+
currentView: 'week',
148+
currentDate: new Date(2019, 5, 1, 9, 40),
149+
firstDayOfWeek: 0,
150+
startDayHour: 0,
151+
endDayHour: 20,
152+
height: 580,
153+
}));
154+
155+
test('ScrollTo works correctly with timeline views (native, sync header/workspace) (T749957)', async (t) => {
156+
const scheduler = new Scheduler('#container');
157+
158+
const views = [{ name: 'timelineDay' }, { name: 'timelineWeek' }];
159+
160+
// eslint-disable-next-line no-restricted-syntax
161+
for (const view of views) {
162+
const { name } = view;
163+
164+
await scheduler.option('currentView', name);
165+
await scheduler.option('useNative', true);
166+
await t.wait(200);
167+
168+
const getWSLeft = ClientFunction(() => ($('#container') as any).dxScheduler('instance').getWorkSpaceScrollable().scrollLeft());
169+
const getHeaderLeft = ClientFunction(() => $('.dx-scheduler-header-scrollable .dx-scrollable-container').scrollLeft());
170+
171+
const initialLeft = await getWSLeft();
172+
const initialHeaderLeft = await getHeaderLeft();
173+
174+
await t.expect(initialLeft).eql(initialHeaderLeft, `${name}: header/workspace initial sync`);
175+
176+
await scrollToDate();
177+
await t.wait(300);
178+
179+
const left = await getWSLeft();
180+
const headerLeft = await getHeaderLeft();
181+
182+
await t
183+
.expect(left).notEql(initialLeft, `${name}: workspace left changed`)
184+
.expect(headerLeft).eql(left, `${name}: header synchronized with workspace`);
185+
}
186+
}).before(async () => createScheduler({
187+
dataSource: [],
188+
views: ['timelineDay', 'timelineWeek'],
189+
currentView: 'timelineDay',
190+
currentDate: new Date(2019, 5, 1, 9, 40),
191+
firstDayOfWeek: 0,
192+
startDayHour: 0,
193+
endDayHour: 20,
194+
height: 580,
195+
}));
196+
197+
test('ScrollTo works correctly in timeline RTL (native, sync header/workspace)', async (t) => {
198+
const scheduler = new Scheduler('#container');
199+
200+
await scheduler.option('currentView', 'timelineWeek');
201+
await scheduler.option('useNative', true);
202+
await scheduler.option('rtlEnabled', true);
203+
await t.wait(200);
204+
205+
const getWSLeft = ClientFunction(() => ($('#container') as any).dxScheduler('instance').getWorkSpaceScrollable().scrollLeft());
206+
const getHeaderLeft = ClientFunction(() => $('.dx-scheduler-header-scrollable .dx-scrollable-container').scrollLeft());
207+
208+
const initialLeft = await getWSLeft();
209+
const initialHeaderLeft = await getHeaderLeft();
210+
211+
await t.expect(initialLeft).eql(initialHeaderLeft, 'timeline RTL: initial sync');
212+
213+
await scrollToDate();
214+
await t.wait(300);
215+
216+
const left = await getWSLeft();
217+
const headerLeft = await getHeaderLeft();
218+
219+
await t
220+
.expect(left).notEql(initialLeft, 'timeline RTL: workspace left changed')
221+
.expect(headerLeft).eql(left, 'timeline RTL: header synchronized');
222+
}).before(async () => createScheduler({
223+
dataSource: [],
224+
views: ['timelineWeek'],
225+
currentView: 'timelineWeek',
226+
currentDate: new Date(2019, 5, 1, 9, 40),
227+
firstDayOfWeek: 0,
228+
startDayHour: 0,
229+
endDayHour: 20,
230+
height: 580,
231+
rtlEnabled: true,
232+
}));

‎packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/scrollTo.tests.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -423,5 +423,86 @@ module('ScrollTo', {
423423
await checkScrollTo(assert, scheduler, topCellCount, leftCellCount, date);
424424
});
425425
});
426+
427+
test(`ScrollTo should work correctly with asynchronous rendering when ${scrolling.text} is used`, async function(assert) {
428+
const scheduler = await createScheduler({
429+
templatesRenderAsynchronously: true,
430+
currentView: 'week',
431+
});
432+
433+
const $scrollable = scheduler.workSpace.getDateTableScrollable();
434+
const scrollableInstance = $scrollable.dxScrollable('instance');
435+
const scrollByStub = sinon.stub(scrollableInstance, 'scrollBy');
436+
437+
const date = new Date(2020, 8, 7, 9);
438+
scheduler.instance.scrollTo(date);
439+
440+
await waitAsync(50);
441+
442+
assert.ok(scrollByStub.calledOnce, 'ScrollBy was called after asynchronous rendering');
443+
});
444+
445+
test(`ScrollTo should work correctly with asynchronous rendering and grouping when ${scrolling.text} is used`, async function(assert) {
446+
const scheduler = await createScheduler({
447+
templatesRenderAsynchronously: true,
448+
views: [{
449+
type: 'week',
450+
groupOrientation: 'horizontal',
451+
groupByDate: false,
452+
}],
453+
currentView: 'week',
454+
groups: ['ownerId'],
455+
width: 400,
456+
});
457+
458+
const $scrollable = scheduler.workSpace.getDateTableScrollable();
459+
const scrollableInstance = $scrollable.dxScrollable('instance');
460+
const scrollByStub = sinon.stub(scrollableInstance, 'scrollBy');
461+
462+
const date = new Date(2020, 8, 7, 9);
463+
scheduler.instance.scrollTo(date, { ownerId: 2 });
464+
465+
await waitAsync(50);
466+
467+
assert.ok(scrollByStub.calledOnce, 'ScrollBy was called after asynchronous rendering with grouping');
468+
});
469+
470+
test(`ScrollTo should work correctly with asynchronous rendering and all-day panel when ${scrolling.text} is used`, async function(assert) {
471+
const scheduler = await createScheduler({
472+
templatesRenderAsynchronously: true,
473+
currentView: 'week',
474+
showAllDayPanel: true,
475+
});
476+
477+
const $scrollable = scheduler.workSpace.getDateTableScrollable();
478+
const scrollableInstance = $scrollable.dxScrollable('instance');
479+
const scrollByStub = sinon.stub(scrollableInstance, 'scrollBy');
480+
481+
const date = new Date(2020, 8, 7, 9);
482+
scheduler.instance.scrollTo(date, undefined, true);
483+
484+
await waitAsync(50);
485+
486+
assert.ok(scrollByStub.calledOnce, 'ScrollBy was called after asynchronous rendering with all-day panel');
487+
});
488+
489+
test(`ScrollTo should work correctly with asynchronous rendering and RTL when ${scrolling.text} is used`, async function(assert) {
490+
const scheduler = await createScheduler({
491+
templatesRenderAsynchronously: true,
492+
rtlEnabled: true,
493+
currentView: 'week',
494+
});
495+
496+
const $scrollable = scheduler.workSpace.getDateTableScrollable();
497+
const scrollableInstance = $scrollable.dxScrollable('instance');
498+
const scrollByStub = sinon.stub(scrollableInstance, 'scrollBy');
499+
500+
const date = new Date(2020, 8, 7, 9);
501+
scheduler.instance.scrollTo(date);
502+
503+
await waitAsync(50);
504+
505+
assert.ok(scrollByStub.calledOnce, 'ScrollBy was called after asynchronous rendering with RTL');
506+
});
426507
});
427508
});

0 commit comments

Comments
 (0)