From 2c7f40ab1dc4b3d2c4712b379cbb069cd27ccd6d Mon Sep 17 00:00:00 2001 From: TakuyaKurimoto <75765648+TakuyaKurimoto@users.noreply.github.com> Date: Tue, 31 Dec 2024 23:00:45 +0900 Subject: [PATCH] Fix NavigationDrawer story (#9235) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes https://github.com/twentyhq/twenty/issues/7492 ## Description This PR will fix NavigationDrawer story. ## Testing スクリーンショット 2024-12-25 23 27 25 スクリーンショット 2024-12-26 0 28 47 --------- Co-authored-by: Takuya Kurimoto Co-authored-by: Lucas Bordeau --- .../__stories__/NavigationDrawer.stories.tsx | 46 ++++++++++++++++++- .../twenty-front/src/testing/graphqlMocks.ts | 21 ++++++++- .../src/testing/mock-data/favorite-folders.ts | 11 +++++ 3 files changed, 75 insertions(+), 3 deletions(-) create mode 100644 packages/twenty-front/src/testing/mock-data/favorite-folders.ts diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx index d82d7d293..84d17d5da 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx +++ b/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 = { 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 ; + }, + ], + 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: , }, + play: async () => { + const canvas = within(document.body); + + expect(await canvas.findByText('User')).toBeInTheDocument(); + }, }; diff --git a/packages/twenty-front/src/testing/graphqlMocks.ts b/packages/twenty-front/src/testing/graphqlMocks.ts index 4fcc69adb..9f16f663a 100644 --- a/packages/twenty-front/src/testing/graphqlMocks.ts +++ b/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: { diff --git a/packages/twenty-front/src/testing/mock-data/favorite-folders.ts b/packages/twenty-front/src/testing/mock-data/favorite-folders.ts new file mode 100644 index 000000000..bb9df1478 --- /dev/null +++ b/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', + }, +];