Gantt: fix state of 'Show Resources' and 'Show Dependencies' buttons …

…(T1264485) (#28904)

.github/workflows/testcafe_tests.yml

@@ -149,6 +149,7 @@ jobs:
           { componentFolder: "pagination", name: "pagination" },
           { componentFolder: "pagination", name: "pagination - material", theme: 'material.blue.light' },
           { componentFolder: "pagination", name: "pagination - fluent", theme: 'fluent.blue.light' },
+          { componentFolder: "gantt", name: "gantt" },
         ]
     runs-on: devextreme-shr2
     timeout-minutes: 90

e2e/testcafe-devextreme/tests/container.html

@@ -16,9 +16,11 @@
     <link rel="dx-theme" data-theme="fluent.saas.light" href="../../../packages/devextreme/artifacts/css/dx.fluent.saas.light.css" data-active="false">
     <link rel="dx-theme" data-theme="fluent.saas.dark" href="../../../packages/devextreme/artifacts/css/dx.fluent.saas.dark.css" data-active="false">
     <link rel="dx-theme" data-theme="generic.greenmist" href="../../../packages/devextreme/artifacts/css/dx.greenmist.css" data-active="false">
+    <link rel="stylesheet" href="../../../packages/devextreme/artifacts/css/dx-gantt.min.css" />
 
     <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/jquery.min.js"></script>
     <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx-quill.min.js"></script>
+    <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx-gantt.min.js"></script>
     <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx.all.js"></script>
     <script type="text/javascript" src="https://unpkg.com/devextreme-aspnet-data@2.8.2/js/dx.aspnet.data.js"></script>
     <script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>

e2e/testcafe-devextreme/tests/gantt/common.ts

@@ -0,0 +1,159 @@
+/* eslint-disable no-restricted-syntax */
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import Guid from 'devextreme/core/guid';
+import { Selector } from 'testcafe';
+import { testScreenshot } from '../../helpers/themeUtils';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+import { appendElementTo } from '../../helpers/domUtils';
+
+const TOOLBAR_ITEM_BUTTON = '.dx-button';
+
+fixture.disablePageReloads`Gantt`
+  .page(url(__dirname, '../container.html'));
+
+const data = {
+  tasks: [{
+    id: 1,
+    parentId: 0,
+    title: 'Software Development',
+    start: new Date('2019-02-21T05:00:00.000Z'),
+    end: new Date('2019-07-04T12:00:00.000Z'),
+    progress: 31,
+    color: 'red',
+  }, {
+    id: 2,
+    parentId: 1,
+    title: 'Scope',
+    start: new Date('2019-02-21T05:00:00.000Z'),
+    end: new Date('2019-02-26T09:00:00.000Z'),
+    progress: 60,
+  }, {
+    id: 3,
+    parentId: 2,
+    title: 'Determine project scope',
+    start: new Date('2019-02-21T05:00:00.000Z'),
+    end: new Date('2019-02-21T09:00:00.000Z'),
+    progress: 100,
+  }, {
+    id: 4,
+    parentId: 2,
+    title: 'Secure project sponsorship',
+    start: new Date('2019-02-21T10:00:00.000Z'),
+    end: new Date('2019-02-22T09:00:00.000Z'),
+    progress: 100,
+  }, {
+    id: 5,
+    parentId: 2,
+    title: 'Define preliminary resources',
+    start: new Date('2019-02-22T10:00:00.000Z'),
+    end: new Date('2019-02-25T09:00:00.000Z'),
+    progress: 60,
+  }, {
+    id: 6,
+    parentId: 2,
+    title: 'Secure core resources',
+    start: new Date('2019-02-25T10:00:00.000Z'),
+    end: new Date('2019-02-26T09:00:00.000Z'),
+    progress: 0,
+  }, {
+    id: 7,
+    parentId: 2,
+    title: 'Scope complete',
+    start: new Date('2019-02-26T09:00:00.000Z'),
+    end: new Date('2019-02-26T09:00:00.000Z'),
+    progress: 0,
+  }],
+
+  dependencies: [{
+    id: 0,
+    predecessorId: 1,
+    successorId: 2,
+    type: 0,
+  }, {
+    id: 1,
+    predecessorId: 2,
+    successorId: 3,
+    type: 0,
+  }, {
+    id: 2,
+    predecessorId: 3,
+    successorId: 4,
+    type: 0,
+  }, {
+    id: 3,
+    predecessorId: 4,
+    successorId: 5,
+    type: 0,
+  }, {
+    id: 4,
+    predecessorId: 5,
+    successorId: 6,
+    type: 0,
+  }, {
+    id: 5,
+    predecessorId: 6,
+    successorId: 7,
+    type: 0,
+  }],
+
+  resources: [{
+    id: 1, text: 'Management',
+  }, {
+    id: 2, text: 'Project Manager',
+  }, {
+    id: 3, text: 'Deployment Team',
+  }],
+
+  resourceAssignments: [{
+    id: 0, taskId: 3, resourceId: 1,
+  }, {
+    id: 1, taskId: 4, resourceId: 1,
+  }, {
+    id: 2, taskId: 5, resourceId: 2,
+  }, {
+    id: 3, taskId: 6, resourceId: 2,
+  }, {
+    id: 4, taskId: 6, resourceId: 3,
+  }],
+};
+
+test('Gantt - show resources button should not have focus state (T1264485)', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  await t
+    .click(Selector(TOOLBAR_ITEM_BUTTON));
+  await testScreenshot(t, takeScreenshot, 'Gantt show resourced.png', { element: '#container' });
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  const id = `${new Guid()}`;
+  await appendElementTo('#container', 'div', id, {});
+  await createWidget('dxGantt', {
+    tasks: { dataSource: data.tasks },
+    toolbar: { items: ['showResources'] },
+    dependencies: { dataSource: data.dependencies },
+    resources: { dataSource: data.resources },
+    resourceAssignments: { dataSource: data.resourceAssignments },
+  }, `#${id}`);
+});
+
+test('Gantt - show dependencies button should not have focus state (T1264485)', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  await t
+    .click(Selector(TOOLBAR_ITEM_BUTTON));
+  await testScreenshot(t, takeScreenshot, 'Gantt show dependencies.png', { element: '#container' });
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  const id = `${new Guid()}`;
+  await appendElementTo('#container', 'div', id, {});
+  await createWidget('dxGantt', {
+    tasks: { dataSource: data.tasks },
+    toolbar: { items: ['showDependencies'] },
+    dependencies: { dataSource: data.dependencies },
+    resources: { dataSource: data.resources },
+    resourceAssignments: { dataSource: data.resourceAssignments },
+  }, `#${id}`);
+});

packages/devextreme/js/ui/gantt/ui.gantt.bars.js

@@ -144,25 +144,12 @@ export class GanttToolbar extends Bar {
             onItemClick: (e) => {
                 const commandId = e.itemData.commandId;
                 if(commandId !== undefined) {
-                    this._executeCommand(e.itemData.commandId);
+                    this._owner._executeCoreCommand(commandId);
                 }
             }
         });
     }
 
-    _executeCommand(commandId) {
-        switch(commandId) {
-            case COMMANDS.toggleResources:
-                this._owner.option('showResources', !this._owner.option('showResources'));
-                break;
-            case COMMANDS.toggleDependencies:
-                this._owner.option('showDependencies', !this._owner.option('showDependencies'));
-                break;
-            default:
-                this._owner._executeCoreCommand(commandId);
-        }
-    }
-
     _createDefaultItem(commandId, hint, icon) {
         return {
             commandId: commandId,

packages/testcafe-models/types.ts

@@ -1,5 +1,6 @@
 import type { Properties as DataGridProperties } from 'devextreme/ui/data_grid';
 import type { Properties as FilterBuilderProperties } from 'devextreme/ui/filter_builder';
+import type { Properties as GanttProperties } from 'devextreme/ui/gantt';
 
 export type WidgetName =
   'dxAccordion'
@@ -66,10 +67,12 @@ export type WidgetName =
   | 'dxTreeList'
   | 'dxTreeView'
   | 'dxValidationSummary'
-  | 'dxValidator';
+  | 'dxValidator'
+  | 'dxGantt';
 
 export interface WidgetOptions {
   dxDataGrid: DataGridProperties;
   dxFilterBuilder: FilterBuilderProperties;
+  dxGantt: GanttProperties;
   // TODO: write other widgets
 }