Scheduler: fix cell width during virtual scrolling (T1287345) (#30578)

Co-authored-by: Vladimir Bushmanov <[email protected]>

Author: Ambrozy

e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/T1287345.ts

@@ -0,0 +1,43 @@
+import Scheduler from 'devextreme-testcafe-models/scheduler';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { createWidget } from '../../../../helpers/createWidget';
+import url from '../../../../helpers/getPageUrl';
+import { scrollTo } from '../../helpers/utils';
+import {
+  insertStylesheetRulesToPage,
+  removeStylesheetRulesFromPage,
+} from '../../../../helpers/domUtils';
+import { safeSizeTest } from '../../../../helpers/safeSizeTest';
+
+fixture.disablePageReloads`Scheduler: Virtual scrolling`
+  .page(url(__dirname, '../../../container.html'));
+
+safeSizeTest('Cell width set in css should be correct for virtual scrolling after scroll down (T1287345)', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const scheduler = new Scheduler('#container');
+
+  await scrollTo(0, 3000);
+  await t.click(scheduler.toolbar.navigator.nextButton);
+  await t.expect(await takeScreenshot('virtual_scroll_cell_width.png', scheduler.workSpace)).ok();
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [600, 800]).before(async () => {
+  await insertStylesheetRulesToPage(`
+    #container .dx-scheduler-cell-sizes-horizontal {
+        width: 200px !important;
+    }`);
+  await createWidget('dxScheduler', {
+    dataSource: [],
+    currentView: 'week',
+    scrolling: {
+      mode: 'virtual',
+    },
+    currentDate: new Date(2021, 2, 28),
+    height: 300,
+  });
+}).after(async () => {
+  await removeStylesheetRulesFromPage();
+});

e2e/testcafe-devextreme/tests/scheduler/common/virtualScrolling/etalons/virtual_scroll_cell_width.png

@@ -9,6 +9,7 @@ export interface VirtualCellProps extends Partial<PropsWithStyles> {
   width: number;
   colSpan?: number;
   isHeaderCell: boolean;
+  className?: string;
 }
 
 export const VirtualCellDefaultProps = {
@@ -21,6 +22,7 @@ export class VirtualCell extends BaseInfernoComponent<VirtualCellProps> {
     const {
       colSpan,
       isHeaderCell,
+      className = '',
       width,
       styles,
     } = this.props;
@@ -30,7 +32,7 @@ export class VirtualCell extends BaseInfernoComponent<VirtualCellProps> {
 
     return (
       <Cell
-        className="dx-scheduler-virtual-cell"
+        className={`dx-scheduler-virtual-cell ${className}`}
         styles={modifiedStyles}
         colSpan={colSpan}
       />

packages/devextreme/js/__internal/scheduler/r1/components/base/virtual_cell.tsx

@@ -72,7 +72,9 @@ export class VirtualRow extends BaseInfernoComponent<VirtualRowProps> {
               <VirtualCell
                 key={index.toString()}
                 width={VirtualCellDefaultProps.width}
-                isHeaderCell={VirtualCellDefaultProps.isHeaderCell} />
+                isHeaderCell={VirtualCellDefaultProps.isHeaderCell}
+                className="dx-scheduler-cell-sizes-horizontal"
+              />
             ),
           )
         }