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>
This commit is contained in:
gitstart-twenty
@ -0,0 +1,27 @@
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { renderHook } from '@testing-library/react';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
|
||||
import { useDragSelect } from '../useDragSelect';
|
||||
|
||||
describe('useDragSelect', () => {
|
||||
it('Should set drag selection start state', () => {
|
||||
const { result } = renderHook(() => useDragSelect(), {
|
||||
wrapper: RecoilRoot,
|
||||
});
|
||||
|
||||
expect(result.current.isDragSelectionStartEnabled()).toBe(true);
|
||||
|
||||
act(() => {
|
||||
result.current.setDragSelectionStartEnabled(false);
|
||||
});
|
||||
|
||||
expect(result.current.isDragSelectionStartEnabled()).toBe(false);
|
||||
|
||||
act(() => {
|
||||
result.current.setDragSelectionStartEnabled(true);
|
||||
});
|
||||
|
||||
expect(result.current.isDragSelectionStartEnabled()).toBe(true);
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,51 @@
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { MemoryRouter, useLocation } from 'react-router-dom';
|
||||
import { fireEvent, renderHook } from '@testing-library/react';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
|
||||
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
|
||||
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
|
||||
|
||||
import { useGoToHotkeys } from '../useGoToHotkeys';
|
||||
|
||||
const Wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<MemoryRouter
|
||||
initialEntries={['/one', '/two', { pathname: '/three' }]}
|
||||
initialIndex={1}
|
||||
>
|
||||
<RecoilRoot>{children}</RecoilRoot>
|
||||
</MemoryRouter>
|
||||
);
|
||||
const renderHookConfig = {
|
||||
wrapper: Wrapper,
|
||||
};
|
||||
|
||||
describe('useGoToHotkeys', () => {
|
||||
it('should navigate on hotkey trigger', () => {
|
||||
const { result } = renderHook(() => {
|
||||
useGoToHotkeys('a', '/three');
|
||||
|
||||
const setHotkeyScope = useSetHotkeyScope();
|
||||
|
||||
setHotkeyScope(AppHotkeyScope.App, { goto: true });
|
||||
|
||||
const location = useLocation();
|
||||
|
||||
return {
|
||||
pathname: location.pathname,
|
||||
};
|
||||
}, renderHookConfig);
|
||||
|
||||
expect(result.current.pathname).toBe('/two');
|
||||
|
||||
act(() => {
|
||||
fireEvent.keyDown(document, { key: 'g', code: 'KeyG' });
|
||||
});
|
||||
|
||||
act(() => {
|
||||
fireEvent.keyDown(document, { key: 'a', code: 'KeyA' });
|
||||
});
|
||||
|
||||
expect(result.current.pathname).toBe('/three');
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,32 @@
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { fireEvent, renderHook } from '@testing-library/react';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
|
||||
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
|
||||
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
|
||||
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
|
||||
|
||||
const hotKeyCallback = jest.fn();
|
||||
|
||||
describe('useScopedHotkeys', () => {
|
||||
it('should work as expected', () => {
|
||||
renderHook(
|
||||
() => {
|
||||
useScopedHotkeys('ctrl+k', hotKeyCallback, AppHotkeyScope.App);
|
||||
|
||||
const setHotkeyScope = useSetHotkeyScope();
|
||||
|
||||
setHotkeyScope(AppHotkeyScope.App);
|
||||
},
|
||||
{
|
||||
wrapper: RecoilRoot,
|
||||
},
|
||||
);
|
||||
|
||||
act(() => {
|
||||
fireEvent.keyDown(document, { key: 'k', code: 'KeyK', ctrlKey: true });
|
||||
});
|
||||
|
||||
expect(hotKeyCallback).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,8 @@
|
||||
import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey';
|
||||
|
||||
describe('isNonTextWritingKey', () => {
|
||||
it('should determine non-text-writing keys', () => {
|
||||
expect(isNonTextWritingKey('Tab')).toBe(true);
|
||||
expect(isNonTextWritingKey('a')).toBe(false);
|
||||
});
|
||||
});
|
||||
@ -1,39 +1,133 @@
|
||||
import { useRef } from 'react';
|
||||
import { fireEvent, render } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { fireEvent, render, renderHook } from '@testing-library/react';
|
||||
|
||||
import { useListenClickOutside } from '../useListenClickOutside';
|
||||
import {
|
||||
ClickOutsideMode,
|
||||
useListenClickOutside,
|
||||
useListenClickOutsideByClassName,
|
||||
} from '../useListenClickOutside';
|
||||
|
||||
const onOutsideClick = jest.fn();
|
||||
const containerRef = React.createRef<HTMLDivElement>();
|
||||
const nullRef = React.createRef<HTMLDivElement>();
|
||||
|
||||
const TestComponentDomMode = () => {
|
||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||
const buttonRef2 = useRef<HTMLButtonElement>(null);
|
||||
useListenClickOutside({
|
||||
refs: [buttonRef, buttonRef2],
|
||||
callback: onOutsideClick,
|
||||
const Wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<div ref={containerRef}>{children}</div>
|
||||
);
|
||||
|
||||
describe('useListenClickOutside', () => {
|
||||
it('should trigger the callback when clicking outside the specified refs', () => {
|
||||
const callback = jest.fn();
|
||||
|
||||
renderHook(
|
||||
() => useListenClickOutside({ refs: [containerRef], callback }),
|
||||
{ wrapper: Wrapper },
|
||||
);
|
||||
|
||||
act(() => {
|
||||
fireEvent.mouseDown(document);
|
||||
fireEvent.click(document);
|
||||
});
|
||||
|
||||
expect(callback).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>Outside</span>
|
||||
<button ref={buttonRef}>Inside</button>
|
||||
<button ref={buttonRef2}>Inside 2</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
it('should not call the callback when clicking inside the specified refs using pixel comparison', () => {
|
||||
const callback = jest.fn();
|
||||
|
||||
test('useListenClickOutside web-hook works in dom mode', async () => {
|
||||
const { getByText } = render(<TestComponentDomMode />);
|
||||
const inside = getByText('Inside');
|
||||
const inside2 = getByText('Inside 2');
|
||||
const outside = getByText('Outside');
|
||||
renderHook(
|
||||
() =>
|
||||
useListenClickOutside({
|
||||
refs: [containerRef, nullRef],
|
||||
callback,
|
||||
mode: ClickOutsideMode.comparePixels,
|
||||
}),
|
||||
{ wrapper: Wrapper },
|
||||
);
|
||||
|
||||
fireEvent.click(inside);
|
||||
expect(onOutsideClick).toHaveBeenCalledTimes(0);
|
||||
act(() => {
|
||||
if (containerRef.current) {
|
||||
fireEvent.mouseDown(containerRef.current);
|
||||
fireEvent.click(containerRef.current);
|
||||
}
|
||||
});
|
||||
|
||||
fireEvent.click(inside2);
|
||||
expect(onOutsideClick).toHaveBeenCalledTimes(0);
|
||||
expect(callback).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
fireEvent.click(outside);
|
||||
expect(onOutsideClick).toHaveBeenCalledTimes(1);
|
||||
it('should call the callback when clicking outside the specified refs using pixel comparison', () => {
|
||||
const callback = jest.fn();
|
||||
|
||||
renderHook(() =>
|
||||
useListenClickOutside({
|
||||
refs: [containerRef, nullRef],
|
||||
callback,
|
||||
mode: ClickOutsideMode.comparePixels,
|
||||
}),
|
||||
);
|
||||
|
||||
act(() => {
|
||||
// Simulate a click outside the specified refs
|
||||
fireEvent.mouseDown(document.body);
|
||||
fireEvent.click(document.body);
|
||||
});
|
||||
|
||||
expect(callback).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('useListenClickOutsideByClassName', () => {
|
||||
it('should trigger the callback when clicking outside the specified class names', () => {
|
||||
const callback = jest.fn();
|
||||
const { container } = render(
|
||||
<div>
|
||||
<div className="wont-trigger other-class">Inside</div>
|
||||
<div className="will-trigger">Outside</div>
|
||||
</div>,
|
||||
);
|
||||
|
||||
renderHook(() =>
|
||||
useListenClickOutsideByClassName({
|
||||
classNames: ['wont-trigger'],
|
||||
callback,
|
||||
}),
|
||||
);
|
||||
|
||||
act(() => {
|
||||
const notClickableElement = container.querySelector('.will-trigger');
|
||||
if (notClickableElement) {
|
||||
fireEvent.mouseDown(notClickableElement);
|
||||
fireEvent.click(notClickableElement);
|
||||
}
|
||||
});
|
||||
|
||||
expect(callback).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should not trigger the callback when clicking inside the specified class names', () => {
|
||||
const callback = jest.fn();
|
||||
const { container } = render(
|
||||
<div>
|
||||
<div className="wont-trigger other-class">Inside</div>
|
||||
<div className="will-trigger">Outside</div>
|
||||
</div>,
|
||||
);
|
||||
|
||||
renderHook(() =>
|
||||
useListenClickOutsideByClassName({
|
||||
classNames: ['wont-trigger'],
|
||||
callback,
|
||||
}),
|
||||
);
|
||||
|
||||
act(() => {
|
||||
const notClickableElement = container.querySelector('.wont-trigger');
|
||||
if (notClickableElement) {
|
||||
fireEvent.mouseDown(notClickableElement);
|
||||
fireEvent.click(notClickableElement);
|
||||
}
|
||||
});
|
||||
|
||||
expect(callback).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,56 @@
|
||||
import { act, renderHook } from '@testing-library/react';
|
||||
|
||||
import { useTrackPointer } from '../useTrackPointer';
|
||||
|
||||
describe('useTrackPointer', () => {
|
||||
it('Should call onMouseDown when mouse down event is triggered', () => {
|
||||
const onMouseDown = jest.fn();
|
||||
|
||||
renderHook(() =>
|
||||
useTrackPointer({
|
||||
onMouseDown,
|
||||
}),
|
||||
);
|
||||
|
||||
act(() => {
|
||||
const event = new MouseEvent('mousedown', { clientX: 150, clientY: 250 });
|
||||
document.dispatchEvent(event);
|
||||
});
|
||||
|
||||
expect(onMouseDown).toHaveBeenCalledWith(150, 250);
|
||||
});
|
||||
|
||||
it('Should call onMouseUp when mouse up event is triggered', () => {
|
||||
const onMouseUp = jest.fn();
|
||||
|
||||
renderHook(() =>
|
||||
useTrackPointer({
|
||||
onMouseUp,
|
||||
}),
|
||||
);
|
||||
|
||||
act(() => {
|
||||
const event = new MouseEvent('mouseup', { clientX: 200, clientY: 300 });
|
||||
document.dispatchEvent(event);
|
||||
});
|
||||
|
||||
expect(onMouseUp).toHaveBeenCalledWith(200, 300);
|
||||
});
|
||||
|
||||
it('Should call onInternalMouseMove when mouse move event is triggered', () => {
|
||||
const onInternalMouseMove = jest.fn();
|
||||
|
||||
renderHook(() =>
|
||||
useTrackPointer({
|
||||
onMouseMove: onInternalMouseMove,
|
||||
}),
|
||||
);
|
||||
|
||||
act(() => {
|
||||
const event = new MouseEvent('mousemove', { clientX: 150, clientY: 250 });
|
||||
document.dispatchEvent(event);
|
||||
});
|
||||
|
||||
expect(onInternalMouseMove).toHaveBeenCalledWith(150, 250);
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,32 @@
|
||||
import { createContext } from 'react';
|
||||
import { renderHook } from '@testing-library/react';
|
||||
|
||||
import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
|
||||
|
||||
const mockedContextValue = 'mocked-scope-id';
|
||||
const MockedContext = createContext<string | null>(mockedContextValue);
|
||||
const nullContext = createContext<string | null>(null);
|
||||
|
||||
const ERROR_MESSAGE =
|
||||
'Using useContextScopedId outside of the specified context : undefined, verify that you are using a RecoilScope with the specific context you want to use.';
|
||||
|
||||
describe('useContextScopeId', () => {
|
||||
it('Should return the scoped ID when used within the specified context', () => {
|
||||
const { result } = renderHook(() => useContextScopeId(MockedContext), {
|
||||
wrapper: ({ children }) => (
|
||||
<MockedContext.Provider value={mockedContextValue}>
|
||||
{children}
|
||||
</MockedContext.Provider>
|
||||
),
|
||||
});
|
||||
|
||||
const scopedId = result.current;
|
||||
expect(scopedId).toBe(mockedContextValue);
|
||||
});
|
||||
|
||||
it('Should throw an error when used outside of the specified context', () => {
|
||||
expect(() => {
|
||||
renderHook(() => useContextScopeId(nullContext));
|
||||
}).toThrow(ERROR_MESSAGE);
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,32 @@
|
||||
import { createContext } from 'react';
|
||||
import { renderHook } from '@testing-library/react';
|
||||
|
||||
import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
|
||||
|
||||
const mockedContextValue = 'mocked-scope-id';
|
||||
const MockedContext = createContext<string | null>(mockedContextValue);
|
||||
const nullContext = createContext<string | null>(null);
|
||||
|
||||
const ERROR_MESSAGE =
|
||||
'Using useRecoilScopeId outside of the specified context : undefined, verify that you are using a RecoilScope with the specific context you want to use.';
|
||||
|
||||
describe('useRecoilScopeId', () => {
|
||||
it('Should return the scoped ID when used within the specified context', () => {
|
||||
const { result } = renderHook(() => useRecoilScopeId(MockedContext), {
|
||||
wrapper: ({ children }) => (
|
||||
<MockedContext.Provider value={mockedContextValue}>
|
||||
{children}
|
||||
</MockedContext.Provider>
|
||||
),
|
||||
});
|
||||
|
||||
const scopedId = result.current;
|
||||
expect(scopedId).toBe(mockedContextValue);
|
||||
});
|
||||
|
||||
it('Should throw an error when used outside of the specified context', () => {
|
||||
expect(() => {
|
||||
renderHook(() => useRecoilScopeId(nullContext));
|
||||
}).toThrow(ERROR_MESSAGE);
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,64 @@
|
||||
import { act, renderHook } from '@testing-library/react';
|
||||
import { RecoilRoot, RecoilState } from 'recoil';
|
||||
import { undefined } from 'zod';
|
||||
|
||||
import { useRecoilScopedFamilyState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState';
|
||||
import { FamilyStateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/FamilyStateScopeMapKey';
|
||||
import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap';
|
||||
|
||||
const testState = createFamilyStateScopeMap({
|
||||
key: 'sampleKey',
|
||||
defaultValue: 'defaultValue',
|
||||
});
|
||||
|
||||
describe('useRecoilScopedFamilyState', () => {
|
||||
it('Should work as expected', async () => {
|
||||
const { result, rerender } = renderHook(
|
||||
({
|
||||
recoilState,
|
||||
scopeId,
|
||||
familyKey,
|
||||
}: {
|
||||
recoilState: (
|
||||
scopedFamilyKey: FamilyStateScopeMapKey<string>,
|
||||
) => RecoilState<string>;
|
||||
scopeId: string;
|
||||
familyKey?: string;
|
||||
}) => useRecoilScopedFamilyState(recoilState, scopeId, familyKey),
|
||||
{
|
||||
wrapper: RecoilRoot,
|
||||
initialProps: {
|
||||
recoilState: testState,
|
||||
scopeId: 'scopeId',
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
expect(result.current).toEqual([undefined, undefined]);
|
||||
|
||||
rerender({
|
||||
recoilState: testState,
|
||||
scopeId: 'scopeId',
|
||||
familyKey: 'familyKey',
|
||||
});
|
||||
|
||||
const [value, setValue] = result.current;
|
||||
|
||||
expect(value).toBe('defaultValue');
|
||||
expect(setValue).toBeInstanceOf(Function);
|
||||
|
||||
act(() => {
|
||||
setValue?.('newValue');
|
||||
});
|
||||
|
||||
expect(result.current[0]).toBe('newValue');
|
||||
|
||||
rerender({
|
||||
recoilState: testState,
|
||||
scopeId: 'scopeId1',
|
||||
familyKey: 'familyKey',
|
||||
});
|
||||
|
||||
expect(result.current[0]).toBe('defaultValue');
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,50 @@
|
||||
import { createContext } from 'react';
|
||||
import { act, renderHook } from '@testing-library/react';
|
||||
import { atomFamily, RecoilRoot } from 'recoil';
|
||||
|
||||
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
|
||||
|
||||
const testScopedState = atomFamily<string | null, string>({
|
||||
key: 'testKey',
|
||||
default: null,
|
||||
});
|
||||
|
||||
const mockedContextValue = 'mocked-scope-id';
|
||||
const MockedContext = createContext<string | null>(mockedContextValue);
|
||||
const nullContext = createContext<string | null>(null);
|
||||
|
||||
const ERROR_MESSAGE =
|
||||
'Using a scoped atom without a RecoilScope : testKey__"", verify that you are using a RecoilScope with a specific context if you intended to do so.';
|
||||
|
||||
describe('useRecoilScopedState', () => {
|
||||
it('Should return the getter and setter for the state and context passed and work properly', async () => {
|
||||
const { result } = renderHook(
|
||||
() => useRecoilScopedState(testScopedState, MockedContext),
|
||||
{
|
||||
wrapper: ({ children }) => (
|
||||
<MockedContext.Provider value={mockedContextValue}>
|
||||
<RecoilRoot>{children}</RecoilRoot>
|
||||
</MockedContext.Provider>
|
||||
),
|
||||
},
|
||||
);
|
||||
|
||||
const [scopedState, setScopedState] = result.current;
|
||||
|
||||
expect(scopedState).toBeNull();
|
||||
|
||||
await act(async () => {
|
||||
setScopedState('testValue');
|
||||
});
|
||||
|
||||
const [scopedStateAfterSetter] = result.current;
|
||||
|
||||
expect(scopedStateAfterSetter).toEqual('testValue');
|
||||
});
|
||||
|
||||
it('Should throw an error when the recoilScopeId is not found by the context', () => {
|
||||
expect(() => {
|
||||
renderHook(() => useRecoilScopedState(testScopedState, nullContext));
|
||||
}).toThrow(ERROR_MESSAGE);
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,42 @@
|
||||
import { createContext } from 'react';
|
||||
import { renderHook } from '@testing-library/react';
|
||||
import { atomFamily, RecoilRoot } from 'recoil';
|
||||
|
||||
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
|
||||
|
||||
const testScopedState = atomFamily<string | null, string>({
|
||||
key: 'testKey',
|
||||
default: null,
|
||||
});
|
||||
|
||||
const mockedContextValue = 'mocked-scope-id';
|
||||
const MockedContext = createContext<string | null>(mockedContextValue);
|
||||
const nullContext = createContext<string | null>(null);
|
||||
|
||||
const ERROR_MESSAGE =
|
||||
'Using a scoped atom without a RecoilScope : testKey__"", verify that you are using a RecoilScope with a specific context if you intended to do so.';
|
||||
|
||||
describe('useRecoilScopedValue', () => {
|
||||
it('Should return the getter and setter for the state and context passed and work properly', async () => {
|
||||
const { result } = renderHook(
|
||||
() => useRecoilScopedValue(testScopedState, MockedContext),
|
||||
{
|
||||
wrapper: ({ children }) => (
|
||||
<MockedContext.Provider value={mockedContextValue}>
|
||||
<RecoilRoot>{children}</RecoilRoot>
|
||||
</MockedContext.Provider>
|
||||
),
|
||||
},
|
||||
);
|
||||
|
||||
const scopedState = result.current;
|
||||
|
||||
expect(scopedState).toBeNull();
|
||||
});
|
||||
|
||||
it('Should throw an error when the recoilScopeId is not found by the context', () => {
|
||||
expect(() => {
|
||||
renderHook(() => useRecoilScopedValue(testScopedState, nullContext));
|
||||
}).toThrow(ERROR_MESSAGE);
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,27 @@
|
||||
import { renderHook } from '@testing-library/react';
|
||||
import { atomFamily, RecoilRoot } from 'recoil';
|
||||
|
||||
import { useRecoilScopedValueV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValueV2';
|
||||
import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
|
||||
|
||||
const scopedAtom = atomFamily<string, StateScopeMapKey>({
|
||||
key: 'scopedAtomKey',
|
||||
default: 'initialValue',
|
||||
});
|
||||
|
||||
describe('useRecoilScopedValueV2', () => {
|
||||
const mockedScopeId = 'mocked-scope-id';
|
||||
|
||||
it('Should return the scoped value using useRecoilScopedValueV2', () => {
|
||||
const { result } = renderHook(
|
||||
() => useRecoilScopedValueV2(scopedAtom, mockedScopeId),
|
||||
{
|
||||
wrapper: RecoilRoot,
|
||||
},
|
||||
);
|
||||
|
||||
const scopedValue = result.current;
|
||||
|
||||
expect(scopedValue).toBe('initialValue');
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,79 @@
|
||||
import { act, renderHook } from '@testing-library/react';
|
||||
import { atomFamily, RecoilRoot } from 'recoil';
|
||||
|
||||
import { useRecoilScopedFamilyState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState';
|
||||
import { useSetRecoilScopedFamilyState } from '@/ui/utilities/recoil-scope/hooks/useSetRecoilScopedFamilyState';
|
||||
import { FamilyStateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/FamilyStateScopeMapKey';
|
||||
|
||||
const mockedScopedFamilyState = atomFamily<
|
||||
string,
|
||||
FamilyStateScopeMapKey<string>
|
||||
>({
|
||||
key: 'scopedAtomKey',
|
||||
default: 'initialValue',
|
||||
});
|
||||
|
||||
describe('useSetRecoilScopedFamilyState', () => {
|
||||
const mockedScopeId = 'mocked-scope-id';
|
||||
const mockedFamilyKey = 'test-key-value';
|
||||
|
||||
it('Should return a setter that updates the state value and work properly', async () => {
|
||||
const useCombinedHooks = () => {
|
||||
const setRecoilScopedFamilyState = useSetRecoilScopedFamilyState(
|
||||
mockedScopedFamilyState,
|
||||
mockedScopeId,
|
||||
mockedFamilyKey,
|
||||
);
|
||||
|
||||
const [mocked] = useRecoilScopedFamilyState(
|
||||
mockedScopedFamilyState,
|
||||
mockedScopeId,
|
||||
mockedFamilyKey,
|
||||
);
|
||||
|
||||
return {
|
||||
setRecoilScopedFamilyState,
|
||||
scopedFamilyState: mocked,
|
||||
};
|
||||
};
|
||||
|
||||
const { result } = renderHook(() => useCombinedHooks(), {
|
||||
wrapper: RecoilRoot,
|
||||
});
|
||||
|
||||
expect(result.current.scopedFamilyState).toBe('initialValue');
|
||||
expect(result.current.setRecoilScopedFamilyState).toBeInstanceOf(Function);
|
||||
|
||||
await act(async () => {
|
||||
result.current.setRecoilScopedFamilyState?.('testValue');
|
||||
});
|
||||
|
||||
expect(result.current.scopedFamilyState).toBe('testValue');
|
||||
});
|
||||
|
||||
it('Should return undefined when familyKey is missing', async () => {
|
||||
const useCombinedHooks = () => {
|
||||
const setRecoilScopedFamilyState = useSetRecoilScopedFamilyState(
|
||||
mockedScopedFamilyState,
|
||||
mockedScopeId,
|
||||
);
|
||||
|
||||
const [mocked] = useRecoilScopedFamilyState(
|
||||
mockedScopedFamilyState,
|
||||
mockedScopeId,
|
||||
);
|
||||
|
||||
return {
|
||||
setRecoilScopedFamilyState,
|
||||
scopedFamilyState: mocked,
|
||||
};
|
||||
};
|
||||
|
||||
const { result } = renderHook(() => useCombinedHooks(), {
|
||||
wrapper: RecoilRoot,
|
||||
});
|
||||
|
||||
expect(result.current.scopedFamilyState).toBeUndefined();
|
||||
expect(result.current.setRecoilScopedFamilyState).toBeUndefined();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,47 @@
|
||||
import { act, renderHook } from '@testing-library/react';
|
||||
import { atomFamily, RecoilRoot } from 'recoil';
|
||||
|
||||
import { useRecoilScopedValueV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValueV2';
|
||||
import { useSetRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useSetRecoilScopedStateV2';
|
||||
import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
|
||||
|
||||
const scopedAtom = atomFamily<string, StateScopeMapKey>({
|
||||
key: 'scopedAtomKey',
|
||||
default: 'initialValue',
|
||||
});
|
||||
|
||||
describe('useSetRecoilScopedStateV2', () => {
|
||||
const mockedScopeId = 'mocked-scope-id';
|
||||
|
||||
it('Should return a setter that updates the state value', async () => {
|
||||
const useCombinedHooks = () => {
|
||||
const setRecoilScopedStateV2 = useSetRecoilScopedStateV2(
|
||||
scopedAtom,
|
||||
mockedScopeId,
|
||||
);
|
||||
|
||||
const recoilScopedStateValue = useRecoilScopedValueV2(
|
||||
scopedAtom,
|
||||
mockedScopeId,
|
||||
);
|
||||
|
||||
return {
|
||||
setRecoilScopedStateV2,
|
||||
recoilScopedStateValue,
|
||||
};
|
||||
};
|
||||
|
||||
const { result } = renderHook(() => useCombinedHooks(), {
|
||||
wrapper: RecoilRoot,
|
||||
});
|
||||
|
||||
expect(result.current.recoilScopedStateValue).toBe('initialValue');
|
||||
expect(result.current.setRecoilScopedStateV2).toBeInstanceOf(Function);
|
||||
|
||||
await act(async () => {
|
||||
result.current.setRecoilScopedStateV2('testValue');
|
||||
});
|
||||
|
||||
expect(result.current.recoilScopedStateValue).toBe('testValue');
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,11 @@
|
||||
import { renderHook } from '@testing-library/react';
|
||||
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
describe('useIsMobile', () => {
|
||||
it('should trigger the callback when clicking outside the specified refs', () => {
|
||||
const { result } = renderHook(() => useIsMobile());
|
||||
|
||||
expect(result.current).toBe(false);
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,46 @@
|
||||
import React from 'react';
|
||||
import { act, fireEvent, renderHook } from '@testing-library/react';
|
||||
import { RecoilRoot, useRecoilValue } from 'recoil';
|
||||
|
||||
import { useListenScroll } from '@/ui/utilities/scroll/hooks/useListenScroll';
|
||||
import { isScrollingState } from '@/ui/utilities/scroll/states/isScrollingState';
|
||||
|
||||
const containerRef = React.createRef<HTMLDivElement>();
|
||||
|
||||
const Wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<RecoilRoot>
|
||||
<div id="container" ref={containerRef}>
|
||||
{children}
|
||||
</div>
|
||||
</RecoilRoot>
|
||||
);
|
||||
|
||||
jest.useFakeTimers();
|
||||
|
||||
describe('useListenScroll', () => {
|
||||
it('should trigger the callback when scrolling', () => {
|
||||
const { result } = renderHook(
|
||||
() => {
|
||||
useListenScroll({ scrollableRef: containerRef });
|
||||
const isScrolling = useRecoilValue(isScrollingState);
|
||||
|
||||
return { isScrolling };
|
||||
},
|
||||
{
|
||||
wrapper: Wrapper,
|
||||
},
|
||||
);
|
||||
|
||||
expect(result.current.isScrolling).toBe(false);
|
||||
|
||||
jest.advanceTimersByTime(500);
|
||||
|
||||
const container = document.querySelector('#container');
|
||||
|
||||
act(() => {
|
||||
if (container) fireEvent.scroll(container);
|
||||
});
|
||||
|
||||
expect(result.current.isScrolling).toBe(true);
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,19 @@
|
||||
import { renderHook } from '@testing-library/react';
|
||||
|
||||
import { useScrollWrapperScopedRef } from '@/ui/utilities/scroll/hooks/useScrollWrapperScopedRef';
|
||||
|
||||
jest.mock('react', () => {
|
||||
const originalModule = jest.requireActual('react');
|
||||
return {
|
||||
...originalModule,
|
||||
useContext: () => ({ current: {} }),
|
||||
};
|
||||
});
|
||||
|
||||
describe('useScrollWrapperScopedRef', () => {
|
||||
it('should return the scrollWrapperRef if available', () => {
|
||||
const { result } = renderHook(() => useScrollWrapperScopedRef());
|
||||
|
||||
expect(result.current).toBeDefined();
|
||||
});
|
||||
});
|
||||
@ -7,7 +7,7 @@ export const useScrollWrapperScopedRef = () => {
|
||||
|
||||
if (!scrollWrapperRef)
|
||||
throw new Error(
|
||||
`Using a scoped ref without a ScrollWrapper : verify that you are using a ScrollWrapper if you intended to do so.`,
|
||||
`Using a scroll ref without a ScrollWrapper : verify that you are using a ScrollWrapper if you intended to do so.`,
|
||||
);
|
||||
|
||||
return scrollWrapperRef;
|
||||
|
||||
Reference in New Issue
Block a user