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:
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 {
|
export default {
|
||||||
setupFilesAfterEnv: ["./src/setupTests.ts"],
|
setupFilesAfterEnv: ['./src/setupTests.ts'],
|
||||||
testEnvironment: "jsdom",
|
testEnvironment: 'jsdom',
|
||||||
transform: {
|
transform: {
|
||||||
"^.+\\.(ts|js|tsx|jsx)$": "@swc/jest",
|
'^.+\\.(ts|js|tsx|jsx)$': '@swc/jest',
|
||||||
},
|
},
|
||||||
moduleNameMapper: {
|
moduleNameMapper: {
|
||||||
'~/(.+)': "<rootDir>/src/$1",
|
'~/(.+)': '<rootDir>/src/$1',
|
||||||
'@/(.+)': "<rootDir>/src/modules/$1",
|
'@/(.+)': '<rootDir>/src/modules/$1',
|
||||||
'@testing/(.+)': "<rootDir>/src/testing/$1",
|
'@testing/(.+)': '<rootDir>/src/testing/$1',
|
||||||
|
'\\.(jpg|jpeg|png|gif|webp|svg)$': '<rootDir>/__mocks__/imageMock.js',
|
||||||
},
|
},
|
||||||
extensionsToTreatAsEsm: ['.ts', '.tsx'],
|
extensionsToTreatAsEsm: ['.ts', '.tsx'],
|
||||||
coverageThreshold: {
|
coverageThreshold: {
|
||||||
@ -21,6 +22,7 @@ export default {
|
|||||||
collectCoverageFrom: ['<rootDir>/src/**/*.ts'],
|
collectCoverageFrom: ['<rootDir>/src/**/*.ts'],
|
||||||
coveragePathIgnorePatterns: [
|
coveragePathIgnorePatterns: [
|
||||||
'states/.+State.ts$',
|
'states/.+State.ts$',
|
||||||
|
'states/selectors/*',
|
||||||
'contexts/.+Context.ts',
|
'contexts/.+Context.ts',
|
||||||
'testing/*',
|
'testing/*',
|
||||||
'tests/*',
|
'tests/*',
|
||||||
@ -33,7 +35,8 @@ export default {
|
|||||||
'generated-metadata/*',
|
'generated-metadata/*',
|
||||||
'generated/*',
|
'generated/*',
|
||||||
'__stories__/*',
|
'__stories__/*',
|
||||||
|
'display/icon/index.ts',
|
||||||
],
|
],
|
||||||
|
testPathIgnorePatterns: ['src/modules/activities/blocks/spec.ts'],
|
||||||
// coverageDirectory: '<rootDir>/coverage/',
|
// coverageDirectory: '<rootDir>/coverage/',
|
||||||
}
|
};
|
@ -16,7 +16,7 @@ import { AttachmentIcon } from '../files/components/AttachmentIcon';
|
|||||||
import { AttachmentType } from '../files/types/Attachment';
|
import { AttachmentType } from '../files/types/Attachment';
|
||||||
import { getFileType } from '../files/utils/getFileType';
|
import { getFileType } from '../files/utils/getFileType';
|
||||||
|
|
||||||
import { blockSpecs } from './spec';
|
import { blockSpecs } from './blockSpecs';
|
||||||
|
|
||||||
export const filePropSchema = {
|
export const filePropSchema = {
|
||||||
// File url
|
// File url
|
||||||
|
@ -13,8 +13,8 @@ import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
|
|||||||
import { REACT_APP_SERVER_BASE_URL } from '~/config';
|
import { REACT_APP_SERVER_BASE_URL } from '~/config';
|
||||||
import { FileFolder, useUploadFileMutation } from '~/generated/graphql';
|
import { FileFolder, useUploadFileMutation } from '~/generated/graphql';
|
||||||
|
|
||||||
|
import { blockSpecs } from '../blocks/blockSpecs';
|
||||||
import { getSlashMenu } from '../blocks/slashMenu';
|
import { getSlashMenu } from '../blocks/slashMenu';
|
||||||
import { blockSpecs } from '../blocks/spec';
|
|
||||||
import { getFileType } from '../files/utils/getFileType';
|
import { getFileType } from '../files/utils/getFileType';
|
||||||
|
|
||||||
const StyledBlockNoteStyledContainer = styled.div`
|
const StyledBlockNoteStyledContainer = styled.div`
|
||||||
|
@ -1,13 +1,23 @@
|
|||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
import { Decorator, Meta, StoryObj } from '@storybook/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 { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
|
||||||
import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
|
import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
|
||||||
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
|
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
|
||||||
import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
|
import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
|
||||||
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
|
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
|
||||||
import { graphqlMocks } from '~/testing/graphqlMocks';
|
import { graphqlMocks } from '~/testing/graphqlMocks';
|
||||||
|
import { mockDefaultWorkspace } from '~/testing/mock-data/users';
|
||||||
|
|
||||||
import { FieldContextProvider } from '../../../__stories__/FieldContextProvider';
|
import { FieldContextProvider } from '../../../__stories__/FieldContextProvider';
|
||||||
import { useRelationField } from '../../../hooks/useRelationField';
|
import { useRelationField } from '../../../hooks/useRelationField';
|
||||||
@ -17,11 +27,13 @@ import {
|
|||||||
} from '../RelationFieldInput';
|
} from '../RelationFieldInput';
|
||||||
|
|
||||||
const RelationFieldValueSetterEffect = ({ value }: { value: number }) => {
|
const RelationFieldValueSetterEffect = ({ value }: { value: number }) => {
|
||||||
|
const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
|
||||||
const { setFieldValue } = useRelationField();
|
const { setFieldValue } = useRelationField();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
setCurrentWorkspace(mockDefaultWorkspace);
|
||||||
setFieldValue(value);
|
setFieldValue(value);
|
||||||
}, [setFieldValue, value]);
|
}, [setCurrentWorkspace, setFieldValue, value]);
|
||||||
|
|
||||||
return <></>;
|
return <></>;
|
||||||
};
|
};
|
||||||
@ -131,11 +143,12 @@ export const Cancel: Story = {
|
|||||||
const canvas = within(canvasElement);
|
const canvas = within(canvasElement);
|
||||||
|
|
||||||
expect(cancelJestFn).toHaveBeenCalledTimes(0);
|
expect(cancelJestFn).toHaveBeenCalledTimes(0);
|
||||||
|
await canvas.findByText('John Wick');
|
||||||
|
|
||||||
const emptyDiv = canvas.getByTestId('data-field-input-click-outside-div');
|
const emptyDiv = canvas.getByTestId('data-field-input-click-outside-div');
|
||||||
|
fireEvent.click(emptyDiv);
|
||||||
|
|
||||||
await waitFor(() => {
|
await waitFor(() => {
|
||||||
userEvent.click(emptyDiv);
|
|
||||||
expect(cancelJestFn).toHaveBeenCalledTimes(1);
|
expect(cancelJestFn).toHaveBeenCalledTimes(1);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
@ -30,7 +30,6 @@ export const SingleEntitySelect = ({
|
|||||||
refs: [containerRef],
|
refs: [containerRef],
|
||||||
callback: (event) => {
|
callback: (event) => {
|
||||||
event.stopImmediatePropagation();
|
event.stopImmediatePropagation();
|
||||||
|
|
||||||
onCancel?.();
|
onCancel?.();
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
@ -24,7 +24,7 @@ export const SettingsObjectFieldCurrencyForm = ({
|
|||||||
fullWidth
|
fullWidth
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
label="Unit"
|
label="Unit"
|
||||||
dropdownScopeId="currency-unit-select"
|
dropdownId="currency-unit-select"
|
||||||
value={values.currencyCode}
|
value={values.currencyCode}
|
||||||
options={Object.entries(settingsFieldCurrencyCodes).map(
|
options={Object.entries(settingsFieldCurrencyCodes).map(
|
||||||
([value, { label, Icon }]) => ({
|
([value, { label, Icon }]) => ({
|
||||||
|
@ -70,7 +70,7 @@ export const SettingsObjectFieldRelationForm = ({
|
|||||||
<StyledSelectsContainer>
|
<StyledSelectsContainer>
|
||||||
<Select
|
<Select
|
||||||
label="Relation type"
|
label="Relation type"
|
||||||
dropdownScopeId="relation-type-select"
|
dropdownId="relation-type-select"
|
||||||
fullWidth
|
fullWidth
|
||||||
disabled={disableRelationEdition}
|
disabled={disableRelationEdition}
|
||||||
value={values.type}
|
value={values.type}
|
||||||
@ -85,7 +85,7 @@ export const SettingsObjectFieldRelationForm = ({
|
|||||||
/>
|
/>
|
||||||
<Select
|
<Select
|
||||||
label="Object destination"
|
label="Object destination"
|
||||||
dropdownScopeId="object-destination-select"
|
dropdownId="object-destination-select"
|
||||||
fullWidth
|
fullWidth
|
||||||
disabled={disableRelationEdition}
|
disabled={disableRelationEdition}
|
||||||
value={values.objectMetadataId}
|
value={values.objectMetadataId}
|
||||||
|
@ -87,7 +87,7 @@ export const SettingsObjectFieldTypeSelectSection = ({
|
|||||||
<Select
|
<Select
|
||||||
fullWidth
|
fullWidth
|
||||||
disabled={!!fieldMetadata?.id}
|
disabled={!!fieldMetadata?.id}
|
||||||
dropdownScopeId="object-field-type-select"
|
dropdownId="object-field-type-select"
|
||||||
value={values?.type}
|
value={values?.type}
|
||||||
onChange={(value) => onChange({ type: value })}
|
onChange={(value) => onChange({ type: value })}
|
||||||
options={fieldTypeOptions}
|
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;
|
id: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
type SnackBarState = {
|
export type SnackBarState = {
|
||||||
maxQueue: number;
|
maxQueue: number;
|
||||||
queue: SnackBarOptions[];
|
queue: SnackBarOptions[];
|
||||||
};
|
};
|
||||||
|
@ -13,7 +13,7 @@ import { SelectHotkeyScope } from '../types/SelectHotkeyScope';
|
|||||||
export type SelectProps<Value extends string | number | null> = {
|
export type SelectProps<Value extends string | number | null> = {
|
||||||
className?: string;
|
className?: string;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
dropdownScopeId: string;
|
dropdownId: string;
|
||||||
fullWidth?: boolean;
|
fullWidth?: boolean;
|
||||||
label?: string;
|
label?: string;
|
||||||
onChange?: (value: Value) => void;
|
onChange?: (value: Value) => void;
|
||||||
@ -62,7 +62,7 @@ const StyledIconChevronDown = styled(IconChevronDown)<{ disabled?: boolean }>`
|
|||||||
export const Select = <Value extends string | number | null>({
|
export const Select = <Value extends string | number | null>({
|
||||||
className,
|
className,
|
||||||
disabled,
|
disabled,
|
||||||
dropdownScopeId,
|
dropdownId,
|
||||||
fullWidth,
|
fullWidth,
|
||||||
label,
|
label,
|
||||||
onChange,
|
onChange,
|
||||||
@ -73,7 +73,7 @@ export const Select = <Value extends string | number | null>({
|
|||||||
const selectedOption =
|
const selectedOption =
|
||||||
options.find(({ value: key }) => key === value) || options[0];
|
options.find(({ value: key }) => key === value) || options[0];
|
||||||
|
|
||||||
const { closeDropdown } = useDropdown(dropdownScopeId);
|
const { closeDropdown } = useDropdown(dropdownId);
|
||||||
|
|
||||||
const selectControl = (
|
const selectControl = (
|
||||||
<StyledControlContainer disabled={disabled} fullWidth={fullWidth}>
|
<StyledControlContainer disabled={disabled} fullWidth={fullWidth}>
|
||||||
@ -100,7 +100,7 @@ export const Select = <Value extends string | number | null>({
|
|||||||
<div className={className}>
|
<div className={className}>
|
||||||
{!!label && <StyledLabel>{label}</StyledLabel>}
|
{!!label && <StyledLabel>{label}</StyledLabel>}
|
||||||
<Dropdown
|
<Dropdown
|
||||||
dropdownId="select"
|
dropdownId={dropdownId}
|
||||||
dropdownMenuWidth={176}
|
dropdownMenuWidth={176}
|
||||||
dropdownPlacement="bottom-start"
|
dropdownPlacement="bottom-start"
|
||||||
clickableComponent={selectControl}
|
clickableComponent={selectControl}
|
||||||
|
@ -24,7 +24,7 @@ const meta: Meta<typeof Select> = {
|
|||||||
component: Select,
|
component: Select,
|
||||||
decorators: [ComponentDecorator],
|
decorators: [ComponentDecorator],
|
||||||
args: {
|
args: {
|
||||||
dropdownScopeId: 'select',
|
dropdownId: 'select',
|
||||||
value: 'a',
|
value: 'a',
|
||||||
options: [
|
options: [
|
||||||
{ value: 'a', label: 'Option A' },
|
{ 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';
|
import { createContext } from 'react';
|
||||||
|
|
||||||
|
/* istanbul ignore next */
|
||||||
export const ShowPageRecoilScopeContext = createContext<string | null>(null);
|
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 React from 'react';
|
||||||
import { fireEvent, render } from '@testing-library/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 Wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
<div ref={containerRef}>{children}</div>
|
||||||
const buttonRef2 = useRef<HTMLButtonElement>(null);
|
);
|
||||||
useListenClickOutside({
|
|
||||||
refs: [buttonRef, buttonRef2],
|
describe('useListenClickOutside', () => {
|
||||||
callback: onOutsideClick,
|
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 (
|
it('should not call the callback when clicking inside the specified refs using pixel comparison', () => {
|
||||||
<div>
|
const callback = jest.fn();
|
||||||
<span>Outside</span>
|
|
||||||
<button ref={buttonRef}>Inside</button>
|
|
||||||
<button ref={buttonRef2}>Inside 2</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
test('useListenClickOutside web-hook works in dom mode', async () => {
|
renderHook(
|
||||||
const { getByText } = render(<TestComponentDomMode />);
|
() =>
|
||||||
const inside = getByText('Inside');
|
useListenClickOutside({
|
||||||
const inside2 = getByText('Inside 2');
|
refs: [containerRef, nullRef],
|
||||||
const outside = getByText('Outside');
|
callback,
|
||||||
|
mode: ClickOutsideMode.comparePixels,
|
||||||
|
}),
|
||||||
|
{ wrapper: Wrapper },
|
||||||
|
);
|
||||||
|
|
||||||
fireEvent.click(inside);
|
act(() => {
|
||||||
expect(onOutsideClick).toHaveBeenCalledTimes(0);
|
if (containerRef.current) {
|
||||||
|
fireEvent.mouseDown(containerRef.current);
|
||||||
|
fireEvent.click(containerRef.current);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
fireEvent.click(inside2);
|
expect(callback).not.toHaveBeenCalled();
|
||||||
expect(onOutsideClick).toHaveBeenCalledTimes(0);
|
});
|
||||||
|
|
||||||
fireEvent.click(outside);
|
it('should call the callback when clicking outside the specified refs using pixel comparison', () => {
|
||||||
expect(onOutsideClick).toHaveBeenCalledTimes(1);
|
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)
|
if (!scrollWrapperRef)
|
||||||
throw new Error(
|
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;
|
return scrollWrapperRef;
|
||||||
|
@ -98,7 +98,7 @@ export const SettingsDevelopersApiKeysNew = () => {
|
|||||||
description="When the API key will expire."
|
description="When the API key will expire."
|
||||||
/>
|
/>
|
||||||
<Select
|
<Select
|
||||||
dropdownScopeId="object-field-type-select"
|
dropdownId="object-field-type-select"
|
||||||
options={ExpirationDates}
|
options={ExpirationDates}
|
||||||
value={formValues.expirationDate}
|
value={formValues.expirationDate}
|
||||||
onChange={(value) => {
|
onChange={(value) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user