From 2dae5b004696d1aa0a7729af0b8c5fe80b85038c Mon Sep 17 00:00:00 2001
From: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Date: Tue, 23 Jan 2024 10:45:19 +0100
Subject: [PATCH] Add tests for `modules/ui/utilities/pointer-event` (#3586)

Add test `modules/ui/utilities/pointer-event`

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>
---
 .../useClickOutsideListener.test.tsx          |  42 +++++++
 .../useListenClickOutsideV2.test.tsx          | 111 ++++++++++++++++++
 2 files changed, 153 insertions(+)
 create mode 100644 packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/__tests__/useClickOutsideListener.test.tsx
 create mode 100644 packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/__tests__/useListenClickOutsideV2.test.tsx

diff --git a/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/__tests__/useClickOutsideListener.test.tsx b/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/__tests__/useClickOutsideListener.test.tsx
new file mode 100644
index 0000000000..5916fa12ad
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/__tests__/useClickOutsideListener.test.tsx
@@ -0,0 +1,42 @@
+import { act, renderHook } from '@testing-library/react';
+import { RecoilRoot, useRecoilValue } from 'recoil';
+
+import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
+import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
+
+const componentId = 'componentId';
+
+describe('useClickOutsideListener', () => {
+  it('should toggle the click outside listener activation state', async () => {
+    const { result } = renderHook(
+      () => {
+        const { getClickOutsideListenerIsActivatedState } =
+          useClickOustideListenerStates(componentId);
+
+        return {
+          useClickOutside: useClickOutsideListener(componentId),
+          isActivated: useRecoilValue(
+            getClickOutsideListenerIsActivatedState(),
+          ),
+        };
+      },
+      {
+        wrapper: RecoilRoot,
+      },
+    );
+
+    const toggle = result.current.useClickOutside.toggleClickOutsideListener;
+
+    act(() => {
+      toggle(true);
+    });
+
+    expect(result.current.isActivated).toBe(true);
+
+    act(() => {
+      toggle(false);
+    });
+
+    expect(result.current.isActivated).toBe(false);
+  });
+});
diff --git a/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/__tests__/useListenClickOutsideV2.test.tsx b/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/__tests__/useListenClickOutsideV2.test.tsx
new file mode 100644
index 0000000000..12f2542991
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/__tests__/useListenClickOutsideV2.test.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { fireEvent, renderHook } from '@testing-library/react';
+import { RecoilRoot } from 'recoil';
+
+import {
+  ClickOutsideMode,
+  useListenClickOutsideV2,
+} from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
+
+const containerRef = React.createRef<HTMLDivElement>();
+const nullRef = React.createRef<HTMLDivElement>();
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <RecoilRoot>
+    <div ref={containerRef}>{children}</div>
+  </RecoilRoot>
+);
+
+const listenerId = 'listenerId';
+describe('useListenClickOutsideV2', () => {
+  it('should trigger the callback when clicking outside the specified refs', () => {
+    const callback = jest.fn();
+
+    renderHook(
+      () =>
+        useListenClickOutsideV2({
+          refs: [containerRef],
+          callback,
+          listenerId,
+        }),
+      { wrapper: Wrapper },
+    );
+
+    act(() => {
+      fireEvent.mouseDown(document);
+      fireEvent.click(document);
+    });
+
+    expect(callback).toHaveBeenCalled();
+  });
+
+  it('should trigger the callback when clicking outside the specified ref with pixel comparison', async () => {
+    const callback = jest.fn();
+
+    renderHook(
+      () =>
+        useListenClickOutsideV2({
+          refs: [nullRef],
+          callback,
+          mode: ClickOutsideMode.comparePixels,
+          listenerId,
+        }),
+      { wrapper: Wrapper },
+    );
+
+    act(() => {
+      fireEvent.mouseDown(document);
+      fireEvent.click(document);
+    });
+
+    expect(callback).toHaveBeenCalled();
+  });
+
+  it('should not call the callback when clicking inside the specified refs using default comparison', () => {
+    const callback = jest.fn();
+
+    renderHook(
+      () =>
+        useListenClickOutsideV2({
+          refs: [containerRef],
+          callback,
+          listenerId,
+        }),
+      { wrapper: Wrapper },
+    );
+
+    act(() => {
+      if (containerRef.current) {
+        fireEvent.mouseDown(containerRef.current);
+        fireEvent.click(containerRef.current);
+      }
+    });
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('should not call the callback when clicking inside the specified refs using pixel comparison', () => {
+    const callback = jest.fn();
+
+    renderHook(
+      () =>
+        useListenClickOutsideV2({
+          refs: [containerRef],
+          callback,
+          mode: ClickOutsideMode.comparePixels,
+          listenerId,
+        }),
+      { wrapper: Wrapper },
+    );
+
+    act(() => {
+      if (containerRef.current) {
+        fireEvent.mouseDown(containerRef.current);
+        fireEvent.click(containerRef.current);
+      }
+    });
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+});