Fix NavigationDrawer story (#9235)

Closes https://github.com/twentyhq/twenty/issues/7492

## Description
This PR will fix NavigationDrawer story.

## Testing
<img width="1407" alt="スクリーンショット 2024-12-25 23 27 25"
src="https://github.com/user-attachments/assets/d9ee4363-f2b2-408f-b2b8-c4dd92cfd66b"
/>
<img width="1326" alt="スクリーンショット 2024-12-26 0 28 47"
src="https://github.com/user-attachments/assets/b21fbe02-9d56-4b9b-8631-ee4530e5a5d1"
/>

---------

Co-authored-by: Takuya Kurimoto <takuya004869@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx

@@ -1,4 +1,8 @@
+import { expect } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+import { useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
 import {
   GithubVersionLink,
   IconAt,
@@ -17,10 +21,17 @@ import {
   IconUsers,
 } from 'twenty-ui';
 
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
+import { PrefetchLoadedDecorator } from '~/testing/decorators/PrefetchLoadedDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
+import { mockedWorkspaceMemberData } from '~/testing/mock-data/users';
 
 import { CurrentWorkspaceMemberFavoritesFolders } from '@/favorites/components/CurrentWorkspaceMemberFavoritesFolders';
 import { NavigationDrawerSubItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSubItem';
@@ -33,8 +44,29 @@ import { NavigationDrawerSectionTitle } from '../NavigationDrawerSectionTitle';
 const meta: Meta<typeof NavigationDrawer> = {
   title: 'UI/Navigation/NavigationDrawer/NavigationDrawer',
   component: NavigationDrawer,
-  decorators: [ComponentWithRouterDecorator, SnackBarDecorator],
-  parameters: { layout: 'fullscreen' },
+  decorators: [
+    ComponentWithRouterDecorator,
+    SnackBarDecorator,
+    ObjectMetadataItemsDecorator,
+    PrefetchLoadedDecorator,
+    (Story) => {
+      const setCurrentWorkspaceMember = useSetRecoilState(
+        currentWorkspaceMemberState,
+      );
+      const setObjectMetadataItems = useSetRecoilState(
+        objectMetadataItemsState,
+      );
+      useEffect(() => {
+        setObjectMetadataItems(generatedMockObjectMetadataItems);
+        setCurrentWorkspaceMember(mockedWorkspaceMemberData);
+      }, [setObjectMetadataItems, setCurrentWorkspaceMember]);
+      return <Story />;
+    },
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    msw: graphqlMocks,
+  },
   argTypes: { children: { control: false }, footer: { control: false } },
 };
 
@@ -87,6 +119,11 @@ export const Default: Story = {
     ),
     footer: null,
   },
+  play: async () => {
+    const canvas = within(document.body);
+
+    expect(await canvas.findByText('Workspace')).toBeInTheDocument();
+  },
 };
 
 export const Settings: Story = {
@@ -150,4 +187,9 @@ export const Settings: Story = {
     ),
     footer: <GithubVersionLink version={jsonPage.version} />,
   },
+  play: async () => {
+    const canvas = within(document.body);
+
+    expect(await canvas.findByText('User')).toBeInTheDocument();
+  },
 };

packages/twenty-front/src/testing/graphqlMocks.ts

@@ -12,6 +12,7 @@ import {
 } from '~/testing/mock-data/companies';
 import { mockedClientConfig } from '~/testing/mock-data/config';
 import { mockedFavoritesData } from '~/testing/mock-data/favorite';
+import { mockedFavoriteFoldersData } from '~/testing/mock-data/favorite-folders';
 import { mockedNotes } from '~/testing/mock-data/notes';
 import { getPeopleMock } from '~/testing/mock-data/people';
 import { mockedRemoteTables } from '~/testing/mock-data/remote-tables';
@@ -19,11 +20,11 @@ import { mockedUserData } from '~/testing/mock-data/users';
 import { mockedViewsData } from '~/testing/mock-data/views';
 import { mockWorkspaceMembers } from '~/testing/mock-data/workspace-members';
 
+import { GET_PUBLIC_WORKSPACE_DATA_BY_SUBDOMAIN } from '@/auth/graphql/queries/getPublicWorkspaceDataBySubdomain';
 import { mockedStandardObjectMetadataQueryResult } from '~/testing/mock-data/generated/mock-metadata-query-result';
 import { mockedTasks } from '~/testing/mock-data/tasks';
 import { mockedRemoteServers } from './mock-data/remote-servers';
 import { mockedViewFieldsData } from './mock-data/view-fields';
-import { GET_PUBLIC_WORKSPACE_DATA_BY_SUBDOMAIN } from '@/auth/graphql/queries/getPublicWorkspaceDataBySubdomain';
 
 const peopleMock = getPeopleMock();
 const companiesMock = getCompaniesMock();
@@ -520,6 +521,24 @@ export const graphqlMocks = {
         },
       });
     }),
+    graphql.query('FindManyFavoriteFolders', () => {
+      return HttpResponse.json({
+        data: {
+          favoriteFolders: {
+            edges: mockedFavoriteFoldersData.map((favoriteFolder) => ({
+              node: favoriteFolder,
+              cursor: null,
+            })),
+            pageInfo: {
+              hasNextPage: false,
+              hasPreviousPage: false,
+              startCursor: null,
+              endCursor: null,
+            },
+          },
+        },
+      });
+    }),
     graphql.query('FindManyFavorites', () => {
       return HttpResponse.json({
         data: {

packages/twenty-front/src/testing/mock-data/favorite-folders.ts

@@ -0,0 +1,11 @@
+export const mockedFavoriteFoldersData = [
+  {
+    id: '12f299d1-caf6-225b-ffb2-b1bb625d8f96',
+    name: 'Sample',
+    position: 0,
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    deletedAt: null,
+    __typename: 'FavoriteFolder',
+  },
+];