diff --git a/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts b/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts index 2159b791977c..3e99dd821a93 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts @@ -1,5 +1,4 @@ import DataGrid from 'devextreme-testcafe-models/dataGrid'; -import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox'; import HeaderFilter from 'devextreme-testcafe-models/dataGrid/headers/headerFilter'; import { a11yCheck } from '../../../helpers/accessibility/utils'; import url from '../../../helpers/getPageUrl'; @@ -183,16 +182,16 @@ test('Grouping and Summary', async (t) => { test('Filter row - filter menu', async (t) => { const dataGrid = new DataGrid(DATA_GRID_SELECTOR); - const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox); + const filterCell = dataGrid.getFilterCell(0); await t .expect(dataGrid.isReady()) .ok(); - await t.click(filterEditor.menuButton); + await t.click(filterCell.menuButton); await t - .expect(filterEditor.menu.isOpened) + .expect(filterCell.menu.isOpened) .ok(); await a11yCheck(t, { diff --git a/e2e/testcafe-devextreme/tests/accessibility/dataGrid/status.ts b/e2e/testcafe-devextreme/tests/accessibility/dataGrid/status.ts index 21936dfeaba4..a6c5f87ccb2d 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/dataGrid/status.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/dataGrid/status.ts @@ -1,6 +1,6 @@ import DataGrid from 'devextreme-testcafe-models/dataGrid'; import HeaderFilter from 'devextreme-testcafe-models/dataGrid/headers/headerFilter'; -import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox'; +import TextBox from 'devextreme-testcafe-models/textBox'; import { a11yCheck } from '../../../helpers/accessibility/utils'; import url from '../../../helpers/getPageUrl'; import { createWidget } from '../../../helpers/createWidget'; @@ -73,7 +73,7 @@ test('Accessibility: DataGrid general status should contains correct text after test('Accessibility: DataGrid general status should contains correct text after filter row interaction', async (t) => { const expectedStatusText = 'Data grid with 1 rows and 2 columns'; const dataGrid = new DataGrid('#container'); - const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox); + const filterEditor = dataGrid.getFilterEditor(0, TextBox); const applyFilterBtn = dataGrid.getHeaderPanel().getApplyFilterButton(); await t.typeText(filterEditor.input(), 'A') diff --git a/e2e/testcafe-devextreme/tests/accessibility/treeList/status.ts b/e2e/testcafe-devextreme/tests/accessibility/treeList/status.ts index c32631e1956f..11e2dfea6423 100644 --- a/e2e/testcafe-devextreme/tests/accessibility/treeList/status.ts +++ b/e2e/testcafe-devextreme/tests/accessibility/treeList/status.ts @@ -1,5 +1,5 @@ import HeaderFilter from 'devextreme-testcafe-models/dataGrid/headers/headerFilter'; -import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox'; +import TextBox from 'devextreme-testcafe-models/textBox'; import TreeList from 'devextreme-testcafe-models/treeList'; import { a11yCheck } from '../../../helpers/accessibility/utils'; import url from '../../../helpers/getPageUrl'; @@ -96,7 +96,7 @@ test('Accessibility: TreeList general status should contains correct text after test('Accessibility: TreeList general status should contains correct text after filter row interaction', async (t) => { const expectedStatusText = 'Tree list with 2 rows and 2 columns'; const treeList = new TreeList('#container'); - const filterEditor = treeList.getFilterEditor(0, FilterTextBox); + const filterEditor = treeList.getFilterEditor(0, TextBox); const applyFilterBtn = treeList.getHeaderPanel().getApplyFilterButton(); await t.typeText(filterEditor.input(), 'B') diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/common.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/common.ts index 5daf6dd1d704..626b2baa75f0 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/common.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/common.ts @@ -1,6 +1,5 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; import DataGrid from 'devextreme-testcafe-models/dataGrid'; -import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox'; import HeaderFilter from 'devextreme-testcafe-models/dataGrid/headers/headerFilter'; import url from '../../../../helpers/getPageUrl'; import { createWidget } from '../../../../helpers/createWidget'; @@ -182,16 +181,16 @@ test('Grouping and Summary', async (t) => { test('Filter row - filter menu', async (t) => { const dataGrid = new DataGrid(DATA_GRID_SELECTOR); - const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox); + const filterCell = dataGrid.getFilterCell(0); await t .expect(dataGrid.isReady()) .ok(); - await t.click(filterEditor.menuButton); + await t.click(filterCell.menuButton); await t - .expect(filterEditor.menu.isOpened) + .expect(filterCell.menu.isOpened) .ok(); await screenshotCheck(t, 'filter-row-menu'); diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/contrast.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/contrast.ts index 6a2f7b6d5f95..3f0dc0a5952c 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/contrast.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/accessibility/contrast.ts @@ -1,6 +1,5 @@ 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 { getData } from '../../helpers/generateDataSourceData'; @@ -15,9 +14,9 @@ fixture.disablePageReloads`DataGrid - contrast` // visual: material.blue.light test('DataGrid - Contrast between icons in the Filter Row menu and their background doesn\'t comply with WCAG accessibility standards', async (t) => { const dataGrid = new DataGrid('#container'); - const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox); - const searchButton = filterEditor.menuButton; - const filterMenu = filterEditor.menu; + const filterCell = dataGrid.getFilterCell(0); + const searchButton = filterCell.menuButton; + const filterMenu = filterCell.menu; const { takeScreenshot, compareResults } = createScreenshotsComparer(t); await t @@ -63,7 +62,7 @@ test('DataGrid - Filter icon should remain visible when it\'s focused', async (t .element; await t - .click(dataGrid.getFilterCell(0)) + .click(dataGrid.getFilterCell(0).element) .pressKey('tab') .expect(searchIconContainer.focused) .ok(); diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterPanel/functional.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/filterPanel/functional.ts index 62ca30bb4aa0..1f91e5bc6eaa 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/filterPanel/functional.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/filterPanel/functional.ts @@ -1,7 +1,6 @@ import DataGrid from 'devextreme-testcafe-models/dataGrid'; import Popup from 'devextreme-testcafe-models/popup'; import FilterBuilder from 'devextreme-testcafe-models/filterBuilder'; -import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox'; import url from '../../../../helpers/getPageUrl'; import { createWidget } from '../../../../helpers/createWidget'; @@ -52,7 +51,7 @@ test('Proper handle custom filter operations for dates with non-date values', as .expect(filterPanel.getFilterText().element.innerText) .eql('[Order Date] Weekends'); - const dateFilterCell = dataGrid.getFilterEditor(1, FilterTextBox); + const dateFilterCell = dataGrid.getFilterCell(1); await t .click(dateFilterCell.menuButton) diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/T1163100_changeFIlterIcon.visual_matrix.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/T1163100_changeFIlterIcon.visual_matrix.ts index 6b39fdb6c9ad..5d2d784ca973 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/T1163100_changeFIlterIcon.visual_matrix.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/T1163100_changeFIlterIcon.visual_matrix.ts @@ -1,6 +1,5 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; import DataGrid from 'devextreme-testcafe-models/dataGrid'; -import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox'; import { createWidget } from '../../../../helpers/createWidget'; import url from '../../../../helpers/getPageUrl'; import { testScreenshot } from '../../../../helpers/themeUtils'; @@ -36,10 +35,10 @@ const generateTestData = (rowCount: number) => new Array(rowCount) const dataGrid = new DataGrid(GRID_SELECTOR); for (let columnIdx = 0; columnIdx < 4; columnIdx += 1) { - const filterMenu = dataGrid.getFilterEditor(columnIdx, FilterTextBox); + const filterCell = dataGrid.getFilterCell(columnIdx); await t - .click(filterMenu.menuButton()) - .click(filterMenu.menu.getItemByText('Starts with')); + .click(filterCell.menuButton) + .click(filterCell.menu.getItemByText('Starts with')); } await testScreenshot( diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/functional.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/functional.ts index cce7108c020d..a012b41c15a7 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/functional.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/functional.ts @@ -1,5 +1,5 @@ import DataGrid from 'devextreme-testcafe-models/dataGrid'; -import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox'; +import TextBox from 'devextreme-testcafe-models/textBox'; import url from '../../../../helpers/getPageUrl'; import { createWidget } from '../../../../helpers/createWidget'; import { getData } from '../../helpers/generateDataSourceData'; @@ -9,7 +9,7 @@ fixture`FilterRow` test('Filter should reset if the filter row editor text is cleared (T1257261)', async (t) => { const dataGrid = new DataGrid('#container'); - const filterEditor = dataGrid.getFilterEditor(1, FilterTextBox); + const filterEditor = dataGrid.getFilterEditor(1, TextBox); const filterPanelText = dataGrid.getFilterPanel().getFilterText(); await t @@ -53,7 +53,7 @@ test('Filter should reset if the filter row editor text is cleared (T1257261)', // 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'); - const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox); + const filterCell = dataGrid.getFilterCell(0); await dataGrid.isReady(); @@ -62,8 +62,8 @@ test('Filter Row\'s Reset button does not work after a custom filter is set in F .eql(0); await t - .click(filterEditor.menuButton) - .click(filterEditor.menu.getItemByText('Reset')); + .click(filterCell.menuButton) + .click(filterCell.menu.getItemByText('Reset')); await t .expect(dataGrid.dataRows.count) @@ -104,11 +104,11 @@ test('Filter Row\'s Reset button does not work after a custom filter is set in F // 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); + const filterCell = dataGrid.getFilterCell(0); await dataGrid.isReady(); - const ariaLabel = await filterEditor.menuButton.getAttribute('aria-label'); + const ariaLabel = await filterCell.menuButton.getAttribute('aria-label'); await t .expect(ariaLabel) @@ -135,27 +135,27 @@ test('DataGrid - filter row\'s search-box\'s aria-label should be customizable v test('DataGrid - NVDA reads filter menu items as "Search box 1 of 8" (T1290386)', async (t) => { const dataGrid = new DataGrid('#container'); - const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox); + const filterCell = dataGrid.getFilterCell(0); await dataGrid.isReady(); await t - .expect(filterEditor.menuButton.getAttribute('aria-label')) + .expect(filterCell.menuButton.getAttribute('aria-label')) .eql('Search box'); await t - .click(filterEditor.menuButton); + .click(filterCell.menuButton); - const itemCount = await filterEditor.menu.getItemCount(); + const itemCount = await filterCell.menu.getItemCount(); for (let i = 0; i < itemCount; i += 1) { - const item = filterEditor.menu.getItemByIndex(i); + const item = filterCell.menu.getItemByIndex(i); await t.expect(item.getAttribute('aria-label')).eql(null); } await t - .click(filterEditor.menu.getItemByText('Equals')) - .expect(filterEditor.menuButton.getAttribute('aria-label')) + .click(filterCell.menu.getItemByText('Equals')) + .expect(filterCell.menuButton.getAttribute('aria-label')) .eql('Equals'); }).before(async () => createWidget('dxDataGrid', { dataSource: getData(5, 1), @@ -173,7 +173,7 @@ test('DataGrid - NVDA reads filter menu items as "Search box 1 of 8" (T1290386)' const expectedFocusedElement = grouped ? dataGrid.getGroupRow(0) : dataGrid.getDataCell(0, 0); await t - .click(filterCell) + .click(filterCell.element) .expect(dataGrid.getFilterRangeOverlay().exists) .ok('Filter range overlay is shown') .pressKey('tab') @@ -209,7 +209,7 @@ test('DataGrid - filter range overlay in last column on Tab pressed moves focus const filterCell = dataGrid.getFilterCell(2); await t - .click(filterCell) + .click(filterCell.element) .expect(dataGrid.getFilterRangeOverlay().exists) .ok('Filter range overlay is shown') .pressKey('tab') diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/visual.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/visual.ts index 5060033d7b36..cdd90ab7d7e6 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/visual.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/visual.ts @@ -1,6 +1,6 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; import DataGrid from 'devextreme-testcafe-models/dataGrid'; -import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox'; +import TextBox from 'devextreme-testcafe-models/textBox'; import url from '../../../../helpers/getPageUrl'; import { createWidget } from '../../../../helpers/createWidget'; import { getNumberData } from '../../helpers/generateDataSourceData'; @@ -35,12 +35,12 @@ test.meta({ test('FilterRow range overlay screenshot', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); const dataGrid = new DataGrid('#container'); - const filterEditor = dataGrid.getFilterEditor(1, FilterTextBox); + const filterCell = dataGrid.getFilterCell(1); await t - .click(filterEditor.menuButton); + .click(filterCell.menuButton); await t - .click(filterEditor.menu.getItemByText('Between')); + .click(filterCell.menu.getItemByText('Between')); // act await testScreenshot(t, takeScreenshot, 'filter-row-overlay.png'); await t @@ -68,7 +68,7 @@ test('FilterRow range overlay screenshot', async (t) => { 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); + const filterEditor = dataGrid.getFilterEditor(1, TextBox); await t .click(dataGrid.getDataCell(0, 0).element) @@ -96,13 +96,13 @@ test('Focus overlay should be visible in filter row when focusedRowEnabled is en 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); + const filterCell = dataGrid.getFilterCell(0); await dataGrid.isReady(); await t - .click(filterEditor.menuButton) - .click(filterEditor.menu.getItemByText('Between')); + .click(filterCell.menuButton) + .click(filterCell.menu.getItemByText('Between')); await dataGrid.scrollBy(t, { x: 999 }); await testScreenshot(t, takeScreenshot, 'filter-row-filter-range-hide-on-scroll.png'); diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focus.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focus.ts index 2cc4beefe97f..4b30c707b9eb 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focus.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/focus/focus.ts @@ -1,6 +1,6 @@ import DataGrid from 'devextreme-testcafe-models/dataGrid'; import { ClientFunction } from 'testcafe'; -import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox'; +import TextBox from 'devextreme-testcafe-models/textBox'; import { createWidget } from '../../../../helpers/createWidget'; import url from '../../../../helpers/getPageUrl'; @@ -152,7 +152,7 @@ test('Should remove dx-focused class on blur event from the cell', async (t) => test('DataGrid - FilterRow cell loses focus when focusedRowEnabled is true and editing is in batch mode (T1246926)', async (t) => { const dataGrid = new DataGrid('#container'); - const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox).getInput(); + const filterEditor = dataGrid.getFilterEditor(0, TextBox).getInput(); await t .click(dataGrid.getDataCell(0, 0).element) diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/T1293839-grid-no-data-text-rendered (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/T1293839-grid-no-data-text-rendered (fluent.blue.light).png new file mode 100644 index 000000000000..6b8fd751c600 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/T1293839-grid-no-data-text-rendered (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/markup/noDataText.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/noDataText.ts index b0114896f015..0131e144c553 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/markup/noDataText.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/noDataText.ts @@ -1,5 +1,6 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; import DataGrid from 'devextreme-testcafe-models/dataGrid'; +import SelectBox from 'devextreme-testcafe-models/selectBox'; import url from '../../../../helpers/getPageUrl'; import { createWidget } from '../../../../helpers/createWidget'; import { testScreenshot } from '../../../../helpers/themeUtils'; @@ -9,6 +10,65 @@ fixture.disablePageReloads`No Data` const GRID_CONTAINER = '#container'; +test('The noDataText element should be rendered when a lookup column is filtered (T1293839)', async (t) => { + // arrange + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + const dataGrid = new DataGrid(GRID_CONTAINER); + const nameFilterInput = dataGrid.getFilterCell(0).getEditorInput().element; + const lookupFilterEditor = dataGrid.getFilterEditor(1, SelectBox); + + // assert + await t + .expect(dataGrid.isReady()) + .ok(); + + // act + await t.click(lookupFilterEditor.element); + + // assert + await t.expect(await lookupFilterEditor.isOpened()).ok(); + + // act + const lookupList = await lookupFilterEditor.getList(); + const lookupItem = lookupList.getItem(1); + await t.click(lookupItem.element); + await t.typeText(nameFilterInput, 'test'); + + // assert + await t + .expect(dataGrid.isReady()) + .ok(); + + await testScreenshot(t, takeScreenshot, 'T1293839-grid-no-data-text-rendered.png', { element: dataGrid.element }); + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}).before(async () => { + await createWidget('dxDataGrid', { + dataSource: [ + { ID: 1, Name: 'John', Lookup: 1 }, + { ID: 2, Name: 'Jane', Lookup: 2 }, + ], + keyExpr: 'ID', + columns: ['Name', { + dataField: 'Lookup', + lookup: { + dataSource: [ + { ID: 1, Text: 'Item 1' }, + { ID: 2, Text: 'Item 2' }, + ], + valueExpr: 'ID', + displayExpr: 'Text', + }, + }], + showBorders: true, + filterRow: { visible: true }, + onEditorPreparing(e) { + e.updateValueTimeout = 0; + }, + }); +}); + test('The noDataText element should be centered (T1178289)', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); const dataGrid = new DataGrid(GRID_CONTAINER); diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/m_data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/m_data_controller.ts index 64f8a1f49c34..54d8693d62c7 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/m_data_controller.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/m_data_controller.ts @@ -1633,7 +1633,7 @@ export class DataController extends DataHelperMixin(modules.Controller) { } public isCustomLoading() { - return this._isCustomLoading; + return this._isCustomLoading || this._dataSource?.isCustomLoading(); } public beginCustomLoading(messageText?: string) { diff --git a/packages/devextreme/js/__internal/grids/grid_core/m_utils.ts b/packages/devextreme/js/__internal/grids/grid_core/m_utils.ts index f48397602623..c62fe4ba1d6d 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/m_utils.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/m_utils.ts @@ -212,7 +212,7 @@ export default { const noDataClass = that.addWidgetPrefix(NO_DATA_CLASS); let noDataElement = $element.find(`.${noDataClass}`).last(); const isVisible = this._dataController.isEmpty(); - const isLoading = this._dataController.isLoading(); + const isDefaultLoading = this._dataController.isLoading() && !this._dataController.isCustomLoading?.(); if (!noDataElement.length) { noDataElement = $('') @@ -223,7 +223,7 @@ export default { noDataElement.appendTo($element); } - if (isVisible && !isLoading) { + if (isVisible && !isDefaultLoading) { noDataElement .removeClass('dx-hidden') .text(that._getNoDataText()); diff --git a/packages/testcafe-models/dataGrid/editors/filterTextBox.ts b/packages/testcafe-models/dataGrid/editors/filterTextBox.ts deleted file mode 100644 index 7e273e3552e3..000000000000 --- a/packages/testcafe-models/dataGrid/editors/filterTextBox.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Selector } from 'testcafe'; -import ContextMenu from '../../contextMenu'; -import TextBox from '../../textBox'; - -const CLASS = { - menuButton: 'dx-menu-item', - filterMenu: 'dx-context-menu', - gridMarker: 'dx-datagrid', -}; - -export default class FilterTextBox extends TextBox { - body: Selector; - - menuButton: Selector; - - menu: ContextMenu; - - constructor(selector: Selector) { - super(selector); - - this.body = Selector('body'); - this.menuButton = this.element.find(`.${CLASS.menuButton}`).nth(0); - this.menu = new ContextMenu(this.body.find(`.${CLASS.gridMarker}.${CLASS.filterMenu}`)); - } -} diff --git a/packages/testcafe-models/dataGrid/filter/cell.ts b/packages/testcafe-models/dataGrid/filter/cell.ts index 78550e4eea0e..66f2147f83c4 100644 --- a/packages/testcafe-models/dataGrid/filter/cell.ts +++ b/packages/testcafe-models/dataGrid/filter/cell.ts @@ -1,18 +1,30 @@ +import { Selector } from 'testcafe'; +import ContextMenu from '../../contextMenu'; import FocusableElement from '../../internal/focusable'; const CLASS = { filterMenu: 'dx-filter-menu', editorInput: 'dx-texteditor-input', - filterEditor: 'dx-editor-with-menu', + filterEditor: 'dx-widget', + filterEditorContainer: 'dx-editor-container', focused: 'dx-focused', + menuButton: 'dx-menu-item', + contextMenu: 'dx-context-menu', + gridMarker: 'dx-datagrid', }; export default class FilterCell extends FocusableElement { isFocused: Promise; + + menuButton: Selector; + + menu: ContextMenu; constructor(element: Selector) { super(element); this.isFocused = this.element.hasClass(CLASS.focused); + this.menuButton = this.element.find(`.${CLASS.menuButton}`).nth(0); + this.menu = new ContextMenu(Selector('body').find(`.${CLASS.gridMarker}.${CLASS.contextMenu}`)); } getSearchIcon(): FocusableElement { @@ -23,7 +35,7 @@ export default class FilterCell extends FocusableElement { return new FocusableElement(this.element.find(`.${CLASS.editorInput}`)); } - getEditor(): Selector { - return this.element.find(`.${CLASS.filterEditor}`); + getEditor(EditorType: new (mainElement: Selector) => T): T { + return new EditorType(this.element.find(`.${CLASS.filterEditorContainer} .${CLASS.filterEditor}`)); } } diff --git a/packages/testcafe-models/dataGrid/index.ts b/packages/testcafe-models/dataGrid/index.ts index d97dee718e82..081a5b388722 100644 --- a/packages/testcafe-models/dataGrid/index.ts +++ b/packages/testcafe-models/dataGrid/index.ts @@ -4,6 +4,8 @@ import type { SelectionSensitivity } from 'devextreme/ui/data_grid'; import Toolbar from '../toolbar'; import DataRow from './data/row'; import GroupRow from './groupRow'; +import FilterRow from './filter/row'; +import FilterCell from './filter/cell'; import EditForm from './editForm'; import HeaderPanel from './headers/panel'; import DataCell from './data/cell'; @@ -240,12 +242,12 @@ export default class DataGrid extends GridCore { return this.element.find(`.${CLASS.errorRow}`); } - getFilterRow(): Selector { - return this.element.find(`.${this.addWidgetPrefix(CLASS.filterRow)}`); + getFilterRow(): FilterRow { + return this.getHeaders().getFilterRow(); } - getFilterCell(columnIndex: number): Selector { - return this.getFilterRow().find(`[aria-colindex='${columnIndex + 1}']`); + getFilterCell(columnIndex: number): FilterCell { + return this.getHeaders().getFilterRow().getFilterCell(columnIndex); } getFilterRangeOverlay(): Selector { @@ -272,7 +274,7 @@ export default class DataGrid extends GridCore { columnIndex: number, EditorType: new (mainElement: Selector) => T, ): T { - return new EditorType(this.getHeaders().getFilterRow().getFilterCell(columnIndex).getEditor()); + return this.getHeaders().getFilterRow().getFilterCell(columnIndex).getEditor(EditorType); } getSearchBox(): TextBox {