Skip to content

Commit d8bd072

Browse files
Playwright - collapse viewOffset forEach: 537 → 25 tests (1:1 with TestCafe)
1 parent b23c026 commit d8bd072

12 files changed

Lines changed: 440 additions & 388 deletions

e2e/testcafe-devextreme/playwright-tests/scheduler/viewOffset/common/agenda.spec.ts

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,20 @@ import path from 'path';
44

55
const containerUrl = `file://${path.resolve(__dirname, '../../../../tests/container.html')}`;
66

7+
const setupPage = async (page: any) => {
8+
await page.goto(containerUrl);
9+
await page.waitForFunction(() => !!(window as any).DevExpress && !!(window as any).$);
10+
await page.evaluate((theme: string) => new Promise<void>((resolve) => {
11+
(window as any).DevExpress.ui.themes.ready(resolve);
12+
(window as any).DevExpress.ui.themes.current(theme);
13+
}), process.env.THEME || 'fluent.blue.light');
14+
};
15+
716
test.describe('Offset: Agenda', () => {
8-
test.beforeEach(async ({ page }) => {
9-
await page.goto(containerUrl);
10-
await page.waitForFunction(() => !!(window as any).DevExpress && !!(window as any).$);
11-
await page.evaluate((theme) => new Promise<void>((resolve) => {
12-
(window as any).DevExpress.ui.themes.ready(resolve);
13-
(window as any).DevExpress.ui.themes.current(theme);
14-
}), process.env.THEME || 'fluent.blue.light');
15-
});
17+
test('Agenda view should not be affected by root offset option', async ({ page }) => {
18+
for (const offset of [0, -240, 240]) {
19+
await setupPage(page);
1620

17-
[
18-
0,
19-
-240,
20-
240,
21-
].forEach((offset) => {
22-
test(`Agenda view should not be affected by root offset option (offset: ${offset})`, async ({ page }) => {
2321
await createWidget(page, 'dxScheduler', {
2422
dataSource: [
2523
{
@@ -46,6 +44,6 @@ test.describe('Offset: Agenda', () => {
4644

4745
const workSpace = page.locator('.dx-scheduler-work-space');
4846
await testScreenshot(page, `offset_agenda-not-affected_offset-${offset}.png`, { element: workSpace });
49-
});
47+
}
5048
});
5149
});

e2e/testcafe-devextreme/playwright-tests/scheduler/viewOffset/common/apiCallbacks.spec.ts

Lines changed: 43 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import path from 'path';
55

66
const containerUrl = `file://${path.resolve(__dirname, '../../../../tests/container.html')}`;
77

8-
const SCHEDULER_SELECTOR = '#container';
98
const REDUCE_CELLS_CSS = `
109
.dx-scheduler-cell-sizes-vertical {
1110
height: 25px;
@@ -92,22 +91,19 @@ const clearClientData = async (page, callbacks: string[]) => {
9291
}, callbacks);
9392
};
9493

95-
test.describe('Offset: Api callbacks', () => {
96-
test.beforeEach(async ({ page }) => {
97-
await page.goto(containerUrl);
98-
await page.waitForFunction(() => !!(window as any).DevExpress && !!(window as any).$);
99-
await page.evaluate((theme) => new Promise<void>((resolve) => {
100-
(window as any).DevExpress.ui.themes.ready(resolve);
101-
(window as any).DevExpress.ui.themes.current(theme);
102-
}), process.env.THEME || 'fluent.blue.light');
103-
});
94+
const setupPage = async (page: any) => {
95+
await page.goto(containerUrl);
96+
await page.waitForFunction(() => !!(window as any).DevExpress && !!(window as any).$);
97+
await page.evaluate((theme: string) => new Promise<void>((resolve) => {
98+
(window as any).DevExpress.ui.themes.ready(resolve);
99+
(window as any).DevExpress.ui.themes.current(theme);
100+
}), process.env.THEME || 'fluent.blue.light');
101+
};
104102

105-
[
106-
0,
107-
-700,
108-
700,
109-
].forEach((offset) => {
110-
test(`onAppointmentRendered (offset: ${offset})`, async ({ page }) => {
103+
test.describe('Offset: Api callbacks', () => {
104+
test('onAppointmentRendered', async ({ page }) => {
105+
for (const offset of [0, -700, 700]) {
106+
await setupPage(page);
111107
await initClientTesting(page, ['onAppointmentRendered']);
112108
await insertStylesheetRulesToPage(page, REDUCE_CELLS_CSS);
113109
await page.evaluate(({ ds, off }) => {
@@ -133,9 +129,12 @@ test.describe('Offset: Api callbacks', () => {
133129
expect(results[0].appointmentData).toEqual(EXPECTED.appointmentData);
134130

135131
await clearClientData(page, ['onAppointmentRendered']);
136-
});
132+
}
133+
});
137134

138-
test(`onAppointmentAdding and onAppointmentAdded (offset: ${offset})`, async ({ page }) => {
135+
test('onAppointmentAdding and onAppointmentAdded', async ({ page }) => {
136+
for (const offset of [0, -700, 700]) {
137+
await setupPage(page);
139138
await initClientTesting(page, ['onAppointmentAdding', 'onAppointmentAdded']);
140139
await insertStylesheetRulesToPage(page, REDUCE_CELLS_CSS);
141140
await page.evaluate(({ ds, off }) => {
@@ -179,9 +178,12 @@ test.describe('Offset: Api callbacks', () => {
179178
expect(addedResults[0]).toEqual(expectedAppointmentData);
180179

181180
await clearClientData(page, ['onAppointmentAdding', 'onAppointmentAdded']);
182-
});
181+
}
182+
});
183183

184-
test(`onAppointmentClick and onAppointmentDbClick (offset: ${offset})`, async ({ page }) => {
184+
test('onAppointmentClick and onAppointmentDbClick', async ({ page }) => {
185+
for (const offset of [0, -700, 700]) {
186+
await setupPage(page);
185187
await initClientTesting(page, ['onAppointmentClick', 'onAppointmentDblClick']);
186188
await insertStylesheetRulesToPage(page, REDUCE_CELLS_CSS);
187189
await page.evaluate(({ ds, off }) => {
@@ -214,9 +216,12 @@ test.describe('Offset: Api callbacks', () => {
214216
expect(dblClickResults[0].appointmentData).toEqual(EXPECTED.appointmentData);
215217

216218
await clearClientData(page, ['onAppointmentClick', 'onAppointmentDblClick']);
217-
});
219+
}
220+
});
218221

219-
test(`onAppointmentTooltipShowing and onAppointmentFormOpening (offset: ${offset})`, async ({ page }) => {
222+
test('onAppointmentTooltipShowing and onAppointmentFormOpening', async ({ page }) => {
223+
for (const offset of [0, -700, 700]) {
224+
await setupPage(page);
220225
await initClientTesting(page, ['onAppointmentTooltipShowing', 'onAppointmentFormOpening']);
221226
await insertStylesheetRulesToPage(page, REDUCE_CELLS_CSS);
222227
await page.evaluate(({ ds, off }) => {
@@ -257,9 +262,12 @@ test.describe('Offset: Api callbacks', () => {
257262
expect(formResults[0]).toEqual(EXPECTED.appointmentData);
258263

259264
await clearClientData(page, ['onAppointmentTooltipShowing', 'onAppointmentFormOpening']);
260-
});
265+
}
266+
});
261267

262-
test(`onAppointmentDeleting and onAppointmentDeleted (offset: ${offset})`, async ({ page }) => {
268+
test('onAppointmentDeleting and onAppointmentDeleted', async ({ page }) => {
269+
for (const offset of [0, -700, 700]) {
270+
await setupPage(page);
263271
await initClientTesting(page, ['onAppointmentDeleting', 'onAppointmentDeleted']);
264272
await insertStylesheetRulesToPage(page, REDUCE_CELLS_CSS);
265273
await page.evaluate(({ ds, off }) => {
@@ -297,9 +305,12 @@ test.describe('Offset: Api callbacks', () => {
297305
expect(deletedResults[0]).toEqual(EXPECTED.appointmentData);
298306

299307
await clearClientData(page, ['onAppointmentDeleting', 'onAppointmentDeleted']);
300-
});
308+
}
309+
});
301310

302-
test(`onAppointmentUpdating and onAppointmentUpdated (offset: ${offset})`, async ({ page }) => {
311+
test('onAppointmentUpdating and onAppointmentUpdated', async ({ page }) => {
312+
for (const offset of [0, -700, 700]) {
313+
await setupPage(page);
303314
await initClientTesting(page, ['onAppointmentUpdating', 'onAppointmentUpdated']);
304315
await insertStylesheetRulesToPage(page, REDUCE_CELLS_CSS);
305316
await page.evaluate(({ ds, off }) => {
@@ -329,7 +340,6 @@ test.describe('Offset: Api callbacks', () => {
329340
const expectedNewData = getAppointmentAfterUpdate(offset);
330341

331342
const appointment = page.locator('.dx-scheduler-appointment').filter({ hasText: APPOINTMENT_TITLE });
332-
// TODO: t.drag(element, -100, 0) - drag by pixel offset
333343
const box = await appointment.boundingBox();
334344
if (box) {
335345
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
@@ -346,9 +356,12 @@ test.describe('Offset: Api callbacks', () => {
346356
expect(updatedResults[0]).toEqual(expectedNewData);
347357

348358
await clearClientData(page, ['onAppointmentUpdating', 'onAppointmentUpdated']);
349-
});
359+
}
360+
});
350361

351-
test(`onAppointmentContextMenu (offset: ${offset})`, async ({ page }) => {
362+
test('onAppointmentContextMenu', async ({ page }) => {
363+
for (const offset of [0, -700, 700]) {
364+
await setupPage(page);
352365
await initClientTesting(page, ['onAppointmentContextMenu']);
353366
await insertStylesheetRulesToPage(page, REDUCE_CELLS_CSS);
354367
await page.evaluate(({ ds, off }) => {
@@ -375,6 +388,6 @@ test.describe('Offset: Api callbacks', () => {
375388
expect(contextMenuResults[0].appointmentData).toEqual(EXPECTED.appointmentData);
376389

377390
await clearClientData(page, ['onAppointmentContextMenu']);
378-
});
391+
}
379392
});
380393
});

e2e/testcafe-devextreme/playwright-tests/scheduler/viewOffset/common/dragAndDrop.spec.ts

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -29,26 +29,30 @@ const getDragCoordinatesByView = (viewType: string): { x: number; y: number } =>
2929
const getScreenshotName = (viewType: string, offset: number, isAllDay: boolean) =>
3030
`offset_drag-n-drop_${isAllDay ? 'all-day' : 'usual'}-appts_${viewType}_offset-${offset}.png`;
3131

32+
const viewConfigs = [
33+
{ views: [{ type: 'week', cellDuration: 60 }], dataSource: APPOINTMENTS.week, isAllDay: false },
34+
{ views: [{ type: 'week', cellDuration: 60 }], dataSource: APPOINTMENTS.allDayWeek, isAllDay: true },
35+
{ views: [{ type: 'month' }], dataSource: APPOINTMENTS.month, isAllDay: false },
36+
{ views: [{ type: 'month' }], dataSource: APPOINTMENTS.allDayMonth, isAllDay: true },
37+
{ views: [{ type: 'timelineMonth' }], dataSource: APPOINTMENTS.timelineMonth, isAllDay: false },
38+
{ views: [{ type: 'timelineMonth' }], dataSource: APPOINTMENTS.allDayTimelineMonth, isAllDay: true },
39+
];
40+
41+
const setupPage = async (page: any) => {
42+
await page.goto(containerUrl);
43+
await page.waitForFunction(() => !!(window as any).DevExpress && !!(window as any).$);
44+
await page.evaluate((theme: string) => new Promise<void>((resolve) => {
45+
(window as any).DevExpress.ui.themes.ready(resolve);
46+
(window as any).DevExpress.ui.themes.current(theme);
47+
}), process.env.THEME || 'fluent.blue.light');
48+
};
49+
3250
test.describe('Offset: Drag-n-drop appointments', () => {
33-
test.beforeEach(async ({ page }) => {
34-
await page.goto(containerUrl);
35-
await page.waitForFunction(() => !!(window as any).DevExpress && !!(window as any).$);
36-
await page.evaluate((theme) => new Promise<void>((resolve) => {
37-
(window as any).DevExpress.ui.themes.ready(resolve);
38-
(window as any).DevExpress.ui.themes.current(theme);
39-
}), process.env.THEME || 'fluent.blue.light');
40-
});
51+
test('Usual appointments drag-n-drop', async ({ page }) => {
52+
for (const { views, dataSource, isAllDay } of viewConfigs) {
53+
for (const offset of [0, 735, -735]) {
54+
await setupPage(page);
4155

42-
[
43-
{ views: [{ type: 'week', cellDuration: 60 }], dataSource: APPOINTMENTS.week, isAllDay: false },
44-
{ views: [{ type: 'week', cellDuration: 60 }], dataSource: APPOINTMENTS.allDayWeek, isAllDay: true },
45-
{ views: [{ type: 'month' }], dataSource: APPOINTMENTS.month, isAllDay: false },
46-
{ views: [{ type: 'month' }], dataSource: APPOINTMENTS.allDayMonth, isAllDay: true },
47-
{ views: [{ type: 'timelineMonth' }], dataSource: APPOINTMENTS.timelineMonth, isAllDay: false },
48-
{ views: [{ type: 'timelineMonth' }], dataSource: APPOINTMENTS.allDayTimelineMonth, isAllDay: true },
49-
].forEach(({ views, dataSource, isAllDay }) => {
50-
[0, 735, -735].forEach((offset) => {
51-
test(`Drag-n-drop (view: ${views[0].type}, allDay: ${isAllDay}, offset: ${offset})`, async ({ page }) => {
5256
await insertStylesheetRulesToPage(page, REDUCE_CELLS_CSS);
5357
await createWidget(page, 'dxScheduler', {
5458
currentDate: '2023-09-07',
@@ -73,7 +77,7 @@ test.describe('Offset: Drag-n-drop appointments', () => {
7377

7478
const workSpace = page.locator('.dx-scheduler-work-space');
7579
await testScreenshot(page, getScreenshotName(viewType, offset, isAllDay), { element: workSpace });
76-
});
77-
});
80+
}
81+
}
7882
});
7983
});

e2e/testcafe-devextreme/playwright-tests/scheduler/viewOffset/common/expressions.spec.ts

Lines changed: 65 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -12,79 +12,80 @@ const APPOINTMENTS = {
1212
],
1313
};
1414

15+
const setupPage = async (page: any) => {
16+
await page.goto(containerUrl);
17+
await page.waitForFunction(() => !!(window as any).DevExpress && !!(window as any).$);
18+
await page.evaluate((theme: string) => new Promise<void>((resolve) => {
19+
(window as any).DevExpress.ui.themes.ready(resolve);
20+
(window as any).DevExpress.ui.themes.current(theme);
21+
}), process.env.THEME || 'fluent.blue.light');
22+
};
23+
1524
test.describe('Offset: Appointment expressions', () => {
16-
test.beforeEach(async ({ page }) => {
17-
await page.goto(containerUrl);
18-
await page.waitForFunction(() => !!(window as any).DevExpress && !!(window as any).$);
19-
await page.evaluate((theme) => new Promise<void>((resolve) => {
20-
(window as any).DevExpress.ui.themes.ready(resolve);
21-
(window as any).DevExpress.ui.themes.current(theme);
22-
}), process.env.THEME || 'fluent.blue.light');
23-
});
25+
test('Appointment with expr common test', async ({ page }) => {
26+
const views = [{ type: 'week', cellDuration: 60 }];
27+
const dataSource = APPOINTMENTS.week;
2428

25-
[
26-
{ views: [{ type: 'week', cellDuration: 60 }], dataSource: APPOINTMENTS.week },
27-
].forEach(({ views, dataSource }) => {
28-
[0, 180, -180].forEach((offset) => {
29-
test(`Appointment with expr common test (view: ${views[0].type}, offset: ${offset})`, async ({ page }) => {
30-
await createWidget(page, 'dxScheduler', {
31-
currentDate: '2023-09-05',
32-
height: 800,
33-
dataSource,
34-
views,
35-
currentView: views[0].type,
36-
offset,
37-
startDateExpr: 'StartDate2',
38-
endDateExpr: 'EndDate2',
39-
textExpr: 'Text2',
40-
allDayExpr: 'AllDay2',
41-
});
29+
for (const offset of [0, 180, -180]) {
30+
await setupPage(page);
4231

43-
const workSpace = page.locator('.dx-scheduler-work-space');
44-
const usualAppointment = page.locator('.dx-scheduler-appointment').filter({ hasText: APPOINTMENT_TITLES.usual });
45-
const allDayAppointment = page.locator('.dx-scheduler-appointment').filter({ hasText: APPOINTMENT_TITLES.allDay });
46-
const viewType = views[0].type;
32+
await createWidget(page, 'dxScheduler', {
33+
currentDate: '2023-09-05',
34+
height: 800,
35+
dataSource,
36+
views,
37+
currentView: views[0].type,
38+
offset,
39+
startDateExpr: 'StartDate2',
40+
endDateExpr: 'EndDate2',
41+
textExpr: 'Text2',
42+
allDayExpr: 'AllDay2',
43+
});
4744

48-
await testScreenshot(page, `offset_appt-expr_${viewType}_offset-${offset}.png`, { element: workSpace });
45+
const workSpace = page.locator('.dx-scheduler-work-space');
46+
const usualAppointment = page.locator('.dx-scheduler-appointment').filter({ hasText: APPOINTMENT_TITLES.usual });
47+
const allDayAppointment = page.locator('.dx-scheduler-appointment').filter({ hasText: APPOINTMENT_TITLES.allDay });
48+
const viewType = views[0].type;
4949

50-
let box = await usualAppointment.boundingBox();
51-
if (box) {
52-
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
53-
await page.mouse.down();
54-
await page.mouse.move(box.x + box.width / 2 + 100, box.y + box.height / 2 + 100, { steps: 5 });
55-
await page.mouse.up();
56-
}
50+
await testScreenshot(page, `offset_appt-expr_${viewType}_offset-${offset}.png`, { element: workSpace });
5751

58-
box = await allDayAppointment.boundingBox();
59-
if (box) {
60-
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
61-
await page.mouse.down();
62-
await page.mouse.move(box.x + box.width / 2 - 100, box.y + box.height / 2, { steps: 5 });
63-
await page.mouse.up();
64-
}
52+
let box = await usualAppointment.boundingBox();
53+
if (box) {
54+
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
55+
await page.mouse.down();
56+
await page.mouse.move(box.x + box.width / 2 + 100, box.y + box.height / 2 + 100, { steps: 5 });
57+
await page.mouse.up();
58+
}
6559

66-
await testScreenshot(page, `offset_appt-expr_drag-n-drop_${viewType}_offset-${offset}.png`, { element: workSpace });
60+
box = await allDayAppointment.boundingBox();
61+
if (box) {
62+
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
63+
await page.mouse.down();
64+
await page.mouse.move(box.x + box.width / 2 - 100, box.y + box.height / 2, { steps: 5 });
65+
await page.mouse.up();
66+
}
6767

68-
const usualResizeBottom = usualAppointment.locator('.dx-resizable-handle-bottom');
69-
box = await usualResizeBottom.boundingBox();
70-
if (box) {
71-
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
72-
await page.mouse.down();
73-
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2 + 100, { steps: 5 });
74-
await page.mouse.up();
75-
}
68+
await testScreenshot(page, `offset_appt-expr_drag-n-drop_${viewType}_offset-${offset}.png`, { element: workSpace });
7669

77-
const allDayResizeLeft = allDayAppointment.locator('.dx-resizable-handle-left');
78-
box = await allDayResizeLeft.boundingBox();
79-
if (box) {
80-
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
81-
await page.mouse.down();
82-
await page.mouse.move(box.x + box.width / 2 - 100, box.y + box.height / 2, { steps: 5 });
83-
await page.mouse.up();
84-
}
70+
const usualResizeBottom = usualAppointment.locator('.dx-resizable-handle-bottom');
71+
box = await usualResizeBottom.boundingBox();
72+
if (box) {
73+
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
74+
await page.mouse.down();
75+
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2 + 100, { steps: 5 });
76+
await page.mouse.up();
77+
}
8578

86-
await testScreenshot(page, `offset_appt-expr_resize_${viewType}_offset-${offset}.png`, { element: workSpace });
87-
});
88-
});
79+
const allDayResizeLeft = allDayAppointment.locator('.dx-resizable-handle-left');
80+
box = await allDayResizeLeft.boundingBox();
81+
if (box) {
82+
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
83+
await page.mouse.down();
84+
await page.mouse.move(box.x + box.width / 2 - 100, box.y + box.height / 2, { steps: 5 });
85+
await page.mouse.up();
86+
}
87+
88+
await testScreenshot(page, `offset_appt-expr_resize_${viewType}_offset-${offset}.png`, { element: workSpace });
89+
}
8990
});
9091
});

0 commit comments

Comments
 (0)