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 <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>

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

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 }) => (
+  <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();
+  });
+});

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 }) => (
+      <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,
+    });
+  });
+});

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 }) => (
+  <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);
+    });
+  });
+});

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 }) => (
+  <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);
+  });
+});

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 }) => (
+  <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,
+    );
+  });
+});

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 }) => (
+  <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);
+  });
+});

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