From a52f2e5bd9b3f8792f0ab7dc0cd4dd995b11e860 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Wed, 17 Apr 2024 18:48:41 +0200 Subject: [PATCH] Fix Storybook stories (Datamodel edition / preview / signOut) (#5019) As per title ; some small changes on broken stories --- .../useCreateActivityInCache.test.tsx | 9 +++ .../__stories__/BooleanFieldInput.stories.tsx | 1 + ...DataModelFieldSettingsFormCard.stories.tsx | 2 +- ...tingsDataModelFieldPreviewCard.stories.tsx | 14 +--- .../components/WorkspaceInviteLink.tsx | 2 +- .../__stories__/SettingsProfile.stories.tsx | 10 ++- .../src/testing/decorators/PageDecorator.tsx | 79 +++++++++++-------- 7 files changed, 65 insertions(+), 52 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/hooks/__tests__/useCreateActivityInCache.test.tsx b/packages/twenty-front/src/modules/activities/hooks/__tests__/useCreateActivityInCache.test.tsx index dc8677e34..48ca74de3 100644 --- a/packages/twenty-front/src/modules/activities/hooks/__tests__/useCreateActivityInCache.test.tsx +++ b/packages/twenty-front/src/modules/activities/hooks/__tests__/useCreateActivityInCache.test.tsx @@ -8,6 +8,7 @@ import { useCreateActivityInCache } from '@/activities/hooks/useCreateActivityIn import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState'; import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; import { getObjectMetadataItemsMock } from '@/object-metadata/utils/getObjectMetadataItemsMock'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope'; import { mockWorkspaceMembers } from '~/testing/mock-data/workspace-members'; @@ -64,18 +65,26 @@ describe('useCreateActivityInCache', () => { const setObjectMetadataItems = useSetRecoilState( objectMetadataItemsState, ); + const setRecordStore = useSetRecoilState( + recordStoreFamilyState('1234'), + ); const res = useCreateActivityInCache(); return { ...res, setCurrentWorkspaceMember, setObjectMetadataItems, + setRecordStore, }; }, { wrapper: Wrapper }, ); act(() => { + result.current.setRecordStore({ + id: '1234', + __typename: 'Person', + }); result.current.setCurrentWorkspaceMember(mockWorkspaceMembers[0]); result.current.setObjectMetadataItems(mockObjectMetadataItems); }); diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/BooleanFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/BooleanFieldInput.stories.tsx index 934d7b3e4..87afe95c4 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/BooleanFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/BooleanFieldInput.stories.tsx @@ -41,6 +41,7 @@ const BooleanFieldInputWithContext = ({ return ( = { 'Modules/Settings/DataModel/Fields/Forms/SettingsDataModelFieldSettingsFormCard', component: SettingsDataModelFieldSettingsFormCard, decorators: [ + MemoryRouterDecorator, ComponentDecorator, ObjectMetadataItemsDecorator, SnackBarDecorator, @@ -61,7 +62,6 @@ const relationFieldMetadataItem = mockedPersonObjectMetadataItem.fields.find( )!; export const WithRelationForm: Story = { - decorators: [MemoryRouterDecorator], args: { fieldMetadataItem: mockedCompanyObjectMetadataItem.fields.find( ({ name }) => name === 'people', diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/__stories__/SettingsDataModelFieldPreviewCard.stories.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/__stories__/SettingsDataModelFieldPreviewCard.stories.tsx index 23876715c..33617364a 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/__stories__/SettingsDataModelFieldPreviewCard.stories.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/__stories__/SettingsDataModelFieldPreviewCard.stories.tsx @@ -18,6 +18,7 @@ const meta: Meta = { 'Modules/Settings/DataModel/Fields/Preview/SettingsDataModelFieldPreviewCard', component: SettingsDataModelFieldPreviewCard, decorators: [ + MemoryRouterDecorator, ComponentDecorator, ObjectMetadataItemsDecorator, SnackBarDecorator, @@ -64,7 +65,6 @@ export const Date: Story = { }; export const Link: Story = { - decorators: [MemoryRouterDecorator], args: { fieldMetadataItem: mockedCompanyObjectMetadataItem.fields.find( ({ type }) => type === FieldMetadataType.Link, @@ -91,7 +91,6 @@ export const Rating: Story = { }; export const Relation: Story = { - decorators: [MemoryRouterDecorator], args: { fieldMetadataItem: mockedPersonObjectMetadataItem.fields.find( ({ name }) => name === 'company', @@ -100,14 +99,3 @@ export const Relation: Story = { relationObjectMetadataItem: mockedCompanyObjectMetadataItem, }, }; - -// Todo: re-enable this test once useObjectMetadataItem has been split and refactored into smaller functions. -// Right now, as the workspace is not set, the hook things the user is not logged in and it is not possible to have a custom object -// export const Custom: Story = { -// args: { -// fieldMetadataItem: mockedCustomObjectMetadataItem.fields.find( -// ({ type }) => type === FieldMetadataType.Text, -// ), -// objectMetadataItem: mockedCustomObjectMetadataItem, -// }, -// }; diff --git a/packages/twenty-front/src/modules/workspace/components/WorkspaceInviteLink.tsx b/packages/twenty-front/src/modules/workspace/components/WorkspaceInviteLink.tsx index 4d855daae..a87a9f371 100644 --- a/packages/twenty-front/src/modules/workspace/components/WorkspaceInviteLink.tsx +++ b/packages/twenty-front/src/modules/workspace/components/WorkspaceInviteLink.tsx @@ -29,7 +29,7 @@ export const WorkspaceInviteLink = ({ const { enqueueSnackBar } = useSnackBar(); return ( - + diff --git a/packages/twenty-front/src/pages/settings/__stories__/SettingsProfile.stories.tsx b/packages/twenty-front/src/pages/settings/__stories__/SettingsProfile.stories.tsx index 77380713c..4c674e352 100644 --- a/packages/twenty-front/src/pages/settings/__stories__/SettingsProfile.stories.tsx +++ b/packages/twenty-front/src/pages/settings/__stories__/SettingsProfile.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { within } from '@storybook/test'; +import { userEvent, within } from '@storybook/test'; import { PageDecorator, @@ -13,7 +13,10 @@ const meta: Meta = { title: 'Pages/Settings/SettingsProfile', component: SettingsProfile, decorators: [PageDecorator], - args: { routePath: '/settings/profile' }, + args: { + routePath: '/settings/profile', + additionalRoutes: ['/welcome'], + }, parameters: { msw: graphqlMocks, }, @@ -29,6 +32,7 @@ export const LogOut: Story = { play: async ({ canvasElement }) => { const canvas = within(canvasElement); const logoutButton = await canvas.findByText('Logout'); - await logoutButton.click(); + + await userEvent.click(logoutButton); }, }; diff --git a/packages/twenty-front/src/testing/decorators/PageDecorator.tsx b/packages/twenty-front/src/testing/decorators/PageDecorator.tsx index 1692ac491..9a16bab4f 100644 --- a/packages/twenty-front/src/testing/decorators/PageDecorator.tsx +++ b/packages/twenty-front/src/testing/decorators/PageDecorator.tsx @@ -20,6 +20,7 @@ import { FullHeightStorybookLayout } from '../FullHeightStorybookLayout'; export type PageDecoratorArgs = { routePath: string; routeParams: RouteParams; + additionalRoutes?: string[]; }; type RouteParams = { @@ -44,37 +45,47 @@ const ApolloStorybookDevLogEffect = () => { export const PageDecorator: Decorator<{ routePath: string; routeParams: RouteParams; -}> = (Story, { args }) => ( - - - - - - - - - - - - - - - }> - } /> - - - - - - - - - - - - -); + additionalRoutes?: string[]; +}> = (Story, { args }) => { + return ( + + + + + + + + + + + + + + + }> + } /> + {args.additionalRoutes?.map((route) => ( + Navigated to {route}} + /> + ))} + + + + + + + + + + + + + ); +};