From 7bab6cab4191ad5f0d509bc3f82694fb6073b3e9 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Tue, 15 Apr 2025 14:57:35 +0200 Subject: [PATCH] Fix storybook and chromatic tests and fix Block editor custom slash menu positioning (#11580) Storybook / Chromatic fixes: - fix linaria twenty-ui style loading (since twenty-ui prebuild refactoring) - update prefetch view mocks - add ability to disable hotkeys initialization in storybook to avoid race condition Custom slash menu positioning fix --- packages/twenty-front/.storybook/preview.tsx | 1 + .../components/PrefetchRunViewQueryEffect.tsx | 4 +- .../WorkflowStepHeader.stories.tsx | 8 +- .../src/testing/decorators/PageDecorator.tsx | 2 + .../src/testing/decorators/RootDecorator.tsx | 28 +++--- .../twenty-front/src/testing/graphqlMocks.ts | 85 +++++-------------- 6 files changed, 47 insertions(+), 81 deletions(-) diff --git a/packages/twenty-front/.storybook/preview.tsx b/packages/twenty-front/.storybook/preview.tsx index b848c7599..b81ff5396 100644 --- a/packages/twenty-front/.storybook/preview.tsx +++ b/packages/twenty-front/.storybook/preview.tsx @@ -8,6 +8,7 @@ import { RootDecorator } from '../src/testing/decorators/RootDecorator'; import { mockedUserJWT } from '../src/testing/mock-data/jwt'; import 'react-loading-skeleton/dist/skeleton.css'; +import 'twenty-ui/style.css'; import { THEME_DARK, THEME_LIGHT, ThemeContextProvider } from 'twenty-ui/theme'; initialize({ diff --git a/packages/twenty-front/src/modules/prefetch/components/PrefetchRunViewQueryEffect.tsx b/packages/twenty-front/src/modules/prefetch/components/PrefetchRunViewQueryEffect.tsx index 9c3bb76ef..da8e9485a 100644 --- a/packages/twenty-front/src/modules/prefetch/components/PrefetchRunViewQueryEffect.tsx +++ b/packages/twenty-front/src/modules/prefetch/components/PrefetchRunViewQueryEffect.tsx @@ -10,9 +10,9 @@ import { prefetchViewsState } from '@/prefetch/states/prefetchViewsState'; import { isPersistingViewFieldsState } from '@/views/states/isPersistingViewFieldsState'; import { View } from '@/views/types/View'; import { useIsWorkspaceActivationStatusEqualsTo } from '@/workspace/hooks/useIsWorkspaceActivationStatusEqualsTo'; -import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; -import { WorkspaceActivationStatus } from 'twenty-shared/workspace'; import { isDefined } from 'twenty-shared/utils'; +import { WorkspaceActivationStatus } from 'twenty-shared/workspace'; +import { isDeeplyEqual } from '~/utils/isDeeplyEqual'; export const PrefetchRunViewQueryEffect = () => { const currentUser = useRecoilValue(currentUserState); diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/components/__stories__/WorkflowStepHeader.stories.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/components/__stories__/WorkflowStepHeader.stories.tsx index 1cea36894..5d907b51b 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/components/__stories__/WorkflowStepHeader.stories.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/components/__stories__/WorkflowStepHeader.stories.tsx @@ -1,9 +1,9 @@ import { Meta, StoryObj } from '@storybook/react'; import { expect, fn, userEvent, waitFor, within } from '@storybook/test'; -import { WorkflowStepHeader } from '../WorkflowStepHeader'; -import { ComponentDecorator } from 'twenty-ui/testing'; import { IconPlus } from 'twenty-ui/display'; +import { ComponentDecorator } from 'twenty-ui/testing'; import { THEME_LIGHT } from 'twenty-ui/theme'; +import { WorkflowStepHeader } from '../WorkflowStepHeader'; const meta: Meta = { title: 'Modules/Workflow/WorkflowStepHeader', @@ -13,6 +13,9 @@ const meta: Meta = { }, argTypes: {}, decorators: [ComponentDecorator], + parameters: { + disableHotkeyInitialization: true, + }, }; export default meta; @@ -45,7 +48,6 @@ export const EditableTitle: Story = { }, play: async ({ canvasElement, args }) => { const canvas = within(canvasElement); - // First find the div with the text, then click it to activate the input const titleText = await canvas.findByText('Create Record'); await userEvent.click(titleText); diff --git a/packages/twenty-front/src/testing/decorators/PageDecorator.tsx b/packages/twenty-front/src/testing/decorators/PageDecorator.tsx index 4010274d9..9f13c586a 100644 --- a/packages/twenty-front/src/testing/decorators/PageDecorator.tsx +++ b/packages/twenty-front/src/testing/decorators/PageDecorator.tsx @@ -20,6 +20,7 @@ import { ClientConfigProvider } from '~/modules/client-config/components/ClientC import { UserProvider } from '~/modules/users/components/UserProvider'; import { mockedApolloClient } from '~/testing/mockedApolloClient'; +import { MainContextStoreProvider } from '@/context-store/components/MainContextStoreProvider'; import { RecoilDebugObserverEffect } from '@/debug/components/RecoilDebugObserver'; import { ObjectMetadataItemsLoadEffect } from '@/object-metadata/components/ObjectMetadataItemsLoadEffect'; import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider'; @@ -118,6 +119,7 @@ const Providers = () => { + diff --git a/packages/twenty-front/src/testing/decorators/RootDecorator.tsx b/packages/twenty-front/src/testing/decorators/RootDecorator.tsx index 5808791d1..23660fea8 100644 --- a/packages/twenty-front/src/testing/decorators/RootDecorator.tsx +++ b/packages/twenty-front/src/testing/decorators/RootDecorator.tsx @@ -7,13 +7,21 @@ import { ApolloMetadataClientMockedProvider } from '@/object-metadata/hooks/__mo import { InitializeHotkeyStorybookHookEffect } from '../InitializeHotkeyStorybookHook'; import { mockedApolloClient } from '../mockedApolloClient'; -export const RootDecorator: Decorator = (Story) => ( - - - - - - - - -); +export const RootDecorator: Decorator = (Story, context) => { + const { parameters } = context; + + const disableHotkeyInitialization = parameters.disableHotkeyInitialization; + + return ( + + + + {!disableHotkeyInitialization && ( + + )} + + + + + ); +}; diff --git a/packages/twenty-front/src/testing/graphqlMocks.ts b/packages/twenty-front/src/testing/graphqlMocks.ts index 6de1f22d9..a138b5307 100644 --- a/packages/twenty-front/src/testing/graphqlMocks.ts +++ b/packages/twenty-front/src/testing/graphqlMocks.ts @@ -22,6 +22,7 @@ import { mockWorkspaceMembers } from '~/testing/mock-data/workspace-members'; import { GET_PUBLIC_WORKSPACE_DATA_BY_DOMAIN } from '@/auth/graphql/queries/getPublicWorkspaceDataByDomain'; import { GET_ROLES } from '@/settings/roles/graphql/queries/getRolesQuery'; +import { isDefined } from 'twenty-shared/utils'; import { mockedStandardObjectMetadataQueryResult } from '~/testing/mock-data/generated/mock-metadata-query-result'; import { getRolesMock } from '~/testing/mock-data/roles'; import { mockedTasks } from '~/testing/mock-data/tasks'; @@ -236,11 +237,26 @@ export const graphqlMocks = { edges: mockedViewsData .filter( (view) => - view?.objectMetadataId === objectMetadataId && - view?.type === viewType, + (isDefined(objectMetadataId) + ? view?.objectMetadataId === objectMetadataId + : true) && + (isDefined(viewType) ? view?.type === viewType : true), ) .map((view) => ({ - node: view, + node: { + ...view, + viewFields: { + edges: mockedViewFieldsData + .filter((viewField) => viewField.viewId === view.id) + .map((viewField) => ({ + node: viewField, + cursor: null, + })), + totalCount: mockedViewFieldsData.filter( + (viewField) => viewField.viewId === view.id, + ).length, + }, + }, cursor: null, })), pageInfo: { @@ -321,69 +337,6 @@ export const graphqlMocks = { }, }); }), - graphql.query('CombinedFindManyRecords', () => { - return HttpResponse.json({ - data: { - favorites: { - edges: mockedFavoritesData.map((favorite) => ({ - node: favorite, - cursor: null, - })), - totalCount: mockedFavoritesData.length, - pageInfo: { - hasNextPage: false, - hasPreviousPage: false, - startCursor: null, - endCursor: null, - }, - }, - favoriteFolders: { - edges: [], - pageInfo: { - hasNextPage: false, - hasPreviousPage: false, - startCursor: null, - endCursor: null, - }, - }, - views: { - edges: mockedViewsData.map((view) => ({ - node: { - ...view, - viewFilters: { - edges: [], - totalCount: 0, - }, - viewSorts: { - edges: [], - totalCount: 0, - }, - viewFields: { - edges: mockedViewFieldsData - .filter((viewField) => viewField.viewId === view.id) - .map((viewField) => ({ - node: viewField, - cursor: null, - })), - totalCount: mockedViewFieldsData.filter( - (viewField) => viewField.viewId === view.id, - ).length, - }, - }, - cursor: null, - })), - pageInfo: { - hasNextPage: false, - hasPreviousPage: false, - startCursor: null, - endCursor: null, - totalCount: mockedViewsData.length, - }, - totalCount: mockedViewsData.length, - }, - }, - }); - }), graphql.query('FindManyCompanies', ({ variables }) => { const mockedData = variables.limit ? companiesMock.slice(0, variables.limit)