Scheduler: fix all-day appointment rendered in the next resource (DevExpress#30771)

Co-authored-by: Aleksei Semikozov <[email protected]>

Author: aleksei-semikozov

packages/devextreme/js/__internal/scheduler/__tests__/__mock__/m_mock_scheduler.ts

@@ -3,25 +3,36 @@ import DOMComponent from '@ts/core/widget/dom_component';
 
 import SchedulerWorkSpace from '../../workspaces/m_work_space';
 
-export const setupSchedulerTestEnvironment = (
-  isTimelineView = false,
-): void => {
-  const cellWidth = 250;
-  const cellHeight = isTimelineView ? 450 : 80;
+interface SetupSchedulerTestEnvironmentOptions {
+  width?: number;
+  height?: number;
+}
 
-  (DOMComponent.prototype as any)._isVisible = jest.fn().mockReturnValue(true);
-  SchedulerWorkSpace.prototype._createCrossScrollingConfig = () => ({
+export const DEFAULT_CELL_WIDTH = 250;
+export const DEFAULT_CELL_HEIGHT = 80;
+export const DEFAULT_TIMELINE_CELL_HEIGHT = 450;
+
+export const setupSchedulerTestEnvironment = ({
+  width = DEFAULT_CELL_WIDTH,
+  height = DEFAULT_CELL_HEIGHT,
+}: SetupSchedulerTestEnvironmentOptions = {}): void => {
+  DOMComponent.prototype._isVisible = jest.fn((): boolean => true);
+  SchedulerWorkSpace.prototype._createCrossScrollingConfig = (): {
+    direction: string;
+    onScroll: jest.Mock;
+    onEnd: jest.Mock;
+  } => ({
     direction: 'both',
     onScroll: jest.fn(),
     onEnd: jest.fn(),
   });
-  Element.prototype.getBoundingClientRect = jest.fn(() => ({
-    width: cellWidth,
-    height: cellHeight,
+  Element.prototype.getBoundingClientRect = jest.fn((): DOMRect => ({
+    width,
+    height,
     top: 0,
     left: 0,
-    bottom: cellHeight,
-    right: cellWidth,
+    bottom: height,
+    right: width,
     x: 0,
     y: 0,
     toJSON: (): void => {},

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

@@ -7,7 +7,7 @@ import {
 } from '@jest/globals';
 
 import { createScheduler } from './__mock__/create_scheduler';
-import { setupSchedulerTestEnvironment } from './__mock__/m_mock_scheduler';
+import { DEFAULT_TIMELINE_CELL_HEIGHT, setupSchedulerTestEnvironment } from './__mock__/m_mock_scheduler';
 
 const dataSource = [
   {
@@ -98,7 +98,7 @@ const views = [
 
 describe('scheduler', () => {
   it.each(views)('should render correct workspace in Santiago DST for view: $view.name', async ({ view, result }) => {
-    setupSchedulerTestEnvironment(true);
+    setupSchedulerTestEnvironment({ height: DEFAULT_TIMELINE_CELL_HEIGHT });
 
     const { POM } = await createScheduler({
       views: [view],

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

@@ -37,4 +37,36 @@ describe('views', () => {
     const appointment = POM.getAppointment();
     expect(appointment !== null).toBe(true);
   });
+
+  it('should render all-day appointment correctly with fractional cell values', async () => {
+    const FRACTIONAL_CELL_WIDTH = 250.4;
+    setupSchedulerTestEnvironment({ width: FRACTIONAL_CELL_WIDTH });
+    const { container } = await createScheduler({
+      dataSource: [{
+        text: 'Appointment 2',
+        startDate: new Date('2021-02-02T15:15:00.000Z'),
+        endDate: new Date('2021-02-02T17:45:00.000Z'),
+        allDay: true,
+        resourceId: 1,
+      }],
+      currentDate: new Date(2021, 1, 2),
+      startDayHour: 8,
+      endDayHour: 20,
+      allDayPanelMode: 'hidden',
+      groups: ['resourceId'],
+      resources: [{
+        label: 'User',
+        dataSource: [
+          { title: 'Mark', id: 1 },
+          { title: 'Luke', id: 2 },
+        ],
+        displayExpr: 'title',
+        fieldExpr: 'resourceId',
+        valueExpr: 'id',
+      }],
+    });
+
+    const appointments = container.querySelectorAll('.dx-item.dx-scheduler-appointment');
+    expect(appointments.length).toBe(1);
+  });
 });

packages/devextreme/js/__internal/scheduler/view_model/generate_view_model/rendering_strategies/m_strategy_vertical.ts

@@ -216,7 +216,7 @@ class VerticalRenderingStrategy extends BaseAppointmentsStrategy {
     let tailHeight = this._getTailHeight(appointmentGeometry, appointmentSettings);
     let { columnIndex } = appointmentSettings;
 
-    while (tailHeight > 0 && left < hMax) {
+    while (tailHeight > 0 && left < Math.round(hMax)) {
       tailHeight = Math.max(minHeight, tailHeight);
       columnIndex += cellsDiff;
       const height = Math.min(tailHeight, maxHeight);