From 0fa55b0634ebb72e07570bc2f06b1543765bbdb4 Mon Sep 17 00:00:00 2001 From: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com> Date: Wed, 29 Nov 2023 04:18:34 +0545 Subject: [PATCH] Fix Frontend modules tests (#2688) * Fix naming issue Co-authored-by: gitstart-twenty Co-authored-by: v1b3m Co-authored-by: Thiago Nascimbeni * Fix more tests Co-authored-by: gitstart-twenty Co-authored-by: v1b3m Co-authored-by: Thiago Nascimbeni * Revert unnecessary changes Co-authored-by: gitstart-twenty Co-authored-by: v1b3m Co-authored-by: Thiago Nascimbeni * Refactor according to self-review Co-authored-by: v1b3m Co-authored-by: gitstart-twenty Co-authored-by: Thiago Nascimbeni * Fix graphql mocks not working anymore --------- Co-authored-by: gitstart-twenty Co-authored-by: v1b3m Co-authored-by: Thiago Nascimbeni Co-authored-by: Charles Bochet --- front/.storybook/preview.ts | 5 +- front/package.json | 4 +- front/public/mockServiceWorker.js | 2 +- .../tasks/__stories__/TaskGroups.stories.tsx | 2 + .../tasks/__stories__/TaskList.stories.tsx | 2 + .../activities/tasks/components/TaskRow.tsx | 2 +- .../__stories__/CommandMenu.stories.tsx | 4 + .../command-menu/hooks/useCommandMenu.ts | 14 +- .../companies/__stories__/Board.stories.tsx | 2 + .../ObjectMetadataItemsProvider.tsx | 8 +- ...bjectMetadataItemsRelationPickerEffect.tsx | 4 +- .../objectMetadataItemFamilySelector.ts | 1 - .../SettingsObjectFieldTypeSelectSection.tsx | 2 +- ...gsObjectFieldTypeSelectSection.stories.tsx | 6 +- .../__stories__/MatchColumns.stories.tsx | 2 + .../components/__stories__/Upload.stories.tsx | 2 + .../__stories__/MainNavbar.stories.tsx | 2 + .../__stories__/PhoneFieldDisplay.stories.tsx | 5 +- .../__stories__/PhoneFieldInput.stories.tsx | 5 +- .../RelationFieldInput.stories.tsx | 34 +- .../ui/object/field/types/FieldType.ts | 4 - .../ObjectMetadataItemsDecorator.tsx | 9 + front/src/testing/graphqlMocks.ts | 258 +++++----- front/src/testing/mock-data/metadata.ts | 478 +++++++++++++++++- front/yarn.lock | 149 +----- 25 files changed, 693 insertions(+), 313 deletions(-) create mode 100644 front/src/testing/decorators/ObjectMetadataItemsDecorator.tsx diff --git a/front/.storybook/preview.ts b/front/.storybook/preview.ts index 56edada6c..9c82b0eae 100644 --- a/front/.storybook/preview.ts +++ b/front/.storybook/preview.ts @@ -1,4 +1,4 @@ -import { initialize, mswDecorator } from 'msw-storybook-addon'; +import { initialize, mswLoader } from 'msw-storybook-addon'; import { Preview } from '@storybook/react'; import { ThemeProvider } from '@emotion/react'; import { withThemeFromJSXProvider } from '@storybook/addon-styling'; @@ -6,12 +6,12 @@ import { lightTheme, darkTheme } from '../src/modules/ui/theme/constants/theme'; import { RootDecorator } from '../src/testing/decorators/RootDecorator'; import 'react-loading-skeleton/dist/skeleton.css'; import { mockedUserJWT } from '../src/testing/mock-data/jwt'; +import { rest } from 'msw' initialize(); const preview: Preview = { decorators: [ - mswDecorator, withThemeFromJSXProvider({ themes: { light: lightTheme, @@ -39,6 +39,7 @@ const preview: Preview = { }, }, }, + loaders: [mswLoader], }; export default preview; diff --git a/front/package.json b/front/package.json index 45203794a..040f44c0d 100644 --- a/front/package.json +++ b/front/package.json @@ -161,8 +161,8 @@ "eslint-plugin-twenty": "file:../packages/eslint-plugin-twenty", "eslint-plugin-unused-imports": "^3.0.0", "http-server": "^14.1.1", - "msw": "1.2.1", - "msw-storybook-addon": "^1.8.0", + "msw": "1.3.2", + "msw-storybook-addon": "^1.10.0", "prettier": "^2.8.0", "react-scripts": "5.0.1", "storybook": "^7.0.22", diff --git a/front/public/mockServiceWorker.js b/front/public/mockServiceWorker.js index 87e0f31b8..51d85eeeb 100644 --- a/front/public/mockServiceWorker.js +++ b/front/public/mockServiceWorker.js @@ -2,7 +2,7 @@ /* tslint:disable */ /** - * Mock Service Worker (1.2.1). + * Mock Service Worker (1.3.2). * @see https://github.com/mswjs/msw * - Please do NOT modify this file. * - Please do NOT serve this file on production. diff --git a/front/src/modules/activities/tasks/__stories__/TaskGroups.stories.tsx b/front/src/modules/activities/tasks/__stories__/TaskGroups.stories.tsx index 5e5c003c8..7ad9c0067 100644 --- a/front/src/modules/activities/tasks/__stories__/TaskGroups.stories.tsx +++ b/front/src/modules/activities/tasks/__stories__/TaskGroups.stories.tsx @@ -5,6 +5,7 @@ import { TaskGroups } from '@/activities/tasks/components/TaskGroups'; import { ObjectFilterDropdownScope } from '@/ui/object/object-filter-dropdown/scopes/ObjectFilterDropdownScope'; import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator'; import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator'; +import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; import { graphqlMocks } from '~/testing/graphqlMocks'; import { mockedTasks } from '~/testing/mock-data/activities'; @@ -19,6 +20,7 @@ const meta: Meta = { ), ComponentWithRouterDecorator, ComponentWithRecoilScopeDecorator, + SnackBarDecorator, ], parameters: { msw: graphqlMocks, diff --git a/front/src/modules/activities/tasks/__stories__/TaskList.stories.tsx b/front/src/modules/activities/tasks/__stories__/TaskList.stories.tsx index 7df54e3f5..e7b4bbe74 100644 --- a/front/src/modules/activities/tasks/__stories__/TaskList.stories.tsx +++ b/front/src/modules/activities/tasks/__stories__/TaskList.stories.tsx @@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { TaskList } from '@/activities/tasks/components/TaskList'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; +import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; import { graphqlMocks } from '~/testing/graphqlMocks'; import { mockedActivities } from '~/testing/mock-data/activities'; @@ -16,6 +17,7 @@ const meta: Meta = { ), ComponentDecorator, + SnackBarDecorator, ], args: { title: 'Tasks', diff --git a/front/src/modules/activities/tasks/components/TaskRow.tsx b/front/src/modules/activities/tasks/components/TaskRow.tsx index 4c6af3057..d10312f95 100644 --- a/front/src/modules/activities/tasks/components/TaskRow.tsx +++ b/front/src/modules/activities/tasks/components/TaskRow.tsx @@ -77,7 +77,7 @@ export const TaskRow = ({ const { completeTask } = useCompleteTask(task); const activityTargetIds = - task?.activityTargets?.edges.map( + task?.activityTargets?.edges?.map( (activityTarget) => activityTarget.node.id, ) ?? []; diff --git a/front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx b/front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx index 03f30117e..360f39dd5 100644 --- a/front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx +++ b/front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx @@ -7,6 +7,8 @@ import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu'; import { CommandType } from '@/command-menu/types/Command'; import { IconCheckbox, IconNotes } from '@/ui/display/icon'; import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator'; +import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator'; +import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; import { graphqlMocks } from '~/testing/graphqlMocks'; import { sleep } from '~/testing/sleep'; @@ -18,6 +20,7 @@ const meta: Meta = { title: 'Modules/CommandMenu/CommandMenu', component: CommandMenu, decorators: [ + ObjectMetadataItemsDecorator, ComponentWithRouterDecorator, (Story) => { const { addToCommandMenu, setToIntitialCommandMenu, toggleCommandMenu } = @@ -48,6 +51,7 @@ const meta: Meta = { return ; }, + SnackBarDecorator, ], parameters: { msw: graphqlMocks, diff --git a/front/src/modules/command-menu/hooks/useCommandMenu.ts b/front/src/modules/command-menu/hooks/useCommandMenu.ts index 609741fee..00cee62bc 100644 --- a/front/src/modules/command-menu/hooks/useCommandMenu.ts +++ b/front/src/modules/command-menu/hooks/useCommandMenu.ts @@ -1,4 +1,4 @@ -import { useRecoilState, useSetRecoilState } from 'recoil'; +import { useRecoilCallback, useSetRecoilState } from 'recoil'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope'; @@ -9,9 +9,7 @@ import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState'; import { Command } from '../types/Command'; export const useCommandMenu = () => { - const [isCommandMenuOpened, setIsCommandMenuOpened] = useRecoilState( - isCommandMenuOpenedState, - ); + const setIsCommandMenuOpened = useSetRecoilState(isCommandMenuOpenedState); const setCommands = useSetRecoilState(commandMenuCommandsState); const { setHotkeyScopeAndMemorizePreviousScope, @@ -28,13 +26,17 @@ export const useCommandMenu = () => { goBackToPreviousHotkeyScope(); }; - const toggleCommandMenu = () => { + const toggleCommandMenu = useRecoilCallback(({ snapshot }) => async () => { + const isCommandMenuOpened = snapshot + .getLoadable(isCommandMenuOpenedState) + .getValue(); + if (isCommandMenuOpened) { closeCommandMenu(); } else { openCommandMenu(); } - }; + }); const addToCommandMenu = (addCommand: Command[]) => { setCommands((prev) => [...prev, ...addCommand]); diff --git a/front/src/modules/companies/__stories__/Board.stories.tsx b/front/src/modules/companies/__stories__/Board.stories.tsx index a4992e48d..f264ef39f 100644 --- a/front/src/modules/companies/__stories__/Board.stories.tsx +++ b/front/src/modules/companies/__stories__/Board.stories.tsx @@ -1,6 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator'; +import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator'; import { graphqlMocks } from '~/testing/graphqlMocks'; import { CompanyBoard } from '../board/components/CompanyBoard'; @@ -16,6 +17,7 @@ const meta: Meta = { ), ComponentWithRouterDecorator, + SnackBarDecorator, ], parameters: { msw: graphqlMocks, diff --git a/front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx b/front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx index 749a5dfd6..5744c8d34 100644 --- a/front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx +++ b/front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx @@ -10,9 +10,11 @@ export const ObjectMetadataItemsProvider = ({ return loading ? ( <> ) : ( - + <> - {children} - + + {children} + + ); }; diff --git a/front/src/modules/object-metadata/components/ObjectMetadataItemsRelationPickerEffect.tsx b/front/src/modules/object-metadata/components/ObjectMetadataItemsRelationPickerEffect.tsx index deb4e028c..cf072acd7 100644 --- a/front/src/modules/object-metadata/components/ObjectMetadataItemsRelationPickerEffect.tsx +++ b/front/src/modules/object-metadata/components/ObjectMetadataItemsRelationPickerEffect.tsx @@ -5,7 +5,9 @@ import { IdentifiersMapper } from '@/ui/input/components/internal/relation-picke import { getLogoUrlFromDomainName } from '~/utils'; export const ObjectMetadataItemsRelationPickerEffect = () => { - const { setIdentifiersMapper, setSearchQuery } = useRelationPicker(); + const { setIdentifiersMapper, setSearchQuery } = useRelationPicker({ + relationPickerScopeId: 'relation-picker', + }); const computeFilterFields = (relationPickerType: string) => { if (relationPickerType === 'company') { diff --git a/front/src/modules/object-metadata/states/objectMetadataItemFamilySelector.ts b/front/src/modules/object-metadata/states/objectMetadataItemFamilySelector.ts index c1ff8ce17..fbfe2e33c 100644 --- a/front/src/modules/object-metadata/states/objectMetadataItemFamilySelector.ts +++ b/front/src/modules/object-metadata/states/objectMetadataItemFamilySelector.ts @@ -18,7 +18,6 @@ export const objectMetadataItemFamilySelector = selectorFamily< }) => ({ get }) => { const objectMetadataItems = get(objectMetadataItemsState); - return ( objectMetadataItems.find( (objectMetadataItem) => diff --git a/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx b/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx index cf83840c7..6060fb65f 100644 --- a/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx +++ b/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx @@ -69,7 +69,7 @@ export const SettingsObjectFieldTypeSelectSection = ({ description="The field's type and values." />