Increase test coverage for /modules/ui (#3314)

* Increase test coverage for `/modules/ui`

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: FellipeMTX <fellipefacdir@gmail.com>
Co-authored-by: Fellipe Montes <102544529+FellipeMTX@users.noreply.github.com>

* Merge main

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: FellipeMTX <fellipefacdir@gmail.com>
Co-authored-by: Fellipe Montes <102544529+FellipeMTX@users.noreply.github.com>

* Fix tests

* Fix tests

* Fix

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: FellipeMTX <fellipefacdir@gmail.com>
Co-authored-by: Fellipe Montes <102544529+FellipeMTX@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useDropdown.test.tsx

@@ -0,0 +1,68 @@
+import { act } from 'react-dom/test-utils';
+import { expect } from '@storybook/test';
+import { renderHook } from '@testing-library/react';
+import { RecoilRoot } from 'recoil';
+
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+
+const dropdownId = 'test-dropdown-id';
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => {
+  return <RecoilRoot>{children}</RecoilRoot>;
+};
+
+describe('useDropdown', () => {
+  it('should toggleDropdown', async () => {
+    const { result } = renderHook(() => useDropdown(dropdownId), {
+      wrapper: Wrapper,
+    });
+
+    expect(result.current.isDropdownOpen).toBe(false);
+
+    act(() => {
+      result.current.toggleDropdown();
+    });
+
+    expect(result.current.isDropdownOpen).toBe(true);
+
+    act(() => {
+      result.current.toggleDropdown();
+    });
+
+    expect(result.current.isDropdownOpen).toBe(false);
+  });
+
+  it('should open and close dropdown', async () => {
+    const { result } = renderHook(() => useDropdown(dropdownId), {
+      wrapper: Wrapper,
+    });
+
+    expect(result.current.isDropdownOpen).toBe(false);
+
+    act(() => {
+      result.current.openDropdown();
+    });
+
+    expect(result.current.isDropdownOpen).toBe(true);
+
+    act(() => {
+      result.current.closeDropdown();
+    });
+
+    expect(result.current.isDropdownOpen).toBe(false);
+  });
+
+  it('should change dropdownWidth', async () => {
+    const { result } = renderHook(() => useDropdown(dropdownId), {
+      wrapper: Wrapper,
+    });
+
+    expect(result.current.dropdownWidth).toBe(160);
+
+    await act(async () => {
+      result.current.setDropdownWidth(220);
+    });
+
+    expect(result.current.dropdownWidth).toEqual(220);
+  });
+});

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useInternalHotkeyScopeManagement.test.tsx

@@ -0,0 +1,47 @@
+import { expect } from '@storybook/test';
+import { renderHook } from '@testing-library/react';
+import { RecoilRoot, useRecoilValue } from 'recoil';
+
+import { useDropdownStates } from '@/ui/layout/dropdown/hooks/internal/useDropdownStates';
+import { useInternalHotkeyScopeManagement } from '@/ui/layout/dropdown/hooks/useInternalHotkeyScopeManagement';
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+
+const dropdownScopeId = 'test-dropdown-id-scope';
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => {
+  return <RecoilRoot>{children}</RecoilRoot>;
+};
+
+describe('useInternalHotkeyScopeManagement', () => {
+  it('should update dropdownHotkeyScope', async () => {
+    const { result, rerender } = renderHook(
+      ({
+        dropdownHotkeyScopeFromParent,
+      }: {
+        dropdownHotkeyScopeFromParent?: HotkeyScope;
+      }) => {
+        useInternalHotkeyScopeManagement({
+          dropdownScopeId,
+          dropdownHotkeyScopeFromParent,
+        });
+        const { dropdownHotkeyScopeState } = useDropdownStates({
+          dropdownScopeId,
+        });
+        const dropdownHotkeyScope = useRecoilValue(dropdownHotkeyScopeState);
+        return { dropdownHotkeyScope };
+      },
+      {
+        wrapper: Wrapper,
+        initialProps: {},
+      },
+    );
+
+    expect(result.current.dropdownHotkeyScope).toBeNull();
+
+    const scopeFromParent = { scope: 'customScope' };
+
+    rerender({ dropdownHotkeyScopeFromParent: scopeFromParent });
+
+    expect(result.current.dropdownHotkeyScope).toEqual(scopeFromParent);
+  });
+});

packages/twenty-front/src/modules/ui/layout/hooks/__tests__/useIsMenuNavbarDisplayed.test.tsx

@@ -0,0 +1,40 @@
+import * as reactRouterDom from 'react-router-dom';
+
+import { useIsMenuNavbarDisplayed } from '../useIsMenuNavbarDisplayed';
+
+jest.mock('react-router-dom', () => ({
+  useLocation: jest.fn(),
+}));
+
+const setupMockLocation = (pathname: string) => {
+  jest.spyOn(reactRouterDom, 'useLocation').mockReturnValueOnce({
+    pathname,
+    state: undefined,
+    key: '',
+    search: '',
+    hash: '',
+  });
+};
+
+describe('useIsMenuNavbarDisplayed', () => {
+  it('Should return true for paths starting with "/companies"', () => {
+    setupMockLocation('/companies');
+
+    const result = useIsMenuNavbarDisplayed();
+    expect(result).toBeTruthy();
+  });
+
+  it('Should return true for paths starting with "/companies/"', () => {
+    setupMockLocation('/companies/test-some-subpath');
+
+    const result = useIsMenuNavbarDisplayed();
+    expect(result).toBeTruthy();
+  });
+
+  it('Should return false for paths not starting with "/companies"', () => {
+    setupMockLocation('/test-path');
+
+    const result = useIsMenuNavbarDisplayed();
+    expect(result).toBeFalsy();
+  });
+});

packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/__tests__/useRightDrawer.test.tsx

@@ -0,0 +1,56 @@
+import { act } from 'react-dom/test-utils';
+import { renderHook } from '@testing-library/react';
+import { RecoilRoot, useRecoilValue } from 'recoil';
+
+import { isRightDrawerExpandedState } from '../../states/isRightDrawerExpandedState';
+import { isRightDrawerOpenState } from '../../states/isRightDrawerOpenState';
+import { rightDrawerPageState } from '../../states/rightDrawerPageState';
+import { RightDrawerPages } from '../../types/RightDrawerPages';
+import { useRightDrawer } from '../useRightDrawer';
+
+describe('useRightDrawer', () => {
+  it('Should test the default behavior of useRightDrawer and change the states as the function calls', async () => {
+    const useCombinedHooks = () => {
+      const { openRightDrawer, closeRightDrawer } = useRightDrawer();
+      const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
+      const isRightDrawerExpanded = useRecoilValue(isRightDrawerExpandedState);
+
+      const rightDrawerPage = useRecoilValue(rightDrawerPageState);
+
+      return {
+        openRightDrawer,
+        closeRightDrawer,
+        isRightDrawerOpen,
+        isRightDrawerExpanded,
+        rightDrawerPage,
+      };
+    };
+
+    const { result } = renderHook(() => useCombinedHooks(), {
+      wrapper: RecoilRoot,
+    });
+
+    expect(result.current.rightDrawerPage).toBeNull();
+    expect(result.current.isRightDrawerExpanded).toBeFalsy();
+    expect(result.current.isRightDrawerOpen).toBeFalsy();
+    expect(result.current.openRightDrawer).toBeInstanceOf(Function);
+    expect(result.current.closeRightDrawer).toBeInstanceOf(Function);
+
+    await act(async () => {
+      result.current.openRightDrawer(RightDrawerPages.CreateActivity);
+    });
+
+    expect(result.current.rightDrawerPage).toEqual(
+      RightDrawerPages.CreateActivity,
+    );
+    expect(result.current.isRightDrawerExpanded).toBeFalsy();
+    expect(result.current.isRightDrawerOpen).toBeTruthy();
+
+    await act(async () => {
+      result.current.closeRightDrawer();
+    });
+
+    expect(result.current.isRightDrawerExpanded).toBeFalsy();
+    expect(result.current.isRightDrawerOpen).toBeFalsy();
+  });
+});

packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/__tests__/useSelectableList.test.ts

@@ -0,0 +1,84 @@
+import { act } from 'react-dom/test-utils';
+import { renderHook } from '@testing-library/react';
+import { RecoilRoot, useRecoilState, useRecoilValue } from 'recoil';
+
+import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListStates';
+import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
+
+const selectableListScopeId = 'testId';
+const testArr = [['1'], ['2'], ['3']];
+const emptyArr = [[]];
+
+describe('useSelectableList', () => {
+  it('Should setSelectableItemIds', async () => {
+    const { result } = renderHook(
+      () => {
+        const { setSelectableItemIds } = useSelectableList(
+          selectableListScopeId,
+        );
+
+        const { selectableItemIdsState } = useSelectableListStates({
+          selectableListScopeId,
+        });
+
+        const selectableItemIds = useRecoilValue(selectableItemIdsState);
+
+        return {
+          setSelectableItemIds,
+          selectableItemIds,
+        };
+      },
+      {
+        wrapper: RecoilRoot,
+      },
+    );
+
+    expect(result.current.selectableItemIds).toEqual(emptyArr);
+
+    await act(async () => {
+      result.current.setSelectableItemIds(testArr);
+    });
+
+    expect(result.current.selectableItemIds).toEqual(testArr);
+  });
+
+  it('Should resetSelectItem', async () => {
+    const { result } = renderHook(
+      () => {
+        const { resetSelectedItem } = useSelectableList(selectableListScopeId);
+
+        const { selectedItemIdState } = useSelectableListStates({
+          selectableListScopeId,
+        });
+
+        const [selectedItemId, setSelectedItemId] =
+          useRecoilState(selectedItemIdState);
+
+        return {
+          resetSelectedItem,
+          selectedItemId,
+          setSelectedItemId,
+        };
+      },
+      {
+        wrapper: RecoilRoot,
+      },
+    );
+
+    const { selectedItemId, setSelectedItemId } = result.current;
+
+    expect(selectedItemId).toBeNull();
+
+    await act(async () => {
+      setSelectedItemId?.('stateForTestValue');
+    });
+
+    expect(result.current.selectedItemId).toEqual('stateForTestValue');
+
+    await act(async () => {
+      result.current.resetSelectedItem();
+    });
+
+    expect(result.current.selectedItemId).toBeNull();
+  });
+});

packages/twenty-front/src/modules/ui/layout/states/ShowPageRecoilScopeContext.ts

@@ -1,3 +1,4 @@
 import { createContext } from 'react';
 
+/* istanbul ignore next */
 export const ShowPageRecoilScopeContext = createContext<string | null>(null);