Merge branch '25_1' into 25_1_ng_leak_click

Author: GoodDayForSurf

apps/demos/package.json

@@ -142,7 +142,7 @@
         "stylelint-config-recommended-vue": "1.5.0",
         "stylelint-config-standard": "35.0.0",
         "systemjs-builder": "0.16.15",
-        "testcafe": "2.6.2",
+        "testcafe": "3.7.2",
         "ts-node": "10.9.2",
         "vue-tsc": "^3.0.6"
     },

apps/demos/utils/visual-tests/testcafe-runner.ts

@@ -221,6 +221,7 @@ async function main() {
     .concurrency(concurrency || 1)
     .run({
       quarantineMode: process.env.TCQUARANTINE ? { successThreshold: 1, attemptLimit: 5 } : false,
+      disableNativeAutomation: true,
     });
 
   await tester.close();

e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/T1306971__scheduler__horizontal-scrolling__after.png

@@ -1,6 +1,8 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import Scheduler from 'devextreme-testcafe-models/scheduler';
 import { createWidget } from '../../../../helpers/createWidget';
 import url from '../../../../helpers/getPageUrl';
+import { insertStylesheetRulesToPage, removeStylesheetRulesFromPage } from '../../../../helpers/domUtils';
 
 fixture.disablePageReloads`Scheduler header`
   .page(url(__dirname, '../../../container.html'));
@@ -42,3 +44,144 @@ test('dateNavigator buttons should have "contained" styling mode with generic th
   views: ['day'],
   height: 580,
 }));
+
+const testData = [
+  {
+    text: 'Website Re-Design Plan',
+    startDate: new Date('2021-03-29T16:30:00.000Z'),
+    endDate: new Date('2021-03-29T18:30:00.000Z'),
+  }, {
+    text: 'Book Flights to San Fran for Sales Trip',
+    startDate: new Date('2021-03-29T19:00:00.000Z'),
+    endDate: new Date('2021-03-29T20:00:00.000Z'),
+    allDay: true,
+  }, {
+    text: 'Install New Router in Dev Room',
+    startDate: new Date('2021-03-29T21:30:00.000Z'),
+    endDate: new Date('2021-03-29T22:30:00.000Z'),
+  }, {
+    text: 'Approve Personal Computer Upgrade Plan',
+    startDate: new Date('2021-03-30T17:00:00.000Z'),
+    endDate: new Date('2021-03-30T18:00:00.000Z'),
+  }, {
+    text: 'Final Budget Review',
+    startDate: new Date('2021-03-30T19:00:00.000Z'),
+    endDate: new Date('2021-03-30T20:35:00.000Z'),
+  }, {
+    text: 'New Brochures',
+    startDate: new Date('2021-03-30T21:30:00.000Z'),
+    endDate: new Date('2021-03-30T22:45:00.000Z'),
+  }, {
+    text: 'Install New Database',
+    startDate: new Date('2021-03-31T16:45:00.000Z'),
+    endDate: new Date('2021-03-31T18:15:00.000Z'),
+  }, {
+    text: 'Approve New Online Marketing Strategy',
+    startDate: new Date('2021-03-31T19:00:00.000Z'),
+    endDate: new Date('2021-03-31T21:00:00.000Z'),
+  }, {
+    text: 'Upgrade Personal Computers',
+    startDate: new Date('2021-03-31T22:15:00.000Z'),
+    endDate: new Date('2021-03-31T23:30:00.000Z'),
+  }, {
+    text: 'Customer Workshop',
+    startDate: new Date('2021-04-01T18:00:00.000Z'),
+    endDate: new Date('2021-04-01T19:00:00.000Z'),
+    allDay: true,
+  }, {
+    text: 'Prepare 2021 Marketing Plan',
+    startDate: new Date('2021-04-01T18:00:00.000Z'),
+    endDate: new Date('2021-04-01T20:30:00.000Z'),
+  }, {
+    text: 'Brochure Design Review',
+    startDate: new Date('2021-04-01T21:00:00.000Z'),
+    endDate: new Date('2021-04-01T22:30:00.000Z'),
+  }, {
+    text: 'Create Icons for Website',
+    startDate: new Date('2021-04-02T17:00:00.000Z'),
+    endDate: new Date('2021-04-02T18:30:00.000Z'),
+  }, {
+    text: 'Upgrade Server Hardware',
+    startDate: new Date('2021-04-02T21:30:00.000Z'),
+    endDate: new Date('2021-04-02T23:00:00.000Z'),
+  }, {
+    text: 'Submit New Website Design',
+    startDate: new Date('2021-04-02T23:30:00.000Z'),
+    endDate: new Date('2021-04-03T01:00:00.000Z'),
+  }, {
+    text: 'Launch New Website',
+    startDate: new Date('2021-04-02T19:20:00.000Z'),
+    endDate: new Date('2021-04-02T21:00:00.000Z'),
+  },
+];
+
+const SCROLLBAR_STYLES = `
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+      width: 7px;
+    }
+    ::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      background-color: rgba(0, 0, 0, .5);
+      -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
+    }
+    .dx-scheduler-date-table-scrollable .dx-scrollable-container {
+      overflow: scroll !important;
+    }
+`;
+
+test('Scheduler: maintain layout after horizontal scroll (T1306971)', async (t) => {
+  const {
+    takeScreenshot,
+    compareResults,
+  } = createScreenshotsComparer(t);
+  const scheduler = new Scheduler('#container');
+
+  await insertStylesheetRulesToPage(SCROLLBAR_STYLES);
+
+  await t.wait(100);
+
+  await scheduler.repaint();
+
+  await t.wait(100);
+
+  await t.expect(
+    await takeScreenshot('T1306971__scheduler__horizontal-scrolling__before.png', scheduler.element),
+  ).ok();
+
+  const container = scheduler.dateTableScrollableContainer;
+  const scrollWidth = await container.scrollWidth;
+  const clientWidth = await container.clientWidth;
+  const maxScrollLeft = scrollWidth - clientWidth;
+
+  await t.scroll(scheduler.workspaceScrollable, maxScrollLeft, 0);
+
+  const finalScrollLeft = await container.scrollLeft;
+
+  await t
+    .expect(maxScrollLeft).gt(0, 'No horizontal scroll available')
+    .expect(finalScrollLeft).gt(0, 'Scroll position should be greater than 0');
+
+  await t.wait(500);
+
+  await t.expect(
+    await takeScreenshot('T1306971__scheduler__horizontal-scrolling__after.png', scheduler.element),
+  ).ok();
+
+  await t.expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxScheduler', {
+    timeZone: 'America/Los_Angeles',
+    dataSource: testData,
+    views: ['week'],
+    currentView: 'week',
+    currentDate: new Date(2021, 2, 28),
+    startDayHour: 9,
+    height: 730,
+    crossScrollingEnabled: true,
+    width: 500,
+  });
+}).after(async () => {
+  await removeStylesheetRulesFromPage();
+});

e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/T1306971__scheduler__horizontal-scrolling__before.png

@@ -29,7 +29,6 @@ import {
 import { isDefined } from '@js/core/utils/type';
 import { getWindow, hasWindow } from '@js/core/utils/window';
 import type { dxSchedulerOptions } from '@js/ui/scheduler';
-import Scrollable from '@js/ui/scroll_view/ui.scrollable';
 import errors from '@js/ui/widget/ui.errors';
 import Widget from '@js/ui/widget/ui.widget';
 import { getMemoizeScrollTo } from '@ts/core/utils/scroll';
@@ -51,6 +50,7 @@ import {
   isDateAndTimeView,
 } from '@ts/scheduler/r1/utils/index';
 import type { SafeAppointment, ViewType } from '@ts/scheduler/types';
+import Scrollable from '@ts/ui/scroll_view/scrollable';
 
 import type NotifyScheduler from '../base/m_widget_notify_scheduler';
 import { APPOINTMENT_SETTINGS_KEY } from '../constants';
@@ -213,7 +213,7 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
 
   _cellsSelectionController: any;
 
-  _dateTableScrollable: any;
+  _dateTableScrollable!: Scrollable;
 
   _selectionChangedAction: any;
 
@@ -909,6 +909,19 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
     }
   }
 
+  updateHeaderPanelScrollbarPadding() {
+    if (hasWindow() && this._$headerPanelContainer) {
+      const scrollbarWidth = this._getScrollbarWidth();
+      this._$headerPanelContainer.css('paddingRight', `${scrollbarWidth}px`);
+    }
+  }
+
+  _getScrollbarWidth() {
+    const containerElement = $(this._dateTableScrollable.container()).get(0) as HTMLElement;
+    const scrollbarWidth = containerElement.offsetWidth - containerElement.clientWidth;
+    return scrollbarWidth;
+  }
+
   _isGroupsSpecified(groupValues?: GroupValues) {
     return this.option('groups')?.length && groupValues;
   }
@@ -1074,6 +1087,7 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
     this._dateTableScrollable.update();
     this._headerScrollable?.update();
     this._sidebarScrollable?.update();
+    this.updateHeaderPanelScrollbarPadding();
   }
 
   _getTimePanelRowCount() {