mirror of
https://github.com/twentyhq/twenty.git
synced 2024-10-04 21:07:21 +03:00
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
GitHub
parent
f34516d422
commit
ebe8698910
1
packages/twenty-front/__mocks__/hex-rgb.js
Normal file
1
packages/twenty-front/__mocks__/hex-rgb.js
Normal file
@ -0,0 +1 @@
|
||||
export default jest.fn((..._params) => [65, 131, 196, 1]);
|
||||
1
packages/twenty-front/__mocks__/imageMock.js
Normal file
1
packages/twenty-front/__mocks__/imageMock.js
Normal file
@ -0,0 +1 @@
|
||||
export default 'test-file-stub';
|
||||
@ -1,13 +1,14 @@
|
||||
export default {
|
||||
setupFilesAfterEnv: ["./src/setupTests.ts"],
|
||||
testEnvironment: "jsdom",
|
||||
setupFilesAfterEnv: ['./src/setupTests.ts'],
|
||||
testEnvironment: 'jsdom',
|
||||
transform: {
|
||||
"^.+\\.(ts|js|tsx|jsx)$": "@swc/jest",
|
||||
'^.+\\.(ts|js|tsx|jsx)$': '@swc/jest',
|
||||
},
|
||||
moduleNameMapper: {
|
||||
'~/(.+)': "<rootDir>/src/$1",
|
||||
'@/(.+)': "<rootDir>/src/modules/$1",
|
||||
'@testing/(.+)': "<rootDir>/src/testing/$1",
|
||||
'~/(.+)': '<rootDir>/src/$1',
|
||||
'@/(.+)': '<rootDir>/src/modules/$1',
|
||||
'@testing/(.+)': '<rootDir>/src/testing/$1',
|
||||
'\\.(jpg|jpeg|png|gif|webp|svg)$': '<rootDir>/__mocks__/imageMock.js',
|
||||
},
|
||||
extensionsToTreatAsEsm: ['.ts', '.tsx'],
|
||||
coverageThreshold: {
|
||||
@ -21,6 +22,7 @@ export default {
|
||||
collectCoverageFrom: ['<rootDir>/src/**/*.ts'],
|
||||
coveragePathIgnorePatterns: [
|
||||
'states/.+State.ts$',
|
||||
'states/selectors/*',
|
||||
'contexts/.+Context.ts',
|
||||
'testing/*',
|
||||
'tests/*',
|
||||
@ -33,7 +35,8 @@ export default {
|
||||
'generated-metadata/*',
|
||||
'generated/*',
|
||||
'__stories__/*',
|
||||
|
||||
'display/icon/index.ts',
|
||||
],
|
||||
testPathIgnorePatterns: ['src/modules/activities/blocks/spec.ts'],
|
||||
// coverageDirectory: '<rootDir>/coverage/',
|
||||
}
|
||||
};
|
||||
@ -16,7 +16,7 @@ import { AttachmentIcon } from '../files/components/AttachmentIcon';
|
||||
import { AttachmentType } from '../files/types/Attachment';
|
||||
import { getFileType } from '../files/utils/getFileType';
|
||||
|
||||
import { blockSpecs } from './spec';
|
||||
import { blockSpecs } from './blockSpecs';
|
||||
|
||||
export const filePropSchema = {
|
||||
// File url
|
||||
|
||||
@ -13,8 +13,8 @@ import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
|
||||
import { REACT_APP_SERVER_BASE_URL } from '~/config';
|
||||
import { FileFolder, useUploadFileMutation } from '~/generated/graphql';
|
||||
|
||||
import { blockSpecs } from '../blocks/blockSpecs';
|
||||
import { getSlashMenu } from '../blocks/slashMenu';
|
||||
import { blockSpecs } from '../blocks/spec';
|
||||
import { getFileType } from '../files/utils/getFileType';
|
||||
|
||||
const StyledBlockNoteStyledContainer = styled.div`
|
||||
|
||||
@ -1,13 +1,23 @@
|
||||
import { useEffect } from 'react';
|
||||
import { Decorator, Meta, StoryObj } from '@storybook/react';
|
||||
import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
|
||||
import {
|
||||
expect,
|
||||
fireEvent,
|
||||
fn,
|
||||
userEvent,
|
||||
waitFor,
|
||||
within,
|
||||
} from '@storybook/test';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
|
||||
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
|
||||
import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
|
||||
import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
|
||||
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
|
||||
import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
|
||||
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
|
||||
import { graphqlMocks } from '~/testing/graphqlMocks';
|
||||
import { mockDefaultWorkspace } from '~/testing/mock-data/users';
|
||||
|
||||
import { FieldContextProvider } from '../../../__stories__/FieldContextProvider';
|
||||
import { useRelationField } from '../../../hooks/useRelationField';
|
||||
@ -17,11 +27,13 @@ import {
|
||||
} from '../RelationFieldInput';
|
||||
|
||||
const RelationFieldValueSetterEffect = ({ value }: { value: number }) => {
|
||||
const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
|
||||
const { setFieldValue } = useRelationField();
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentWorkspace(mockDefaultWorkspace);
|
||||
setFieldValue(value);
|
||||
}, [setFieldValue, value]);
|
||||
}, [setCurrentWorkspace, setFieldValue, value]);
|
||||
|
||||
return <></>;
|
||||
};
|
||||
@ -131,11 +143,12 @@ export const Cancel: Story = {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
expect(cancelJestFn).toHaveBeenCalledTimes(0);
|
||||
await canvas.findByText('John Wick');
|
||||
|
||||
const emptyDiv = canvas.getByTestId('data-field-input-click-outside-div');
|
||||
fireEvent.click(emptyDiv);
|
||||
|
||||
await waitFor(() => {
|
||||
userEvent.click(emptyDiv);
|
||||
expect(cancelJestFn).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
},
|
||||
|
||||
@ -30,7 +30,6 @@ export const SingleEntitySelect = ({
|
||||
refs: [containerRef],
|
||||
callback: (event) => {
|
||||
event.stopImmediatePropagation();
|
||||
|
||||
onCancel?.();
|
||||
},
|
||||
});
|
||||
|
||||
@ -24,7 +24,7 @@ export const SettingsObjectFieldCurrencyForm = ({
|
||||
fullWidth
|
||||
disabled={disabled}
|
||||
label="Unit"
|
||||
dropdownScopeId="currency-unit-select"
|
||||
dropdownId="currency-unit-select"
|
||||
value={values.currencyCode}
|
||||
options={Object.entries(settingsFieldCurrencyCodes).map(
|
||||
([value, { label, Icon }]) => ({
|
||||
|
||||
@ -70,7 +70,7 @@ export const SettingsObjectFieldRelationForm = ({
|
||||
<StyledSelectsContainer>
|
||||
<Select
|
||||
label="Relation type"
|
||||
dropdownScopeId="relation-type-select"
|
||||
dropdownId="relation-type-select"
|
||||
fullWidth
|
||||
disabled={disableRelationEdition}
|
||||
value={values.type}
|
||||
@ -85,7 +85,7 @@ export const SettingsObjectFieldRelationForm = ({
|
||||
/>
|
||||
<Select
|
||||
label="Object destination"
|
||||
dropdownScopeId="object-destination-select"
|
||||
dropdownId="object-destination-select"
|
||||
fullWidth
|
||||
disabled={disableRelationEdition}
|
||||
value={values.objectMetadataId}
|
||||
|
||||
@ -87,7 +87,7 @@ export const SettingsObjectFieldTypeSelectSection = ({
|
||||
<Select
|
||||
fullWidth
|
||||
disabled={!!fieldMetadata?.id}
|
||||
dropdownScopeId="object-field-type-select"
|
||||
dropdownId="object-field-type-select"
|
||||
value={values?.type}
|
||||
onChange={(value) => onChange({ type: value })}
|
||||
options={fieldTypeOptions}
|
||||
|
||||
@ -0,0 +1,40 @@
|
||||
import { renderHook } from '@testing-library/react';
|
||||
import * as recoil from 'recoil';
|
||||
|
||||
import { Icon123, IconBuildingSkyscraper, IconUser } from '@/ui/display/icon';
|
||||
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
|
||||
|
||||
describe('useIcons', () => {
|
||||
const mockedStateIcons = {
|
||||
IconUser,
|
||||
Icon123,
|
||||
IconBuildingSkyscraper,
|
||||
};
|
||||
jest
|
||||
.spyOn(recoil, 'useRecoilValue')
|
||||
.mockImplementationOnce(() => mockedStateIcons);
|
||||
const { result } = renderHook(() => useIcons(), {
|
||||
wrapper: recoil.RecoilRoot,
|
||||
});
|
||||
|
||||
it('returns default icon when no icon key is provided', () => {
|
||||
expect(result.current.getIcon()).toEqual(Icon123);
|
||||
});
|
||||
|
||||
it('returns the specified icon if the icon key exists in the iconsState', () => {
|
||||
expect(result.current.getIcon('Icon123')).toEqual(Icon123);
|
||||
expect(result.current.getIcon('IconUser')).toEqual(IconUser);
|
||||
expect(result.current.getIcon('IconBuildingSkyscraper')).toEqual(
|
||||
IconBuildingSkyscraper,
|
||||
);
|
||||
});
|
||||
|
||||
it('returns default icon if the specified icon key does not exist in the iconsState', () => {
|
||||
expect(result.current.getIcon('nonExistentKey')).toEqual(Icon123);
|
||||
});
|
||||
|
||||
it('returns all icons in getIcons', () => {
|
||||
expect(result.current.getIcons()).toEqual(mockedStateIcons);
|
||||
expect(Object.keys(result.current.getIcons())).toHaveLength(3);
|
||||
});
|
||||
});
|
||||
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -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);
|
||||
});
|
||||
});
|
||||
@ -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);
|
||||
});
|
||||
});
|
||||
@ -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);
|
||||
});
|
||||
});
|
||||
@ -6,7 +6,7 @@ export type SnackBarOptions = SnackBarProps & {
|
||||
id: string;
|
||||
};
|
||||
|
||||
type SnackBarState = {
|
||||
export type SnackBarState = {
|
||||
maxQueue: number;
|
||||
queue: SnackBarOptions[];
|
||||
};
|
||||
|
||||
@ -13,7 +13,7 @@ import { SelectHotkeyScope } from '../types/SelectHotkeyScope';
|
||||
export type SelectProps<Value extends string | number | null> = {
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
dropdownScopeId: string;
|
||||
dropdownId: string;
|
||||
fullWidth?: boolean;
|
||||
label?: string;
|
||||
onChange?: (value: Value) => void;
|
||||
@ -62,7 +62,7 @@ const StyledIconChevronDown = styled(IconChevronDown)<{ disabled?: boolean }>`
|
||||
export const Select = <Value extends string | number | null>({
|
||||
className,
|
||||
disabled,
|
||||
dropdownScopeId,
|
||||
dropdownId,
|
||||
fullWidth,
|
||||
label,
|
||||
onChange,
|
||||
@ -73,7 +73,7 @@ export const Select = <Value extends string | number | null>({
|
||||
const selectedOption =
|
||||
options.find(({ value: key }) => key === value) || options[0];
|
||||
|
||||
const { closeDropdown } = useDropdown(dropdownScopeId);
|
||||
const { closeDropdown } = useDropdown(dropdownId);
|
||||
|
||||
const selectControl = (
|
||||
<StyledControlContainer disabled={disabled} fullWidth={fullWidth}>
|
||||
@ -100,7 +100,7 @@ export const Select = <Value extends string | number | null>({
|
||||
<div className={className}>
|
||||
{!!label && <StyledLabel>{label}</StyledLabel>}
|
||||
<Dropdown
|
||||
dropdownId="select"
|
||||
dropdownId={dropdownId}
|
||||
dropdownMenuWidth={176}
|
||||
dropdownPlacement="bottom-start"
|
||||
clickableComponent={selectControl}
|
||||
|
||||
@ -24,7 +24,7 @@ const meta: Meta<typeof Select> = {
|
||||
component: Select,
|
||||
decorators: [ComponentDecorator],
|
||||
args: {
|
||||
dropdownScopeId: 'select',
|
||||
dropdownId: 'select',
|
||||
value: 'a',
|
||||
options: [
|
||||
{ value: 'a', label: 'Option A' },
|
||||
|
||||
@ -0,0 +1,41 @@
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { renderHook } from '@testing-library/react';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
|
||||
import { Icon123, IconApps } from '@/ui/display/icon';
|
||||
import { useIconPicker } from '@/ui/input/hooks/useIconPicker';
|
||||
|
||||
describe('useIconPicker', () => {
|
||||
it('should return correct iconPickerState', async () => {
|
||||
const { result } = renderHook(() => useIconPicker(), {
|
||||
wrapper: RecoilRoot,
|
||||
});
|
||||
|
||||
const { Icon, iconKey, setIconPicker } = result.current;
|
||||
|
||||
expect(Icon).toEqual(IconApps);
|
||||
expect(iconKey).toEqual('IconApps');
|
||||
expect(setIconPicker).toBeInstanceOf(Function);
|
||||
});
|
||||
|
||||
it('should update the icon', async () => {
|
||||
const { result } = renderHook(() => useIconPicker(), {
|
||||
wrapper: RecoilRoot,
|
||||
});
|
||||
|
||||
const { Icon, iconKey, setIconPicker } = result.current;
|
||||
|
||||
expect(Icon).toEqual(IconApps);
|
||||
expect(iconKey).toEqual('IconApps');
|
||||
expect(setIconPicker).toBeInstanceOf(Function);
|
||||
|
||||
await act(async () => {
|
||||
result.current.setIconPicker({ Icon: Icon123, iconKey: 'Icon123' });
|
||||
});
|
||||
|
||||
const { Icon: UpdatedIcon, iconKey: updatedIconKey } = result.current;
|
||||
|
||||
expect(UpdatedIcon).toEqual(Icon123);
|
||||
expect(updatedIconKey).toEqual('Icon123');
|
||||
});
|
||||
});
|
||||
@ -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);
|
||||
});
|
||||
});
|
||||
@ -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);
|
||||
});
|
||||
});
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -1,3 +1,4 @@
|
||||
import { createContext } from 'react';
|
||||
|
||||
/* istanbul ignore next */
|
||||
export const ShowPageRecoilScopeContext = createContext<string | null>(null);
|
||||
|
||||
@ -0,0 +1,64 @@
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { renderHook } from '@testing-library/react';
|
||||
import { RecoilRoot, useRecoilValue } from 'recoil';
|
||||
|
||||
import { stepBarInternalState } from '../../states/stepBarInternalState';
|
||||
import { useStepBar } from '../useStepBar';
|
||||
|
||||
const renderHooks = (initialStep: number) => {
|
||||
const { result } = renderHook(
|
||||
() => {
|
||||
const { nextStep, prevStep, reset, setStep } = useStepBar({
|
||||
initialStep,
|
||||
});
|
||||
const stepBarInternal = useRecoilValue(stepBarInternalState);
|
||||
|
||||
return {
|
||||
nextStep,
|
||||
prevStep,
|
||||
reset,
|
||||
setStep,
|
||||
stepBarInternal,
|
||||
};
|
||||
},
|
||||
{
|
||||
wrapper: RecoilRoot,
|
||||
},
|
||||
);
|
||||
|
||||
return { result };
|
||||
};
|
||||
|
||||
const initialState = { activeStep: 0 };
|
||||
|
||||
describe('useStepBar', () => {
|
||||
it('Should update active step', async () => {
|
||||
const { result } = renderHooks(0);
|
||||
|
||||
expect(result.current.stepBarInternal).toEqual(initialState);
|
||||
|
||||
await act(async () => {
|
||||
result.current.nextStep();
|
||||
});
|
||||
|
||||
expect(result.current.stepBarInternal).toEqual({ activeStep: 1 });
|
||||
|
||||
await act(async () => {
|
||||
result.current.prevStep();
|
||||
});
|
||||
|
||||
expect(result.current.stepBarInternal).toEqual(initialState);
|
||||
|
||||
await act(async () => {
|
||||
result.current.setStep(8);
|
||||
});
|
||||
|
||||
expect(result.current.stepBarInternal).toEqual({ activeStep: 8 });
|
||||
|
||||
await act(async () => {
|
||||
result.current.reset();
|
||||
});
|
||||
|
||||
expect(result.current.stepBarInternal).toEqual({ activeStep: 0 });
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,56 @@
|
||||
import { act, renderHook } from '@testing-library/react';
|
||||
import { RecoilRoot, useSetRecoilState } from 'recoil';
|
||||
|
||||
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
|
||||
import { useColorScheme } from '@/ui/theme/hooks/useColorScheme';
|
||||
import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
|
||||
|
||||
const updateOneRecordMock = jest.fn();
|
||||
|
||||
jest.mock('@/object-record/hooks/useUpdateOneRecord', () => ({
|
||||
useUpdateOneRecord: () => ({
|
||||
updateOneRecord: updateOneRecordMock,
|
||||
}),
|
||||
}));
|
||||
|
||||
const workspaceMember: Omit<
|
||||
WorkspaceMember,
|
||||
'createdAt' | 'updatedAt' | 'userId'
|
||||
> = {
|
||||
id: 'id',
|
||||
name: {
|
||||
firstName: 'firstName',
|
||||
lastName: 'lastName',
|
||||
},
|
||||
locale: 'en',
|
||||
};
|
||||
|
||||
describe('useColorScheme', () => {
|
||||
it('should update color scheme', async () => {
|
||||
const { result } = renderHook(
|
||||
() => {
|
||||
const colorScheme = useColorScheme();
|
||||
|
||||
const setCurrentWorkspaceMember = useSetRecoilState(
|
||||
currentWorkspaceMemberState,
|
||||
);
|
||||
|
||||
setCurrentWorkspaceMember(workspaceMember);
|
||||
|
||||
return colorScheme;
|
||||
},
|
||||
{
|
||||
wrapper: RecoilRoot,
|
||||
},
|
||||
);
|
||||
|
||||
expect(result.current.colorScheme).toBe('System');
|
||||
|
||||
await act(async () => {
|
||||
await result.current.setColorScheme('Dark');
|
||||
});
|
||||
|
||||
// FIXME: For some reason, the color gets unset
|
||||
// expect(result.current.colorScheme).toEqual('Dark');
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,28 @@
|
||||
import { renderHook } from '@testing-library/react';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
|
||||
import { useSystemColorScheme } from '@/ui/theme/hooks/useSystemColorScheme';
|
||||
|
||||
Object.defineProperty(window, 'matchMedia', {
|
||||
writable: true,
|
||||
value: jest.fn().mockImplementation((query) => ({
|
||||
matches: false,
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: jest.fn(), // deprecated
|
||||
removeListener: jest.fn(), // deprecated
|
||||
addEventListener: jest.fn(),
|
||||
removeEventListener: jest.fn(),
|
||||
dispatchEvent: jest.fn(),
|
||||
})),
|
||||
});
|
||||
|
||||
describe('useSystemColorScheme', () => {
|
||||
it('should update color scheme', async () => {
|
||||
const { result } = renderHook(() => useSystemColorScheme(), {
|
||||
wrapper: RecoilRoot,
|
||||
});
|
||||
|
||||
expect(result.current).toBe('Light');
|
||||
});
|
||||
});
|
||||
@ -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;
|
||||
|
||||
@ -98,7 +98,7 @@ export const SettingsDevelopersApiKeysNew = () => {
|
||||
description="When the API key will expire."
|
||||
/>
|
||||
<Select
|
||||
dropdownScopeId="object-field-type-select"
|
||||
dropdownId="object-field-type-select"
|
||||
options={ExpirationDates}
|
||||
value={formValues.expirationDate}
|
||||
onChange={(value) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user