From c86d7ff2eedf3523a88b346edc76d13d8b7100c9 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Tue, 12 Dec 2023 11:38:22 +0300 Subject: [PATCH 1/2] add useColumnsConfiguration test --- .../columnsConfigurationUtils.test.tsx | 178 +------------- .../useConlumnsConfiguration.test.tsx | 220 ++++++++++++++++++ .../hooks/useColumnsConfiguration.ts | 2 +- 3 files changed, 223 insertions(+), 177 deletions(-) create mode 100644 uui-components/src/table/columnsConfigurationModal/__tests__/useConlumnsConfiguration.test.tsx diff --git a/uui-components/src/table/columnsConfigurationModal/__tests__/columnsConfigurationUtils.test.tsx b/uui-components/src/table/columnsConfigurationModal/__tests__/columnsConfigurationUtils.test.tsx index a0b7d8e11b..2cad5f1af9 100644 --- a/uui-components/src/table/columnsConfigurationModal/__tests__/columnsConfigurationUtils.test.tsx +++ b/uui-components/src/table/columnsConfigurationModal/__tests__/columnsConfigurationUtils.test.tsx @@ -1,6 +1,6 @@ -import { ColumnsConfigurationRowProps, GroupedDataColumnProps } from '../types'; +import { GroupedDataColumnProps } from '../types'; import { ColumnsConfig, DataColumnProps } from '@epam/uui-core'; -import { groupAndFilterSortedColumns, isColumnFilteredOut, sortColumnsAndAddGroupKey } from '../columnsConfigurationUtils'; +import { isColumnFilteredOut, sortColumnsAndAddGroupKey } from '../columnsConfigurationUtils'; function getTestDataSet1() { const A: DataColumnProps = { @@ -38,146 +38,6 @@ function getTestDataSet1() { }; } -const unpinnedFields : ColumnsConfigurationRowProps[] = [ - { - groupKey: 'displayedUnpinned', - key: 'Column 1', - toggleVisibility: jest.fn(), - togglePin: jest.fn(), - onCanAcceptDrop: jest.fn(), - onDrop: jest.fn(), - columnConfig: {}, - isDndAllowed: true, - isPinned: false, - isPinnedAlways: false, - width: 0, - caption: 'Column 1', - }, - { - groupKey: 'displayedUnpinned', - key: 'Column 2', - toggleVisibility: jest.fn(), - togglePin: jest.fn(), - onCanAcceptDrop: jest.fn(), - onDrop: jest.fn(), - columnConfig: {}, - isDndAllowed: true, - isPinned: false, - isPinnedAlways: false, - width: 0, - caption: 'Column 2', - }, - { - groupKey: 'displayedUnpinned', - key: 'Column 3', - toggleVisibility: jest.fn(), - togglePin: jest.fn(), - onCanAcceptDrop: jest.fn(), - onDrop: jest.fn(), - columnConfig: {}, - isDndAllowed: true, - isPinned: false, - isPinnedAlways: false, - width: 0, - caption: 'Column 3', - }, -]; - -const pinnedFields : ColumnsConfigurationRowProps[] = [ - { - groupKey: 'displayedPinned', - key: 'Column 4', - toggleVisibility: jest.fn(), - togglePin: jest.fn(), - onCanAcceptDrop: jest.fn(), - onDrop: jest.fn(), - columnConfig: {}, - isDndAllowed: true, - isPinned: false, - isPinnedAlways: false, - width: 0, - caption: 'Column 4', - }, - { - groupKey: 'displayedPinned', - key: 'Column 5', - toggleVisibility: jest.fn(), - togglePin: jest.fn(), - onCanAcceptDrop: jest.fn(), - onDrop: jest.fn(), - columnConfig: {}, - isDndAllowed: true, - isPinned: false, - isPinnedAlways: false, - width: 0, - caption: 'Column 5', - }, -]; - -const pinnedRightFields:ColumnsConfigurationRowProps[] = [ - { - groupKey: 'displayedPinnedRight', - key: 'Column 6', - toggleVisibility: jest.fn(), - togglePin: jest.fn(), - onCanAcceptDrop: jest.fn(), - onDrop: jest.fn(), - columnConfig: {}, - isDndAllowed: true, - isPinned: false, - isPinnedAlways: false, - fix: 'right', - width: 0, - caption: 'Column 6', - }, - { - groupKey: 'displayedPinnedRight', - key: 'Column 7', - toggleVisibility: jest.fn(), - togglePin: jest.fn(), - onCanAcceptDrop: jest.fn(), - onDrop: jest.fn(), - columnConfig: {}, - isDndAllowed: true, - isPinned: false, - isPinnedAlways: false, - fix: 'right', - width: 0, - caption: 'Column 7', - }, -]; - -const hiddenFields: ColumnsConfigurationRowProps[] = [ - { - groupKey: 'hidden', - key: 'Column 8', - toggleVisibility: jest.fn(), - togglePin: jest.fn(), - onCanAcceptDrop: jest.fn(), - onDrop: jest.fn(), - columnConfig: {}, - isDndAllowed: true, - isPinned: false, - isPinnedAlways: false, - width: 0, - caption: 'Column 8', - }, - { - groupKey: 'hidden', - key: 'Column 9', - toggleVisibility: jest.fn(), - togglePin: jest.fn(), - onCanAcceptDrop: jest.fn(), - onDrop: jest.fn(), - columnConfig: {}, - isDndAllowed: true, - isPinned: false, - isPinnedAlways: false, - width: 0, - caption: 'Column 9', - }, -]; - describe('columnsConfigurationUtils', () => { describe('sortColumnsAndAddGroupKey', () => { it('should sort columns by "order" and should add "groupKey" attribute', () => { @@ -218,38 +78,4 @@ describe('columnsConfigurationUtils', () => { // expect(result).toBe(true); // }); }); - - describe('groupAndFilterSortedColumns', () => { - it('should group and filter sorted columns correctly', () => { - const sortedColumns: ColumnsConfigurationRowProps[] = [ - ...unpinnedFields, - ...pinnedFields, - ...hiddenFields, - ...pinnedRightFields, - ]; - const getSearchFields = jest.fn().mockReturnValue([]); - const searchValue = ''; - - const prevConfig = { - ...sortedColumns.reduce((acc, column) => ({ ...acc, [column.key]: { isVisible: true, width: 10, order: column.key } }), {}), - }; - sortColumnsAndAddGroupKey({ columns: sortedColumns, prevConfig }); - const result = groupAndFilterSortedColumns({ sortedColumns, searchValue, getSearchFields }); - - expect(JSON.stringify(result)).toEqual(JSON.stringify({ - displayedPinned: [ - ...pinnedFields, - ], - displayedUnpinned: [ - ...unpinnedFields, - ], - hidden: [ - ...hiddenFields, - ], - displayedPinnedRight: [ - ...pinnedRightFields, - ], - })); - }); - }); }); diff --git a/uui-components/src/table/columnsConfigurationModal/__tests__/useConlumnsConfiguration.test.tsx b/uui-components/src/table/columnsConfigurationModal/__tests__/useConlumnsConfiguration.test.tsx new file mode 100644 index 0000000000..490e3aa2e9 --- /dev/null +++ b/uui-components/src/table/columnsConfigurationModal/__tests__/useConlumnsConfiguration.test.tsx @@ -0,0 +1,220 @@ +import { renderHook } from '@epam/uui-test-utils'; +import { UseColumnsConfigurationProps, useColumnsConfiguration } from '../hooks/useColumnsConfiguration'; + +const initialColumnsConfig = { + name: { + width: 200, + fix: 'left', + isVisible: true, + order: 'm', + }, + profileStatus: { + width: 140, + isVisible: true, + order: 's', + }, + salary: { + width: 100, + isVisible: true, + order: 'v', + }, + jobTitle: { + width: 200, + isVisible: true, + order: 'x', + fix: 'right', + }, + detailed: { + width: 54, + fix: 'right', + isVisible: true, + order: 'y', + }, +}; + +const defaultConfig = { + name: { + width: 200, + fix: 'left', + isVisible: true, + order: 'm', + }, + profileStatus: { + width: 140, + isVisible: true, + order: 's', + }, + salary: { + width: 100, + isVisible: true, + order: 'v', + }, + jobTitle: { + width: 200, + isVisible: true, + order: 'x', + fix: 'right', + }, + detailed: { + width: 54, + fix: 'right', + isVisible: true, + order: 'y', + }, +}; + +const columns = [ + { + key: 'name', + caption: 'Name', + width: 200, + fix: 'left', + isSortable: true, + }, + { + key: 'profileStatus', + caption: 'Profile Status', + width: 140, + minWidth: 80, + isSortable: true, + alignSelf: 'center', + info: 'Person Status according his work profile', + }, + { + key: 'salary', + caption: 'Salary', + isSortable: true, + width: 100, + textAlign: 'right', + info: 'Salary sum for the last year', + }, + { + key: 'jobTitle', + caption: 'Title', + width: 200, + grow: 1, + fix: 'right', + isSortable: true, + info: 'Job full description', + }, + { + key: 'detailed', + width: 54, + alignSelf: 'center', + fix: 'right', + info: 'detailed description', + }, +]; + +describe('useColumnsConfiguration', () => { + it('should render hook', () => { + const { result } = renderHook(() => useColumnsConfiguration({ + initialColumnsConfig, + defaultConfig, + columns, + } as UseColumnsConfigurationProps)); + + expect(result.current.columnsConfig).toEqual(initialColumnsConfig); + + expect(result.current.groupedColumns.displayedPinned.length).toBe(1); + expect(result.current.groupedColumns.displayedPinned).toEqual( + expect.arrayContaining( + [expect.objectContaining( + { + key: 'name', + caption: 'Name', + width: 200, + fix: 'left', + isSortable: true, + groupKey: 'displayedPinned', + columnConfig: { + fix: 'left', + isVisible: true, + order: 'm', + width: 200, + }, + isDndAllowed: true, + isPinnedAlways: false, + isPinned: true, + }, + )], + ), + ); + expect(result.current.groupedColumns.displayedUnpinned.length).toBe(2); + expect(result.current.groupedColumns.displayedUnpinned).toEqual( + expect.arrayContaining( + [ + expect.objectContaining( + { + key: 'profileStatus', + caption: 'Profile Status', + width: 140, + minWidth: 80, + isSortable: true, + alignSelf: 'center', + info: 'Person Status according his work profile', + groupKey: 'displayedUnpinned', + columnConfig: { + isVisible: true, + order: 's', + width: 140, + }, + isDndAllowed: true, + isPinnedAlways: false, + isPinned: false, + }, + ), + expect.objectContaining( + { + key: 'salary', + caption: 'Salary', + isSortable: true, + width: 100, + textAlign: 'right', + info: 'Salary sum for the last year', + groupKey: 'displayedUnpinned', + columnConfig: { + isVisible: true, + order: 'v', + width: 100, + }, + isDndAllowed: true, + isPinnedAlways: false, + isPinned: false, + }, + ), + + ], + ), + ); + + expect(result.current.groupedColumns.displayedPinnedRight.length).toBe(1); + expect(result.current.groupedColumns.displayedPinnedRight).toEqual( + expect.arrayContaining( + [ + expect.objectContaining( + { + key: 'jobTitle', + caption: 'Title', + width: 200, + grow: 1, + fix: 'right', + isSortable: true, + info: 'Job full description', + groupKey: 'displayedPinnedRight', + columnConfig: { + fix: 'right', + isVisible: true, + order: 'x', + width: 200, + }, + isDndAllowed: true, + isPinnedAlways: false, + isPinned: true, + }, + ), + ], + ), + ); + }); +}); diff --git a/uui-components/src/table/columnsConfigurationModal/hooks/useColumnsConfiguration.ts b/uui-components/src/table/columnsConfigurationModal/hooks/useColumnsConfiguration.ts index 9596328a1b..c62aa365b4 100644 --- a/uui-components/src/table/columnsConfigurationModal/hooks/useColumnsConfiguration.ts +++ b/uui-components/src/table/columnsConfigurationModal/hooks/useColumnsConfiguration.ts @@ -7,7 +7,7 @@ import { canAcceptDrop, isColumnAlwaysPinned } from '../columnsConfigurationUtil import { DndDataType, GroupedDataColumnProps, ColumnsConfigurationRowProps } from '../types'; import { groupAndFilterSortedColumns, sortColumnsAndAddGroupKey } from '../columnsConfigurationUtils'; -interface UseColumnsConfigurationProps { +export interface UseColumnsConfigurationProps { initialColumnsConfig: ColumnsConfig; defaultConfig: ColumnsConfig; columns: DataColumnProps[]; From 308a86964911ee63abf818e363c8e65e19ab4505 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Tue, 12 Dec 2023 14:25:33 +0300 Subject: [PATCH 2/2] fix interface --- .../__tests__/useConlumnsConfiguration.test.tsx | 11 ++++++----- .../hooks/useColumnsConfiguration.ts | 2 +- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/uui-components/src/table/columnsConfigurationModal/__tests__/useConlumnsConfiguration.test.tsx b/uui-components/src/table/columnsConfigurationModal/__tests__/useConlumnsConfiguration.test.tsx index 490e3aa2e9..5be962f8e2 100644 --- a/uui-components/src/table/columnsConfigurationModal/__tests__/useConlumnsConfiguration.test.tsx +++ b/uui-components/src/table/columnsConfigurationModal/__tests__/useConlumnsConfiguration.test.tsx @@ -1,5 +1,6 @@ import { renderHook } from '@epam/uui-test-utils'; -import { UseColumnsConfigurationProps, useColumnsConfiguration } from '../hooks/useColumnsConfiguration'; +import { useColumnsConfiguration } from '../hooks/useColumnsConfiguration'; +import { ColumnsConfig, DataColumnProps } from '@epam/uui-core'; const initialColumnsConfig = { name: { @@ -109,10 +110,10 @@ const columns = [ describe('useColumnsConfiguration', () => { it('should render hook', () => { const { result } = renderHook(() => useColumnsConfiguration({ - initialColumnsConfig, - defaultConfig, - columns, - } as UseColumnsConfigurationProps)); + initialColumnsConfig: initialColumnsConfig as ColumnsConfig, + defaultConfig: defaultConfig as ColumnsConfig, + columns: columns as DataColumnProps[], + })); expect(result.current.columnsConfig).toEqual(initialColumnsConfig); diff --git a/uui-components/src/table/columnsConfigurationModal/hooks/useColumnsConfiguration.ts b/uui-components/src/table/columnsConfigurationModal/hooks/useColumnsConfiguration.ts index c62aa365b4..9596328a1b 100644 --- a/uui-components/src/table/columnsConfigurationModal/hooks/useColumnsConfiguration.ts +++ b/uui-components/src/table/columnsConfigurationModal/hooks/useColumnsConfiguration.ts @@ -7,7 +7,7 @@ import { canAcceptDrop, isColumnAlwaysPinned } from '../columnsConfigurationUtil import { DndDataType, GroupedDataColumnProps, ColumnsConfigurationRowProps } from '../types'; import { groupAndFilterSortedColumns, sortColumnsAndAddGroupKey } from '../columnsConfigurationUtils'; -export interface UseColumnsConfigurationProps { +interface UseColumnsConfigurationProps { initialColumnsConfig: ColumnsConfig; defaultConfig: ColumnsConfig; columns: DataColumnProps[];