diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/editing.functional_matrix.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/editing.functional_matrix.ts index 7ce5ea2e561a..5ccf400a6619 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/editing.functional_matrix.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/editing.functional_matrix.ts @@ -167,6 +167,8 @@ const checkCellFocused = async ( } await t + .expect(editor?.element.exists) + .ok() .expect(editor?.element.focused) .eql(true); }; @@ -441,6 +443,8 @@ editingModes.forEach((mode) => { const cell = dataGrid.getDataCell(0, columnInfo.columnIndex); const editor = form ? new CellEditor(form.getItem(columnInfo.dataField)) : cell.getEditor(); + await t.expect(dataGrid.isReady()).ok(); + await clickCellEditor(t, mode, columnInfo, form, cell, editor); await setEditorValue(t, mode, columnInfo, editor); @@ -569,33 +573,37 @@ editingModes.forEach((mode) => { })); [true, false].forEach((repaintChangesOnly) => { - test.meta({ unstable: mode === 'batch' && !repaintChangesOnly })( - `Update cell value and focus next cell, mode: ${mode}, repaintChangesOnly: ${repaintChangesOnly}, useKeyboard: false`, - async (t) => { - const form = getEditForm(mode); - let modifiedCellCount = mode === 'batch' ? 1 : 0; + for (let i = 0; i < 50; i++) { + test( + `${i}: Update cell value and focus next cell, mode: ${mode}, repaintChangesOnly: ${repaintChangesOnly}, useKeyboard: false`, + async (t) => { + const form = getEditForm(mode); + let modifiedCellCount = mode === 'batch' ? 1 : 0; - for (const columnInfo of textColumnInfos) { - const cell = dataGrid.getDataCell(0, columnInfo.columnIndex); - const editor = form - ? new CellEditor(form.getItem(columnInfo.dataField)) - : cell.getEditor(); + await t.expect(dataGrid.isReady()).ok(); - await clickCellEditor(t, mode, columnInfo, form, cell, editor); - await setEditorValue(t, mode, columnInfo, editor); + for (const columnInfo of textColumnInfos) { + const cell = dataGrid.getDataCell(0, columnInfo.columnIndex); + const editor = form + ? new CellEditor(form.getItem(columnInfo.dataField)) + : cell.getEditor(); - await focusNextCellEditor(t, mode, columnInfo); + await clickCellEditor(t, mode, columnInfo, form, cell, editor); + await setEditorValue(t, mode, columnInfo, editor); - if (mode === 'batch') { - modifiedCellCount += 1; - } + await focusNextCellEditor(t, mode, columnInfo); - await checkModifiedCell(t, mode, columnInfo, cell, editor, modifiedCellCount); - } - }, - ).before(createDataGrid({ - mode, - repaintChangesOnly, - })); + if (mode === 'batch') { + modifiedCellCount += 1; + } + + await checkModifiedCell(t, mode, columnInfo, cell, editor, modifiedCellCount); + } + }, + ).before(createDataGrid({ + mode, + repaintChangesOnly, + })); + } }); }); diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/functional.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/functional.ts index 4acd172ae7b2..d28af7012ff3 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/editing/functional.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/editing/functional.ts @@ -360,47 +360,61 @@ test('Async Validation(Row) - Data is not saved when a dependant cell value beco }, 'lastName'], }))); -test('Async Validation(Cell) - Only the last cell should be switched to edit mode', async (t) => { - const dataGrid = new DataGrid('#container'); - await t.expect(dataGrid.isReady()).ok(); +for (let i = 0; i < 50; i++) { + test(`${i}: ` + 'Async Validation(Cell) - Only the last cell should be switched to edit mode', async (t) => { + const dataGrid = new DataGrid('#container'); + const resolveValidation = ClientFunction(() => (window as any).deferred.resolve(true)); - const cell0 = dataGrid.getDataCell(0, 0); - const cell1 = dataGrid.getDataCell(0, 1); - const cell2 = dataGrid.getDataCell(0, 2); + await t.expect(dataGrid.isReady()).ok(); - await t - .click(cell0.element) - .expect(cell0.isValidationPending).ok() - .click(cell1.element) - .expect(cell1.isFocused) - .notOk('the second cell should not be focused') - .click(cell2.element) - .expect(cell0.isValidationPending) - .notOk('validating is completed') - .expect(cell2.hasHiddenFocusState) - .notOk() - .expect(cell2.isFocused) - .ok('the third cell should be focused'); -}).before(async () => createWidget('dxDataGrid', getGridConfig({ - editing: { - mode: 'cell', - allowUpdating: true, - allowAdding: true, - }, - columns: [{ - dataField: 'age', - validationRules: [{ - type: 'async', - validationCallback(): JQueryPromise { - const d = $.Deferred(); - setTimeout(() => { - d.resolve(true); - }, 1000); - return d.promise(); + const cell0 = dataGrid.getDataCell(0, 0); + const cell1 = dataGrid.getDataCell(0, 1); + const cell2 = dataGrid.getDataCell(0, 2); + + await t + .click(cell0.element) + .expect(cell0.isValidationPending).ok() + .click(cell1.element) + .expect(cell1.isFocused) + .notOk('the second cell should not be focused') + .click(cell2.element); + + await resolveValidation(); + + await t + .expect(cell0.isValidationPending) + .notOk('validating is completed') + .expect(cell2.hasHiddenFocusState) + .notOk() + .expect(cell2.isFocused) + .ok('the third cell should be focused'); + }).before(async () => { + await ClientFunction(() => { + (window as any).deferred = $.Deferred(); + })(); + + return createWidget('dxDataGrid', getGridConfig({ + editing: { + mode: 'cell', + allowUpdating: true, + allowAdding: true, }, - }], - }, 'name', 'lastName'], -}))); + columns: [{ + dataField: 'age', + validationRules: [{ + type: 'async', + validationCallback(): JQueryPromise { + return (window as any).deferred.promise(); + }, + }], + }, 'name', 'lastName'], + })); + }).after(async () => { + await ClientFunction(() => { + delete (window as any).deferred; + })(); + }); +} test('Async Validation(Cell) - Only valid data is saved in a new row', async (t) => { const dataGrid = new DataGrid('#container'); diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/keyboardNavigation.functional.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/keyboardNavigation.functional.ts index babebbccc004..d24e9b941fcf 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/keyboardNavigation.functional.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/keyboardNavigation.functional.ts @@ -1689,184 +1689,202 @@ test('The expand cell should not lose focus on expanding a master row (T892203)' })); ['Batch', 'Cell'].forEach((editMode) => { - test(`${editMode} mode - Cells in a new row should be updated on Tab (T898356)`, async (t) => { - const dataGrid = new DataGrid('#container') as any; - const addRowButton = dataGrid.getHeaderPanel().getAddRowButton(); - const cell00 = dataGrid.getDataCell(0, 0); - const editor00 = cell00.getEditor(); - const cell01 = dataGrid.getDataCell(0, 1); - const editor01 = cell01.getEditor(); + for (let i = 0; i < 50; i++) { + test(`${i}: ${editMode} mode - Cells in a new row should be updated on Tab (T898356)`, async (t) => { + const dataGrid = new DataGrid('#container') as any; + const addRowButton = dataGrid.getHeaderPanel().getAddRowButton(); + const cell00 = dataGrid.getDataCell(0, 0); + const editor00 = cell00.getEditor(); + const cell01 = dataGrid.getDataCell(0, 1); + const editor01 = cell01.getEditor(); - await t.expect(dataGrid.isReady()).ok(); + await t.expect(dataGrid.isReady()).ok(); - await t - .click(addRowButton) + await t + .click(addRowButton) - .expect(cell00.isFocused).ok() - .expect(editor00.element.focused) - .ok() + .expect(cell00.isFocused).ok() + .expect(editor00.element.exists) + .ok() + .expect(editor00.element.focused) + .ok() - .typeText(editor00.element, '1') - .pressKey('tab') + .typeText(editor00.element, '1') + .pressKey('tab') - .expect(cell00.isFocused) - .notOk() - .expect(dataGrid.apiGetCellValue(0, 0)) - .eql('1') - .expect(cell01.isFocused) - .ok() - .expect(editor01.element.focused) - .ok() + .expect(cell00.isFocused) + .notOk() + .expect(dataGrid.apiGetCellValue(0, 0)) + .eql('1') + .expect(cell01.isFocused) + .ok() + .expect(editor01.element.exists) + .ok() + .expect(editor01.element.focused) + .ok() - .typeText(editor01.element, '2') - .pressKey('tab') + .typeText(editor01.element, '2') + .pressKey('tab') - .expect(cell01.isFocused) - .notOk() - .expect(dataGrid.apiGetCellValue(0, 1)) - .eql('2'); - }).before(async () => createWidget('dxDataGrid', { - dataSource: [], - editing: { - mode: editMode.toLowerCase() as any, - allowAdding: true, - }, - columns: ['a', 'b'], - })); + .expect(cell01.isFocused) + .notOk() + .expect(dataGrid.apiGetCellValue(0, 1)) + .eql('2'); + }).before(async () => createWidget('dxDataGrid', { + dataSource: [], + editing: { + mode: editMode.toLowerCase() as any, + allowAdding: true, + }, + columns: ['a', 'b'], + })); - test(`${editMode} mode - Cells in a new row should be updated on Shift+Tab (T898356)`, async (t) => { - const dataGrid = new DataGrid('#container') as any; - const addRowButton = dataGrid.getHeaderPanel().getAddRowButton(); - const cell00 = dataGrid.getDataCell(0, 0); - const editor00 = cell00.getEditor(); - const cell01 = dataGrid.getDataCell(0, 1); - const editor01 = cell01.getEditor(); + test(`${i}: ${editMode} mode - Cells in a new row should be updated on Shift+Tab (T898356)`, async (t) => { + const dataGrid = new DataGrid('#container') as any; + const addRowButton = dataGrid.getHeaderPanel().getAddRowButton(); + const cell00 = dataGrid.getDataCell(0, 0); + const editor00 = cell00.getEditor(); + const cell01 = dataGrid.getDataCell(0, 1); + const editor01 = cell01.getEditor(); - await t.expect(dataGrid.isReady()).ok(); + await t.expect(dataGrid.isReady()).ok(); - await t - .click(addRowButton) - .click(cell01.element) + await t + .click(addRowButton) + .click(cell01.element) - .expect(cell01.isFocused).ok() - .expect(editor01.element.focused) - .ok() + .expect(cell01.isFocused).ok() + .expect(editor01.element.exists) + .ok() + .expect(editor01.element.focused) + .ok() - .typeText(editor01.element, '2') - .pressKey('shift+tab') + .typeText(editor01.element, '2') + .pressKey('shift+tab') - .expect(cell01.isFocused) - .notOk() - .expect(dataGrid.apiGetCellValue(0, 1)) - .eql('2') - .expect(cell00.isFocused) - .ok() - .expect(editor00.element.focused) - .ok() + .expect(cell01.isFocused) + .notOk() + .expect(dataGrid.apiGetCellValue(0, 1)) + .eql('2') + .expect(cell00.isFocused) + .ok() + .expect(editor00.element.exists) + .ok() + .expect(editor00.element.focused) + .ok() - .typeText(editor00.element, '1') - .pressKey('shift+tab') + .typeText(editor00.element, '1') + .pressKey('shift+tab') - .expect(cell00.isFocused) - .notOk() - .expect(dataGrid.apiGetCellValue(0, 0)) - .eql('1'); - }).before(async () => createWidget('dxDataGrid', { - dataSource: [], - editing: { - mode: editMode.toLowerCase() as any, - allowAdding: true, - }, - columns: ['a', 'b'], - })); + .expect(cell00.isFocused) + .notOk() + .expect(dataGrid.apiGetCellValue(0, 0)) + .eql('1'); + }).before(async () => createWidget('dxDataGrid', { + dataSource: [], + editing: { + mode: editMode.toLowerCase() as any, + allowAdding: true, + }, + columns: ['a', 'b'], + })); - test.meta({ unstable: editMode === 'Cell' })(`${editMode} mode - Cells in a modified row should be updated on Tab (T898356)`, async (t) => { - const dataGrid = new DataGrid('#container') as any; - const cell00 = dataGrid.getDataCell(0, 0); - const editor00 = cell00.getEditor(); - const cell01 = dataGrid.getDataCell(0, 1); - const editor01 = cell01.getEditor(); + test(`${editMode} mode - Cells in a modified row should be updated on Tab (T898356)`, async (t) => { + const dataGrid = new DataGrid('#container') as any; + const cell00 = dataGrid.getDataCell(0, 0); + const editor00 = cell00.getEditor(); + const cell01 = dataGrid.getDataCell(0, 1); + const editor01 = cell01.getEditor(); - await t.expect(dataGrid.isReady()).ok(); + await t.expect(dataGrid.isReady()).ok(); - await t - .click(cell00.element) + await t + .click(cell00.element) - .expect(cell00.isFocused).ok() - .expect(editor00.element.focused) - .ok() + .expect(cell00.isFocused).ok() + .expect(editor00.element.exists) + .ok() + .expect(editor00.element.focused) + .ok() - .typeText(editor00.element, '1') - .pressKey('tab') + .typeText(editor00.element, '1') + .pressKey('tab') - .expect(cell00.isFocused) - .notOk() - .expect(dataGrid.apiGetCellValue(0, 0)) - .eql('11') - .expect(cell01.isFocused) - .ok() - .expect(editor01.element.focused) - .ok() + .expect(cell00.isFocused) + .notOk() + .expect(dataGrid.apiGetCellValue(0, 0)) + .eql('11') + .expect(cell01.isFocused) + .ok() + .expect(editor01.element.exists) + .ok() + .expect(editor01.element.focused) + .ok() - .typeText(editor01.element, '2') - .pressKey('tab') + .typeText(editor01.element, '2') + .pressKey('tab') - .expect(cell01.isFocused) - .notOk() - .expect(dataGrid.apiGetCellValue(0, 1)) - .eql('22'); - }).before(async () => createWidget('dxDataGrid', { - dataSource: [{ a: '1', b: '2' }], - editing: { - mode: editMode.toLowerCase() as any, - allowUpdating: true, - }, - columns: ['a', 'b'], - })); + .expect(cell01.isFocused) + .notOk() + .expect(dataGrid.apiGetCellValue(0, 1)) + .eql('22'); + }).before(async () => createWidget('dxDataGrid', { + dataSource: [{ a: '1', b: '2' }], + editing: { + mode: editMode.toLowerCase() as any, + allowUpdating: true, + }, + columns: ['a', 'b'], + })); - test(`${editMode} mode - Cells in a modified row should be updated on Shift+Tab (T898356)`, async (t) => { - const dataGrid = new DataGrid('#container') as any; - const cell00 = dataGrid.getDataCell(0, 0); - const editor00 = cell00.getEditor(); - const cell01 = dataGrid.getDataCell(0, 1); - const editor01 = cell01.getEditor(); + test(`${editMode} mode - Cells in a modified row should be updated on Shift+Tab (T898356)`, async (t) => { + const dataGrid = new DataGrid('#container') as any; + const cell00 = dataGrid.getDataCell(0, 0); + const editor00 = cell00.getEditor(); + const cell01 = dataGrid.getDataCell(0, 1); + const editor01 = cell01.getEditor(); - await t.expect(dataGrid.isReady()).ok(); + await t.expect(dataGrid.isReady()).ok(); - await t - .click(cell01.element) + await t + .click(cell01.element) - .expect(cell01.isFocused).ok() - .expect(editor01.element.focused) - .ok() + .expect(cell01.isFocused).ok() + .expect(editor01.element.exists) + .ok() + .expect(editor01.element.focused) + .ok() - .typeText(editor01.element, '2') - .pressKey('shift+tab') + .typeText(editor01.element, '2') + .pressKey('shift+tab') - .expect(cell01.isFocused) - .notOk() - .expect(dataGrid.apiGetCellValue(0, 1)) - .eql('22') - .expect(cell00.isFocused) - .ok() - .expect(editor00.element.focused) - .ok() + .expect(cell01.isFocused) + .notOk() + .expect(dataGrid.apiGetCellValue(0, 1)) + .eql('22') + .expect(cell00.isFocused) + .ok() + .expect(editor00.element.exists) + .ok() + .expect(editor00.element.focused) + .ok() - .typeText(editor00.element, '1') - .pressKey('shift+tab') + .typeText(editor00.element, '1') + .pressKey('shift+tab') - .expect(cell00.isFocused) - .notOk() - .expect(dataGrid.apiGetCellValue(0, 0)) - .eql('11'); - }).before(async () => createWidget('dxDataGrid', { - dataSource: [{ a: '1', b: '2' }], - editing: { - mode: editMode.toLowerCase() as any, - allowUpdating: true, - }, - columns: ['a', 'b'], - })); + .expect(cell00.isFocused) + .notOk() + .expect(dataGrid.apiGetCellValue(0, 0)) + .eql('11'); + }).before(async () => createWidget('dxDataGrid', { + dataSource: [{ a: '1', b: '2' }], + editing: { + mode: editMode.toLowerCase() as any, + allowUpdating: true, + }, + columns: ['a', 'b'], + })); + } test(`${editMode} mode - Shift+Tab from the first editable cell should move focus to the last header (T1329750)`, async (t) => { const dataGrid = new DataGrid('#container') as any; diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withEditing.ts b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withEditing.ts index 8224ad4294fe..f66e4ccbc883 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withEditing.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withEditing.ts @@ -68,37 +68,43 @@ test.meta({ browserSize: [800, 800] })('The form edit mode: Edit row when there }, })); -test.meta({ browserSize: [800, 800] })('The batch edit mode: Edit cell whene there are sticky columns', async (t) => { - const { takeScreenshot, compareResults } = createScreenshotsComparer(t); - const dataGrid = new DataGrid(DATA_GRID_SELECTOR); +for (let i = 0; i < 50; i++) { + test.meta({ browserSize: [800, 800] })(`${i}: ` + 'The batch edit mode: Edit cell when there are sticky columns', async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + const dataGrid = new DataGrid(DATA_GRID_SELECTOR); - await t.expect(dataGrid.isReady()).ok(); + await t.expect(dataGrid.isReady()).ok(); - await t.click(dataGrid.getDataCell(0, 2).element); + const editCell = dataGrid.getDataCell(0, 2); + await t.click(editCell.element); + await t + .expect(editCell.isEditCell).ok() + .expect(editCell.getEditor().element.focused).ok(); - await testScreenshot(t, takeScreenshot, 'edit_cell_with_sticky_columns_1.png', { element: dataGrid.element }); + await testScreenshot(t, takeScreenshot, 'edit_cell_with_sticky_columns_1.png', { element: dataGrid.element }); - await dataGrid.scrollTo(t, { x: 10000 }); + await dataGrid.scrollTo(t, { x: 10000 }); - await testScreenshot(t, takeScreenshot, 'edit_cell_with_sticky_columns_2.png', { element: dataGrid.element }); + await testScreenshot(t, takeScreenshot, 'edit_cell_with_sticky_columns_2.png', { element: dataGrid.element }); - await t - .expect(compareResults.isValid()) - .ok(compareResults.errorMessages()); -}).before(async () => createWidget('dxDataGrid', { - ...defaultConfig, - editing: { - mode: 'batch', - allowUpdating: true, - }, - customizeColumns(columns) { - columns[1].fixed = true; - columns[1].fixedPosition = 'left'; - }, - scrolling: { - showScrollbar: 'never', - }, -})); + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); + }).before(async () => createWidget('dxDataGrid', { + ...defaultConfig, + editing: { + mode: 'batch', + allowUpdating: true, + }, + customizeColumns(columns) { + columns[1].fixed = true; + columns[1].fixedPosition = 'left'; + }, + scrolling: { + showScrollbar: 'never', + }, + })); +} test.meta({ browserSize: [800, 800] })('The batch edit mode: Edit fixed cell', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t);