From 0239585d815c3f6d08dd80c61352708f324c57f3 Mon Sep 17 00:00:00 2001 From: "gitstart-app[bot]" <57568882+gitstart-app[bot]@users.noreply.github.com> Date: Tue, 30 Jan 2024 09:48:28 +0100 Subject: [PATCH] TWNTY-3483 - Add tests for `modules/object-record/record-table/record-table-cell/hooks` (#3685) Add tests for `modules/object-record/record-table/record-table-cell/hooks` Co-authored-by: gitstart-twenty Co-authored-by: v1b3m Co-authored-by: Thiago Nascimbeni --- .../record-table-cell/hooks/__mocks__/cell.ts | 28 ++++ .../useCloseRecordTableCell.test.tsx | 91 +++++++++++ .../__tests__/useCurrentCellPosition.test.tsx | 28 ++++ .../useCurrentTableCellEditMode.test.tsx | 50 +++++++ .../useIsSoftFocusOnCurrentTableCell.test.tsx | 33 ++++ ...MoveSoftFocusToCurrentCellOnHover.test.tsx | 141 ++++++++++++++++++ .../__tests__/useOpenRecordTableCell.test.tsx | 76 ++++++++++ .../useSelectedTableCellEditMode.test.tsx | 68 +++++++++ 8 files changed, 515 insertions(+) create mode 100644 packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__mocks__/cell.ts create mode 100644 packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCloseRecordTableCell.test.tsx create mode 100644 packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCurrentCellPosition.test.tsx create mode 100644 packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCurrentTableCellEditMode.test.tsx create mode 100644 packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useIsSoftFocusOnCurrentTableCell.test.tsx create mode 100644 packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveSoftFocusToCurrentCellOnHover.test.tsx create mode 100644 packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useOpenRecordTableCell.test.tsx create mode 100644 packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useSelectedTableCellEditMode.test.tsx diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__mocks__/cell.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__mocks__/cell.ts new file mode 100644 index 000000000..af1402fba --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__mocks__/cell.ts @@ -0,0 +1,28 @@ +import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; +import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; + +export const recordTableRow = { + rowIndex: 2, + isSelected: false, + recordId: 'recordId', + pathToShowPage: '/', +}; + +export const recordTableCell: { + columnDefinition: ColumnDefinition; + columnIndex: number; +} = { + columnIndex: 3, + columnDefinition: { + size: 1, + position: 1, + fieldMetadataId: 'fieldMetadataId', + label: 'label', + iconName: 'iconName', + type: 'TEXT', + metadata: { + placeHolder: 'placeHolder', + fieldName: 'fieldName', + }, + }, +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCloseRecordTableCell.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCloseRecordTableCell.test.tsx new file mode 100644 index 000000000..5370062c9 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCloseRecordTableCell.test.tsx @@ -0,0 +1,91 @@ +import { act, renderHook } from '@testing-library/react'; +import { RecoilRoot, useRecoilValue } from 'recoil'; + +import { textfieldDefinition } from '@/object-record/record-field/__mocks__/fieldDefinitions'; +import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; +import { EntityDeleteContext } from '@/object-record/record-table/contexts/EntityDeleteHookContext'; +import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext'; +import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext'; +import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; +import { + recordTableCell, + recordTableRow, +} from '@/object-record/record-table/record-table-cell/hooks/__mocks__/cell'; +import { useCloseRecordTableCell } from '@/object-record/record-table/record-table-cell/hooks/useCloseRecordTableCell'; +import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope'; +import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope'; +import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect'; + +const setHotkeyScope = jest.fn(); + +jest.mock('@/ui/utilities/hotkey/hooks/useSetHotkeyScope', () => ({ + useSetHotkeyScope: () => setHotkeyScope, +})); + +const onColumnsChange = jest.fn(); +const deleteEntity = jest.fn(); +const scopeId = 'scopeId'; + +const Wrapper = ({ children }: { children: React.ReactNode }) => ( + + + + + + + {children} + + + + + + +); + +describe('useCloseRecordTableCell', () => { + it('should work as expected', async () => { + const { result } = renderHook( + () => { + const { + getCurrentTableCellInEditModePositionState, + isTableCellInEditModeFamilyState, + } = useRecordTableStates(); + const currentTableCellInEditModePosition = useRecoilValue( + getCurrentTableCellInEditModePositionState(), + ); + const isTableCellInEditMode = useRecoilValue( + isTableCellInEditModeFamilyState(currentTableCellInEditModePosition), + ); + return { + ...useCloseRecordTableCell(), + ...useDragSelect(), + isTableCellInEditMode, + }; + }, + { + wrapper: Wrapper, + }, + ); + + act(() => { + result.current.closeTableCell(); + }); + + expect(result.current.isDragSelectionStartEnabled()).toBe(true); + expect(result.current.isTableCellInEditMode).toBe(false); + expect(setHotkeyScope).toHaveBeenCalledWith('table-soft-focus'); + expect(deleteEntity).toHaveBeenCalled(); + }); +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCurrentCellPosition.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCurrentCellPosition.test.tsx new file mode 100644 index 000000000..36d87343f --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCurrentCellPosition.test.tsx @@ -0,0 +1,28 @@ +import { renderHook } from '@testing-library/react'; + +import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext'; +import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext'; + +import { recordTableCell, recordTableRow } from '../__mocks__/cell'; +import { useCurrentTableCellPosition } from '../useCurrentCellPosition'; + +describe('useCurrentTableCellPosition', () => { + it('should return the current table cell position', () => { + const wrapper = ({ children }: { children: React.ReactNode }) => ( + + + {children} + + + ); + + const { result } = renderHook(() => useCurrentTableCellPosition(), { + wrapper, + }); + + expect(result.current).toEqual({ + column: 3, + row: 2, + }); + }); +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCurrentTableCellEditMode.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCurrentTableCellEditMode.test.tsx new file mode 100644 index 000000000..fc8bf6467 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCurrentTableCellEditMode.test.tsx @@ -0,0 +1,50 @@ +import { act, renderHook, waitFor } from '@testing-library/react'; +import { RecoilRoot } from 'recoil'; + +import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope'; + +import { useCurrentTableCellEditMode } from '../useCurrentTableCellEditMode'; + +const onColumnsChange = jest.fn(); + +const scopeId = 'scopeId'; + +const Wrapper = ({ children }: { children: React.ReactNode }) => ( + + + {children} + + +); + +describe('useCurrentTableCellEditMode.', () => { + it('should return initial values', () => { + const { result } = renderHook(() => useCurrentTableCellEditMode(), { + wrapper: Wrapper, + }); + + expect(result.current.isCurrentTableCellInEditMode).toBe(false); + expect(result.current.setCurrentTableCellInEditMode).toBeInstanceOf( + Function, + ); + }); + + it('should call setCurrentTableCellInEditMode', async () => { + const { result } = renderHook(() => useCurrentTableCellEditMode(), { + wrapper: Wrapper, + }); + + expect(result.current.isCurrentTableCellInEditMode).toBe(false); + + act(() => { + result.current.setCurrentTableCellInEditMode(); + }); + + await waitFor(() => { + expect(result.current.isCurrentTableCellInEditMode).toBe(true); + }); + }); +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useIsSoftFocusOnCurrentTableCell.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useIsSoftFocusOnCurrentTableCell.test.tsx new file mode 100644 index 000000000..5d913ca86 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useIsSoftFocusOnCurrentTableCell.test.tsx @@ -0,0 +1,33 @@ +import { renderHook } from '@testing-library/react'; +import { RecoilRoot } from 'recoil'; + +import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext'; +import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext'; +import { + recordTableCell, + recordTableRow, +} from '@/object-record/record-table/record-table-cell/hooks/__mocks__/cell'; +import { useIsSoftFocusOnCurrentTableCell } from '@/object-record/record-table/record-table-cell/hooks/useIsSoftFocusOnCurrentTableCell'; +import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope'; + +const Wrapper = ({ children }: { children: React.ReactNode }) => ( + + + + + {children} + + + + +); + +describe('useIsSoftFocusOnCurrentTableCell', () => { + it('should work as expected', () => { + const { result } = renderHook(() => useIsSoftFocusOnCurrentTableCell(), { + wrapper: Wrapper, + }); + + expect(result.current).toBe(false); + }); +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveSoftFocusToCurrentCellOnHover.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveSoftFocusToCurrentCellOnHover.test.tsx new file mode 100644 index 000000000..f8337c3ba --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveSoftFocusToCurrentCellOnHover.test.tsx @@ -0,0 +1,141 @@ +import { act, renderHook } from '@testing-library/react'; +import { CallbackInterface, RecoilRoot } from 'recoil'; + +import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext'; +import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext'; +import { + recordTableCell, + recordTableRow, +} from '@/object-record/record-table/record-table-cell/hooks/__mocks__/cell'; +import { useMoveSoftFocusToCurrentCellOnHover } from '@/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover'; +import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope'; +import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition'; +import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope'; + +const mockSoftFocusPositionState = { + key: 'softFocusPositionStateScopeMap__{"scopeId":"scopeId"}', +}; +const mockSoftFocusActiveState = { + key: 'isSoftFocusActiveStateScopeMap__{"scopeId":"scopeId"}', +}; +const mockIsSoftFocusOnTableCellFamilyState = { + key: 'isSoftFocusOnTableCellFamilyStateScopeMap__{"familyKey":{"column":1,"row":0},"scopeId":"scopeId"}', +}; +const mockCurrentTableCellInEditModePositionState = { + key: 'currentTableCellInEditModePositionStateScopeMap__{"scopeId":"scopeId"}', +}; +const mockIsTableCellInEditModeFamilyState = { + key: 'isTableCellInEditModeFamilyStateScopeMap__{"familyKey":{"column":1,"row":0},"scopeId":"scopeId"}', +}; +const mockCurrentHotKeyScopeState = { + key: 'currentHotkeyScopeState', +}; + +const mockCallbackInterface = { + set: jest.fn(), + snapshot: { + getLoadable: (recoilValue: { key: string }) => ({ + getValue: () => { + if (recoilValue.key === mockSoftFocusPositionState.key) + return { column: 1, row: 0 }; + if (recoilValue.key === mockCurrentTableCellInEditModePositionState.key) + return { column: 1, row: 0 }; + else if (recoilValue.key === mockIsTableCellInEditModeFamilyState.key) + return false; + else if (recoilValue.key === mockCurrentHotKeyScopeState.key) + return { scope: TableHotkeyScope.Table }; + }, + }), + }, +} as unknown as CallbackInterface; + +const setSoftFocusPosition = jest.fn(); +const setOnColumnsChange = jest.fn(); +const setHotkeyScope = jest.fn(); + +jest.mock('recoil', () => ({ + ...jest.requireActual('recoil'), + useRecoilCallback: ( + callback: ( + _interface: CallbackInterface, + ) => (newPosition: TableCellPosition) => void, + ) => callback(mockCallbackInterface), +})); +jest.mock( + '@/object-record/record-table/hooks/internal/useRecordTableStates', + () => ({ + useRecordTableStates: () => ({ + getSoftFocusPositionState: () => mockSoftFocusPositionState, + getIsSoftFocusActiveState: () => mockSoftFocusActiveState, + isSoftFocusOnTableCellFamilyState: () => + mockIsSoftFocusOnTableCellFamilyState, + getCurrentTableCellInEditModePositionState: () => + mockCurrentTableCellInEditModePositionState, + isTableCellInEditModeFamilyState: () => + mockIsTableCellInEditModeFamilyState, + }), + }), +); +jest.mock('@/object-record/record-table/hooks/useRecordTable', () => ({ + useRecordTable: () => ({ + setSoftFocusPosition, + setOnColumnsChange, + }), +})); +jest.mock('@/ui/utilities/hotkey/hooks/useSetHotkeyScope', () => ({ + useSetHotkeyScope: () => setHotkeyScope, +})); + +const Wrapper = ({ children }: { children: React.ReactNode }) => ( + + + + + {children} + + + + +); + +describe('useMoveSoftFocusToCurrentCellOnHover', () => { + it('should work as expected', () => { + const { result } = renderHook( + () => { + return { + moveSoftFocusToCurrentCellOnHover: + useMoveSoftFocusToCurrentCellOnHover(), + }; + }, + { wrapper: Wrapper }, + ); + + act(() => { + result.current.moveSoftFocusToCurrentCellOnHover(); + }); + + expect(mockCallbackInterface.set).toHaveBeenCalledWith( + mockSoftFocusActiveState, + true, + ); + expect(mockCallbackInterface.set).toHaveBeenCalledWith( + mockIsSoftFocusOnTableCellFamilyState, + false, + ); + expect(mockCallbackInterface.set).toHaveBeenCalledWith( + mockSoftFocusPositionState, + { column: 3, row: 2 }, + ); + expect(mockCallbackInterface.set).toHaveBeenCalledWith( + mockIsSoftFocusOnTableCellFamilyState, + true, + ); + expect(mockCallbackInterface.set).toHaveBeenCalledWith( + mockSoftFocusActiveState, + true, + ); + expect(setHotkeyScope).toHaveBeenCalledWith( + TableHotkeyScope.TableSoftFocus, + ); + }); +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useOpenRecordTableCell.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useOpenRecordTableCell.test.tsx new file mode 100644 index 000000000..b144300eb --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useOpenRecordTableCell.test.tsx @@ -0,0 +1,76 @@ +import { MemoryRouter } from 'react-router-dom'; +import { act, renderHook, waitFor } from '@testing-library/react'; +import { RecoilRoot } from 'recoil'; + +import { textfieldDefinition } from '@/object-record/record-field/__mocks__/fieldDefinitions'; +import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; +import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext'; +import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext'; +import { + recordTableCell, + recordTableRow, +} from '@/object-record/record-table/record-table-cell/hooks/__mocks__/cell'; +import { useOpenRecordTableCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCell'; +import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope'; +import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope'; +import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect'; + +const setHotkeyScope = jest.fn(); + +jest.mock('@/ui/utilities/hotkey/hooks/useSetHotkeyScope', () => ({ + useSetHotkeyScope: () => setHotkeyScope, +})); + +const onColumnsChange = jest.fn(); +const scopeId = 'scopeId'; + +const Wrapper = ({ children }: { children: React.ReactNode }) => ( + + + + + + + {children} + + + + + + +); + +describe('useOpenRecordTableCell', () => { + it('should work as expected', async () => { + const { result } = renderHook( + () => { + return { ...useOpenRecordTableCell(), ...useDragSelect() }; + }, + { + wrapper: Wrapper, + }, + ); + + expect(result.current.isDragSelectionStartEnabled()).toBe(true); + + act(() => { + result.current.openTableCell(); + }); + + await waitFor(() => { + expect(result.current.isDragSelectionStartEnabled()).toBe(false); + }); + + expect(setHotkeyScope).toHaveBeenCalledWith('cell-edit-mode', undefined); + }); +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useSelectedTableCellEditMode.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useSelectedTableCellEditMode.test.tsx new file mode 100644 index 000000000..9cbf45efe --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useSelectedTableCellEditMode.test.tsx @@ -0,0 +1,68 @@ +import { act, renderHook } from '@testing-library/react'; +import { CallbackInterface, RecoilRoot } from 'recoil'; + +import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition'; + +import { useSelectedTableCellEditMode } from '../useSelectedTableCellEditMode'; + +const scopeId = 'yourScopeId'; + +const mockCallbackInterface = { + set: jest.fn(), + snapshot: { + getLoadable: () => ({ + getValue: () => ({ row: 0, column: 0 }), + }), + }, +} as unknown as CallbackInterface; + +jest.mock('recoil', () => ({ + ...jest.requireActual('recoil'), + useRecoilCallback: ( + callback: ( + _interface: CallbackInterface, + ) => (newPosition: TableCellPosition) => void, + ) => callback(mockCallbackInterface), +})); + +describe('useSelectedTableCellEditMode', () => { + it('should have property setSelectedTableCellEditMode', async () => { + const tableCellPosition: TableCellPosition = { + row: 1, + column: 5, + }; + + const { result } = renderHook( + () => useSelectedTableCellEditMode({ scopeId }), + { + wrapper: RecoilRoot, + }, + ); + + act(() => { + result.current.setSelectedTableCellEditMode( + tableCellPosition.row, + tableCellPosition.column, + ); + }); + + expect(mockCallbackInterface.set).toHaveBeenCalledWith( + { + key: 'isTableCellInEditModeFamilyStateScopeMap__{"familyKey":{"column":0,"row":0},"scopeId":"yourScopeId-scope"}', + }, + false, + ); + expect(mockCallbackInterface.set).toHaveBeenCalledWith( + { + key: 'currentTableCellInEditModePositionStateScopeMap__{"scopeId":"yourScopeId-scope"}', + }, + { column: 5, row: 1 }, + ); + expect(mockCallbackInterface.set).toHaveBeenCalledWith( + { + key: 'isTableCellInEditModeFamilyStateScopeMap__{"familyKey":{"column":5,"row":1},"scopeId":"yourScopeId-scope"}', + }, + true, + ); + }); +});