DataGrid: fix Tab press handler in filter range (T1312521) (#32199)

Author: anna-shakhova

…n/filterRow/T1163100_changeFIlterIcon.ts …163100_changeFIlterIcon.visual_matrix.tse2e/testcafe-devextreme/tests/dataGrid/common/filterRow/T1163100_changeFIlterIcon.ts renamed to e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/T1163100_changeFIlterIcon.visual_matrix.ts e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/T1163100_changeFIlterIcon.ts renamed to e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/T1163100_changeFIlterIcon.visual_matrix.ts

@@ -1,10 +1,8 @@
-import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
 import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox';
 import url from '../../../../helpers/getPageUrl';
 import { createWidget } from '../../../../helpers/createWidget';
-import { getNumberData, getData } from '../../helpers/generateDataSourceData';
-import { testScreenshot } from '../../../../helpers/themeUtils';
+import { getData } from '../../helpers/generateDataSourceData';
 
 fixture`FilterRow`
   .page(url(__dirname, '../../../container.html'));
@@ -15,19 +13,19 @@ test('Filter should reset if the filter row editor text is cleared (T1257261)',
   const filterPanelText = dataGrid.getFilterPanel().getFilterText();
 
   await t
-    // assert
+  // assert
     .expect(filterPanelText.element.textContent)
     .eql('[Text] Equals \'i\'')
-    // act
+  // act
     .click(filterEditor.input)
     .pressKey('backspace')
     .wait(100) // updateValueTimeout
-    // assert
+  // assert
     .expect(filterPanelText.element.textContent)
     .eql('Create Filter')
-    // act
+  // act
     .click(dataGrid.element)
-    // assert
+  // assert
     .expect(filterPanelText.element.textContent)
     .eql('Create Filter');
 }).before(async () => createWidget('dxDataGrid', {
@@ -52,60 +50,6 @@ test('Filter should reset if the filter row editor text is cleared (T1257261)',
   },
 }));
 
-// visual: material.blue.light
-test('Filter row\'s height should be adjusted by content (T1072609)', async (t) => {
-  const dataGrid = new DataGrid('#container');
-  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-
-  await testScreenshot(t, takeScreenshot, 'T1072609.png', { element: dataGrid.element });
-  await t
-    .expect(compareResults.isValid())
-    .ok(compareResults.errorMessages());
-}).before(async () => createWidget('dxDataGrid', {
-  columns: [{
-    dataField: 'Date',
-    dataType: 'date',
-    width: 140,
-    selectedFilterOperation: 'between',
-    filterValue: [new Date(2022, 2, 28), new Date(2022, 2, 29)],
-  }],
-  filterRow: { visible: true },
-  wordWrapEnabled: true,
-  showBorders: true,
-}));
-
-test('FilterRow range overlay screenshot', async (t) => {
-  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-  const dataGrid = new DataGrid('#container');
-  const filterEditor = dataGrid.getFilterEditor(1, FilterTextBox);
-
-  await t
-    .click(filterEditor.menuButton);
-  await t
-    .click(filterEditor.menu.getItemByText('Between'));
-  // act
-  await testScreenshot(t, takeScreenshot, 'filter-row-overlay.png', { element: dataGrid.element });
-  await t
-    .expect(compareResults.isValid())
-    .ok()
-    // assert
-    .expect(dataGrid.getFilterRangeOverlay().exists)
-    .ok()
-    .expect(compareResults.isValid())
-    .ok(compareResults.errorMessages());
-}).before(async () => createWidget('dxDataGrid', {
-  dataSource: getNumberData(20, 2),
-  height: 400,
-  showBorders: true,
-  filterRow: {
-    visible: true,
-    applyFilter: 'auto',
-  },
-  scrolling: {
-    showScrollbar: 'never',
-  },
-}));
-
 // T1267481
 test('Filter Row\'s Reset button does not work after a custom filter is set in Filter Builder', async (t) => {
   const dataGrid = new DataGrid('#container');
@@ -157,35 +101,37 @@ test('Filter Row\'s Reset button does not work after a custom filter is set in F
   });
 });
 
-// T1287288
-// visual: fluent.blue.light
-test('Focus overlay should be visible in filter row when focusedRowEnabled is enabled', async (t) => {
-  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+// T1290381
+test('DataGrid - filter row\'s search-box\'s aria-label should be customizable via localization', async (t) => {
   const dataGrid = new DataGrid('#container');
-  const filterEditor = dataGrid.getFilterEditor(1, FilterTextBox);
+  const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox);
+
+  await dataGrid.isReady();
+
+  const ariaLabel = await filterEditor.menuButton.getAttribute('aria-label');
 
   await t
-    .click(dataGrid.getDataCell(0, 0).element)
-    .click(filterEditor.input)
-    // assert
-    .expect(filterEditor.input.focused)
-    .ok();
-  await testScreenshot(t, takeScreenshot, 'filter-row-focus-overlay.png', { element: dataGrid.element });
-  await t
-    .expect(compareResults.isValid())
-    .ok(compareResults.errorMessages());
-}).before(async () => createWidget('dxDataGrid', {
-  dataSource: [
-    { ID: 1, Field: 'Item 1' },
-    { ID: 2, Field: 'Item 2' },
-    { ID: 3, Field: 'Item 3' },
-  ],
-  keyExpr: 'ID',
-  focusedRowEnabled: true,
-  filterRow: { visible: true },
-  showBorders: true,
-  columns: ['ID', 'Field'],
-}));
+    .expect(ariaLabel)
+    .eql('custom text');
+}).before(async (t) => {
+  await t.eval(() => {
+    (window as any).DevExpress.localization.loadMessages({
+      en: {
+        'dxDataGrid-ariaSearchBox': 'custom text',
+      },
+    });
+  });
+
+  return createWidget('dxDataGrid', {
+    columns: [{
+      dataField: 'test',
+      dataType: 'string',
+    }],
+    filterRow: {
+      visible: true,
+    },
+  });
+});
 
 test('DataGrid - NVDA reads filter menu items as "Search box 1 of 8" (T1290386)', async (t) => {
   const dataGrid = new DataGrid('#container');
@@ -219,67 +165,68 @@ test('DataGrid - NVDA reads filter menu items as "Search box 1 of 8" (T1290386)'
   },
 }));
 
-test('DataGrid - The `between` filter dropdown sticks to the viewport edge during horizontal scrolling (T1280071)', async (t) => {
-  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-  const dataGrid = new DataGrid('#container');
-  const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox);
-
-  await dataGrid.isReady();
+// T1312521
+[true, false].forEach((grouped) => {
+  test('DataGrid - filter range overlay in last column on Tab pressed moves focus to next tabbable element (T1312521)', async (t) => {
+    const dataGrid = new DataGrid('#container');
+    const filterCell = dataGrid.getFilterCell(2);
+    const expectedFocusedElement = grouped ? dataGrid.getGroupRow(0) : dataGrid.getDataCell(0, 0);
+
+    await t
+      .click(filterCell)
+      .expect(dataGrid.getFilterRangeOverlay().exists)
+      .ok('Filter range overlay is shown')
+      .pressKey('tab')
+      .pressKey('tab')
+      .expect(dataGrid.getFilterRangeOverlay().exists)
+      .notOk('Filter range overlay is closed')
+      .expect(expectedFocusedElement.isFocused)
+      .ok('First cell of first row is focused');
+  }).before(async () => createWidget('dxDataGrid', {
+    dataSource: [
+      { Group: 'group1', Value: 'field1', Range: 10 },
+      { Group: 'group1', Value: 'field2', Range: 20 },
+      { Group: 'group2', Value: 'field3', Range: 30 },
+      { Group: 'group2', Value: 'field4', Range: 40 },
+    ],
+    filterRow: { visible: true },
+    columns: [
+      {
+        dataField: 'Group',
+        groupIndex: grouped ? 0 : undefined,
+      },
+      'Value',
+      {
+        dataField: 'Range',
+        selectedFilterOperation: 'between',
+      },
+    ],
+  }));
+});
 
-  await t
-    .click(filterEditor.menuButton)
-    .click(filterEditor.menu.getItemByText('Between'));
+test('DataGrid - filter range overlay in last column on Tab pressed moves focus to next tabbable element with empty data (T1312521)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const filterCell = dataGrid.getFilterCell(2);
 
-  await dataGrid.scrollBy(t, { x: 999 });
-  await testScreenshot(t, takeScreenshot, 'filter-row-filter-range-hide-on-scroll.png');
   await t
-    .expect(compareResults.isValid())
-    .ok(compareResults.errorMessages());
+    .click(filterCell)
+    .expect(dataGrid.getFilterRangeOverlay().exists)
+    .ok('Filter range overlay is shown')
+    .pressKey('tab')
+    .pressKey('tab')
+    .expect(dataGrid.getFilterRangeOverlay().exists)
+    .notOk('Filter range overlay is closed')
+    .expect(dataGrid.getRowsView().focused)
+    .ok('Empty rows view is focused');
 }).before(async () => createWidget('dxDataGrid', {
-  dataSource: [
-    { ID: 1, Text: 'Item 1' },
-    { ID: 2, Text: '' },
-    { ID: 3, Text: 'Item 3' },
+  dataSource: [],
+  filterRow: { visible: true },
+  columns: [
+    'Group',
+    'Value',
+    {
+      dataField: 'Range',
+      selectedFilterOperation: 'between',
+    },
   ],
-  keyExpr: 'ID',
-  filterRow: {
-    visible: true,
-  },
-  scrolling: {
-    useNative: true,
-  },
-  columnWidth: 400,
-  width: 500,
 }));
-
-// T1290381
-test('DataGrid - filter row\'s search-box\'s aria-label should be customizable via localization', async (t) => {
-  const dataGrid = new DataGrid('#container');
-  const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox);
-
-  await dataGrid.isReady();
-
-  const ariaLabel = await filterEditor.menuButton.getAttribute('aria-label');
-
-  await t
-    .expect(ariaLabel)
-    .eql('custom text');
-}).before(async (t) => {
-  await t.eval(() => {
-    (window as any).DevExpress.localization.loadMessages({
-      en: {
-        'dxDataGrid-ariaSearchBox': 'custom text',
-      },
-    });
-  });
-
-  return createWidget('dxDataGrid', {
-    columns: [{
-      dataField: 'test',
-      dataType: 'string',
-    }],
-    filterRow: {
-      visible: true,
-    },
-  });
-});