Scheduler(T1225772): fix horizontal workspace width calculation (DevE…

…xpress#27258)

e2e/testcafe-devextreme/tests/scheduler/workSpace.ts

@@ -6,10 +6,22 @@ import { createWidget } from '../../helpers/createWidget';
 import url from '../../helpers/getPageUrl';
 import { changeTheme } from '../../helpers/changeTheme';
 import { Themes } from '../../helpers/themes';
+import { insertStylesheetRulesToPage, removeStylesheetRulesFromPage } from '../../helpers/domUtils';
 
 fixture.disablePageReloads`Scheduler: Workspace`
   .page(url(__dirname, '../container.html'));
 
+const FIXED_PARENT_CONTAINER_SIZE = `
+#parentContainer {
+  width: 400px;
+  height: 500px;
+}
+
+#container {
+  height: 100%;
+}
+`;
+
 const createScheduler = async (options = {}): Promise<void> => {
   await createWidget('dxScheduler', extend(options, {
     dataSource: [],
@@ -18,6 +30,13 @@ const createScheduler = async (options = {}): Promise<void> => {
   }));
 };
 
+const getResourcesDataSource = (count: number) => new Array(count)
+  .fill(null)
+  .map((_, idx) => ({
+    id: idx,
+    name: idx.toString(),
+  }));
+
 test('Vertical selection between two workspace cells should focus cells between them (T804954)', async (t) => {
   const scheduler = new Scheduler('#container');
 
@@ -275,3 +294,69 @@ test('All day panel should be hidden when allDayPanelMode=hidden by initializing
     await changeTheme(Themes.genericLight);
   });
 });
+
+[
+  Themes.genericLight,
+  Themes.materialBlue,
+  Themes.fluentBlue,
+].forEach((theme) => {
+  [
+    'day',
+    'week',
+    'workWeek',
+    'month',
+  ].forEach((viewName) => {
+    test(`[T1225772]: should not have the horizontal scroll in horizontal views when the crossScrollingEnabled: true (theme:${theme}, view:${viewName})`, async (t) => {
+      const scheduler = new Scheduler('#container');
+
+      const scrollableContainer = scheduler.dateTableScrollableContainer;
+      const scrollWidth = await scrollableContainer.scrollWidth;
+      const clientWidth = await scrollableContainer.clientWidth;
+      const hasHorizontalScroll = scrollWidth > clientWidth;
+
+      await t.expect(hasHorizontalScroll).notOk('workspace has the horizontal scrollbar');
+    }).before(async () => {
+      await changeTheme(theme);
+      await createWidget('dxScheduler', {
+        dataSource: [],
+        currentView: viewName,
+        currentDate: '2024-01-01T00:00:00',
+        crossScrollingEnabled: true,
+        height: 300,
+      });
+    })
+      .after(async () => {
+        await changeTheme(theme);
+      });
+  });
+});
+
+// NOTE: Moved "as is" from the QUnit integration.resources.tests (see history)
+test('[T716993]: should has horizontal scrollbar with multiple resources and fixed height container', async (t) => {
+  const scheduler = new Scheduler('#container');
+
+  const scrollableContainer = scheduler.dateTableScrollableContainer;
+  const scrollWidth = await scrollableContainer.scrollWidth;
+  const clientWidth = await scrollableContainer.clientWidth;
+  const hasHorizontalScroll = scrollWidth > clientWidth;
+
+  await t.expect(hasHorizontalScroll).ok('workspace hasn\'t the horizontal scrollbar');
+}).before(async () => {
+  const resourcesDataSource = getResourcesDataSource(10);
+
+  await insertStylesheetRulesToPage(FIXED_PARENT_CONTAINER_SIZE);
+  return createWidget('dxScheduler', {
+    dataSource: [],
+    groups: ['id'],
+    resources: [{
+      dataSource: resourcesDataSource,
+      displayExpr: 'name',
+      valueExpr: 'id',
+      fieldExpr: 'id',
+      allowMultiple: false,
+    }],
+    crossScrollingEnabled: true,
+  });
+}).after(async () => {
+  await removeStylesheetRulesFromPage();
+});

packages/devextreme/js/__internal/scheduler/workspaces/const.ts

@@ -0,0 +1 @@
+export const WORK_SPACE_BORDER_PX = 1;

packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_grouped_strategy_horizontal.ts

@@ -1,4 +1,5 @@
 import { getBoundingRect } from '@js/core/utils/position';
+import { WORK_SPACE_BORDER_PX } from '@ts/scheduler/workspaces/const';
 
 import { FIRST_GROUP_CELL_CLASS, LAST_GROUP_CELL_CLASS } from '../m_classes';
 
@@ -55,7 +56,10 @@ class HorizontalGroupedStrategy {
   }
 
   getWorkSpaceMinWidth() {
-    return getBoundingRect(this._workSpace.$element().get(0)).width - this._workSpace.getTimePanelWidth();
+    const workSpaceElementWidth = getBoundingRect(this._workSpace.$element().get(0)).width;
+    return workSpaceElementWidth
+      - this._workSpace.getTimePanelWidth()
+      - 2 * WORK_SPACE_BORDER_PX;
   }
 
   getAllDayOffset() {

packages/devextreme/js/__internal/scheduler/workspaces/m_work_space_grouped_strategy_vertical.ts

@@ -1,11 +1,10 @@
 import { getBoundingRect } from '@js/core/utils/position';
 import { calculateDayDuration, getVerticalGroupCountClass } from '@ts/scheduler/r1/utils/index';
+import { WORK_SPACE_BORDER_PX } from '@ts/scheduler/workspaces/const';
 
 import { FIRST_GROUP_CELL_CLASS, LAST_GROUP_CELL_CLASS } from '../m_classes';
 import { Cache } from './m_cache';
 
-const WORK_SPACE_BORDER = 1;
-
 class VerticalGroupedStrategy {
   cache = new Cache();
 
@@ -59,7 +58,11 @@ class VerticalGroupedStrategy {
 
   getWorkSpaceMinWidth() {
     let minWidth = this._workSpace._getWorkSpaceWidth();
-    const workspaceContainerWidth = getBoundingRect(this._workSpace.$element().get(0)).width - this._workSpace.getTimePanelWidth() - this._workSpace.getGroupTableWidth() - 2 * WORK_SPACE_BORDER;
+    const workSpaceElementWidth = getBoundingRect(this._workSpace.$element().get(0)).width;
+    const workspaceContainerWidth = workSpaceElementWidth
+      - this._workSpace.getTimePanelWidth()
+      - this._workSpace.getGroupTableWidth()
+      - 2 * WORK_SPACE_BORDER_PX;
 
     if (minWidth < workspaceContainerWidth) {
       minWidth = workspaceContainerWidth;

packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointments.crossScrollingEnabled.tests.js

@@ -130,11 +130,14 @@ module('crossScrollingEnabled = true', config, () => {
             crossScrollingEnabled: true
         });
 
-        const appointmentsInstance = scheduler.instance.getAppointmentsInstance();
-        const items = appointmentsInstance.option('items');
+        const $apptBeforeRepaint = scheduler.appointments.getAppointment();
+        $apptBeforeRepaint.attr('test', 'true');
 
         scheduler.option('crossScrollingEnabled', false);
-        assert.notDeepEqual(appointmentsInstance.option('items'), items, 'Appointments are repainted');
+
+        const $apptAfterRepaint = scheduler.appointments.getAppointment();
+        const customTestAttr = $apptAfterRepaint.attr('test');
+        assert.equal(customTestAttr, undefined, 'Appointments are repainted');
     });
 
     if(!isMobile) {

packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.resources.tests.js

@@ -609,43 +609,4 @@ if(devices.real().deviceType === 'desktop') {
             $('#qunit-fixture').css({ top: '-10000px', left: '-10000px' });
         }
     };
-
-    QUnit.module('Integration: Multiple resources', desktopModuleConfig, () => {
-        const SCHEDULER_HORIZONTAL_SCROLLBAR = '.dx-scheduler-date-table-scrollable .dx-scrollbar-horizontal';
-
-        QUnit.test('Scheduler with multiple resources and fixed height container has visible horizontal scrollbar (T716993)', function(assert) {
-            const getData = function(count) {
-                const result = [];
-                for(let i = 0; i < count; i++) {
-                    result.push({
-                        facilityId: i,
-                        facilityName: i.toString(),
-                    });
-                }
-                return result;
-            };
-
-            const scheduler = createWrapper({
-                groups: ['facilityId'],
-                crossScrollingEnabled: true,
-                dataSource: [],
-                resources: [{
-                    dataSource: getData(10),
-                    displayExpr: 'facilityName',
-                    valueExpr: 'facilityId',
-                    fieldExpr: 'facilityId',
-                    allowMultiple: false,
-                }]
-            });
-
-            const scrollbar = $(scheduler.instance.$element()).find(SCHEDULER_HORIZONTAL_SCROLLBAR);
-
-            assert.roughEqual(
-                scrollbar.offset().top + scrollbar.outerHeight(),
-                getOuterHeight(scheduler.instance.$element()) - 1,
-                1,
-                'Horizontal scrollbar has visible top coordinate',
-            );
-        });
-    });
 }

packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/virtual_scrolling.integration.tests.js

@@ -1499,7 +1499,7 @@ module('Virtual scrolling integration', () => {
                                     height: 450
                                 }, {
                                     groupIndex: 1,
-                                    left: 525,
+                                    left: 523,
                                     top: 100,
                                     height: 450
                                 }],
@@ -1526,7 +1526,7 @@ module('Virtual scrolling integration', () => {
                                     height: 300
                                 }, {
                                     groupIndex: 1,
-                                    left: 525,
+                                    left: 523,
                                     top: 250,
                                     height: 300
                                 }],
@@ -1547,7 +1547,7 @@ module('Virtual scrolling integration', () => {
                                     height: 400
                                 }, {
                                     groupIndex: 1,
-                                    left: 525,
+                                    left: 523,
                                     top: 900,
                                     height: 400
                                 }]
@@ -1574,7 +1574,7 @@ module('Virtual scrolling integration', () => {
                                     height: 650
                                 }, {
                                     groupIndex: 1,
-                                    left: 525,
+                                    left: 523,
                                     top: 900,
                                     height: 650
                                 }]]
@@ -1599,7 +1599,7 @@ module('Virtual scrolling integration', () => {
                                     height: 300
                                 }, {
                                     groupIndex: 1,
-                                    left: 525,
+                                    left: 523,
                                     top: 250,
                                     height: 300
                                 }],
@@ -1620,7 +1620,7 @@ module('Virtual scrolling integration', () => {
                                     height: 400
                                 }, {
                                     groupIndex: 1,
-                                    left: 525,
+                                    left: 523,
                                     top: 900,
                                     height: 400
                                 }]

packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.base.tests.js

@@ -92,10 +92,10 @@ module('Work Space Base', {
                     this.instance.option('crossScrollingEnabled', true);
 
                     this.instance.option('width', 400);
-                    assert.equal(this.instance.getWorkSpaceMinWidth(), 300, 'minWidth is ok');
+                    assert.equal(this.instance.getWorkSpaceMinWidth(), 298, 'minWidth is ok');
 
                     this.instance.option('width', 900);
-                    assert.equal(this.instance.getWorkSpaceMinWidth(), 800, 'minWidth is ok');
+                    assert.equal(this.instance.getWorkSpaceMinWidth(), 798, 'minWidth is ok');
                 });
             }
 

packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpaceWithHorizontalScroll.tests.js

@@ -168,7 +168,8 @@ QUnit.module('Vertical Workspace with horizontal scrollbar', {
         const headerPanelWidth = getOuterWidth($element.find('.dx-scheduler-header-panel'));
         const allDayTableWidth = getOuterWidth($element.find('.dx-scheduler-all-day-table'));
         const dateTableWidth = getOuterWidth($element.find('.dx-scheduler-date-table'));
-        const expectedWidth = 1000 - this.instance.getTimePanelWidth();
+        const workspaceBordersWidth = 2;
+        const expectedWidth = 1000 - this.instance.getTimePanelWidth() - workspaceBordersWidth;
 
         assert.equal(headerPanelWidth, expectedWidth, 'Width is OK');
         assert.equal(allDayTableWidth, expectedWidth, 'Width is OK');

packages/testcafe-models/scheduler/index.ts

@@ -27,6 +27,7 @@ export const CLASS = {
   droppableCell: 'dx-scheduler-date-table-droppable-cell',
   dateTableRow: 'dx-scheduler-date-table-row',
   dateTableScrollable: 'dx-scheduler-date-table-scrollable',
+  dateTableScrollableContainer: 'dx-scrollable-container',
   headerScrollable: 'dx-scheduler-header-scrollable',
   scrollableContainer: 'dx-scrollable-container',
   workspaceBothScrollbar: 'dx-scheduler-work-space-both-scrollbar',
@@ -62,6 +63,8 @@ export default class Scheduler extends Widget {
 
   readonly dateTableScrollable: Selector;
 
+  readonly dateTableScrollableContainer: Selector;
+
   readonly headerPanel: HeaderPanel;
 
   readonly groupRow: GroupRow;
@@ -97,6 +100,7 @@ export default class Scheduler extends Widget {
     this.dateTable = this.element.find(`.${CLASS.dateTable}`);
     this.dateTableRows = this.element.find(`.${CLASS.dateTableRow}`);
     this.dateTableScrollable = this.element.find(`.${CLASS.dateTableScrollable}`);
+    this.dateTableScrollableContainer = this.dateTableScrollable.find(`.${CLASS.dateTableScrollableContainer}`);
     this.workspaceScrollable = this.dateTableScrollable.find(`.${CLASS.scrollableContainer}`);
 
     const headerSpaceScroll = this.element.find(`.${CLASS.headerScrollable} .${CLASS.scrollableContainer}`);