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/feedback/dialog-manager/hooks/__tests__/useDialogManager.test.tsx

@@ -0,0 +1,197 @@
+import { act } from 'react-dom/test-utils';
+import { renderHook } from '@testing-library/react';
+import { RecoilRoot } from 'recoil';
+import { v4 as uuidv4 } from 'uuid';
+
+import { useDialogManagerScopedStates } from '@/ui/feedback/dialog-manager/hooks/internal/useDialogManagerScopedStates';
+import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager';
+import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogManagerScope';
+import { DialogOptions } from '@/ui/feedback/dialog-manager/types/DialogOptions';
+
+const mockedUuid = 'mocked-uuid';
+jest.mock('uuid');
+
+(uuidv4 as jest.Mock).mockReturnValue(mockedUuid);
+
+const dialogManagerScopeId = 'dialog-manager';
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <RecoilRoot>
+    <DialogManagerScope dialogManagerScopeId={dialogManagerScopeId}>
+      {children}
+    </DialogManagerScope>
+  </RecoilRoot>
+);
+
+const renderHookConfig = {
+  wrapper: Wrapper,
+};
+
+const mockOnclick = jest.fn();
+
+type DialogOptionsArray = Array<Omit<DialogOptions, 'id'>>;
+
+const dialogOptionsArray: DialogOptionsArray = [
+  {
+    title: 'test for title 1',
+    message: 'this is a test for message 1?',
+    buttons: [
+      { title: 'Dont do this' },
+      {
+        title: 'Are you sure?',
+        onClick: mockOnclick,
+        variant: 'primary',
+        role: 'confirm',
+      },
+    ],
+  },
+  {
+    title: 'test for title 2',
+    message: 'this is a test for message 2?',
+    buttons: [
+      { title: 'Dont do this' },
+      {
+        title: 'Are you sure?',
+        onClick: mockOnclick,
+        variant: 'primary',
+        role: 'confirm',
+      },
+    ],
+  },
+  {
+    title: 'test for title 3',
+    message: 'this is a test for message 3?',
+    buttons: [
+      { title: 'Dont do this' },
+      {
+        title: 'Are you sure?',
+        onClick: mockOnclick,
+        variant: 'primary',
+        role: 'confirm',
+      },
+    ],
+  },
+];
+
+const renderHooks = () => {
+  const { result } = renderHook(
+    () => ({
+      dialogManager: useDialogManager({
+        dialogManagerScopeId: dialogManagerScopeId,
+      }),
+      internalState: useDialogManagerScopedStates({
+        dialogManagerScopeId,
+      }),
+    }),
+    renderHookConfig,
+  );
+
+  return result;
+};
+
+const expectedReturnFromEnqueue = (
+  options: Array<Omit<DialogOptions, 'id'>>,
+) => {
+  return options.map((option) => ({
+    id: 'mocked-uuid',
+    ...option,
+  }));
+};
+
+describe('useDialogManager', () => {
+  describe('tests for useDialogManager - enqueueDialog', () => {
+    it('Should enqueueDialog', () => {
+      const result = renderHooks();
+
+      const expectReturn = expectedReturnFromEnqueue([dialogOptionsArray[0]]);
+
+      act(() => {
+        result.current.dialogManager.enqueueDialog(dialogOptionsArray[0]);
+      });
+
+      const { dialogInternal } = result.current.internalState;
+
+      expect(dialogInternal.maxQueue).toEqual(2);
+      expect(dialogInternal.queue).toHaveLength(1);
+      expect(dialogInternal.queue).toEqual(expectReturn);
+    });
+
+    it('Should enqueueDialog with 2 options', () => {
+      const result = renderHooks();
+
+      const expectReturn = expectedReturnFromEnqueue([
+        dialogOptionsArray[0],
+        dialogOptionsArray[1],
+      ]);
+
+      act(() => {
+        result.current.dialogManager.enqueueDialog(dialogOptionsArray[0]);
+        result.current.dialogManager.enqueueDialog(dialogOptionsArray[1]);
+      });
+
+      const { dialogInternal } = result.current.internalState;
+
+      expect(dialogInternal.maxQueue).toEqual(2);
+      expect(dialogInternal.queue).toHaveLength(2);
+      expect(dialogInternal.queue).toEqual(expectReturn);
+    });
+
+    it('Should enqueueDialog with 3 options and drop the first option from the queue.', () => {
+      const result = renderHooks();
+
+      const expectReturn = expectedReturnFromEnqueue([
+        dialogOptionsArray[1],
+        dialogOptionsArray[2],
+      ]);
+
+      act(() => {
+        result.current.dialogManager.enqueueDialog(dialogOptionsArray[0]);
+        result.current.dialogManager.enqueueDialog(dialogOptionsArray[1]);
+        result.current.dialogManager.enqueueDialog(dialogOptionsArray[2]);
+      });
+
+      const { dialogInternal } = result.current.internalState;
+
+      expect(dialogInternal.maxQueue).toEqual(2);
+      expect(dialogInternal.queue).toHaveLength(2);
+      expect(dialogInternal.queue).toEqual(expectReturn);
+    });
+  });
+
+  describe('tests for useDialogManager - closeDialog', () => {
+    it('Should reset the dialog state when the closeDialog function is called with the provided id', async () => {
+      const result = renderHooks();
+
+      act(() => {
+        result.current.dialogManager.enqueueDialog(dialogOptionsArray[0]);
+        result.current.dialogManager.enqueueDialog(dialogOptionsArray[1]);
+      });
+
+      const expectReturnWhenEnqueue = expectedReturnFromEnqueue([
+        dialogOptionsArray[0],
+        dialogOptionsArray[1],
+      ]);
+
+      const { dialogInternal: stateAfterEnqueue } =
+        result.current.internalState;
+
+      expect(stateAfterEnqueue.maxQueue).toEqual(2);
+      expect(stateAfterEnqueue.queue).toHaveLength(2);
+      expect(stateAfterEnqueue.queue).toEqual(expectReturnWhenEnqueue);
+
+      act(() => {
+        result.current.dialogManager.closeDialog('mocked-uuid');
+      });
+
+      const expectReturnWhenClose = {
+        maxQueue: 2,
+        queue: [],
+      };
+
+      const { dialogInternal: stateAfterClose } = result.current.internalState;
+
+      expect(stateAfterClose).toEqual(expectReturnWhenClose);
+      expect(stateAfterClose.maxQueue).toEqual(2);
+      expect(stateAfterClose.queue).toHaveLength(0);
+    });
+  });
+});

packages/twenty-front/src/modules/ui/feedback/dialog-manager/hooks/internal/__tests__/useDialogManagerScopedStates.test.tsx

@@ -0,0 +1,48 @@
+import { act } from 'react-dom/test-utils';
+import { renderHook } from '@testing-library/react';
+import { RecoilRoot } from 'recoil';
+
+import { useDialogManagerScopedStates } from '@/ui/feedback/dialog-manager/hooks/internal/useDialogManagerScopedStates';
+import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogManagerScope';
+
+const dialogManagerScopeId = 'dialog-manager';
+
+const defaultReturnDialogState = { maxQueue: 2, queue: [] };
+
+const updatedReturnDialogState = {
+  maxQueue: 5,
+  queue: [{ id: 'fakeId', title: 'testTitle', message: 'testMessage' }],
+};
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <RecoilRoot>
+      <DialogManagerScope dialogManagerScopeId={dialogManagerScopeId}>
+        {children}
+      </DialogManagerScope>
+    </RecoilRoot>
+  );
+};
+
+describe('useDialogManagerScopedStates', () => {
+  it('Should return a dialog state and a function to update the state', async () => {
+    const { result } = renderHook(
+      () =>
+        useDialogManagerScopedStates({
+          dialogManagerScopeId,
+        }),
+      {
+        wrapper: Wrapper,
+      },
+    );
+
+    expect(result.current.dialogInternal).toEqual(defaultReturnDialogState);
+    expect(result.current.setDialogInternal).toBeInstanceOf(Function);
+
+    await act(async () => {
+      result.current.setDialogInternal(updatedReturnDialogState);
+    });
+
+    expect(result.current.dialogInternal).toEqual(updatedReturnDialogState);
+  });
+});

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/hooks/__tests__/usePausableTimeout.test.tsx

@@ -0,0 +1,47 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { usePausableTimeout } from '@/ui/feedback/snack-bar-manager/hooks/usePausableTimeout';
+
+jest.useFakeTimers();
+
+describe('usePausableTimeout', () => {
+  it('should pause and resume timeout', () => {
+    let callbackExecuted = false;
+    const callback = () => {
+      callbackExecuted = true;
+    };
+
+    const { result } = renderHook(() => usePausableTimeout(callback, 1000));
+
+    // timetravel 500ms into the future
+    act(() => {
+      jest.advanceTimersByTime(500);
+    });
+
+    expect(callbackExecuted).toBe(false);
+
+    act(() => {
+      result.current.pauseTimeout();
+    });
+
+    // timetravel another 500ms into the future
+    act(() => {
+      jest.advanceTimersByTime(500);
+    });
+
+    // The callback should not have been executed while paused
+    expect(callbackExecuted).toBe(false);
+
+    act(() => {
+      result.current.resumeTimeout();
+    });
+
+    // advance all timers controlled by Jest to their final state
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    // The callback should now have been executed
+    expect(callbackExecuted).toBe(true);
+  });
+});

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/hooks/internal/__tests__/useSnackBarManagerScopedStates.test.tsx

@@ -0,0 +1,46 @@
+import { act } from 'react-dom/test-utils';
+import { renderHook } from '@testing-library/react';
+import { RecoilRoot } from 'recoil';
+
+import { useSnackBarManagerScopedStates } from '@/ui/feedback/snack-bar-manager/hooks/internal/useSnackBarManagerScopedStates';
+import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
+import { SnackBarState } from '@/ui/feedback/snack-bar-manager/states/snackBarInternalScopedState';
+
+const snackBarManagerScopeId = 'snack-bar-manager';
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <RecoilRoot>
+      <SnackBarProviderScope snackBarManagerScopeId={snackBarManagerScopeId}>
+        {children}
+      </SnackBarProviderScope>
+    </RecoilRoot>
+  );
+};
+
+describe('useSnackBarManagerScopedStates', () => {
+  it('should return snackbar state and a function to update the state', async () => {
+    const { result } = renderHook(
+      () =>
+        useSnackBarManagerScopedStates({
+          snackBarManagerScopeId,
+        }),
+      { wrapper: Wrapper },
+    );
+
+    const defaultState = { maxQueue: 3, queue: [] };
+
+    expect(result.current.snackBarInternal).toEqual(defaultState);
+
+    const newSnackBarState: SnackBarState = {
+      maxQueue: 5,
+      queue: [{ id: 'testid', role: 'alert', message: 'TEST MESSAGE' }],
+    };
+
+    act(() => {
+      result.current.setSnackBarInternal(newSnackBarState);
+    });
+
+    expect(result.current.snackBarInternal).toEqual(newSnackBarState);
+  });
+});

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/states/snackBarInternalScopedState.ts

@@ -6,7 +6,7 @@ export type SnackBarOptions = SnackBarProps & {
   id: string;
 };
 
-type SnackBarState = {
+export type SnackBarState = {
   maxQueue: number;
   queue: SnackBarOptions[];
 };