Skip to content

Commit b7ac19c

Browse files
AmbrozyAmbrozy
authored
Scheduler: add jest object model (DevExpress#30820) (DevExpress#30823)
Co-authored-by: Vladimir Bushmanov <[email protected]>
1 parent b098ef8 commit b7ac19c

File tree

7 files changed

+75
-41
lines changed

7 files changed

+75
-41
lines changed

‎packages/devextreme/js/__internal/scheduler/__tests__/__mock__/create_scheduler.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import Scheduler from '@ts/scheduler/m_scheduler';
22

3+
import { createSchedulerModel, type SchedulerModel } from './model/scheduler';
4+
35
// eslint-disable-next-line @typescript-eslint/no-explicit-any
46
type Config = any;
57

68
export const createScheduler = async (config: Config): Promise<{
79
container: HTMLDivElement;
810
scheduler: Scheduler;
11+
POM: SchedulerModel;
12+
keydown: (element: Element, key: string) => void;
913
}> => {
1014
const container = document.createElement('div');
1115
const scheduler = new Scheduler(container, config);
@@ -14,5 +18,9 @@ export const createScheduler = async (config: Config): Promise<{
1418
return {
1519
container,
1620
scheduler,
21+
POM: createSchedulerModel(container),
22+
keydown: (element: Element, key: string): void => {
23+
element.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }));
24+
},
1725
};
1826
};

‎packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/scheduler.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
const getAppointmentColor = (container: HTMLDivElement): string => {
2+
const appointment = container.querySelector('.dx-scheduler-appointment') as HTMLDivElement;
3+
return appointment.style.backgroundColor;
4+
};
5+
const getAgendaAppointmentColor = (container: HTMLDivElement): string => {
6+
const appointment = container.querySelector('.dx-scheduler-agenda-appointment-marker') as HTMLDivElement;
7+
return appointment.style.backgroundColor;
8+
};
9+
const getTexts = (
10+
cells: NodeListOf<Element>,
11+
): string[] => Array.from(cells).map((cell) => cell.textContent?.trim() ?? '');
12+
13+
export interface SchedulerModel {
14+
getAppointment: () => HTMLDivElement | null;
15+
getAppointments: () => NodeListOf<HTMLDivElement>;
16+
getAppointmentColor: (view: string) => string;
17+
getDateTableContent: () => string[];
18+
getHeaderPanelContent: () => string[];
19+
getTimePanelContent: () => string[];
20+
getGroupTableContent: () => string[];
21+
}
22+
23+
export const createSchedulerModel = (container: HTMLDivElement): SchedulerModel => ({
24+
getAppointment(): HTMLDivElement | null {
25+
return container.querySelector('.dx-scheduler-appointment');
26+
},
27+
getAppointments(): NodeListOf<HTMLDivElement> {
28+
return container.querySelectorAll('.dx-scheduler-appointment');
29+
},
30+
getAppointmentColor(view: string): string {
31+
return view === 'agenda'
32+
? getAgendaAppointmentColor(container)
33+
: getAppointmentColor(container);
34+
},
35+
getDateTableContent(): string[] {
36+
const cells = container.querySelectorAll('.dx-scheduler-date-table-cell');
37+
return getTexts(cells);
38+
},
39+
getHeaderPanelContent(): string[] {
40+
const cells = container.querySelectorAll('.dx-scheduler-header-panel-cell');
41+
return getTexts(cells);
42+
},
43+
getTimePanelContent(): string[] {
44+
const cells = container.querySelectorAll('.dx-scheduler-time-panel-cell');
45+
return getTexts(cells);
46+
},
47+
getGroupTableContent(): string[] {
48+
const cells = container.querySelectorAll('.dx-scheduler-group-header');
49+
return getTexts(cells);
50+
},
51+
});

‎packages/devextreme/js/__internal/scheduler/__tests__/appointments.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { setupSchedulerTestEnvironment } from './__mock__/m_mock_scheduler';
88
describe('Appointments', () => {
99
it('All-day appointment should not be resizable if current view is "day"', async () => {
1010
setupSchedulerTestEnvironment();
11-
const { container } = await createScheduler({
11+
const { POM } = await createScheduler({
1212
dataSource: [{
1313
text: 'Appointment 1',
1414
startDate: new Date(2015, 1, 9, 8),
@@ -19,7 +19,7 @@ describe('Appointments', () => {
1919
currentDate: new Date(2015, 1, 9, 8),
2020
});
2121

22-
const appointment = container.querySelector('.dx-scheduler-appointment');
22+
const appointment = POM.getAppointment();
2323
expect(appointment && !appointment.classList.contains('dx-resizable')).toBe(true);
2424
});
2525
});

‎packages/devextreme/js/__internal/scheduler/__tests__/resources.test.ts‎

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -22,31 +22,19 @@ const rooms = [
2222
const rooms2 = [
2323
{ id: 1, text: 'Room 2', color: 'rgb(60, 154, 205)' },
2424
];
25-
const getAppointmentColor = (container: HTMLDivElement): string => {
26-
const appointment = container.querySelector('.dx-scheduler-appointment') as HTMLDivElement;
27-
return appointment.style.backgroundColor;
28-
};
29-
const getAgendaAppointmentColor = (container: HTMLDivElement): string => {
30-
const appointment = container.querySelector('.dx-scheduler-agenda-appointment-marker') as HTMLDivElement;
31-
return appointment.style.backgroundColor;
32-
};
3325

3426
describe('Resources', () => {
3527
describe.each([
3628
'month',
3729
'agenda',
3830
])('%s view', (view) => {
39-
const getColor = view === 'agenda'
40-
? getAgendaAppointmentColor
41-
: getAppointmentColor;
42-
4331
it('should render correct appointment color for remote datasource (T1300252)', async () => {
4432
setupSchedulerTestEnvironment();
4533

4634
const dataPromise = new Promise((resolve) => {
4735
setTimeout(resolve, 100, rooms);
4836
});
49-
const { container } = await createScheduler({
37+
const { POM } = await createScheduler({
5038
views: [view],
5139
currentView: view,
5240
currentDate: new Date(2024, 8, 7),
@@ -65,13 +53,13 @@ describe('Resources', () => {
6553
await dataPromise;
6654
await new Promise(process.nextTick);
6755

68-
expect(getColor(container)).toBe(rooms[0].color);
56+
expect(POM.getAppointmentColor(view)).toBe(rooms[0].color);
6957
});
7058

7159
it('should render correct appointment color for local datasource (T1300252)', async () => {
7260
setupSchedulerTestEnvironment();
7361

74-
const { container } = await createScheduler({
62+
const { POM } = await createScheduler({
7563
views: [view],
7664
currentView: view,
7765
currentDate: new Date(2024, 8, 7),
@@ -83,13 +71,13 @@ describe('Resources', () => {
8371
}],
8472
});
8573

86-
expect(getColor(container)).toBe(rooms[0].color);
74+
expect(POM.getAppointmentColor(view)).toBe(rooms[0].color);
8775
});
8876

8977
it('should render appointments after resources update (T1301345)', async () => {
9078
setupSchedulerTestEnvironment();
9179

92-
const { container, scheduler } = await createScheduler({
80+
const { POM, scheduler } = await createScheduler({
9381
views: [view],
9482
currentView: view,
9583
currentDate: new Date(2024, 8, 7),
@@ -107,7 +95,7 @@ describe('Resources', () => {
10795
}]);
10896
await new Promise(process.nextTick);
10997

110-
expect(getColor(container)).toBe(rooms2[0].color);
98+
expect(POM.getAppointmentColor(view)).toBe(rooms2[0].color);
11199
});
112100
});
113101
});

‎packages/devextreme/js/__internal/scheduler/__tests__/santiago_timezone.test.ts‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -96,16 +96,11 @@ const views = [
9696
},
9797
];
9898

99-
const getAppointments = (container: HTMLElement) => container.querySelectorAll('.dx-scheduler-appointment');
100-
const getTexts = (
101-
cells: NodeListOf<Element>,
102-
) => Array.from(cells).map((cell) => cell.textContent?.trim());
103-
10499
describe('scheduler', () => {
105100
it.each(views)('should render correct workspace in Santiago DST for view: $view.name', async ({ view, result }) => {
106101
setupSchedulerTestEnvironment(true);
107102

108-
const { container } = await createScheduler({
103+
const { POM } = await createScheduler({
109104
views: [view],
110105
currentView: view.name,
111106
currentDate: new Date(2024, 8, 8),
@@ -116,18 +111,15 @@ describe('scheduler', () => {
116111
});
117112

118113
if (result.hasCellContent) {
119-
const cells = container.querySelectorAll('.dx-scheduler-date-table-cell');
120-
expect(getTexts(cells)).toMatchSnapshot();
114+
expect(POM.getDateTableContent()).toMatchSnapshot();
121115
}
122116
if (result.hasHeaderPanel) {
123-
const cells = container.querySelectorAll('.dx-scheduler-header-panel-cell');
124-
expect(getTexts(cells)).toMatchSnapshot();
117+
expect(POM.getHeaderPanelContent()).toMatchSnapshot();
125118
}
126119
if (result.hasTimePanel) {
127-
const cells = container.querySelectorAll('.dx-scheduler-time-panel-cell');
128-
expect(getTexts(cells)).toMatchSnapshot();
120+
expect(POM.getTimePanelContent()).toMatchSnapshot();
129121
}
130122

131-
expect(getAppointments(container)).toHaveLength(result.appointmentAmount);
123+
expect(POM.getAppointments()).toHaveLength(result.appointmentAmount);
132124
});
133125
});

‎packages/devextreme/js/__internal/scheduler/__tests__/views.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { setupSchedulerTestEnvironment } from './__mock__/m_mock_scheduler';
88
describe('views', () => {
99
it('should render appointment after view change (T1297019)', async () => {
1010
setupSchedulerTestEnvironment();
11-
const { container, scheduler } = await createScheduler({
11+
const { POM, scheduler } = await createScheduler({
1212
timeZone: 'Etc/UTC',
1313
dataSource: [{
1414
text: 'Appointment',
@@ -34,7 +34,7 @@ describe('views', () => {
3434
scheduler.option('currentView', 'day');
3535
await new Promise(process.nextTick);
3636

37-
const appointment = container.querySelector('.dx-scheduler-appointment');
37+
const appointment = POM.getAppointment();
3838
expect(appointment !== null).toBe(true);
3939
});
4040
});

‎packages/devextreme/js/__internal/scheduler/appointments/m_appointment_collection.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ class SchedulerAppointments extends CollectionWidget {
183183

184184
private _getNavigatableItems(): dxElementWrapper {
185185
// @ts-expect-error
186-
const appts = this._itemElements().filter(':visible').not('.dx-state-disabled');
186+
const appts = this._itemElements().not('.dx-state-disabled');
187187
// @ts-expect-error
188188
const apptCollectors = this.$element().find('.dx-scheduler-appointment-collector');
189189
return appts.add(apptCollectors);
@@ -638,20 +638,15 @@ class SchedulerAppointments extends CollectionWidget {
638638
element: dxElementWrapper,
639639
settings: AppointmentAgendaViewModel,
640640
): void {
641-
const { allDay } = settings;
642641
const { groups, groupsLeafs, resourceById } = this.option('getResourceManager')();
643642
const config: any = {
644643
data: settings.itemData,
645644
groupIndex: settings.groupIndex,
646645
groupTexts: getGroupTexts(groups, groupsLeafs, resourceById, settings.groupIndex),
647646
notifyScheduler: this.option('notifyScheduler'),
648647
geometry: settings,
649-
direction: settings.direction || 'vertical',
650648
allowResize: false,
651649
allowDrag: false,
652-
allDay,
653-
cellWidth: this.invoke('getCellWidth'),
654-
cellHeight: this.invoke('getCellHeight'),
655650
groups: this.option('groups'),
656651

657652
dataAccessors: this.option('dataAccessors'),

0 commit comments

Comments
 (0)