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..5be962f8e2 --- /dev/null +++ b/uui-components/src/table/columnsConfigurationModal/__tests__/useConlumnsConfiguration.test.tsx @@ -0,0 +1,221 @@ +import { renderHook } from '@epam/uui-test-utils'; +import { useColumnsConfiguration } from '../hooks/useColumnsConfiguration'; +import { ColumnsConfig, DataColumnProps } from '@epam/uui-core'; + +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: initialColumnsConfig as ColumnsConfig, + defaultConfig: defaultConfig as ColumnsConfig, + columns: columns as DataColumnProps[], + })); + + 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, + }, + ), + ], + ), + ); + }); +});