fix nested option changes in scheduler toolbar (DevExpress#29401)

Co-authored-by: Vladimir Bushmanov <vladimir.bushmanov@devexpress.com>

Author: Ambrozy

e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-changed-2.png

@@ -0,0 +1,81 @@
+import { compareScreenshot, createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import Scheduler from 'devextreme-testcafe-models/scheduler';
+import { ClientFunction } from 'testcafe';
+import { createWidget } from '../../../../helpers/createWidget';
+import url from '../../../../helpers/getPageUrl';
+
+fixture.disablePageReloads`Scheduler: Toolbar options change`
+  .page(url(__dirname, '../../../container.html'));
+
+const createScheduler = async () => createWidget('dxScheduler', {
+  views: ['day'],
+  currentView: 'day',
+  currentDate: new Date(2021, 3, 27),
+  height: 200,
+  width: 500,
+});
+const buttons = Array.from({ length: 7 }).map((_, index) => ({
+  location: 'before',
+  locateInMenu: 'auto',
+  widget: 'dxButton',
+  options: { text: `Button ${index}` },
+}));
+const updateOption = ClientFunction((name, value) => {
+  ($('#container') as any).dxScheduler('instance').option(name, value);
+});
+
+test('Scheduler should change toolbar item location', async (t) => {
+  const scheduler = new Scheduler('#container');
+
+  await updateOption('toolbar.items[0].location', 'after');
+  await t.expect(
+    await compareScreenshot(t, 'scheduler-toolbar-location-changed.png', scheduler.toolbar.element),
+  ).ok();
+}).before(createScheduler);
+
+test('Scheduler should change toolbar', async (t) => {
+  const scheduler = new Scheduler('#container');
+
+  await updateOption('toolbar', { items: [{ template: 'Custom text' }] });
+  await t.expect(
+    await compareScreenshot(t, 'scheduler-toolbar-changed.png', scheduler.toolbar.element),
+  ).ok();
+}).before(createScheduler);
+
+test('Scheduler should change toolbar items', async (t) => {
+  const scheduler = new Scheduler('#container');
+
+  await updateOption('toolbar.items', buttons);
+  await t.expect(
+    await compareScreenshot(t, 'scheduler-toolbar-items-changed.png', scheduler.toolbar.element),
+  ).ok();
+}).before(createScheduler);
+
+test('Scheduler should change toolbar item option', async (t) => {
+  const scheduler = new Scheduler('#container');
+
+  await updateOption('toolbar.items[0].options.text', 'Changed text');
+  await t.expect(
+    await compareScreenshot(t, 'scheduler-toolbar-item-option-changed.png', scheduler.toolbar.element),
+  ).ok();
+}).before(createScheduler);
+
+test('Scheduler should change toolbar options / integration', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const scheduler = new Scheduler('#container');
+
+  await updateOption('toolbar.items', buttons);
+  await updateOption('toolbar.multiline', true);
+  await t
+    .expect(await takeScreenshot('scheduler-toolbar-property-changed.png', scheduler.toolbar.element))
+    .ok();
+
+  await updateOption('toolbar', { multiline: false });
+  await t
+    .expect(await takeScreenshot('scheduler-toolbar-changed-2.png', scheduler.toolbar.element))
+    .ok();
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(createScheduler);

e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-changed.png

@@ -1,3 +1,4 @@
+import SelectBox from 'devextreme-testcafe-models/selectBox';
 import Scheduler from 'devextreme-testcafe-models/scheduler';
 import { createWidget } from '../../../../helpers/createWidget';
 import url from '../../../../helpers/getPageUrl';
@@ -31,3 +32,37 @@ test('it should correctly switch a differently typed views (T1080992)', async (t
     },
   ],
 }));
+
+const defaultSelectBoxValue = 'Samantha Bright';
+
+test('Changing view does not reset toolbar items state', async (t) => {
+  const scheduler = new Scheduler('#container');
+  const selectBox = new SelectBox('.dx-selectbox');
+
+  await selectBox.open();
+  const list = await selectBox.getList();
+  await t
+    .click(list.getItem(0).element)
+    .expect(selectBox.value)
+    .eql(defaultSelectBoxValue);
+
+  await t.click(scheduler.toolbar.viewSwitcher.getButton('Month').element)
+    .expect(scheduler.checkViewType('month'))
+    .ok();
+
+  await t.expect(selectBox.value).eql(defaultSelectBoxValue);
+}).before(async () => createWidget('dxScheduler', {
+  views: ['week', 'month'],
+  currentView: 'week',
+  currentDate: new Date(2021, 3, 27),
+  toolbar: {
+    items: [
+      {
+        location: 'before',
+        widget: 'dxSelectBox',
+        options: { items: [defaultSelectBoxValue] },
+      },
+      'viewSwitcher',
+    ],
+  },
+}));

e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-item-option-changed.png

@@ -5,6 +5,7 @@ import registerComponent from '@js/core/component_registrator';
 import devices from '@js/core/devices';
 import errors from '@js/core/errors';
 import $ from '@js/core/renderer';
+import { getPathParts } from '@js/core/utils/data';
 import dateUtils from '@js/core/utils/date';
 import { extend } from '@js/core/utils/extend';
 import type { dxSchedulerOptions, ViewType } from '@js/ui/scheduler';
@@ -44,7 +45,7 @@ export class SchedulerHeader extends Widget<dxSchedulerOptions> {
 
   eventMap: any;
 
-  _toolbar: any;
+  _toolbar!: Toolbar;
 
   _calendar: any;
 
@@ -83,7 +84,6 @@ export class SchedulerHeader extends Widget<dxSchedulerOptions> {
             this.option('views') as ViewType[],
           );
         }]],
-        ['toolbar', [this.repaint.bind(this)]],
         ['views', [validateViews]],
         ['currentDate', [this._getCalendarOptionUpdater('value')]],
         ['min', [this._getCalendarOptionUpdater('min')]],
@@ -115,6 +115,32 @@ export class SchedulerHeader extends Widget<dxSchedulerOptions> {
     }
   }
 
+  onToolbarOptionChanged(fullName: string, value: unknown): void {
+    const parts = getPathParts(fullName);
+    const optionName = fullName.replace(/^toolbar\./, '');
+
+    this.option(fullName, value);
+    switch (true) {
+      case fullName === 'toolbar':
+        this.repaint();
+        break;
+      case fullName === 'toolbar.items':
+        this._toolbar.option(
+          'items',
+          (value as []).map((item) => this._parseItem(item)),
+        );
+        break;
+      case parts[1] === 'items' && parts.length === 3:
+        // `toolbar.items[i]` case
+        this._toolbar.option(optionName, this._parseItem(value));
+        break;
+      default:
+        // `toolbar.prop` case
+        // `toolbar.items[i].prop` case
+        this._toolbar.option(optionName, value);
+    }
+  }
+
   _init() {
     // @ts-expect-error
     super._init();
@@ -175,7 +201,7 @@ export class SchedulerHeader extends Widget<dxSchedulerOptions> {
       }
     }
 
-    return item;
+    return extend(true, {}, item);
   }
 
   _callEvent(event, arg) {

e2e/testcafe-devextreme/tests/scheduler/common/header/etalons/scheduler-toolbar-items-changed.png

@@ -82,12 +82,9 @@ export const getDropDownViewSwitcher = (header: SchedulerHeader, item) => {
         const viewSwitcher = e.component;
 
         header._addEvent('currentView', (view) => {
-          const views = formatViews(header.views);
-
-          if (isOneView(views, view)) {
-            header.repaint();
-          }
+          const currentViews = formatViews(header.views);
 
+          viewSwitcher.option('showArrowIcon', !isOneView(currentViews, view));
           viewSwitcher.option('selectedItemKey', getViewName(view));
         });
       },