diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/T1163100_changeFIlterIcon.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/T1163100_changeFIlterIcon.visual_matrix.ts similarity index 100% rename from e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/T1163100_changeFIlterIcon.ts rename to e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/T1163100_changeFIlterIcon.visual_matrix.ts diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1072609 (material.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1072609 (material.blue.light).png new file mode 100644 index 000000000000..348086e36a95 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/etalons/T1072609 (material.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/filterRow.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/functional.ts similarity index 54% rename from e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/filterRow.ts rename to e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/functional.ts index 592dd8e9ff66..f448476837b2 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/filterRow.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/functional.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,60 @@ 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 firstCell = grouped ? dataGrid.getGroupRow(0) : dataGrid.getDataCell(0, 0); + + await t + .click(filterCell) + .pressKey('tab') + .pressKey('tab') + .expect(firstCell.isFocused) + .ok(); + }).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) + .pressKey('tab') + .pressKey('tab') + .expect(dataGrid.getRowsView().focused) + .ok(); }).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, - }, - }); -}); diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/visual.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/visual.ts new file mode 100644 index 000000000000..0c46a4adf9d9 --- /dev/null +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/visual.ts @@ -0,0 +1,127 @@ +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 } from '../../helpers/generateDataSourceData'; +import { testScreenshot } from '../../../../helpers/themeUtils'; + +fixture`FilterRow` + .page(url(__dirname, '../../../container.html')); + +test.meta({ + themes: ['material.blue.light'], +})('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', + }, +})); + +// T1287288 +test('Focus overlay should be visible in filter row when focusedRowEnabled is enabled', async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + const dataGrid = new DataGrid('#container'); + const filterEditor = dataGrid.getFilterEditor(1, FilterTextBox); + + 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'], +})); + +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(); + + await t + .click(filterEditor.menuButton) + .click(filterEditor.menu.getItemByText('Between')); + + 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()); +}).before(async () => createWidget('dxDataGrid', { + dataSource: [ + { ID: 1, Text: 'Item 1' }, + { ID: 2, Text: '' }, + { ID: 3, Text: 'Item 3' }, + ], + keyExpr: 'ID', + filterRow: { + visible: true, + }, + scrolling: { + useNative: true, + }, + columnWidth: 400, + width: 500, +})); diff --git a/packages/devextreme/js/__internal/grids/grid_core/filter/m_filter_row.ts b/packages/devextreme/js/__internal/grids/grid_core/filter/m_filter_row.ts index 14c26228c344..051bafb8ad1c 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/filter/m_filter_row.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/filter/m_filter_row.ts @@ -13,6 +13,7 @@ import Menu from '@js/ui/menu'; import Overlay from '@js/ui/overlay/ui.overlay'; import { selectView } from '@js/ui/shared/accessibility'; import type { ColumnsController } from '@ts/grids/grid_core/columns_controller/m_columns_controller'; +import type MenuInternal from '@ts/ui/menu/menu'; import type { ColumnHeadersView } from '../column_headers/m_column_headers'; import type { ColumnsResizerViewController } from '../columns_resizing_reordering/m_columns_resizing_reordering'; @@ -300,6 +301,7 @@ const columnHeadersView = (Base: ModuleType) => class ColumnH hideOnParentScroll: true, _hideOnParentScrollTarget: $overlay, wrapperAttr: { class: filterRangeOverlayClass }, + container: this.element(), animation: false, position: { my: 'top', @@ -337,10 +339,13 @@ const columnHeadersView = (Base: ModuleType) => class ColumnH that._renderEditor($editor, editorOptions); eventsEngine.on($editor.find(EDITORS_INPUT_SELECTOR), 'keydown', (e) => { if (normalizeKeyName(e) === 'tab' && !e.shiftKey) { - e.preventDefault(); that._hideFilterRange(); - // @ts-expect-error - eventsEngine.trigger($cell.next().find('[tabindex]').first(), 'focus'); + + if ($cell.next().length) { + e.preventDefault(); + // @ts-expect-error + eventsEngine.trigger($cell.next().find('[tabindex]').first(), 'focus'); + } } }); @@ -650,15 +655,11 @@ const columnHeadersView = (Base: ModuleType) => class ColumnH editorFactoryController.loseFocus(); }, onSubmenuHiding() { - // @ts-expect-error - eventsEngine.trigger($menu, 'blur'); restoreFocus(); }, onContentReady(e) { eventsEngine.on($menu, 'blur', () => { - const menu = e.component; - // @ts-expect-error - menu._hideSubmenuAfterTimeout(); + (e.component as unknown as MenuInternal)._hideSubmenuAfterTimeout(); restoreFocus(); }); }, diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/filterRow.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/filterRow.tests.js index fcb267a32f6a..b615aee7f2b0 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/filterRow.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/filterRow.tests.js @@ -1382,6 +1382,10 @@ QUnit.module('Filter Row with real dataController and columnsController', { return filterMenuItems.find('.dx-menu-item').eq(index); } + function getFilterRowOverlay() { + return $('.dx-datagrid-headers').children('.dx-datagrid-filter-range-overlay'); + } + // T104040 QUnit.test('Not apply filter when changed filter operation with empty filter value', function(assert) { // arrange @@ -1596,7 +1600,7 @@ QUnit.module('Filter Row with real dataController and columnsController', { // assert assert.equal($testElement.find('.dx-filter-range-content').length, 1, 'has filter range content'); - assert.equal($('.dx-viewport').children('.dx-datagrid-filter-range-overlay').length, 0, 'no overlay wrapper'); + assert.equal(getFilterRowOverlay().length, 0, 'no overlay wrapper'); }); QUnit.test('Overlay of between operation does not hide after scroll event', function(assert) { @@ -1625,14 +1629,14 @@ QUnit.module('Filter Row with real dataController and columnsController', { $('#qunit-fixture').find('.dx-menu-item:contains(\'Between\')').trigger('dxclick'); // select filter operation is 'between' // assert - assert.equal($('.dx-viewport').children('.dx-datagrid-filter-range-overlay').length, 1, 'has overlay wrapper'); + assert.equal(getFilterRowOverlay().length, 1, 'has overlay wrapper'); // arrange $('.dx-viewport').find('.dx-filter-range-content').trigger('scroll'); // assert // T1280071 - assert.equal($('.dx-viewport').children('.dx-datagrid-filter-range-overlay').length, 0, 'overlay wrapper is removed'); + assert.equal(getFilterRowOverlay().length, 0, 'overlay wrapper is removed'); }); // T428602 @@ -1659,7 +1663,7 @@ QUnit.module('Filter Row with real dataController and columnsController', { // assert assert.equal($testElement.find('.dx-filter-range-content').length, 1, 'has filter range content'); - assert.equal($('.dx-viewport').children('.dx-datagrid-filter-range-overlay').length, 1, 'has overlay wrapper'); + assert.equal(getFilterRowOverlay().length, 1, 'has overlay wrapper'); }); QUnit.test('Show filter range popup when column with selectedFilterOperation is \'isBetween\'', function(assert) { @@ -1682,8 +1686,8 @@ QUnit.module('Filter Row with real dataController and columnsController', { that.clock.tick(10); // assert - assert.equal($('.dx-viewport').children('.dx-datagrid-filter-range-overlay').length, 1, 'has overlay wrapper'); - assert.equal($('.dx-viewport').children('.dx-datagrid-filter-range-overlay').find('.dx-numberbox').length, 2, 'count number box'); + assert.equal(getFilterRowOverlay().length, 1, 'has overlay wrapper'); + assert.equal(getFilterRowOverlay().find('.dx-numberbox').length, 2, 'count number box'); }); QUnit.test('Show filter range popup when column with selectedFilterOperation is \'isBetween\' and filter value is array', function(assert) { @@ -1708,8 +1712,8 @@ QUnit.module('Filter Row with real dataController and columnsController', { that.clock.tick(10); // assert - const $startRange = $('.dx-viewport').children('.dx-datagrid-filter-range-overlay').find('.dx-numberbox').first(); - const $endRange = $('.dx-viewport').children('.dx-datagrid-filter-range-overlay').find('.dx-numberbox').last(); + const $startRange = getFilterRowOverlay().find('.dx-numberbox').first(); + const $endRange = getFilterRowOverlay().find('.dx-numberbox').last(); assert.equal($startRange.length, 1, 'has number box'); assert.equal($endRange.length, 1, 'has number box'); assert.strictEqual($startRange.find('input').val(), '15', 'value of the first editor'); @@ -1864,7 +1868,7 @@ QUnit.module('Filter Row with real dataController and columnsController', { // assert const column = that.columnsController.getVisibleColumns()[1]; assert.strictEqual(column.selectedFilterOperation, 'between', 'selected filter operation'); - assert.strictEqual($('.dx-viewport').children('.dx-datagrid-filter-range-overlay').find('input').eq(0).val(), '', 'start value of the range'); + assert.strictEqual(getFilterRowOverlay().find('input').eq(0).val(), '', 'start value of the range'); assert.strictEqual(column.filterValue, null, 'filter value of the column'); }); @@ -1889,9 +1893,9 @@ QUnit.module('Filter Row with real dataController and columnsController', { that.clock.tick(10); // assert - const $startRangeInput = $('.dx-viewport').children('.dx-datagrid-filter-range-overlay').find('.dx-numberbox').first().find(TEXTEDITOR_INPUT_SELECTOR); + const $startRangeInput = getFilterRowOverlay().find('.dx-numberbox').first().find(TEXTEDITOR_INPUT_SELECTOR); assert.equal($startRangeInput.length, 1, 'has input'); - const $endRangeInput = $('.dx-viewport').children('.dx-datagrid-filter-range-overlay').find('.dx-numberbox').last().find(TEXTEDITOR_INPUT_SELECTOR); + const $endRangeInput = getFilterRowOverlay().find('.dx-numberbox').last().find(TEXTEDITOR_INPUT_SELECTOR); assert.equal($endRangeInput.length, 1, 'has input'); // act @@ -1930,9 +1934,9 @@ QUnit.module('Filter Row with real dataController and columnsController', { $($testElement.find('td').last().find('.dx-filter-range-content')).trigger('focusin'); that.clock.tick(10); - const $startRangeInput = $('.dx-viewport').children('.dx-datagrid-filter-range-overlay').find('.dx-numberbox').first().find(TEXTEDITOR_INPUT_SELECTOR); + const $startRangeInput = getFilterRowOverlay().find('.dx-numberbox').first().find(TEXTEDITOR_INPUT_SELECTOR); assert.equal($startRangeInput.length, 1, 'has input'); - const $endRangeInput = $('.dx-viewport').children('.dx-datagrid-filter-range-overlay').find('.dx-numberbox').last().find(TEXTEDITOR_INPUT_SELECTOR); + const $endRangeInput = getFilterRowOverlay().find('.dx-numberbox').last().find(TEXTEDITOR_INPUT_SELECTOR); assert.equal($endRangeInput.length, 1, 'has input'); const changedSpy = sinon.spy(); @@ -2171,14 +2175,14 @@ QUnit.module('Filter Row with real dataController and columnsController', { that.clock.tick(10); // assert - assert.equal($('.dx-viewport').children('.dx-datagrid-filter-range-overlay').length, 1, 'has overlay wrapper'); + assert.equal(getFilterRowOverlay().length, 1, 'has overlay wrapper'); // act that.columnHeadersView.render($testElement); that.columnHeadersView.resize(); // assert - assert.equal($('.dx-viewport').children('.dx-datagrid-filter-range-overlay').length, 0, 'hasn\'t overlay wrapper'); + assert.equal(getFilterRowOverlay().length, 0, 'hasn\'t overlay wrapper'); }); QUnit.test('Add custom tabIndex to filter range content', function(assert) { @@ -2869,9 +2873,9 @@ QUnit.module('Filter Row with real dataController and columnsController', { // assert const $cells = $testElement.find('td'); - const $numberBoxElements = $('.dx-viewport').children('.dx-datagrid-filter-range-overlay').find('.dx-numberbox'); + const $numberBoxElements = getFilterRowOverlay().find('.dx-numberbox'); assert.equal($cells.first().find('.dx-datagrid-filter-range-overlay').length, 1, 'has filter range popup'); - assert.equal($('.dx-viewport').children('.dx-datagrid-filter-range-overlay').length, 1, 'has popup wrapper'); + assert.equal(getFilterRowOverlay().length, 1, 'has popup wrapper'); assert.equal($numberBoxElements.length, 2, 'count number box'); // act @@ -2879,7 +2883,7 @@ QUnit.module('Filter Row with real dataController and columnsController', { // assert assert.equal($cells.first().find('.dx-filter-range-content').length, 1, 'has filter range content'); - assert.ok(!$('.dx-viewport').children('.dx-datagrid-filter-range-overlay').length, 'not has popup wrapper'); + assert.ok(!getFilterRowOverlay().length, 'not has popup wrapper'); assert.ok($cells.last().find('.dx-menu').first().is(':focus'), 'focus on menu of the second cell'); }); @@ -2904,9 +2908,9 @@ QUnit.module('Filter Row with real dataController and columnsController', { // assert const $cells = $testElement.find('td'); - const $numberBoxElements = $('.dx-viewport').children('.dx-datagrid-filter-range-overlay').find('.dx-numberbox'); + const $numberBoxElements = getFilterRowOverlay().find('.dx-numberbox'); assert.equal($cells.first().find('.dx-datagrid-filter-range-overlay').length, 1, 'has filter range popup'); - assert.equal($('.dx-viewport').children('.dx-datagrid-filter-range-overlay').length, 1, 'has popup wrapper'); + assert.equal(getFilterRowOverlay().length, 1, 'has popup wrapper'); assert.equal($numberBoxElements.length, 2, 'count number box'); // act @@ -2914,7 +2918,7 @@ QUnit.module('Filter Row with real dataController and columnsController', { // assert assert.equal($cells.first().find('.dx-filter-range-content').length, 1, 'has filter range content'); - assert.ok(!$('.dx-viewport').children('.dx-datagrid-filter-range-popup').length, 'not has popup wrapper'); + assert.ok(!getFilterRowOverlay().length, 'not has popup wrapper'); assert.ok($cells.first().find('.dx-menu').first().is(':focus'), 'focus on menu of the first cell'); }); }