mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix and enhance storybook:pages tests (#3085)

Browse Source 
* 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>
This commit is contained in:
gitstart-twenty
2023-12-21 01:36:58 +08:00
committed by GitHub
parent 6c30556d00
commit 984fc76b94
27 changed files with 6935 additions and 917 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.github/workflows/ci-front.yaml vendored
View File

@ -68,11 +68,11 @@ jobs:
run: cd packages/twenty-front && npx playwright install
- name: Build Storybook
run: yarn nx storybook:pages:build --quiet twenty-front
# - name: Run storybook tests
# run: |
# cd packages/twenty-front && npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
# "npx http-server storybook-static --silent --port 6006" \
# "yarn storybook:pages:coverage"
- name: Run storybook tests
run: |
cd packages/twenty-front && npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
"npx http-server storybook-static --silent --port 6006" \
"yarn storybook:pages:coverage"
front-modules-sb-test:
needs: front-yarn-install
runs-on: ci-4-cores

9
Users/v1b3m/Dev/GitStart/client-twenty/packages/twenty-front/src/testing/decorators/ObjectMetadataItemsDecorator.tsx Normal file
View File

@ -0,0 +1,9 @@
import { Decorator } from '@storybook/react';
import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
export const ObjectMetadataItemsDecorator: Decorator = (Story) => (
<ObjectMetadataItemsProvider>
<Story />
</ObjectMetadataItemsProvider>
);

10
packages/twenty-front/src/__stories__/App.stories.tsx
View File

@ -3,9 +3,10 @@ import { MemoryRouter } from 'react-router-dom';
import { Meta, StoryObj } from '@storybook/react';
import { ClientConfigProvider } from '@/client-config/components/ClientConfigProvider';
import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
import { UserProvider } from '@/users/components/UserProvider';
import { App } from '~/App';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
import { graphqlMocks } from '~/testing/graphqlMocks';
@ -13,14 +14,17 @@ const meta: Meta<typeof App> = {
title: 'App/App',
component: App,
decorators: [
SnackBarDecorator,
(Story) => (
<ClientConfigProvider>
<UserProvider>
<MemoryRouter>
<FullHeightStorybookLayout>
<HelmetProvider>
<Story />
<SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
<ObjectMetadataItemsProvider>
<Story />
</ObjectMetadataItemsProvider>
</SnackBarProviderScope>
</HelmetProvider>
</FullHeightStorybookLayout>
</MemoryRouter>

1
packages/twenty-front/src/modules/activities/types/Activity.ts
View File

@ -10,6 +10,7 @@ export type Activity = {
createdAt: string;
updatedAt: string;
completedAt: string | null;
reminderAt: string | null;
dueAt: string | null;
activityTargets: ActivityTarget[];
type: ActivityType;

5
packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts
View File

@ -2,7 +2,10 @@ import { atom } from 'recoil';
import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
export const currentWorkspaceMemberState = atom<WorkspaceMember | null>({
export const currentWorkspaceMemberState = atom<Omit<
WorkspaceMember,
'createdAt' | 'updatedAt' | 'userId'
> | null>({
key: 'currentWorkspaceMemberState',
default: null,
});

5
packages/twenty-front/src/modules/auth/utils/getOnboardingStatus.ts
View File

@ -17,7 +17,10 @@ export const getOnboardingStatus = ({
isBillingEnabled,
}: {
isLoggedIn: boolean;
currentWorkspaceMember: WorkspaceMember | null;
currentWorkspaceMember: Omit<
WorkspaceMember,
'createdAt' | 'updatedAt' | 'userId'
> | null;
currentWorkspace: CurrentWorkspace | null;
isBillingEnabled?: boolean;
}) => {

18
packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx
View File

@ -1,14 +1,17 @@
import { useEffect } from 'react';
import { Meta, StoryObj } from '@storybook/react';
import { expect, userEvent, within } from '@storybook/test';
import { RecoilRoot, useSetRecoilState } from 'recoil';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { CommandType } from '@/command-menu/types/Command';
import { IconCheckbox, IconNotes } from '@/ui/display/icon';
import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { mockDefaultWorkspace } from '~/testing/mock-data/users';
import { sleep } from '~/testing/sleep';
import { CommandMenu } from '../CommandMenu';
@ -20,11 +23,13 @@ const meta: Meta<typeof CommandMenu> = {
component: CommandMenu,
decorators: [
ObjectMetadataItemsDecorator,
ComponentWithRouterDecorator,
(Story) => {
const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
const { addToCommandMenu, setToIntitialCommandMenu, toggleCommandMenu } =
useCommandMenu();
setCurrentWorkspace(mockDefaultWorkspace);
useEffect(() => {
setToIntitialCommandMenu();
addToCommandMenu([
@ -50,7 +55,14 @@ const meta: Meta<typeof CommandMenu> = {
return <Story />;
},
SnackBarDecorator,
(Story) => (
<RecoilRoot>
<SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
<Story />
</SnackBarProviderScope>
</RecoilRoot>
),
ComponentWithRouterDecorator,
],
parameters: {
msw: graphqlMocks,

4
packages/twenty-front/src/modules/companies/types/Company.ts
View File

@ -7,8 +7,8 @@ export type Company = {
domainName: string;
address: string;
accountOwnerId: string | null;
linkedinUrl: { url: string; label: string };
xUrl: { url: string; label: string };
linkedinLink: { url: string; label: string };
xLink: { url: string; label: string };
annualRecurringRevenue: { amountMicros: number | null; currencyCode: string };
employees: number | null;
idealCustomerProfile: boolean;

2
packages/twenty-front/src/modules/pipeline/types/PipelineStep.ts
View File

@ -3,4 +3,6 @@ export type PipelineStep = {
name: string;
color: string;
position: number;
createdAt: string;
updatedAt: string;
};

26
packages/twenty-front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldPreview.stories.tsx
View File

@ -1,15 +1,16 @@
import { MemoryRouter } from 'react-router-dom';
import { Meta, StoryObj } from '@storybook/react';
import { RecoilRoot } from 'recoil';
import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
import { Field, FieldMetadataType } from '~/generated-metadata/graphql';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import {
mockedCompaniesMetadata,
mockedPeopleMetadata,
mockedWorkspacesMetadata,
} from '~/testing/mock-data/metadata';
import { SettingsObjectFieldPreview } from '../SettingsObjectFieldPreview';
@ -19,18 +20,21 @@ const meta: Meta<typeof SettingsObjectFieldPreview> = {
component: SettingsObjectFieldPreview,
decorators: [
ComponentDecorator,
ObjectMetadataItemsDecorator,
(Story) => (
<SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
<ObjectMetadataItemsProvider>
<Story />
</ObjectMetadataItemsProvider>
</SnackBarProviderScope>
<RecoilRoot>
<RelationPickerScope relationPickerScopeId="relation-picker">
<SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
<Story />
</SnackBarProviderScope>
</RelationPickerScope>
</RecoilRoot>
),
],
args: {
fieldMetadata: mockedCompaniesMetadata.node.fields.edges.find(
({ node }) => node.type === FieldMetadataType.Text,
)?.node,
)?.node as Field,
objectMetadataId: mockedCompaniesMetadata.node.id,
},
parameters: {
@ -119,9 +123,9 @@ export const Relation: Story = {
export const CustomObject: Story = {
args: {
fieldMetadata: mockedWorkspacesMetadata.node.fields.edges.find(
({ node }) => node.type === FieldMetadataType.Text,
fieldMetadata: mockedCompaniesMetadata.node.fields.edges.find(
({ node }) => node.isCustom,
)?.node as Field,
objectMetadataId: mockedWorkspacesMetadata.node.id,
objectMetadataId: mockedCompaniesMetadata.node.id,
},
};

12
packages/twenty-front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldTypeSelectSection.stories.tsx
View File

@ -2,13 +2,14 @@ import { MemoryRouter } from 'react-router-dom';
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/test';
import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
import {
FieldMetadataType,
RelationMetadataType,
} from '~/generated-metadata/graphql';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import {
mockedCompaniesMetadata,
@ -31,12 +32,13 @@ const meta: Meta<typeof SettingsObjectFieldTypeSelectSection> = {
component: SettingsObjectFieldTypeSelectSection,
decorators: [
ComponentDecorator,
ObjectMetadataItemsDecorator,
(Story) => (
<SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
<ObjectMetadataItemsProvider>
<RelationPickerScope relationPickerScopeId="relation-picker">
<SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
<Story />
</ObjectMetadataItemsProvider>
</SnackBarProviderScope>
</SnackBarProviderScope>
</RelationPickerScope>
),
],
args: {

3
packages/twenty-front/src/modules/workspace-member/types/WorkspaceMember.ts
View File

@ -9,4 +9,7 @@ export type WorkspaceMember = {
avatarUrl?: string | null;
locale: string;
colorScheme?: ColorScheme;
createdAt: string;
updatedAt: string;
userId: string;
};

7
packages/twenty-front/src/pages/auth/PlanRequired.tsx
View File

@ -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>

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

@ -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;

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

@ -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,
},
};

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

@ -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,
],
},
},
};

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

@ -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,
],
},
},
};

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

@ -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,

27
packages/twenty-front/src/testing/decorators/ObjectMetadataItemsDecorator.tsx
View File

@ -1,9 +1,24 @@
import { useEffect } from 'react';
import { Decorator } from '@storybook/react';
import { useRecoilState } from 'recoil';
import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
import { useFindManyObjectMetadataItems } from '@/object-metadata/hooks/useFindManyObjectMetadataItems';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
export const ObjectMetadataItemsDecorator: Decorator = (Story) => (
<ObjectMetadataItemsProvider>
<Story />
</ObjectMetadataItemsProvider>
);
export const ObjectMetadataItemsDecorator: Decorator = (Story) => {
const { objectMetadataItems: newObjectMetadataItems } =
useFindManyObjectMetadataItems();
const [objectMetadataItems, setObjectMetadataItems] = useRecoilState(
objectMetadataItemsState,
);
useEffect(() => {
if (!isDeeplyEqual(objectMetadataItems, newObjectMetadataItems)) {
setObjectMetadataItems(newObjectMetadataItems);
}
}, [newObjectMetadataItems, objectMetadataItems, setObjectMetadataItems]);
return <Story />;
};

53
packages/twenty-front/src/testing/decorators/PageDecorator.tsx
View File

@ -1,13 +1,16 @@
import { HelmetProvider } from 'react-helmet-async';
import { MemoryRouter, Route, Routes } from 'react-router-dom';
import { ApolloProvider } from '@apollo/client';
import { Decorator } from '@storybook/react';
import { RecoilRoot } from 'recoil';
import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
import { ApolloMetadataClientProvider } from '@/object-metadata/components/ApolloMetadataClientProvider';
import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
import { ClientConfigProvider } from '~/modules/client-config/components/ClientConfigProvider';
import { DefaultLayout } from '~/modules/ui/layout/page/DefaultLayout';
import { UserProvider } from '~/modules/users/components/UserProvider';
import { mockedClient } from '~/testing/mockedClient';
import { FullHeightStorybookLayout } from '../FullHeightStorybookLayout';
@ -34,26 +37,32 @@ export const PageDecorator: Decorator<{
routeParams: RouteParams;
}> = (Story, { args }) => (
<RecoilRoot>
<UserProvider>
<ClientConfigProvider>
<MemoryRouter
initialEntries={[computeLocation(args.routePath, args.routeParams)]}
>
<FullHeightStorybookLayout>
<HelmetProvider>
<SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
<RelationPickerScope relationPickerScopeId="relation-picker">
<DefaultLayout>
<Routes>
<Route path={args.routePath} element={<Story />} />
</Routes>
</DefaultLayout>
</RelationPickerScope>
</SnackBarProviderScope>
</HelmetProvider>
</FullHeightStorybookLayout>
</MemoryRouter>
</ClientConfigProvider>
</UserProvider>
<ApolloProvider client={mockedClient}>
<ApolloMetadataClientProvider>
<UserProvider>
<ClientConfigProvider>
<MemoryRouter
initialEntries={[
computeLocation(args.routePath, args.routeParams),
]}
>
<FullHeightStorybookLayout>
<HelmetProvider>
<SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
<ObjectMetadataItemsProvider>
<DefaultLayout>
<Routes>
<Route path={args.routePath} element={<Story />} />
</Routes>
</DefaultLayout>
</ObjectMetadataItemsProvider>
</SnackBarProviderScope>
</HelmetProvider>
</FullHeightStorybookLayout>
</MemoryRouter>
</ClientConfigProvider>
</UserProvider>
</ApolloMetadataClientProvider>
</ApolloProvider>
</RecoilRoot>
);

127
packages/twenty-front/src/testing/graphqlMocks.ts
View File

@ -4,27 +4,30 @@ import { graphql, HttpResponse } from 'msw';
import { CREATE_EVENT } from '@/analytics/graphql/queries/createEvent';
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 { REACT_APP_SERVER_BASE_URL } from '~/config';
import { mockedActivities } from '~/testing/mock-data/activities';
import { mockedCompaniesData } from '~/testing/mock-data/companies';
import { mockedClientConfig } from '~/testing/mock-data/config';
import { mockedPipelineSteps } from '~/testing/mock-data/pipeline-steps';
import { mockedUsersData } from '~/testing/mock-data/users';
import { mockedCompaniesData } from './mock-data/companies';
import { mockedObjectMetadataItems } from './mock-data/metadata';
import { mockedPeopleData } from './mock-data/people';
import { mockedViewFieldsData } from './mock-data/view-fields';
import { mockedViewsData } from './mock-data/views';
const metadataGraphql = graphql.link(
`${process.env.REACT_APP_SERVER_BASE_URL}/metadata`,
);
const metadataGraphql = graphql.link(`${REACT_APP_SERVER_BASE_URL}/metadata`);
export const graphqlMocks = {
handlers: [
// graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
// return HttpResponse.json({
// data: {
// currentUser: mockedUsersData[0],
// },
// });
// }),
graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
return HttpResponse.json({
data: {
currentUser: mockedUsersData[0],
},
});
}),
graphql.mutation(getOperationName(CREATE_EVENT) ?? '', () => {
return HttpResponse.json({
data: {
@ -35,18 +38,7 @@ export const graphqlMocks = {
graphql.query(getOperationName(GET_CLIENT_CONFIG) ?? '', () => {
return HttpResponse.json({
data: {
clientConfig: {
signInPrefilled: true,
dataModelSettingsEnabled: true,
developersSettingsEnabled: true,
debugMode: false,
authProviders: { google: true, password: true, magicLink: false },
telemetry: { enabled: false, anonymizationEnabled: true },
support: {
supportDriver: 'front',
supportFrontChatId: null,
},
},
clientConfig: mockedClientConfig,
},
});
}),
@ -112,7 +104,29 @@ export const graphqlMocks = {
data: {
companies: {
edges: mockedCompaniesData.map((company) => ({
node: company,
node: {
...company,
favorites: {
edges: [],
__typename: 'FavoriteConnection',
},
attachments: {
edges: [],
__typename: 'AttachmentConnection',
},
people: {
edges: [],
__typename: 'PersonConnection',
},
opportunities: {
edges: [],
__typename: 'OpportunityConnection',
},
activityTargets: {
edges: [],
__typename: 'ActivityTargetConnection',
},
},
cursor: null,
})),
pageInfo: {
@ -147,8 +161,16 @@ export const graphqlMocks = {
return HttpResponse.json({
data: {
activities: {
edges: mockedActivities.map((activities) => ({
node: activities,
edges: mockedActivities.map(({ activityTargets, ...rest }) => ({
node: {
...rest,
activityTargets: {
edges: activityTargets.map((t) => ({ node: t })),
},
attachments: {
edges: [],
},
},
cursor: null,
})),
pageInfo: {
@ -161,5 +183,58 @@ export const graphqlMocks = {
},
});
}),
graphql.query('FindManyFavorites', () => {
return HttpResponse.json({
data: {
favorites: {
edges: [],
pageInfo: {
hasNextPage: false,
hasPreviousPage: false,
startCursor: null,
endCursor: null,
},
},
},
});
}),
graphql.query('FindManyPipelineSteps', () => {
return HttpResponse.json({
data: {
pipelineSteps: {
edges: mockedPipelineSteps.map((step) => ({
node: {
...step,
opportunities: {
edges: [],
},
},
cursor: null,
})),
pageInfo: {
hasNextPage: false,
hasPreviousPage: false,
startCursor: null,
endCursor: null,
},
},
},
});
}),
graphql.query('FindManyOpportunities', () => {
return HttpResponse.json({
data: {
opportunities: {
edges: [],
pageInfo: {
hasNextPage: false,
hasPreviousPage: false,
startCursor: null,
endCursor: null,
},
},
},
});
}),
],
};

89
packages/twenty-front/src/testing/mock-data/activities.ts
View File

@ -18,9 +18,11 @@ type MockedActivity = Pick<
| 'authorId'
| 'dueAt'
| 'completedAt'
| 'reminderAt'
| 'assigneeId'
> & {
author: Pick<WorkspaceMember, 'id' | 'name' | 'avatarUrl'>;
assignee: Pick<WorkspaceMember, 'id' | 'name' | 'avatarUrl'>;
author: WorkspaceMember;
assignee: WorkspaceMember;
comments: Comment[];
activityTargets: Array<
Pick<
@ -40,33 +42,35 @@ type MockedActivity = Pick<
>;
};
const workspaceMember: WorkspaceMember = {
id: '374fe3a5-df1e-4119-afe0-2a62a2ba481e',
name: {
firstName: 'Charles',
lastName: 'Test',
},
avatarUrl: '',
locale: 'en',
createdAt: '2023-04-26T10:23:42.33625+00:00',
updatedAt: '2023-04-26T10:23:42.33625+00:00',
userId: 'e2409670-1088-46b4-858e-f20a598d9d0f',
colorScheme: 'Light',
};
export const mockedTasks: Array<MockedActivity> = [
{
id: '89bb825c-171e-4bcc-9cf7-43448d6fb230',
id: 'c554852c-b28a-4307-a41d-a7a0fdde3386',
createdAt: '2023-04-26T10:12:42.33625+00:00',
updatedAt: '2023-04-26T10:23:42.33625+00:00',
reminderAt: null,
title: 'My very first task',
type: 'Task',
body: '',
dueAt: '2023-04-26T10:12:42.33625+00:00',
completedAt: null,
author: {
id: '374fe3a5-df1e-4119-afe0-2a62a2ba481e',
name: {
firstName: 'Charles',
lastName: 'Test',
},
avatarUrl: '',
},
assignee: {
id: '374fe3a5-df1e-4119-afe0-2a62a2ba481e',
name: {
firstName: 'Charles',
lastName: 'Test',
},
avatarUrl: '',
},
authorId: '374fe3a5-df1e-4119-afe0-2a62a2ba481e',
author: workspaceMember,
assignee: workspaceMember,
assigneeId: workspaceMember.id,
authorId: workspaceMember.id,
comments: [],
activityTargets: [],
__typename: 'Activity',
@ -75,31 +79,19 @@ export const mockedTasks: Array<MockedActivity> = [
export const mockedActivities: Array<MockedActivity> = [
{
id: '89bb825c-171e-4bcc-9cf7-43448d6fb230',
id: '3ecaa1be-aac7-463a-a38e-64078dd451d5',
createdAt: '2023-04-26T10:12:42.33625+00:00',
updatedAt: '2023-04-26T10:23:42.33625+00:00',
reminderAt: null,
title: 'My very first note',
type: 'Note',
body: '',
dueAt: '2023-04-26T10:12:42.33625+00:00',
completedAt: null,
author: {
id: '374fe3a5-df1e-4119-afe0-2a62a2ba481e',
name: {
firstName: 'Charles',
lastName: 'Test',
},
avatarUrl: '',
},
assignee: {
id: '374fe3a5-df1e-4119-afe0-2a62a2ba481e',
name: {
firstName: 'Charles',
lastName: 'Test',
},
avatarUrl: '',
},
authorId: '374fe3a5-df1e-4119-afe0-2a62a2ba481e',
author: workspaceMember,
assignee: workspaceMember,
assigneeId: workspaceMember.id,
authorId: workspaceMember.id,
comments: [],
activityTargets: [
{
@ -149,28 +141,19 @@ export const mockedActivities: Array<MockedActivity> = [
id: '89bb825c-171e-4bcc-9cf7-43448d6fb278a',
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
reminderAt: null,
title: 'Another note',
body: '',
type: 'Note',
completedAt: null,
dueAt: '2029-08-26T10:12:42.33625+00:00',
author: {
id: '374fe3a5-df1e-4119-afe0-2a62a2ba481e',
name: {
firstName: 'Charles',
lastName: 'Test',
},
avatarUrl: '',
...workspaceMember,
colorScheme: 'Dark',
},
assignee: {
id: '374fe3a5-df1e-4119-afe0-2a62a2ba481e',
name: {
firstName: 'Charles',
lastName: 'Test',
},
avatarUrl: '',
},
authorId: '374fe3a5-df1e-4119-afe0-2a62a2ba481e',
assignee: { ...workspaceMember, colorScheme: 'Dark' },
assigneeId: workspaceMember.id,
authorId: workspaceMember.id,
comments: [],
activityTargets: [
{

62
packages/twenty-front/src/testing/mock-data/companies.ts
View File

@ -4,21 +4,8 @@ import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
import { mockedUsersData } from './users';
type MockedCompany = Pick<
Company,
| 'id'
| 'name'
| 'domainName'
| 'createdAt'
| 'address'
| 'employees'
| 'linkedinUrl'
| 'xUrl'
| 'annualRecurringRevenue'
| 'idealCustomerProfile'
| 'accountOwnerId'
> & {
accountOwner: Pick<WorkspaceMember, 'id' | 'avatarUrl' | 'name'> | null;
type MockedCompany = Omit<Company, 'deletedAt'> & {
accountOwner: WorkspaceMember | null;
Favorite: Pick<Favorite, 'id'> | null;
};
@ -28,13 +15,14 @@ export const mockedCompaniesData: Array<MockedCompany> = [
domainName: 'airbnb.com',
name: 'Airbnb',
createdAt: '2023-04-26T10:08:54.724515+00:00',
updatedAt: '2023-04-26T10:23:42.33625+00:00',
address: '17 rue de clignancourt',
employees: 12,
linkedinUrl: {
linkedinLink: {
url: 'https://www.linkedin.com/company/airbnb/',
label: 'https://www.linkedin.com/company/airbnb/',
},
xUrl: {
xLink: {
url: 'https://twitter.com/airbnb',
label: 'https://twitter.com/airbnb',
},
@ -49,6 +37,11 @@ export const mockedCompaniesData: Array<MockedCompany> = [
},
avatarUrl: null,
id: mockedUsersData[0].id,
locale: 'en',
colorScheme: 'Light',
updatedAt: '2023-04-26T10:23:42.33625+00:00',
createdAt: '2023-04-26T10:23:42.33625+00:00',
userId: mockedUsersData[0].id,
},
},
{
@ -56,14 +49,15 @@ export const mockedCompaniesData: Array<MockedCompany> = [
domainName: 'aircall.io',
name: 'Aircall',
createdAt: '2023-04-26T10:12:42.33625+00:00',
updatedAt: '2023-04-26T10:23:42.33625+00:00',
address: '',
employees: 1,
accountOwnerId: null,
linkedinUrl: {
linkedinLink: {
url: 'https://www.linkedin.com/company/aircall/',
label: 'https://www.linkedin.com/company/aircall/',
},
xUrl: {
xLink: {
url: 'https://twitter.com/aircall',
label: 'https://twitter.com/aircall',
},
@ -77,13 +71,14 @@ export const mockedCompaniesData: Array<MockedCompany> = [
domainName: 'algolia.com',
name: 'Algolia',
createdAt: '2023-04-26T10:10:32.530184+00:00',
updatedAt: '2023-04-26T10:23:42.33625+00:00',
address: '',
employees: 1,
linkedinUrl: {
linkedinLink: {
url: 'https://www.linkedin.com/company/algolia/',
label: 'https://www.linkedin.com/company/algolia/',
},
xUrl: {
xLink: {
url: 'https://twitter.com/algolia',
label: 'https://twitter.com/algolia',
},
@ -98,13 +93,14 @@ export const mockedCompaniesData: Array<MockedCompany> = [
domainName: 'apple.com',
name: 'Apple',
createdAt: '2023-03-21T06:30:25.39474+00:00',
updatedAt: '2023-04-26T10:23:42.33625+00:00',
address: '',
employees: 10,
linkedinUrl: {
linkedinLink: {
url: 'https://www.linkedin.com/company/apple/',
label: 'https://www.linkedin.com/company/apple/',
},
xUrl: {
xLink: {
url: 'https://twitter.com/apple',
label: 'https://twitter.com/apple',
},
@ -119,13 +115,14 @@ export const mockedCompaniesData: Array<MockedCompany> = [
domainName: 'qonto.com',
name: 'Qonto',
createdAt: '2023-04-26T10:13:29.712485+00:00',
updatedAt: '2023-04-26T10:23:42.33625+00:00',
address: '10 rue de la Paix',
employees: 1,
linkedinUrl: {
linkedinLink: {
url: 'https://www.linkedin.com/company/qonto/',
label: 'https://www.linkedin.com/company/qonto/',
},
xUrl: {
xLink: {
url: 'https://twitter.com/qonto',
label: 'https://twitter.com/qonto',
},
@ -140,13 +137,14 @@ export const mockedCompaniesData: Array<MockedCompany> = [
domainName: 'facebook.com',
name: 'Facebook',
createdAt: '2023-04-26T10:09:25.656555+00:00',
updatedAt: '2023-04-26T10:23:42.33625+00:00',
address: '',
employees: 1,
linkedinUrl: {
linkedinLink: {
url: 'https://www.linkedin.com/company/facebook/',
label: 'https://www.linkedin.com/company/facebook/',
},
xUrl: {
xLink: {
url: 'https://twitter.com/facebook',
label: 'https://twitter.com/facebook',
},
@ -161,13 +159,14 @@ export const mockedCompaniesData: Array<MockedCompany> = [
domainName: 'sequoia.com',
name: 'Sequoia',
createdAt: '2023-04-26T10:09:25.656555+00:00',
updatedAt: '2023-04-26T10:23:42.33625+00:00',
address: '',
employees: 1,
linkedinUrl: {
linkedinLink: {
url: 'https://www.linkedin.com/company/sequoia/',
label: 'https://www.linkedin.com/company/sequoia/',
},
xUrl: {
xLink: {
url: 'https://twitter.com/sequoia',
label: 'https://twitter.com/sequoia',
},
@ -187,10 +186,11 @@ export const mockedEmptyCompanyData = {
accountOwner: null,
annualRecurringRevenue: null,
createdAt: null,
updatedAt: null,
employees: null,
idealCustomerProfile: null,
linkedinUrl: null,
xUrl: null,
linkedinLink: null,
xLink: null,
_activityCount: null,
__typename: 'Company',
};

28
packages/twenty-front/src/testing/mock-data/config.ts Normal file
View File

@ -0,0 +1,28 @@
export const mockedClientConfig = {
signInPrefilled: true,
dataModelSettingsEnabled: true,
developersSettingsEnabled: true,
debugMode: false,
authProviders: {
google: true,
password: true,
magicLink: false,
__typename: 'AuthProviders',
},
telemetry: {
enabled: false,
anonymizationEnabled: true,
__typename: 'Telemetry',
},
support: {
supportDriver: 'front',
supportFrontChatId: null,
__typename: 'Support',
},
billing: {
isBillingEnabled: true,
billingUrl: '',
__typename: 'Billing',
},
__typename: 'ClientConfig',
};

7062
packages/twenty-front/src/testing/mock-data/metadata.ts
View File

File diff suppressed because it is too large Load Diff

45
packages/twenty-front/src/testing/mock-data/pipeline-steps.ts Normal file
View File

@ -0,0 +1,45 @@
import { PipelineStep } from '@/pipeline/types/PipelineStep';
const dates = {
updatedAt: '2021-06-01T10:23:42.33625+00:00',
createdAt: '2021-06-01T10:23:42.33625+00:00',
};
export const mockedPipelineSteps: Array<PipelineStep> = [
{
id: '6edf4ead-006a-46e1-9c6d-228f1d0143c9',
color: 'red',
name: 'New',
position: 0,
...dates,
},
{
id: '30b14887-d592-427d-bd97-6e670158db02',
color: 'sky',
name: 'Meeting',
position: 2,
...dates,
},
{
id: 'bea8bb7b-5467-48a6-9a8a-a8fa500123fe',
color: 'yellow',
name: 'Customer',
position: 4,
...dates,
},
{
id: 'd8361722-03fb-4e65-bd4f-ec9e52e5ec0a',
color: 'purple',
name: 'Screening',
position: 1,
...dates,
},
{
id: 'db5a6648-d80d-4020-af64-4817ab4a12e8',
color: 'turquoise',
name: 'Proposal',
position: 3,
...dates,
},
];

158
packages/twenty-front/src/testing/mock-data/users.ts
View File

File diff suppressed because one or more lines are too long