Scheduler - Dropdown view switcher should be invisible if view is an empty array

e2e/testcafe-devextreme/tests/scheduler/common/header/header_material.ts

@@ -78,34 +78,8 @@ test('The toolbar should not display if the config is empty', async (t) => {
   return createWidget('dxScheduler', {
     currentDate: new Date(2020, 2, 2),
     currentView: 'day',
-    views: ['day'],
+    views: ['day', 'week'],
     height: 580,
     toolbar: { items: [] },
   });
 });
-
-test('The viewSwitcher should not drop down if only one view', async (t) => {
-  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-
-  const { toolbar } = new Scheduler('#container');
-  const dropDownButton = toolbar.viewSwitcher.getDropDownButton();
-
-  await t
-    .click(dropDownButton.element)
-
-    .expect(await takeScreenshot('drop-down-with-one-view.png', toolbar.element))
-    .ok()
-
-    .expect(compareResults.isValid())
-    .ok(compareResults.errorMessages());
-}).before(async () => {
-  await changeTheme('material.blue.light');
-
-  return createWidget('dxScheduler', {
-    currentDate: new Date(2020, 2, 2),
-    currentView: 'day',
-    views: ['day'],
-    useDropDownViewSwitcher: true,
-    height: 580,
-  });
-});

e2e/testcafe-devextreme/tests/scheduler/common/header/toolbar_option_change.ts

@@ -7,7 +7,7 @@ fixture.disablePageReloads`Scheduler: Toolbar options change`
   .page(url(__dirname, '../../../container.html'));
 
 const createScheduler = async () => createWidget('dxScheduler', {
-  views: ['day'],
+  views: ['day', 'week'],
   currentView: 'day',
   currentDate: new Date(2021, 3, 27),
   height: 200,

e2e/testcafe-devextreme/tests/scheduler/common/header/viewSwitcher.ts

@@ -1,4 +1,5 @@
 import SelectBox from 'devextreme-testcafe-models/selectBox';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import Scheduler from 'devextreme-testcafe-models/scheduler';
 import { createWidget } from '../../../../helpers/createWidget';
 import url from '../../../../helpers/getPageUrl';
@@ -66,3 +67,24 @@ test('Changing view does not reset toolbar items state', async (t) => {
     ],
   },
 }));
+
+[true, false].forEach((useDropDownViewSwitcher) => {
+  test(`view switcher should not be displayed if views has only one element when useDropDownViewSwitcher: ${useDropDownViewSwitcher}`, async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+    const { toolbar } = new Scheduler('#container');
+
+    await t
+      .expect(await takeScreenshot(`toolbar-without-view-switcher-(useDropDownViewSwitcher=${useDropDownViewSwitcher}).png`, toolbar.element))
+      .ok()
+
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).before(async () => createWidget('dxScheduler', {
+    currentDate: new Date(2020, 2, 2),
+    currentView: 'day',
+    views: ['day'],
+    useDropDownViewSwitcher,
+    height: 580,
+  }));
+});

e2e/testcafe-devextreme/tests/scheduler/common/layout/resources/base/generic.ts

@@ -39,7 +39,7 @@ const resources = [{
     test(`Base views layout test in generic theme with resources(view='${view})', resource=${!!resourcesValue}`, async (t) => {
       const scheduler = new Scheduler('#container');
 
-      await t.click(scheduler.toolbar.viewSwitcher.element);
+      await t.click(scheduler.toolbar.element);
       await t.click(scheduler.getAppointment('1 appointment', 0).element);
       await t.expect(scheduler.appointmentTooltip.isVisible()).ok();
 
@@ -58,7 +58,7 @@ const resources = [{
        * their position and doesn't trigger hover effect. This is the reason for the instability
        * of the tests. The following operation ensures that the mouse position is changed.
        */
-      await t.click(scheduler.toolbar.viewSwitcher.element);
+      await t.click(scheduler.toolbar.element);
       await t.click(scheduler.getAppointment('1 appointment', 0).element);
       await t.expect(scheduler.appointmentTooltip.isVisible()).ok();
 

packages/devextreme/js/__internal/scheduler/header/m_utils.ts

@@ -327,8 +327,3 @@ const STEP_MAP: Record<ViewType, Step> = {
 export const getStep = (type: ViewType): Step => STEP_MAP[type];
 
 export const getViewName = (view: NormalizedView): string | undefined => view.name ?? view.type;
-
-export const isOneView = (
-  views: NormalizedView[],
-  selectedView?: string,
-): boolean => views.length === 1 && getViewName(views[0]) === selectedView;

packages/devextreme/js/__internal/scheduler/header/m_view_switcher.integration.test.ts

@@ -0,0 +1,88 @@
+import {
+  afterEach,
+  describe, expect, it,
+} from '@jest/globals';
+import type { dxElementWrapper } from '@js/core/renderer';
+import $ from '@js/core/renderer';
+
+import type { Properties as SchedulerProperties } from '../../../ui/scheduler';
+import Scheduler from '../../../ui/scheduler';
+
+const SCHEDULER_CONTAINER_ID = 'schedulerContainer';
+
+const SELECTORS = {
+  schedulerContainer: '#schedulerContainer',
+  invisibleState: '.dx-state-invisible',
+  viewSwitcher: '.dx-scheduler-view-switcher',
+};
+
+const createScheduler = (options: SchedulerProperties): Promise<{
+  $container: dxElementWrapper; instance: Scheduler;
+}> => new Promise((resolve) => {
+  const $container = $('<div>')
+    .attr('id', SCHEDULER_CONTAINER_ID)
+    .appendTo(document.body);
+
+  const instance = new Scheduler($container.get(0) as HTMLDivElement, {
+    ...options,
+    onContentReady: (): void => {
+      resolve({ $container, instance });
+    },
+  });
+});
+
+describe('ViewSwitcher', () => {
+  afterEach(() => {
+    const $container = $(SELECTORS.schedulerContainer);
+
+    const scheduler = ($container as any).dxScheduler('instance') as Scheduler;
+
+    scheduler.dispose();
+    $container.remove();
+  });
+
+  describe('Visibility', () => {
+    it.each(
+      [
+        {
+          useDropDownViewSwitcher: true, views: ['day'], currentView: 'day', expectedVisibility: false,
+        },
+        {
+          useDropDownViewSwitcher: true, views: ['day'], currentView: 'week', expectedVisibility: false,
+        },
+        {
+          useDropDownViewSwitcher: true, views: [], currentView: 'day', expectedVisibility: false,
+        },
+        {
+          useDropDownViewSwitcher: true, views: ['day', 'week'], currentView: 'day', expectedVisibility: true,
+        },
+        {
+          useDropDownViewSwitcher: false, views: ['day'], currentView: 'day', expectedVisibility: false,
+        },
+        {
+          useDropDownViewSwitcher: false, views: ['day'], currentView: 'week', expectedVisibility: false,
+        },
+        {
+          useDropDownViewSwitcher: false, views: [], currentView: 'day', expectedVisibility: false,
+        },
+        {
+          useDropDownViewSwitcher: false, views: ['day', 'week'], currentView: 'day', expectedVisibility: true,
+        },
+      ],
+    )(
+      'view switcher should be visible: $expectedVisibility, when useDropDownViewSwitcher: $useDropDownViewSwitcher views: $views, currentView: $currentView',
+      async ({
+        useDropDownViewSwitcher, views, currentView, expectedVisibility,
+      }) => {
+        const { $container } = await createScheduler({
+          useDropDownViewSwitcher,
+          currentView,
+          views: views as SchedulerProperties['views'],
+        });
+
+        const viewSwitcher = $container.find(SELECTORS.viewSwitcher);
+        expect(!viewSwitcher.is(SELECTORS.invisibleState)).toBe(expectedVisibility);
+      },
+    );
+  });
+});

packages/devextreme/js/__internal/scheduler/header/m_view_switcher.ts

@@ -5,7 +5,6 @@ import type { NormalizedView } from '../utils/options/types';
 import type { SchedulerHeader } from './m_header';
 import {
   getViewName,
-  isOneView,
 } from './m_utils';
 
 const ClASS = {
@@ -25,8 +24,11 @@ const getViewsAndSelectedView = (header: SchedulerHeader) => {
   };
 };
 
+const isViewSwitcherVisible = (views: NormalizedView[]): boolean => views.length > 1;
+
 export const getTabViewSwitcher = (header: SchedulerHeader, item): ToolbarItem => {
   const { selectedView, views } = getViewsAndSelectedView(header);
+  const isVisible = isViewSwitcherVisible(views);
 
   // @ts-expect-error
   const stylingMode = isFluent() ? 'outlined' : 'contained';
@@ -38,6 +40,7 @@ export const getTabViewSwitcher = (header: SchedulerHeader, item): ToolbarItem =
     location: 'after',
     name: 'viewSwitcher',
     cssClass: ClASS.container,
+    visible: isVisible,
     options: {
       items,
       keyExpr: 'name',
@@ -55,26 +58,27 @@ export const getTabViewSwitcher = (header: SchedulerHeader, item): ToolbarItem =
       },
     },
     ...item,
-  };
+  } as ToolbarItem;
 };
 
 export const getDropDownViewSwitcher = (header: SchedulerHeader, item): ToolbarItem => {
   const { selectedView, views } = getViewsAndSelectedView(header);
-  const isOnlyOneView = isOneView(views, selectedView);
+  const isVisible = isViewSwitcherVisible(views);
 
   return {
     widget: 'dxDropDownButton',
     locateInMenu: 'never',
     location: 'after',
     name: 'viewSwitcher',
     cssClass: ClASS.container,
+    visible: isVisible,
     options: {
       items: views,
       useSelectMode: true,
       keyExpr: 'name',
       selectedItemKey: selectedView,
       displayExpr: 'name',
-      showArrowIcon: !isOnlyOneView,
+      showArrowIcon: true,
       elementAttr: {
         class: ClASS.dropDownButton,
       },
@@ -85,22 +89,14 @@ export const getDropDownViewSwitcher = (header: SchedulerHeader, item): ToolbarI
         const viewSwitcher = e.component;
 
         header._addEvent('currentView', (view: NormalizedView) => {
-          const currentViews = header.option('views');
-
-          viewSwitcher.option('showArrowIcon', !isOneView(currentViews, view.name));
           viewSwitcher.option('selectedItemKey', getViewName(view));
         });
       },
       dropDownOptions: {
-        onShowing: (e) => {
-          if (isOnlyOneView) {
-            e.cancel = true;
-          }
-        },
         width: 'max-content',
         _wrapperClassExternal: ClASS.dropDownButtonContent,
       },
     },
     ...item,
-  };
+  } as ToolbarItem;
 };