diff --git a/packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/helpers/utils.ts b/packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/helpers/utils.ts new file mode 100644 index 000000000000..6337eb7339a1 --- /dev/null +++ b/packages/devextreme/js/__internal/grids/grid_core/__tests__/__mock__/helpers/utils.ts @@ -0,0 +1,63 @@ +import { jest } from '@jest/globals'; +import fx from '@js/common/core/animation/fx'; +import type { dxElementWrapper } from '@js/core/renderer'; +import $ from '@js/core/renderer'; +import type { Properties as DataGridProperties } from '@js/ui/data_grid'; +import DataGrid from '@js/ui/data_grid'; +import { DataGridModel } from '@ts/grids/data_grid/__tests__/__mock__/model/data_grid'; + +export const SELECTORS = { + gridContainer: '#gridContainer', +}; + +export const GRID_CONTAINER_ID = 'gridContainer'; + +export const createDataGrid = async ( + options: DataGridProperties = {}, +): Promise<{ + $container: dxElementWrapper; + component: DataGridModel; + instance: DataGrid; +}> => new Promise((resolve) => { + const $container = $('
') + .attr('id', GRID_CONTAINER_ID) + .appendTo(document.body); + + const dataGridOptions: DataGridProperties = { + keyExpr: 'id', + ...options, + }; + + const instance = new DataGrid($container.get(0) as HTMLDivElement, dataGridOptions); + const component = new DataGridModel($container.get(0) as HTMLElement); + + jest.runAllTimers(); + + resolve({ + $container, + component, + instance, + }); +}); + +export const beforeTest = (): void => { + fx.off = true; + jest.useFakeTimers(); +}; + +export const afterTest = (): void => { + const $container = $(SELECTORS.gridContainer); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const dataGrid = ($container as any).dxDataGrid('instance') as DataGrid; + + dataGrid?.dispose(); + $container.remove(); + jest.clearAllMocks(); + jest.useRealTimers(); + fx.off = false; +}; + +export const flushAsync = async (): Promise => { + jest.runAllTimers(); + await Promise.resolve(); +}; diff --git a/packages/devextreme/js/__internal/grids/grid_core/__tests__/grid.integration.test.ts b/packages/devextreme/js/__internal/grids/grid_core/__tests__/grid.integration.test.ts index 6320bacd0596..a8366f7c526c 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/__tests__/grid.integration.test.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/__tests__/grid.integration.test.ts @@ -1,62 +1,12 @@ import { - afterEach, beforeEach, describe, expect, it, jest, + afterEach, beforeEach, describe, expect, it, } from '@jest/globals'; -import fx from '@js/common/core/animation/fx'; -import type { dxElementWrapper } from '@js/core/renderer'; -import $ from '@js/core/renderer'; -import type { Properties as DataGridProperties } from '@js/ui/data_grid'; -import DataGrid from '@js/ui/data_grid'; -import { DataGridModel } from '@ts/grids/data_grid/__tests__/__mock__/model/data_grid'; -const SELECTORS = { - gridContainer: '#gridContainer', -}; - -const GRID_CONTAINER_ID = 'gridContainer'; - -const createDataGrid = async ( - options: DataGridProperties = {}, -): Promise<{ - $container: dxElementWrapper; - component: DataGridModel; - instance: DataGrid; -}> => new Promise((resolve) => { - const $container = $('
') - .attr('id', GRID_CONTAINER_ID) - .appendTo(document.body); - - const dataGridOptions: DataGridProperties = { - keyExpr: 'id', - ...options, - }; - - const instance = new DataGrid($container.get(0) as HTMLDivElement, dataGridOptions); - const component = new DataGridModel($container.get(0) as HTMLElement); - - jest.runAllTimers(); - - resolve({ - $container, - component, - instance, - }); -}); - -const beforeTest = (): void => { - fx.off = true; - jest.useFakeTimers(); -}; - -const afterTest = (): void => { - const $container = $(SELECTORS.gridContainer); - const dataGrid = ($container as any).dxDataGrid('instance') as DataGrid; - - dataGrid.dispose(); - $container.remove(); - jest.clearAllMocks(); - jest.useRealTimers(); - fx.off = false; -}; +import { + afterTest, + beforeTest, + createDataGrid, +} from './__mock__/helpers/utils'; describe('Grid', () => { beforeEach(beforeTest); diff --git a/packages/devextreme/js/__internal/grids/grid_core/column_chooser/__tests__/column_chooser.integration.test.ts b/packages/devextreme/js/__internal/grids/grid_core/column_chooser/__tests__/column_chooser.integration.test.ts index 3b2dd3da8f7e..e8832e6cfea0 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/column_chooser/__tests__/column_chooser.integration.test.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/column_chooser/__tests__/column_chooser.integration.test.ts @@ -1,65 +1,20 @@ import { afterEach, beforeEach, describe, expect, it, jest, } from '@jest/globals'; -import type { dxElementWrapper } from '@js/core/renderer'; -import $ from '@js/core/renderer'; -import type { Properties as DataGridProperties } from '@js/ui/data_grid'; -import DataGrid from '@js/ui/data_grid'; import errors from '@js/ui/widget/ui.errors'; -import { DataGridModel } from '@ts/grids/data_grid/__tests__/__mock__/model/data_grid'; -const SELECTORS = { - gridContainer: '#gridContainer', -}; - -const GRID_CONTAINER_ID = 'gridContainer'; - -const createDataGrid = async ( - options: DataGridProperties = {}, -): Promise<{ - $container: dxElementWrapper; - component: DataGridModel; - instance: DataGrid; -}> => new Promise((resolve) => { - const $container = $('
') - .attr('id', GRID_CONTAINER_ID) - .appendTo(document.body); - - const dataGridOptions: DataGridProperties = { - keyExpr: 'id', - ...options, - }; - - const instance = new DataGrid($container.get(0) as HTMLDivElement, dataGridOptions); - const component = new DataGridModel($container.get(0) as HTMLElement); - - jest.runAllTimers(); - - resolve({ - $container, - component, - instance, - }); -}); - -const beforeTest = (): void => { - jest.useFakeTimers(); - jest.spyOn(errors, 'log').mockImplementation(jest.fn()); - jest.spyOn(errors, 'Error').mockImplementation(() => ({})); -}; - -const afterTest = (): void => { - const $container = $(SELECTORS.gridContainer); - const dataGrid = ($container as any).dxDataGrid('instance') as DataGrid; - - dataGrid.dispose(); - $container.remove(); - jest.clearAllMocks(); - jest.useRealTimers(); -}; +import { + afterTest, + beforeTest, + createDataGrid, +} from '../../__tests__/__mock__/helpers/utils'; describe('Bugs', () => { - beforeEach(beforeTest); + beforeEach(() => { + beforeTest(); + jest.spyOn(errors, 'log').mockImplementation(jest.fn()); + jest.spyOn(errors, 'Error').mockImplementation(() => ({})); + }); afterEach(afterTest); describe('T1311329 - DataGrid - Column chooser hides a banded column on using search and recursive selection', () => { diff --git a/packages/devextreme/js/__internal/grids/grid_core/columns_resizing_reordering/m_columns_resizing_reordering.integration.test.ts b/packages/devextreme/js/__internal/grids/grid_core/columns_resizing_reordering/m_columns_resizing_reordering.integration.test.ts index 2748d0d6a56a..a7ce8c5184ea 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/columns_resizing_reordering/m_columns_resizing_reordering.integration.test.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/columns_resizing_reordering/m_columns_resizing_reordering.integration.test.ts @@ -8,54 +8,22 @@ import { } from '@js/common/core/events/drag'; import type { dxElementWrapper } from '@js/core/renderer'; import $ from '@js/core/renderer'; -import type { Properties as DataGridProperties } from '@js/ui/data_grid'; -import DataGrid from '@js/ui/data_grid'; +import type DataGrid from '@js/ui/data_grid'; import errors from '@js/ui/widget/ui.errors'; -import { DataGridModel } from '@ts/grids/data_grid/__tests__/__mock__/model/data_grid'; +import type { DataGridModel } from '@ts/grids/data_grid/__tests__/__mock__/model/data_grid'; -const SELECTORS = { - gridContainer: '#gridContainer', -}; - -const GRID_CONTAINER_ID = 'gridContainer'; - -const createDataGrid = async ( - options: DataGridProperties = {}, -): Promise<{ - $container: dxElementWrapper; - component: DataGridModel; - instance: DataGrid; -}> => new Promise((resolve) => { - const $container = $('
') - .attr('id', GRID_CONTAINER_ID) - .appendTo(document.body); - - const instance = new DataGrid($container.get(0) as HTMLDivElement, options); - const component = new DataGridModel($container.get(0) as HTMLElement); - - jest.runAllTimers(); - - resolve({ - $container, - component, - instance, - }); -}); +import { + afterTest as baseAfterTest, + beforeTest as baseBeforeTest, + createDataGrid, +} from '../__tests__/__mock__/helpers/utils'; const beforeTest = (): void => { - jest.useFakeTimers(); + baseBeforeTest(); jest.spyOn(errors, 'log').mockImplementation(jest.fn()); }; -const afterTest = (): void => { - const $container = $(SELECTORS.gridContainer); - const dataGrid = ($container as any).dxDataGrid('instance') as DataGrid; - - dataGrid.dispose(); - $container.remove(); - jest.clearAllMocks(); - jest.useRealTimers(); -}; +const afterTest = baseAfterTest; describe('Performance optimization', () => { beforeEach(beforeTest); diff --git a/packages/devextreme/js/__internal/grids/grid_core/editing/__tests__/m_editing.integration.test.ts b/packages/devextreme/js/__internal/grids/grid_core/editing/__tests__/m_editing.integration.test.ts index 40f44ec14654..dbc797a2f41f 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/editing/__tests__/m_editing.integration.test.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/editing/__tests__/m_editing.integration.test.ts @@ -1,17 +1,13 @@ import { - afterEach, beforeEach, describe, expect, it, jest, + afterEach, beforeEach, describe, expect, it, } from '@jest/globals'; -import type { dxElementWrapper } from '@js/core/renderer'; -import $ from '@js/core/renderer'; -import type { Properties as DataGridProperties } from '@js/ui/data_grid'; -import DataGrid from '@js/ui/data_grid'; -import { DataGridModel } from '@ts/grids/data_grid/__tests__/__mock__/model/data_grid'; -const GRID_CONTAINER_ID = 'gridContainer'; - -const SELECTORS = { - gridContainer: `#${GRID_CONTAINER_ID}`, -}; +import { + afterTest, + beforeTest, + createDataGrid, + flushAsync, +} from '../../__tests__/__mock__/helpers/utils'; const dataSource = [{ ID: 1, @@ -45,49 +41,6 @@ const dataSource = [{ Address: '4 Westmoreland Pl.', }]; -const flushAsync = async (): Promise => { - jest.runOnlyPendingTimers(); - await Promise.resolve(); -}; - -const createDataGrid = async ( - options: DataGridProperties = {}, -): Promise<{ - $container: dxElementWrapper; - component: DataGridModel; - instance: DataGrid; -}> => new Promise((resolve) => { - const $container = $('
') - .attr('id', GRID_CONTAINER_ID) - .appendTo(document.body); - - const instance = new DataGrid($container.get(0) as HTMLDivElement, options); - const component = new DataGridModel($container.get(0) as HTMLElement); - - jest.runAllTimers(); - resolve({ - $container, - component, - instance, - }); -}); - -const beforeTest = (): void => { - jest.useFakeTimers(); -}; - -const afterTest = (): void => { - const $container = $(SELECTORS.gridContainer); - const dataGrid = ( - $container as dxElementWrapper & { dxDataGrid: (command: string) => DataGrid } - ).dxDataGrid('instance'); - - dataGrid.dispose(); - $container.remove(); - jest.clearAllMocks(); - jest.useRealTimers(); -}; - describe('DataGrid editing', () => { beforeEach(beforeTest); afterEach(afterTest); diff --git a/packages/devextreme/js/__internal/grids/grid_core/focus/m_focus.integration.test.ts b/packages/devextreme/js/__internal/grids/grid_core/focus/m_focus.integration.test.ts index 4454c9640e9a..2137efed8d9e 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/focus/m_focus.integration.test.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/focus/m_focus.integration.test.ts @@ -1,41 +1,14 @@ import { - afterEach, describe, expect, it, jest, + afterEach, beforeEach, describe, expect, it, jest, } from '@jest/globals'; -import type { dxElementWrapper } from '@js/core/renderer'; -import $ from '@js/core/renderer'; -import type { Properties as DataGridProperties } from '@js/ui/data_grid'; -import DataGrid from '@js/ui/data_grid'; -const SELECTORS = { - gridContainer: '#gridContainer', -}; - -const GRID_CONTAINER_ID = 'gridContainer'; - -const createDataGrid = async ( - options: DataGridProperties = {}, -): Promise<{ $container: dxElementWrapper; instance: DataGrid }> => new Promise((resolve) => { - const $container = $('
') - .attr('id', GRID_CONTAINER_ID) - .appendTo(document.body); - - const instance = new DataGrid($container.get(0) as HTMLDivElement, { - // @ts-ignore - loadingTimeout: null, - ...options, - }); - - resolve({ $container, instance }); -}); +import { + afterTest, beforeTest, createDataGrid, flushAsync, +} from '../__tests__/__mock__/helpers/utils'; describe('GridCore focus', () => { - afterEach(() => { - const $container = $(SELECTORS.gridContainer); - const dataGrid = ($container as any).dxDataGrid('instance') as DataGrid; - - dataGrid.dispose(); - $container.remove(); - }); + beforeEach(beforeTest); + afterEach(afterTest); const testCases: [boolean, 'insert' | 'remove' | 'update', number][] = [ [true, 'insert', 2], @@ -94,6 +67,8 @@ describe('GridCore focus', () => { break; } + await flushAsync(); + expect(onFocusedRowChanged.mock.calls.length).toBe(1); expect(instance.option('focusedRowKey')).toEqual(2); expect(instance.option('focusedRowIndex')).toEqual(expectedFocusedRowIndex); diff --git a/packages/devextreme/js/__internal/grids/grid_core/master_detail/m_master_detail.integration.test.ts b/packages/devextreme/js/__internal/grids/grid_core/master_detail/m_master_detail.integration.test.ts index 341f25bf1cc9..4b681f5a204d 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/master_detail/m_master_detail.integration.test.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/master_detail/m_master_detail.integration.test.ts @@ -1,45 +1,21 @@ import { - afterEach, describe, expect, it, + afterEach, beforeEach, describe, expect, it, } from '@jest/globals'; -import type { dxElementWrapper } from '@js/core/renderer'; -import $ from '@js/core/renderer'; -import type { Properties as DataGridProperties } from '../../../../ui/data_grid'; -import DataGrid from '../../../../ui/data_grid'; +import { + afterTest, + beforeTest, + createDataGrid, +} from '../__tests__/__mock__/helpers/utils'; const SELECTORS = { - gridContainer: '#gridContainer', detailCell: 'dx-master-detail-cell', detailContainer: 'dx-datagrid-master-detail-container', }; -const GRID_CONTAINER_ID = 'gridContainer'; - -const createDataGrid = async ( - options: DataGridProperties = {}, -): Promise<{ $container: dxElementWrapper; instance: DataGrid }> => new Promise((resolve) => { - const $container = $('
') - .attr('id', GRID_CONTAINER_ID) - .appendTo(document.body); - - const instance = new DataGrid($container.get(0) as HTMLDivElement, options); - - const contentReadyHandler = (): void => { - resolve({ $container, instance }); - instance.off('contentReady', contentReadyHandler); - }; - - instance.on('contentReady', contentReadyHandler); -}); - describe('GridCore master_detail', () => { - afterEach(() => { - const $container = $(SELECTORS.gridContainer); - const dataGrid = ($container as any).dxDataGrid('instance') as DataGrid; - - dataGrid.dispose(); - $container.remove(); - }); + beforeEach(beforeTest); + afterEach(afterTest); describe('master detail container', () => { it('container is td element', async () => {