admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

TWNTY-3483 - Add tests for modules/object-record/record-table/record-table-cell/hooks (#3685)

Browse Source 
Add tests for `modules/object-record/record-table/record-table-cell/hooks`

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
This commit is contained in:
gitstart-app[bot]
2024-01-30 09:48:28 +01:00
committed by GitHub
parent a9349f9fea
commit 0239585d81
8 changed files with 515 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__mocks__/cell.ts Normal file
View File

@ -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<FieldMetadata>;
columnIndex: number;
} = {
columnIndex: 3,
columnDefinition: {
size: 1,
position: 1,
fieldMetadataId: 'fieldMetadataId',
label: 'label',
iconName: 'iconName',
type: 'TEXT',
metadata: {
placeHolder: 'placeHolder',
fieldName: 'fieldName',
},
},
};

91
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCloseRecordTableCell.test.tsx Normal file
View File

@ -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 }) => (
<RecoilRoot>
<RecordTableScope
recordTableScopeId={scopeId}
onColumnsChange={onColumnsChange}
>
<FieldContext.Provider
value={{
fieldDefinition: textfieldDefinition,
entityId: 'entityId',
hotkeyScope: TableHotkeyScope.Table,
isLabelIdentifier: false,
}}
>
<RecordTableRowContext.Provider value={recordTableRow}>
<RecordTableCellContext.Provider
value={{ ...recordTableCell, columnIndex: 0 }}
>
<EntityDeleteContext.Provider value={deleteEntity}>
{children}
</EntityDeleteContext.Provider>
</RecordTableCellContext.Provider>
</RecordTableRowContext.Provider>
</FieldContext.Provider>
</RecordTableScope>
</RecoilRoot>
);
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();
});
});

28
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCurrentCellPosition.test.tsx Normal file
View File

@ -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 }) => (
<RecordTableRowContext.Provider value={recordTableRow}>
<RecordTableCellContext.Provider value={recordTableCell}>
{children}
</RecordTableCellContext.Provider>
</RecordTableRowContext.Provider>
);
const { result } = renderHook(() => useCurrentTableCellPosition(), {
wrapper,
});
expect(result.current).toEqual({
column: 3,
row: 2,
});
});
});

50
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useCurrentTableCellEditMode.test.tsx Normal file
View File

@ -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 }) => (
<RecoilRoot>
<RecordTableScope
recordTableScopeId={scopeId}
onColumnsChange={onColumnsChange}
>
{children}
</RecordTableScope>
</RecoilRoot>
);
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);
});
});
});

33
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useIsSoftFocusOnCurrentTableCell.test.tsx Normal file
View File

@ -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 }) => (
<RecoilRoot>
<RecordTableScope recordTableScopeId="scopeId" onColumnsChange={jest.fn()}>
<RecordTableRowContext.Provider value={recordTableRow}>
<RecordTableCellContext.Provider value={recordTableCell}>
{children}
</RecordTableCellContext.Provider>
</RecordTableRowContext.Provider>
</RecordTableScope>
</RecoilRoot>
);
describe('useIsSoftFocusOnCurrentTableCell', () => {
it('should work as expected', () => {
const { result } = renderHook(() => useIsSoftFocusOnCurrentTableCell(), {
wrapper: Wrapper,
});
expect(result.current).toBe(false);
});
});

141
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useMoveSoftFocusToCurrentCellOnHover.test.tsx Normal file
View File

@ -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 }) => (
<RecoilRoot>
<RecordTableScope recordTableScopeId="scopeId" onColumnsChange={jest.fn()}>
<RecordTableRowContext.Provider value={recordTableRow}>
<RecordTableCellContext.Provider value={recordTableCell}>
{children}
</RecordTableCellContext.Provider>
</RecordTableRowContext.Provider>
</RecordTableScope>
</RecoilRoot>
);
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,
);
});
});

76
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useOpenRecordTableCell.test.tsx Normal file
View File

@ -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 }) => (
<RecoilRoot>
<RecordTableScope
recordTableScopeId={scopeId}
onColumnsChange={onColumnsChange}
>
<FieldContext.Provider
value={{
fieldDefinition: textfieldDefinition,
entityId: 'entityId',
hotkeyScope: TableHotkeyScope.Table,
isLabelIdentifier: false,
}}
>
<RecordTableRowContext.Provider value={recordTableRow}>
<RecordTableCellContext.Provider value={recordTableCell}>
<MemoryRouter initialEntries={['/one', '/two']} initialIndex={1}>
{children}
</MemoryRouter>
</RecordTableCellContext.Provider>
</RecordTableRowContext.Provider>
</FieldContext.Provider>
</RecordTableScope>
</RecoilRoot>
);
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);
});
});

68
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useSelectedTableCellEditMode.test.tsx Normal file
View File

@ -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,
);
});
});