Skip to content

Commit be126e2

Browse files
TucchhaaTucchhaa
authored
Scheduler - Appointments Collection Refactoring - Move getBaseAppointmentViewProperties Mock (#33238)
1 parent 8240999 commit be126e2

9 files changed

Lines changed: 89 additions & 68 deletions

File tree

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,18 @@ describe('New Appointments', () => {
6666
return $(POM.getAppointments()[0].element).text() === 'Custom appointment';
6767
};
6868

69+
it('should render default template', async () => {
70+
const { POM } = await createScheduler(config);
71+
72+
if (templateName === 'appointmentCollectorTemplate') {
73+
const collectorButton = POM.getCollectorButton();
74+
expect(collectorButton.textContent).toBe('1');
75+
} else {
76+
const appointment = POM.getAppointments()[0];
77+
expect(appointment.getText()).toBe('Appointment 1');
78+
}
79+
});
80+
6981
it('should apply custom template', async () => {
7082
const { POM } = await createScheduler({
7183
...config,

‎packages/devextreme/js/__internal/scheduler/appointments_new/__mock__/appointment_collector.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import $ from '@js/core/renderer';
2+
import { EmptyTemplate } from '@ts/core/templates/m_empty_template';
3+
import type { SafeAppointment, TargetedAppointment } from '@ts/scheduler/types';
4+
5+
import type { AppointmentCollectorProperties } from '../appointment_collector';
6+
import { AppointmentCollector } from '../appointment_collector';
7+
8+
export const getAppointmentCollectorProperties = (
9+
appointmentsData: SafeAppointment[],
10+
): AppointmentCollectorProperties => {
11+
const targetedAppointmentData: TargetedAppointment = {
12+
...appointmentsData[0],
13+
displayStartDate: appointmentsData[0].startDate as Date,
14+
displayEndDate: appointmentsData[0].endDate as Date,
15+
};
16+
17+
const config: AppointmentCollectorProperties = {
18+
appointmentsData,
19+
isCompact: false,
20+
geometry: {
21+
height: 30,
22+
width: 30,
23+
top: 0,
24+
left: 0,
25+
},
26+
targetedAppointmentData,
27+
appointmentCollectorTemplate: new EmptyTemplate(),
28+
};
29+
30+
return config;
31+
};
32+
33+
export const createAppointmentCollector = (
34+
properties: AppointmentCollectorProperties,
35+
): AppointmentCollector => {
36+
const $element = $('.root');
37+
38+
// @ts-expect-error
39+
return new AppointmentCollector($element, properties);
40+
};

packages/devextreme/js/__internal/scheduler/appointments_new/__mock__/appointment_properties.ts renamed to packages/devextreme/js/__internal/scheduler/appointments_new/__mock__/base_appointment_view.ts

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1+
import $ from '@js/core/renderer';
12
import { EmptyTemplate } from '@ts/core/templates/m_empty_template';
23
import { mockAppointmentDataAccessor } from '@ts/scheduler/__mock__/appointment_data_accessor.mock';
34
import type { SafeAppointment, TargetedAppointment } from '@ts/scheduler/types';
45
import type { AppointmentDataAccessor } from '@ts/scheduler/utils/data_accessor/appointment_data_accessor';
56

6-
import type { BaseAppointmentViewProperties } from '../appointment/base_appointment';
7+
import { BaseAppointmentView, type BaseAppointmentViewProperties } from '../appointment/base_appointment';
78

8-
export const getBaseAppointmentProperties = (
9+
export const getBaseAppointmentViewProperties = (
910
appointmentData: SafeAppointment,
1011
targetedAppointmentData?: TargetedAppointment,
1112
): BaseAppointmentViewProperties => {
@@ -20,10 +21,24 @@ export const getBaseAppointmentProperties = (
2021
appointmentData,
2122
targetedAppointmentData: normalizedTargetedAppointmentData,
2223
appointmentTemplate: new EmptyTemplate(),
23-
onAppointmentRendered: () => {},
24+
onRendered: () => {},
2425
getDataAccessor: (): AppointmentDataAccessor => mockAppointmentDataAccessor,
2526
getResourceColor: (): Promise<string | undefined> => Promise.resolve(undefined),
2627
};
2728

2829
return config;
2930
};
31+
32+
export const createBaseAppointment = async (
33+
properties: BaseAppointmentViewProperties,
34+
): Promise<BaseAppointmentView> => {
35+
const $element = $('.root');
36+
37+
// @ts-expect-error
38+
const instance = new BaseAppointmentView($element, properties);
39+
40+
// Await for resources
41+
await new Promise(process.nextTick);
42+
43+
return instance;
44+
};

‎packages/devextreme/js/__internal/scheduler/appointments_new/appointment/agenda_appointment.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type { SafeAppointment, TargetedAppointment } from '@ts/scheduler/types';
66
import type { AppointmentResource } from '@ts/scheduler/utils/resource_manager/appointment_groups_utils';
77

88
import fx from '../../../common/core/animation/fx';
9-
import { getBaseAppointmentProperties } from '../__mock__/appointment_properties';
9+
import { getBaseAppointmentViewProperties } from '../__mock__/base_appointment_view';
1010
import { AGENDA_APPOINTMENT_CLASSES, APPOINTMENT_CLASSES } from '../const';
1111
import type { AgendaAppointmentViewProperties } from './agenda_appointment';
1212
import { AgendaAppointmentView } from './agenda_appointment';
@@ -15,7 +15,7 @@ const getProperties = (
1515
appointmentData: SafeAppointment,
1616
targetedAppointmentData?: TargetedAppointment,
1717
): AgendaAppointmentViewProperties => {
18-
const baseProperties = getBaseAppointmentProperties(
18+
const baseProperties = getBaseAppointmentViewProperties(
1919
appointmentData,
2020
targetedAppointmentData,
2121
);

‎packages/devextreme/js/__internal/scheduler/appointments_new/appointment/base_appointment.test.ts‎

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,8 @@ import {
44
import $ from '@js/core/renderer';
55

66
import fx from '../../../common/core/animation/fx';
7-
import { getBaseAppointmentProperties } from '../__mock__/appointment_properties';
7+
import { createBaseAppointment, getBaseAppointmentViewProperties as getProperties } from '../__mock__/base_appointment_view';
88
import { APPOINTMENT_CLASSES, APPOINTMENT_TYPE_CLASSES } from '../const';
9-
import type { BaseAppointmentViewProperties } from './base_appointment';
10-
import { BaseAppointmentView } from './base_appointment';
11-
12-
const createBaseAppointment = async (
13-
properties: BaseAppointmentViewProperties,
14-
): Promise<BaseAppointmentView> => {
15-
const $element = $('.root');
16-
17-
// @ts-expect-error
18-
const instance = new BaseAppointmentView($element, properties);
19-
20-
// Await for resources
21-
await new Promise(process.nextTick);
22-
23-
return instance;
24-
};
259

2610
const defaultAppointmentData = {
2711
title: 'Test appointment',
@@ -51,7 +35,7 @@ describe('BaseAppointment', () => {
5135
describe('Classes', () => {
5236
it('should have container class', async () => {
5337
const instance = await createBaseAppointment(
54-
getBaseAppointmentProperties(defaultAppointmentData),
38+
getProperties(defaultAppointmentData),
5539
);
5640

5741
expect(instance.$element().hasClass(APPOINTMENT_CLASSES.CONTAINER)).toBe(true);
@@ -61,7 +45,7 @@ describe('BaseAppointment', () => {
6145
true, false,
6246
])('should have correct class for isRecurring = %o', async (isRecurring) => {
6347
const instance = await createBaseAppointment(
64-
getBaseAppointmentProperties({
48+
getProperties({
6549
...defaultAppointmentData,
6650
recurrenceRule: isRecurring ? 'FREQ=DAILY;COUNT=5' : undefined,
6751
}),
@@ -76,7 +60,7 @@ describe('BaseAppointment', () => {
7660
true, false,
7761
])('should have correct class for allDay = %o', async (allDay) => {
7862
const instance = await createBaseAppointment(
79-
getBaseAppointmentProperties({
63+
getProperties({
8064
...defaultAppointmentData,
8165
allDay,
8266
}),
@@ -91,7 +75,7 @@ describe('BaseAppointment', () => {
9175
describe('Aria', () => {
9276
it('should have role button', async () => {
9377
const instance = await createBaseAppointment(
94-
getBaseAppointmentProperties(defaultAppointmentData),
78+
getProperties(defaultAppointmentData),
9579
);
9680

9781
expect(instance.$element().attr('role')).toBe('button');

‎packages/devextreme/js/__internal/scheduler/appointments_new/appointment/base_appointment.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export interface BaseAppointmentViewProperties
2323
targetedAppointmentData: TargetedAppointment;
2424
appointmentTemplate: TemplateBase;
2525

26-
onAppointmentRendered: (e: {
26+
onRendered: (e: {
2727
element: DxElement;
2828
appointmentData: SafeAppointment;
2929
targetedAppointmentData: TargetedAppointment;
@@ -128,7 +128,7 @@ export class BaseAppointmentView<
128128
},
129129
index: this.option().index,
130130
onRendered: () => {
131-
this.option().onAppointmentRendered({
131+
this.option().onRendered({
132132
element: getPublicElement(this.$element()),
133133
appointmentData: this.appointmentData,
134134
targetedAppointmentData: this.targetedAppointmentData,

‎packages/devextreme/js/__internal/scheduler/appointments_new/appointment/grid_appointment.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ import $ from '@js/core/renderer';
55
import type { SafeAppointment } from '@ts/scheduler/types';
66

77
import fx from '../../../common/core/animation/fx';
8-
import { getBaseAppointmentProperties } from '../__mock__/appointment_properties';
8+
import { getBaseAppointmentViewProperties } from '../__mock__/base_appointment_view';
99
import { APPOINTMENT_CLASSES, APPOINTMENT_TYPE_CLASSES } from '../const';
1010
import type { GridAppointmentViewProperties } from './grid_appointment';
1111
import { GridAppointmentView } from './grid_appointment';
1212

1313
const getProperties = (
1414
appointmentData: SafeAppointment,
1515
): GridAppointmentViewProperties => {
16-
const baseProperties = getBaseAppointmentProperties(appointmentData);
16+
const baseProperties = getBaseAppointmentViewProperties(appointmentData);
1717

1818
return {
1919
...baseProperties,

‎packages/devextreme/js/__internal/scheduler/appointments_new/appointment_collector.test.ts‎

Lines changed: 1 addition & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,11 @@ import {
22
afterEach, beforeEach, describe, expect, it, jest,
33
} from '@jest/globals';
44
import $ from '@js/core/renderer';
5-
import { EmptyTemplate } from '@ts/core/templates/m_empty_template';
65

76
import fx from '../../../common/core/animation/fx';
8-
import type { SafeAppointment, TargetedAppointment } from '../types';
9-
import type { AppointmentCollectorProperties } from './appointment_collector';
10-
import { AppointmentCollector } from './appointment_collector';
7+
import { createAppointmentCollector, getAppointmentCollectorProperties as getProperties } from './__mock__/appointment_collector';
118
import { APPOINTMENT_COLLECTOR_CLASSES } from './const';
129

13-
const getProperties = (
14-
appointmentsData: SafeAppointment[],
15-
): AppointmentCollectorProperties => {
16-
const targetedAppointmentData: TargetedAppointment = {
17-
...appointmentsData[0],
18-
displayStartDate: appointmentsData[0].startDate as Date,
19-
displayEndDate: appointmentsData[0].endDate as Date,
20-
};
21-
22-
return {
23-
appointmentsData,
24-
isCompact: false,
25-
geometry: {
26-
height: 30,
27-
width: 30,
28-
top: 0,
29-
left: 0,
30-
},
31-
targetedAppointmentData,
32-
appointmentCollectorTemplate: new EmptyTemplate(),
33-
};
34-
};
35-
36-
const createAppointmentCollector = (
37-
properties: AppointmentCollectorProperties,
38-
): AppointmentCollector => {
39-
const $element = $('.root');
40-
41-
// @ts-expect-error
42-
return new AppointmentCollector($element, properties);
43-
};
44-
4510
const defaultAppointmentData = {
4611
title: 'Test appointment',
4712
startDate: new Date(2024, 0, 1, 9, 0),

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export interface AppointmentsProperties extends DOMComponentProperties<Appointme
3838
appointmentTemplate: SchedulerProperties['appointmentTemplate'];
3939
appointmentCollectorTemplate: SchedulerProperties['appointmentCollectorTemplate'];
4040

41-
onAppointmentRendered: BaseAppointmentViewProperties['onAppointmentRendered'];
41+
onAppointmentRendered: BaseAppointmentViewProperties['onRendered'];
4242

4343
getAppointmentDataSource: () => AppointmentDataSource;
4444
getResourceManager: () => ResourceManager;
@@ -65,6 +65,11 @@ export class Appointments extends DOMComponent<Appointments, AppointmentsPropert
6565
appointment: new EmptyTemplate(),
6666
appointmentCollector: new EmptyTemplate(),
6767
});
68+
69+
// TODO: legacy compatibility
70+
if (this.option().appointmentTemplate === 'item') {
71+
this.option('appointmentTemplate', 'appointment');
72+
}
6873
}
6974

7075
override _initMarkup(): void {
@@ -264,7 +269,7 @@ export class Appointments extends DOMComponent<Appointments, AppointmentsPropert
264269
appointmentData: appointmentViewModel.itemData,
265270
targetedAppointmentData,
266271
getResourceColor: this.getResourceColor.bind(this, appointmentViewModel),
267-
onAppointmentRendered: this.option().onAppointmentRendered,
272+
onRendered: this.option().onAppointmentRendered,
268273
getDataAccessor: this.option().getDataAccessor,
269274
};
270275

0 commit comments

Comments
 (0)