Skip to content

Commit 38b1782

Browse files
TucchhaaTucchhaa
committed
implement & test
1 parent b972d91 commit 38b1782

File tree

6 files changed

+412
-25
lines changed

6 files changed

+412
-25
lines changed

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

Lines changed: 359 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,359 @@
1+
import {
2+
afterEach, beforeEach, describe, expect, it, jest,
3+
} from '@jest/globals';
4+
import $ from '@js/core/renderer';
5+
import type { Properties } from '@js/ui/scheduler';
6+
7+
import { createScheduler as baseCreateScheduler } from './__mock__/create_scheduler';
8+
import { setupSchedulerTestEnvironment } from './__mock__/m_mock_scheduler';
9+
10+
const createScheduler = (config: Properties) => baseCreateScheduler({
11+
...config,
12+
// eslint-disable-next-line @typescript-eslint/naming-convention
13+
_newAppointments: true,
14+
});
15+
16+
describe('New Appointments', () => {
17+
beforeEach(() => {
18+
setupSchedulerTestEnvironment();
19+
});
20+
21+
afterEach(() => {
22+
const $scheduler = $('.dx-scheduler');
23+
// @ts-expect-error
24+
$scheduler.dxScheduler('dispose');
25+
document.body.innerHTML = '';
26+
jest.useRealTimers();
27+
});
28+
29+
describe('Templates', () => {
30+
describe('AppointmentTemplate', () => {
31+
it('should call template function with correct paramteters', async () => {
32+
const appointmentTemplate = jest.fn();
33+
34+
const appointmentData1 = {
35+
text: 'Appointment 1',
36+
startDate: new Date(2015, 1, 9, 8),
37+
endDate: new Date(2015, 1, 9, 9),
38+
};
39+
const appointmentData2 = {
40+
text: 'Appointment 2',
41+
startDate: new Date(2015, 1, 9, 10),
42+
endDate: new Date(2015, 1, 9, 11),
43+
};
44+
45+
await createScheduler({
46+
dataSource: [appointmentData1, appointmentData2],
47+
currentView: 'day',
48+
currentDate: new Date(2015, 1, 9, 8),
49+
appointmentTemplate,
50+
});
51+
52+
expect(appointmentTemplate).toHaveBeenCalledTimes(2);
53+
expect(appointmentTemplate.mock.calls[0]).toHaveLength(3);
54+
expect(appointmentTemplate.mock.calls[0]).toEqual([
55+
expect.objectContaining({
56+
appointmentData: appointmentData1,
57+
targetedAppointmentData: expect.objectContaining({
58+
...appointmentData1,
59+
displayStartDate: appointmentData1.startDate,
60+
displayEndDate: appointmentData1.endDate,
61+
}),
62+
}),
63+
0,
64+
expect.any(HTMLElement),
65+
]);
66+
67+
const container1 = appointmentTemplate.mock.calls[0][2] as HTMLElement;
68+
expect(container1.classList.contains('dx-scheduler-appointment-content')).toBe(true);
69+
expect(container1.innerHTML).toBe('');
70+
71+
expect(appointmentTemplate.mock.calls[1]).toHaveLength(3);
72+
expect(appointmentTemplate.mock.calls[1]).toEqual([
73+
expect.objectContaining({
74+
appointmentData: appointmentData2,
75+
targetedAppointmentData: expect.objectContaining({
76+
...appointmentData2,
77+
displayStartDate: appointmentData2.startDate,
78+
displayEndDate: appointmentData2.endDate,
79+
}),
80+
}),
81+
1,
82+
expect.any(HTMLElement),
83+
]);
84+
85+
const container2 = appointmentTemplate.mock.calls[1][2] as HTMLElement;
86+
expect(container2.classList.contains('dx-scheduler-appointment-content')).toBe(true);
87+
expect(container2.innerHTML).toBe('');
88+
});
89+
90+
it('should render appointment with custom template', async () => {
91+
const { POM } = await createScheduler({
92+
dataSource: [{
93+
text: 'Appointment 1',
94+
startDate: new Date(2015, 1, 9, 8),
95+
endDate: new Date(2015, 1, 9, 9),
96+
allDay: true,
97+
}],
98+
currentView: 'day',
99+
currentDate: new Date(2015, 1, 9, 8),
100+
appointmentTemplate: (data, index, container) => {
101+
$(container).text(`${data.appointmentData.text} Template`);
102+
},
103+
});
104+
105+
const $appointment = $(POM.getAppointments()[0].element);
106+
107+
expect($appointment.text()).toBe('Appointment 1 Template');
108+
});
109+
110+
it('should apply current view\'s appointmentTemplate', async () => {
111+
const defaultTemplate = jest.fn();
112+
const viewTemplate = jest.fn(
113+
(data: any, index: number, container: HTMLElement) => {
114+
$(container).text(`${data.appointmentData.text} ViewTemplate`);
115+
},
116+
);
117+
118+
const appointmentData = {
119+
text: 'Appointment 1',
120+
startDate: new Date(2015, 1, 9, 8),
121+
endDate: new Date(2015, 1, 9, 9),
122+
};
123+
124+
const { POM } = await createScheduler({
125+
dataSource: [appointmentData],
126+
views: [{
127+
type: 'day',
128+
appointmentTemplate: viewTemplate,
129+
}],
130+
currentView: 'day',
131+
currentDate: new Date(2015, 1, 9, 8),
132+
appointmentTemplate: defaultTemplate,
133+
});
134+
135+
expect(viewTemplate).toHaveBeenCalledTimes(1);
136+
expect(defaultTemplate).not.toHaveBeenCalled();
137+
expect(viewTemplate.mock.calls[0]).toEqual([
138+
expect.objectContaining({
139+
appointmentData,
140+
targetedAppointmentData: expect.objectContaining({
141+
...appointmentData,
142+
displayStartDate: appointmentData.startDate,
143+
displayEndDate: appointmentData.endDate,
144+
}),
145+
}),
146+
0,
147+
expect.any(HTMLElement),
148+
]);
149+
150+
const $appointment = $(POM.getAppointments()[0].element);
151+
expect($appointment.text()).toBe('Appointment 1 ViewTemplate');
152+
});
153+
154+
it('should render async template', async () => {
155+
const appointmentTemplate = jest.fn(
156+
(data: any, index: number, container: HTMLElement) => new Promise((resolve) => {
157+
$(container).text(`${data.appointmentData.text} Async`);
158+
resolve(container);
159+
}),
160+
);
161+
162+
const { POM } = await createScheduler({
163+
dataSource: [{
164+
text: 'Appointment 1',
165+
startDate: new Date(2015, 1, 9, 8),
166+
endDate: new Date(2015, 1, 9, 9),
167+
}],
168+
currentView: 'day',
169+
currentDate: new Date(2015, 1, 9, 8),
170+
appointmentTemplate,
171+
});
172+
173+
await new Promise(process.nextTick);
174+
175+
expect(appointmentTemplate).toHaveBeenCalledTimes(1);
176+
177+
const $appointment = $(POM.getAppointments()[0].element);
178+
expect($appointment.text()).toBe('Appointment 1 Async');
179+
});
180+
181+
it('should call onAppointmentRendered action after appointment is rendered', async () => {
182+
183+
});
184+
});
185+
186+
describe('AppointmentCollectorTemplate', () => {
187+
it('should call template function with correct parameters', async () => {
188+
const appointmentCollectorTemplate = jest.fn();
189+
190+
await createScheduler({
191+
dataSource: [
192+
{
193+
text: 'Appointment 1',
194+
startDate: new Date(2015, 1, 9, 8),
195+
endDate: new Date(2015, 1, 9, 9),
196+
},
197+
{
198+
text: 'Appointment 2',
199+
startDate: new Date(2015, 1, 9, 8),
200+
endDate: new Date(2015, 1, 9, 9),
201+
},
202+
{
203+
text: 'Appointment 3',
204+
startDate: new Date(2015, 1, 9, 8),
205+
endDate: new Date(2015, 1, 9, 9),
206+
},
207+
],
208+
currentView: 'day',
209+
currentDate: new Date(2015, 1, 9, 8),
210+
maxAppointmentsPerCell: 2,
211+
appointmentCollectorTemplate,
212+
});
213+
214+
expect(appointmentCollectorTemplate).toHaveBeenCalledTimes(1);
215+
expect(appointmentCollectorTemplate.mock.calls[0]).toHaveLength(2);
216+
expect(appointmentCollectorTemplate.mock.calls[0]).toEqual([
217+
expect.objectContaining({
218+
appointmentCount: 1,
219+
isCompact: true,
220+
items: expect.arrayContaining([
221+
expect.objectContaining({
222+
text: 'Appointment 3',
223+
}),
224+
]),
225+
}),
226+
expect.any(HTMLElement),
227+
]);
228+
229+
const container = appointmentCollectorTemplate.mock.calls[0][1] as HTMLElement;
230+
expect(container.classList.contains('dx-button-content')).toBe(true);
231+
});
232+
233+
it('should render appointment collector with custom template', async () => {
234+
const { POM } = await createScheduler({
235+
dataSource: [
236+
{
237+
text: 'Appointment 1',
238+
startDate: new Date(2015, 1, 9, 8),
239+
endDate: new Date(2015, 1, 9, 9),
240+
},
241+
{
242+
text: 'Appointment 2',
243+
startDate: new Date(2015, 1, 9, 8),
244+
endDate: new Date(2015, 1, 9, 9),
245+
},
246+
{
247+
text: 'Appointment 3',
248+
startDate: new Date(2015, 1, 9, 8),
249+
endDate: new Date(2015, 1, 9, 9),
250+
},
251+
],
252+
currentView: 'day',
253+
currentDate: new Date(2015, 1, 9, 8),
254+
maxAppointmentsPerCell: 2,
255+
appointmentCollectorTemplate: (data, container) => {
256+
$(container).text(`Custom +${data.appointmentCount} more`);
257+
},
258+
});
259+
260+
const $collector = $(POM.getCollectorButton());
261+
262+
expect($collector.text()).toBe('Custom +1 more');
263+
});
264+
265+
it('should apply current view\'s appointmentCollectorTemplate', async () => {
266+
const defaultTemplate = jest.fn();
267+
const viewTemplate = jest.fn((data: any, container: HTMLElement) => {
268+
$(container).text(`View +${data.appointmentCount} more`);
269+
});
270+
271+
const { POM } = await createScheduler({
272+
dataSource: [
273+
{
274+
text: 'Appointment 1',
275+
startDate: new Date(2015, 1, 9, 8),
276+
endDate: new Date(2015, 1, 9, 9),
277+
},
278+
{
279+
text: 'Appointment 2',
280+
startDate: new Date(2015, 1, 9, 8),
281+
endDate: new Date(2015, 1, 9, 9),
282+
},
283+
{
284+
text: 'Appointment 3',
285+
startDate: new Date(2015, 1, 9, 8),
286+
endDate: new Date(2015, 1, 9, 9),
287+
},
288+
],
289+
views: [{
290+
type: 'day',
291+
appointmentCollectorTemplate: viewTemplate,
292+
}],
293+
currentView: 'day',
294+
currentDate: new Date(2015, 1, 9, 8),
295+
maxAppointmentsPerCell: 2,
296+
appointmentCollectorTemplate: defaultTemplate,
297+
});
298+
299+
expect(defaultTemplate).not.toHaveBeenCalled();
300+
expect(viewTemplate).toHaveBeenCalledTimes(1);
301+
expect(viewTemplate.mock.calls[0]).toEqual([
302+
expect.objectContaining({
303+
appointmentCount: 1,
304+
isCompact: true,
305+
items: expect.arrayContaining([
306+
expect.objectContaining({
307+
text: 'Appointment 3',
308+
}),
309+
]),
310+
}),
311+
expect.any(HTMLElement),
312+
]);
313+
314+
const $collector = $(POM.getCollectorButton());
315+
expect($collector.text()).toBe('View +1 more');
316+
});
317+
318+
it('should render async template', async () => {
319+
const appointmentCollectorTemplate = jest.fn(
320+
(data: any, container: HTMLElement) => new Promise((resolve) => {
321+
$(container).text(`Async +${data.appointmentCount} more`);
322+
resolve(container);
323+
}),
324+
);
325+
326+
const { POM } = await createScheduler({
327+
dataSource: [
328+
{
329+
text: 'Appointment 1',
330+
startDate: new Date(2015, 1, 9, 8),
331+
endDate: new Date(2015, 1, 9, 9),
332+
},
333+
{
334+
text: 'Appointment 2',
335+
startDate: new Date(2015, 1, 9, 8),
336+
endDate: new Date(2015, 1, 9, 9),
337+
},
338+
{
339+
text: 'Appointment 3',
340+
startDate: new Date(2015, 1, 9, 8),
341+
endDate: new Date(2015, 1, 9, 9),
342+
},
343+
],
344+
currentView: 'day',
345+
currentDate: new Date(2015, 1, 9, 8),
346+
maxAppointmentsPerCell: 2,
347+
appointmentCollectorTemplate,
348+
});
349+
350+
await new Promise(process.nextTick);
351+
352+
expect(appointmentCollectorTemplate).toHaveBeenCalledTimes(1);
353+
354+
const $collector = $(POM.getCollectorButton());
355+
expect($collector.text()).toBe('Async +1 more');
356+
});
357+
});
358+
});
359+
});

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export const getBaseAppointmentProperties = (
1616
};
1717

1818
const config: BaseAppointmentViewProperties = {
19+
index: 0,
1920
appointmentData,
2021
targetedAppointmentData: normalizedTargetedAppointmentData,
2122
appointmentTemplate: new EmptyTemplate(),

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { DateFormatType, getDateTextFromTargetAppointment } from '../utils/get_d
1919
export interface BaseAppointmentViewProperties
2020
// eslint-disable-next-line @typescript-eslint/no-explicit-any
2121
extends DOMComponentProperties<BaseAppointmentView<any>> {
22+
index: number;
2223
appointmentData: SafeAppointment;
2324
targetedAppointmentData: TargetedAppointment;
2425
appointmentTemplate: TemplateBase;
@@ -126,6 +127,7 @@ export class BaseAppointmentView<
126127
appointmentData: this.appointmentData,
127128
targetedAppointmentData: this.targetedAppointmentData,
128129
},
130+
index: this.option().index,
129131
});
130132

131133
when($renderPromise).done(() => {

0 commit comments

Comments
 (0)