Add storybook tests for User & Metadata loading (#5650)

### Description Add storybook tests for User & Metadata loading ### Refs #5590 ### Demo https://github.com/twentyhq/twenty/assets/140154534/2434fc50-8d95-420b-9f62-6fbdf43ce9e5 Fixes #5590 --------- Co-authored-by: gitstart-twenty <[email protected]> Co-authored-by: v1b3m <[email protected]> Co-authored-by: Thiago Nascimbeni <[email protected]>
twentyhq · Jun 4, 2024 · cd9ac52 · cd9ac52
1 parent 3f9f2c3
commit cd9ac52
Show file tree

Hide file tree

Showing 44 changed files with 175 additions and 95 deletions.
diff --git a/packages/twenty-front/src/loading/components/__stories__/PrefetchLoading.stories.tsx b/packages/twenty-front/src/loading/components/__stories__/PrefetchLoading.stories.tsx
@@ -0,0 +1,47 @@
+import { expect } from '@storybook/jest';
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+
+import { RecordIndexPage } from '~/pages/object-record/RecordIndexPage';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'App/Loading/PrefetchLoading',
+  component: RecordIndexPage,
+  args: {
+    routePath: '/objects/:objectNamePlural',
+    routeParams: {
+      ':objectNamePlural': 'companies',
+    },
+  },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof RecordIndexPage>;
+
+export const Default: Story = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await canvas.findByText('Search');
+    await canvas.findByText('Settings');
+    await canvas.findByText('Tasks');
+
+    expect(canvas.queryByText('People')).toBeNull();
+    expect(canvas.queryByText('Opportunities')).toBeNull();
+    expect(canvas.queryByText('Listings')).toBeNull();
+    expect(canvas.queryByText('My Customs')).toBeNull();
+  },
+};
diff --git a/packages/twenty-front/src/loading/components/__stories__/UserOrMetadataLoader.stories.tsx b/packages/twenty-front/src/loading/components/__stories__/UserOrMetadataLoader.stories.tsx
@@ -0,0 +1,87 @@
+import { getOperationName } from '@apollo/client/utilities';
+import { expect } from '@storybook/jest';
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+import { graphql, HttpResponse } from 'msw';
+
+import { GET_CLIENT_CONFIG } from '@/client-config/graphql/queries/getClientConfig';
+import { FIND_MANY_OBJECT_METADATA_ITEMS } from '@/object-metadata/graphql/queries';
+import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
+import { RecordIndexPage } from '~/pages/object-record/RecordIndexPage';
+import {
+  PageDecorator,
+  PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks, metadataGraphql } from '~/testing/graphqlMocks';
+import { mockedClientConfig } from '~/testing/mock-data/config';
+import { mockedUsersData } from '~/testing/mock-data/users';
+
+const userMetadataLoaderMocks = {
+  msw: {
+    handlers: [
+      graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
+        return HttpResponse.json({
+          data: {
+            currentUser: mockedUsersData[0],
+          },
+        });
+      }),
+      graphql.query(getOperationName(GET_CLIENT_CONFIG) ?? '', () => {
+        return HttpResponse.json({
+          data: {
+            clientConfig: mockedClientConfig,
+          },
+        });
+      }),
+      metadataGraphql.query(
+        getOperationName(FIND_MANY_OBJECT_METADATA_ITEMS) ?? '',
+        () => {
+          return HttpResponse.json({
+            data: {
+              objects: {
+                // simulate no metadata items
+                edges: [],
+              },
+            },
+          });
+        },
+      ),
+    ],
+  },
+};
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'App/Loading/UserOrMetadataLoader',
+  component: RecordIndexPage,
+  args: {
+    routePath: '/objects/:objectNamePlural',
+    routeParams: {
+      ':objectNamePlural': 'companies',
+    },
+  },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof RecordIndexPage>;
+
+export const Default: Story = {
+  parameters: userMetadataLoaderMocks,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  decorators: [PageDecorator],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.queryByText('Search')).toBeNull();
+    expect(canvas.queryByText('Settings')).toBeNull();
+    expect(canvas.queryByText('Tasks')).toBeNull();
+    expect(canvas.queryByText('People')).toBeNull();
+    expect(canvas.queryByText('Opportunities')).toBeNull();
+    expect(canvas.queryByText('Listings')).toBeNull();
+    expect(canvas.queryByText('My Customs')).toBeNull();
+  },
+};
diff --git a/...ont/src/modules/object-metadata/components/__stories__/ObjectMetadataNavItems.stories.tsx b/...ont/src/modules/object-metadata/components/__stories__/ObjectMetadataNavItems.stories.tsx
@@ -6,7 +6,6 @@ import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/Componen
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
@@ -21,7 +20,6 @@ const meta: Meta<typeof ObjectMetadataNavItems> = {
     ComponentWithRouterDecorator,
     ComponentWithRecoilScopeDecorator,
     SnackBarDecorator,
-    PrefetchLoadingDecorator,
   ],
   parameters: {
     msw: graphqlMocks,

diff --git a/packages/twenty-front/src/modules/support/components/__stories__/SupportChat.stories.tsx b/packages/twenty-front/src/modules/support/components/__stories__/SupportChat.stories.tsx
@@ -7,7 +7,6 @@ import { currentUserState } from '@/auth/states/currentUserState';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { supportChatState } from '@/client-config/states/supportChatState';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import {
   mockDefaultWorkspace,
@@ -36,7 +35,6 @@ const meta: Meta<typeof SupportChat> = {
 
       return <Story />;
     },
-    PrefetchLoadingDecorator,
   ],
   parameters: {
     msw: graphqlMocks,

diff --git a/packages/twenty-front/src/pages/auth/__stories__/ChooseYourPlan.stories.tsx b/packages/twenty-front/src/pages/auth/__stories__/ChooseYourPlan.stories.tsx
@@ -9,7 +9,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
 import { sleep } from '~/testing/sleep';
@@ -19,7 +18,7 @@ import { ChooseYourPlan } from '../ChooseYourPlan';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Auth/ChooseYourPlan',
   component: ChooseYourPlan,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: { routePath: AppPath.PlanRequired },
   parameters: {
     msw: {

diff --git a/packages/twenty-front/src/pages/auth/__stories__/CreateProfile.stories.tsx b/packages/twenty-front/src/pages/auth/__stories__/CreateProfile.stories.tsx
@@ -9,7 +9,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
 
@@ -18,7 +17,7 @@ import { CreateProfile } from '../CreateProfile';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Auth/CreateProfile',
   component: CreateProfile,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: { routePath: AppPath.CreateProfile },
   parameters: {
     msw: {

diff --git a/packages/twenty-front/src/pages/auth/__stories__/CreateWorkspace.stories.tsx b/packages/twenty-front/src/pages/auth/__stories__/CreateWorkspace.stories.tsx
@@ -11,7 +11,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
 
@@ -26,7 +25,6 @@ const meta: Meta<PageDecoratorArgs> = {
       setCurrentWorkspace(mockedOnboardingUsersData[1].defaultWorkspace);
       return <Story />;
     },
-    PrefetchLoadingDecorator,
     PageDecorator,
   ],
   args: { routePath: AppPath.CreateWorkspace },

diff --git a/packages/twenty-front/src/pages/auth/__stories__/PasswordReset.stories.tsx b/packages/twenty-front/src/pages/auth/__stories__/PasswordReset.stories.tsx
@@ -10,14 +10,13 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Auth/PasswordReset',
   component: PasswordReset,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: '/reset-password/:passwordResetToken',
     routeParams: { ':passwordResetToken': 'MOCKED_TOKEN' },

diff --git a/packages/twenty-front/src/pages/auth/__stories__/PaymentSuccess.stories.tsx b/packages/twenty-front/src/pages/auth/__stories__/PaymentSuccess.stories.tsx
@@ -9,7 +9,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
 
@@ -18,7 +17,7 @@ import { PaymentSuccess } from '../PaymentSuccess';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Auth/PaymentSuccess',
   component: PaymentSuccess,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: { routePath: AppPath.PlanRequiredSuccess },
   parameters: {
     msw: {

diff --git a/packages/twenty-front/src/pages/auth/__stories__/SignInUp.stories.tsx b/packages/twenty-front/src/pages/auth/__stories__/SignInUp.stories.tsx
@@ -9,15 +9,14 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { SignInUp } from '../SignInUp';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Auth/SignInUp',
   component: SignInUp,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: { routePath: AppPath.SignInUp },
   parameters: {
     msw: {

diff --git a/packages/twenty-front/src/pages/impersonate/__stories__/ImpersonateEffect.stories.tsx b/packages/twenty-front/src/pages/impersonate/__stories__/ImpersonateEffect.stories.tsx
@@ -5,7 +5,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';
 
@@ -14,7 +13,7 @@ import { ImpersonateEffect } from '../ImpersonateEffect';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Impersonate/Impersonate',
   component: ImpersonateEffect,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: AppPath.Impersonate,
     routeParams: { ':userId': '1' },

diff --git a/packages/twenty-front/src/pages/object-record/__stories__/RecordIndexPage.stories.tsx b/packages/twenty-front/src/pages/object-record/__stories__/RecordIndexPage.stories.tsx
@@ -1,12 +1,10 @@
-import { expect } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';
 
 import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { RecordIndexPage } from '../RecordIndexPage';
@@ -31,7 +29,6 @@ export default meta;
 export type Story = StoryObj<typeof RecordIndexPage>;
 
 export const Default: Story = {
-  decorators: [PrefetchLoadingDecorator],
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -42,14 +39,3 @@ export const Default: Story = {
     await canvas.findByText('My Customs');
   },
 };
-
-export const Loading: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    expect(canvas.queryByText('People')).toBeNull();
-    expect(canvas.queryByText('Opportunities')).toBeNull();
-    expect(canvas.queryByText('Listings')).toBeNull();
-    expect(canvas.queryByText('My Customs')).toBeNull();
-  },
-};
diff --git a/packages/twenty-front/src/pages/object-record/__stories__/RecordShowPage.stories.tsx b/packages/twenty-front/src/pages/object-record/__stories__/RecordShowPage.stories.tsx
@@ -7,7 +7,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedPeopleData } from '~/testing/mock-data/people';
 import { mockedWorkspaceMemberData } from '~/testing/mock-data/users';
@@ -84,7 +83,7 @@ export type Story = StoryObj<typeof RecordShowPage>;
 export const Default: Story = {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 

diff --git a/packages/twenty-front/src/pages/settings/__stories__/SettingsAppearance.stories.tsx b/packages/twenty-front/src/pages/settings/__stories__/SettingsAppearance.stories.tsx
@@ -4,15 +4,14 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { SettingsAppearance } from '../SettingsAppearance';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/SettingsAppearance',
   component: SettingsAppearance,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: { routePath: '/settings/appearance' },
   parameters: {
     msw: graphqlMocks,

diff --git a/packages/twenty-front/src/pages/settings/__stories__/SettingsBilling.stories.tsx b/packages/twenty-front/src/pages/settings/__stories__/SettingsBilling.stories.tsx
@@ -7,7 +7,6 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';
 
@@ -16,7 +15,7 @@ import { SettingsBilling } from '../SettingsBilling';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/SettingsBilling',
   component: SettingsBilling,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: { routePath: getSettingsPagePath(SettingsPath.Billing) },
   parameters: {
     msw: graphqlMocks,

diff --git a/packages/twenty-front/src/pages/settings/__stories__/SettingsProfile.stories.tsx b/packages/twenty-front/src/pages/settings/__stories__/SettingsProfile.stories.tsx
@@ -5,15 +5,14 @@ import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
-import { PrefetchLoadingDecorator } from '~/testing/decorators/PrefetchLoadingDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { SettingsProfile } from '../SettingsProfile';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Settings/SettingsProfile',
   component: SettingsProfile,
-  decorators: [PrefetchLoadingDecorator, PageDecorator],
+  decorators: [PageDecorator],
   args: {
     routePath: '/settings/profile',
     additionalRoutes: ['/welcome'],