Skip to content

Commit 3b2c65a

Browse files
TucchhaaTucchhaa
committed
test mobile strategy too
1 parent 174615d commit 3b2c65a

5 files changed

Lines changed: 98 additions & 122 deletions

File tree

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

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@ import $ from '@js/core/renderer';
33
import type dxTooltip from '@js/ui/tooltip';
44
import { within } from '@testing-library/dom';
55

6-
const TOOLTIP_WRAPPER_SELECTOR = '.dx-overlay-wrapper.dx-scheduler-appointment-tooltip-wrapper';
6+
const TOOLTIP_WRAPPER_SELECTOR = `
7+
.dx-overlay-wrapper.dx-scheduler-overlay-panel,
8+
.dx-overlay-wrapper.dx-scheduler-appointment-tooltip-wrapper
9+
`;
710

811
export class TooltipModel {
912
get element(): HTMLElement | null {
@@ -24,10 +27,6 @@ export class TooltipModel {
2427
return this.element !== null;
2528
}
2629

27-
getOverlayContent(): HTMLElement | null {
28-
return this.element?.querySelector('.dx-scheduler-appointment-tooltip-wrapper .dx-overlay-content') ?? null;
29-
}
30-
3130
getScrollableContent(): Element | null {
3231
return this.element?.querySelector('.dx-scrollable .dx-scrollview-content') ?? null;
3332
}
@@ -50,11 +49,17 @@ export class TooltipModel {
5049
return buttons[index];
5150
}
5251

52+
getAppointmentItems(): HTMLElement[] {
53+
return this.element ? within(this.element).queryAllByRole('option') : [];
54+
}
55+
5356
getAppointmentItem(index = 0): HTMLElement | null {
54-
const tooltip = this.element;
55-
if (!tooltip) {
56-
return null;
57+
const items = this.getAppointmentItems();
58+
59+
if (items.length <= index) {
60+
throw new Error('Tooltip appointment item not found');
5761
}
58-
return within(tooltip).queryAllByRole('option')[index] ?? null;
62+
63+
return items[index];
5964
}
6065
}

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

Lines changed: 53 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import {
44
import fx from '@js/common/core/animation/fx';
55
import $ from '@js/core/renderer';
66

7-
import { createScheduler } from './__mock__/create_scheduler';
7+
import type Scheduler from '../m_scheduler';
8+
import { createScheduler as baseCreateScheduler } from './__mock__/create_scheduler';
89
import { setupSchedulerTestEnvironment } from './__mock__/m_mock_scheduler';
910
import type { SchedulerModel } from './__mock__/model/scheduler';
1011

@@ -57,7 +58,10 @@ const pressDeleteKeyOnTooltipItem = (POM: SchedulerModel, itemIndex: number): vo
5758
scrollableContent?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Delete', bubbles: true }));
5859
};
5960

60-
describe('Appointment tooltip', () => {
61+
describe.each([
62+
'desktop',
63+
'mobile',
64+
])('Appointment tooltip %s', (platform) => {
6165
beforeEach(() => {
6266
fx.off = true;
6367
setupSchedulerTestEnvironment({
@@ -77,6 +81,22 @@ describe('Appointment tooltip', () => {
7781
document.body.innerHTML = '';
7882
});
7983

84+
const createScheduler = (config: any): Promise<{
85+
container: HTMLDivElement;
86+
scheduler: Scheduler;
87+
POM: SchedulerModel;
88+
keydown: (element: Element, key: string) => void;
89+
}> => baseCreateScheduler({
90+
adaptivityEnabled: platform === 'mobile',
91+
views: [{ type: 'month', maxAppointmentsPerCell: 1 }],
92+
currentView: 'month',
93+
currentDate: new Date(2017, 4, 1),
94+
editing: true,
95+
height: 600,
96+
width: 1000,
97+
...config,
98+
});
99+
80100
describe('Delete button', () => {
81101
it('delete button in tooltip should not be focusable using tab', async () => {
82102
const { POM } = await createScheduler({
@@ -92,10 +112,6 @@ describe('Appointment tooltip', () => {
92112
endDate: new Date(2017, 4, 22, 10, 30),
93113
},
94114
],
95-
views: [{ type: 'month', maxAppointmentsPerCell: 1 }],
96-
currentView: 'month',
97-
currentDate: new Date(2017, 4, 22),
98-
height: 600,
99115
});
100116

101117
POM.getCollectorButton().click();
@@ -106,17 +122,14 @@ describe('Appointment tooltip', () => {
106122

107123
describe('Deleting appointments', () => {
108124
describe.each([
109-
'delete key', 'click',
125+
'delete key',
126+
'click',
110127
])('Try delete by %s', (method) => {
111128
it('should delete appointment', async () => {
112129
const onAppointmentDeleted = jest.fn();
113130

114131
const { POM } = await createScheduler({
115132
dataSource: getDataSource(),
116-
views: [{ type: 'month' }],
117-
currentView: 'month',
118-
currentDate: new Date(2017, 4, 1),
119-
height: 600,
120133
onAppointmentDeleted,
121134
});
122135

@@ -142,10 +155,6 @@ describe('Appointment tooltip', () => {
142155

143156
const { POM } = await createScheduler({
144157
dataSource: getDataSource(),
145-
views: [{ type: 'month' }],
146-
currentView: 'month',
147-
currentDate: new Date(2017, 4, 1),
148-
height: 600,
149158
editing: { allowDeleting: false },
150159
onAppointmentDeleted,
151160
});
@@ -164,7 +173,7 @@ describe('Appointment tooltip', () => {
164173
expect(onAppointmentDeleted).not.toHaveBeenCalled();
165174
});
166175

167-
it('should not delete disabled appointment by Delete key', async () => {
176+
it('should not delete disabled appointment', async () => {
168177
const onAppointmentDeleted = jest.fn();
169178

170179
const { POM } = await createScheduler({
@@ -182,10 +191,6 @@ describe('Appointment tooltip', () => {
182191
endDate: new Date(2017, 4, 21, 10, 30),
183192
disabled: true,
184193
}],
185-
views: [{ type: 'month' }],
186-
currentView: 'month',
187-
currentDate: new Date(2017, 4, 1),
188-
height: 600,
189194
onAppointmentDeleted,
190195
});
191196

@@ -194,7 +199,8 @@ describe('Appointment tooltip', () => {
194199
if (method === 'delete key') {
195200
pressDeleteKeyOnTooltipItem(POM, 1);
196201
} else {
197-
expect(POM.tooltip.getDeleteButtons().length).toBe(0);
202+
expect(POM.tooltip.getAppointmentItems().length).toBe(2);
203+
expect(POM.tooltip.getDeleteButtons().length).toBe(1);
198204
}
199205

200206
expect(POM.tooltip.isVisible()).toBe(true);
@@ -209,11 +215,6 @@ describe('Appointment tooltip', () => {
209215

210216
const { POM } = await createScheduler({
211217
dataSource: getDataSource(),
212-
views: [{ type: 'month' }],
213-
currentView: 'month',
214-
currentDate: new Date(2017, 4, 1),
215-
editing: true,
216-
height: 600,
217218
onAppointmentDeleted,
218219
onAppointmentUpdated,
219220
});
@@ -238,11 +239,6 @@ describe('Appointment tooltip', () => {
238239

239240
const { POM } = await createScheduler({
240241
dataSource: getDataSource(),
241-
views: [{ type: 'month' }],
242-
currentView: 'month',
243-
currentDate: new Date(2017, 4, 1),
244-
editing: true,
245-
height: 600,
246242
onAppointmentDeleted,
247243
});
248244

@@ -265,10 +261,6 @@ describe('Appointment tooltip', () => {
265261

266262
const { POM } = await createScheduler({
267263
dataSource: getDataSource(),
268-
views: [{ type: 'month' }],
269-
currentView: 'month',
270-
currentDate: new Date(2017, 4, 1),
271-
height: 600,
272264
onAppointmentDeleted,
273265
});
274266

@@ -292,10 +284,6 @@ describe('Appointment tooltip', () => {
292284

293285
const { POM } = await createScheduler({
294286
dataSource: getDataSource(),
295-
views: [{ type: 'month', maxAppointmentsPerCell: 1 }],
296-
currentView: 'month',
297-
currentDate: new Date(2017, 4, 1),
298-
height: 600,
299287
onAppointmentDeleted,
300288
});
301289

@@ -314,10 +302,6 @@ describe('Appointment tooltip', () => {
314302

315303
const { POM } = await createScheduler({
316304
dataSource: getDataSource(),
317-
views: [{ type: 'month', maxAppointmentsPerCell: 1 }],
318-
currentView: 'month',
319-
currentDate: new Date(2017, 4, 1),
320-
height: 600,
321305
onAppointmentDeleted,
322306
});
323307

@@ -337,11 +321,6 @@ describe('Appointment tooltip', () => {
337321

338322
const { POM } = await createScheduler({
339323
dataSource: getDataSource(),
340-
views: [{ type: 'month', maxAppointmentsPerCell: 1 }],
341-
currentView: 'month',
342-
currentDate: new Date(2017, 4, 1),
343-
editing: true,
344-
height: 600,
345324
onAppointmentDeleted,
346325
onAppointmentUpdated,
347326
});
@@ -363,10 +342,6 @@ describe('Appointment tooltip', () => {
363342

364343
const { POM } = await createScheduler({
365344
dataSource: getDataSource(),
366-
views: [{ type: 'month', maxAppointmentsPerCell: 1 }],
367-
currentView: 'month',
368-
currentDate: new Date(2017, 4, 1),
369-
height: 600,
370345
onAppointmentDeleted,
371346
});
372347

@@ -385,10 +360,6 @@ describe('Appointment tooltip', () => {
385360

386361
const { POM } = await createScheduler({
387362
dataSource: getDataSource(),
388-
views: [{ type: 'month', maxAppointmentsPerCell: 1 }],
389-
currentView: 'month',
390-
currentDate: new Date(2017, 4, 1),
391-
height: 600,
392363
onAppointmentDeleted,
393364
});
394365

@@ -422,54 +393,44 @@ describe('Appointment tooltip', () => {
422393
});
423394

424395
describe('State', () => {
425-
it('should have correct target after appointment was added before the current target', async () => {
426-
const { scheduler, POM } = await createScheduler({
427-
dataSource: getDataSource(),
428-
views: [{ type: 'month', maxAppointmentsPerCell: 1 }],
429-
currentView: 'month',
430-
currentDate: new Date(2017, 4, 1),
431-
height: 600,
432-
});
433-
434-
POM.getCollectorButton().click();
396+
if (platform === 'desktop') {
397+
it('should have correct target after appointment was added before the current target', async () => {
398+
const { scheduler, POM } = await createScheduler({
399+
dataSource: getDataSource(),
400+
});
435401

436-
const initialTarget = POM.tooltip.target;
402+
POM.getCollectorButton().click();
437403

438-
scheduler.addAppointment({
439-
text: 'New Apt',
440-
startDate: new Date(2017, 4, 20, 9, 30),
441-
endDate: new Date(2017, 4, 20, 10, 30),
442-
});
404+
const initialTarget = POM.tooltip.target;
443405

444-
await new Promise(process.nextTick);
406+
scheduler.addAppointment({
407+
text: 'New Apt',
408+
startDate: new Date(2017, 4, 20, 9, 30),
409+
endDate: new Date(2017, 4, 20, 10, 30),
410+
});
445411

446-
expect(POM.tooltip.isVisible()).toBe(true);
447-
expect(POM.tooltip.target).toBe(initialTarget);
448-
});
412+
await new Promise(process.nextTick);
449413

450-
it('should have correct target after appointment was deleted from tooltip', async () => {
451-
const { POM } = await createScheduler({
452-
dataSource: getDataSource(),
453-
views: [{ type: 'month', maxAppointmentsPerCell: 1 }],
454-
currentView: 'month',
455-
currentDate: new Date(2017, 4, 1),
456-
height: 600,
414+
expect(POM.tooltip.isVisible()).toBe(true);
415+
expect(POM.tooltip.target).toBe(initialTarget);
457416
});
458417

459-
POM.getCollectorButton().click();
460-
pressDeleteKeyOnTooltipItem(POM, 0);
418+
it('should have correct target after appointment was deleted from tooltip', async () => {
419+
const { POM } = await createScheduler({
420+
dataSource: getDataSource(),
421+
});
461422

462-
expect(POM.tooltip.isVisible()).toBe(true);
463-
expect(POM.tooltip.target).toBe(POM.getCollectorButton());
464-
});
423+
POM.getCollectorButton().click();
424+
pressDeleteKeyOnTooltipItem(POM, 0);
425+
426+
expect(POM.tooltip.isVisible()).toBe(true);
427+
expect(POM.tooltip.target).toBe(POM.getCollectorButton());
428+
});
429+
}
465430

466431
it('should not rerender tooltip appointments when deleting appointment from tooltip', async () => {
467432
const { POM } = await createScheduler({
468433
dataSource: getDataSource(),
469-
views: [{ type: 'month', maxAppointmentsPerCell: 1 }],
470-
currentView: 'month',
471-
currentDate: new Date(2017, 4, 1),
472-
height: 600,
473434
});
474435

475436
POM.getCollectorButton().click();

‎packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_desktop_tooltip_strategy.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,11 @@ export class DesktopTooltipStrategy extends TooltipStrategyBase {
4040
return result;
4141
}
4242

43-
protected override createTooltip(target, dataList) {
43+
protected override createTooltip(dataList) {
4444
const tooltipElement = this.createTooltipElement(APPOINTMENT_TOOLTIP_WRAPPER_CLASS);
4545

4646
const tooltip = this._options.createComponent(tooltipElement, Tooltip, {
47-
target,
47+
target: this.$target,
4848
maxHeight: MAX_TOOLTIP_HEIGHT,
4949
rtlEnabled: this.extraOptions.rtlEnabled,
5050
onShown: this.onShown.bind(this),

‎packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_mobile_tooltip_strategy.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const createTabletDeviceConfig = (listHeight) => {
6464
};
6565

6666
export class MobileTooltipStrategy extends TooltipStrategyBase {
67-
protected override shouldUseTarget() {
67+
public override isDesktop() {
6868
return false;
6969
}
7070

@@ -91,7 +91,7 @@ export class MobileTooltipStrategy extends TooltipStrategyBase {
9191
this.setTooltipConfig();
9292
}
9393

94-
protected override createTooltip(target, dataList) {
94+
protected override createTooltip(dataList) {
9595
const element = this.createTooltipElement(CLASS.slidePanel);
9696

9797
return this._options.createComponent(element, Overlay, {

0 commit comments

Comments
 (0)