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 000000000..5916fa12a --- /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 000000000..12f254299 --- /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(); +const nullRef = React.createRef(); + +const Wrapper = ({ children }: { children: React.ReactNode }) => ( + +
{children}
+
+); + +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(); + }); +});