Fix and enhance storybook:pages tests (#3085)

* Fix and enhance storybook:pages tests

Co-authored-by: gitstart-app[bot] <57568882+gitstart-app[bot]@users.noreply.github.com>

* Fix and enhance storybook:pages tests

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: gitstart-app[bot] <57568882+gitstart-app[bot]@users.noreply.github.com>

* fix SettingsObjectFieldPreview

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: gitstart-app[bot] <57568882+gitstart-app[bot]@users.noreply.github.com>

* Fix lint

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: gitstart-app[bot] <57568882+gitstart-app[bot]@users.noreply.github.com>

* Fix jest

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: gitstart-app[bot] <57568882+gitstart-app[bot]@users.noreply.github.com>

* Add more fixes

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: gitstart-app[bot] <57568882+gitstart-app[bot]@users.noreply.github.com>

* Fix App.stories.tsx

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: gitstart-app[bot] <57568882+gitstart-app[bot]@users.noreply.github.com>

* Fix tests

* Fix according to review

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: gitstart-app[bot] <57568882+gitstart-app[bot]@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/pages/auth/PlanRequired.tsx

@@ -4,8 +4,6 @@ import { useRecoilValue } from 'recoil';
 import { Logo } from '@/auth/components/Logo';
 import { SubTitle } from '@/auth/components/SubTitle';
 import { Title } from '@/auth/components/Title';
-import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus';
-import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
 import { billingState } from '@/client-config/states/billingState';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { MainButton } from '@/ui/input/button/components/MainButton';
@@ -18,7 +16,6 @@ const StyledButtonContainer = styled.div`
 `;
 
 export const PlanRequired = () => {
-  const onboardingStatus = useOnboardingStatus();
   const billing = useRecoilValue(billingState);
 
   const handleButtonClick = () => {
@@ -29,10 +26,6 @@ export const PlanRequired = () => {
     handleButtonClick,
   ]);
 
-  if (onboardingStatus === OnboardingStatus.Completed) {
-    return null;
-  }
-
   return (
     <>
       <AnimatedEaseIn>

packages/twenty-front/src/pages/auth/__stories__/CreateProfile.stories.tsx

@@ -1,11 +1,16 @@
+import { getOperationName } from '@apollo/client/utilities';
 import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';
+import { graphql, HttpResponse } from 'msw';
 
 import { AppPath } from '@/types/AppPath';
+import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
 
 import { CreateProfile } from '../CreateProfile';
 
@@ -14,7 +19,20 @@ const meta: Meta<PageDecoratorArgs> = {
   component: CreateProfile,
   decorators: [PageDecorator],
   args: { routePath: AppPath.CreateProfile },
-  parameters: {},
+  parameters: {
+    msw: {
+      handlers: [
+        graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
+          return HttpResponse.json({
+            data: {
+              currentUser: mockedOnboardingUsersData[0],
+            },
+          });
+        }),
+        graphqlMocks.handlers,
+      ],
+    },
+  },
 };
 
 export default meta;

packages/twenty-front/src/pages/auth/__stories__/CreateWorkspace.stories.tsx

@@ -1,21 +1,31 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';
+import { useSetRecoilState } from 'recoil';
 
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { AppPath } from '@/types/AppPath';
 import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { CreateWorkspace } from '../CreateWorkspace';
 
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Auth/CreateWorkspace',
   component: CreateWorkspace,
-  decorators: [PageDecorator],
+  decorators: [
+    (Story) => {
+      const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
+      setCurrentWorkspace(null);
+      return <Story />;
+    },
+    PageDecorator,
+  ],
   args: { routePath: AppPath.CreateWorkspace },
   parameters: {
-    msw: [],
+    msw: graphqlMocks,
   },
 };
 

packages/twenty-front/src/pages/auth/__stories__/PlanRequired.stories.tsx

@@ -1,12 +1,16 @@
+import { getOperationName } from '@apollo/client/utilities';
 import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';
+import { graphql, HttpResponse } from 'msw';
 
 import { AppPath } from '@/types/AppPath';
+import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
 
 import { PlanRequired } from '../PlanRequired';
 
@@ -16,9 +20,23 @@ const meta: Meta<PageDecoratorArgs> = {
   decorators: [PageDecorator],
   args: { routePath: AppPath.PlanRequired },
   parameters: {
-    msw: graphqlMocks,
-    cookie: {
-      tokenPair: '{}',
+    msw: {
+      handlers: [
+        graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
+          return HttpResponse.json({
+            data: {
+              currentUser: {
+                ...mockedOnboardingUsersData[0],
+                defaultWorkspace: {
+                  ...mockedOnboardingUsersData[0].defaultWorkspace,
+                  subscriptionStatus: 'incomplete',
+                },
+              },
+            },
+          });
+        }),
+        graphqlMocks.handlers,
+      ],
     },
   },
 };

packages/twenty-front/src/pages/auth/__stories__/SignInUp.stories.tsx

@@ -1,12 +1,16 @@
+import { getOperationName } from '@apollo/client/utilities';
 import { Meta, StoryObj } from '@storybook/react';
 import { fireEvent, within } from '@storybook/test';
+import { graphql, HttpResponse } from 'msw';
 
 import { AppPath } from '@/types/AppPath';
+import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
 
 import { SignInUp } from '../SignInUp';
 
@@ -16,9 +20,17 @@ const meta: Meta<PageDecoratorArgs> = {
   decorators: [PageDecorator],
   args: { routePath: AppPath.SignIn },
   parameters: {
-    msw: graphqlMocks,
-    cookie: {
-      tokenPair: '{}',
+    msw: {
+      handlers: [
+        graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
+          return HttpResponse.json({
+            data: {
+              currentUser: mockedOnboardingUsersData[0],
+            },
+          });
+        }),
+        graphqlMocks.handlers,
+      ],
     },
   },
 };

packages/twenty-front/src/pages/opportunities/__stories__/Opportunities.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/test';
 
+import { ObjectMetadataItemsRelationPickerEffect } from '@/object-metadata/components/ObjectMetadataItemsRelationPickerEffect';
 import { AppPath } from '@/types/AppPath';
 import {
   PageDecorator,
@@ -13,7 +14,17 @@ import { Opportunities } from '../Opportunities';
 const meta: Meta<PageDecoratorArgs> = {
   title: 'Pages/Opportunities/Default',
   component: Opportunities,
-  decorators: [PageDecorator],
+  decorators: [
+    (Story) => {
+      return (
+        <>
+          <ObjectMetadataItemsRelationPickerEffect />
+          <Story />
+        </>
+      );
+    },
+    PageDecorator,
+  ],
   args: { routePath: AppPath.OpportunitiesPage },
   parameters: {
     msw: graphqlMocks,