admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

test: add metadata object and field mocks (#2266)

Browse Source
This commit is contained in:
Thaïs
2023-10-30 17:56:56 +01:00
committed by GitHub
parent 236742e88c
commit 328c5cd184
7 changed files with 262 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
front/src/pages/settings/data-model/__stories__/SettingsNewObject.stories.tsx
View File

@ -1,4 +1,5 @@
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import {
PageDecorator,
@ -25,8 +26,20 @@ export default meta;
export type Story = StoryObj<typeof SettingsNewObject>;
export const Default: Story = {
export const WithStandardSelected: Story = {
play: async ({}) => {
await sleep(100);
},
};
export const WithCustomSelected: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await sleep(1000);
const customButtonElement = canvas.getByText('Custom');
await userEvent.click(customButtonElement);
},
};

8
front/src/pages/settings/data-model/__stories__/SettingsObjectDetail.stories.tsx
View File

@ -26,8 +26,14 @@ export default meta;
export type Story = StoryObj<typeof SettingsObjectDetail>;
export const Default: Story = {
export const StandardObject: Story = {
play: async ({}) => {
await sleep(100);
},
};
export const CustomObject: Story = {
args: {
routeParams: { ':objectSlug': 'workspaces' },
},
};

8
front/src/pages/settings/data-model/__stories__/SettingsObjectEdit.stories.tsx
View File

@ -26,8 +26,14 @@ export default meta;
export type Story = StoryObj<typeof SettingsObjectEdit>;
export const Default: Story = {
export const StandardObject: Story = {
play: async ({}) => {
await sleep(100);
},
};
export const CustomObject: Story = {
args: {
routeParams: { ':objectSlug': 'workspaces' },
},
};

37
front/src/pages/settings/data-model/__stories__/SettingsObjectFieldEdit.stories.tsx Normal file
View File

@ -0,0 +1,37 @@
import { Meta, StoryObj } from '@storybook/react';
import {
PageDecorator,
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { SettingsObjectFieldEdit } from '../SettingsObjectFieldEdit';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/DataModel/SettingsObjectFieldEdit',
component: SettingsObjectFieldEdit,
decorators: [PageDecorator],
args: {
routePath: '/settings/objects/:objectSlug/:fieldSlug',
routeParams: { ':objectSlug': 'companies', ':fieldSlug': 'name' },
},
parameters: {
msw: graphqlMocks,
},
};
export default meta;
export type Story = StoryObj<typeof SettingsObjectFieldEdit>;
export const StandardField: Story = {};
export const CustomField: Story = {
args: {
routeParams: {
':objectSlug': 'companies',
':fieldSlug': 'employees',
},
},
};

8
front/src/testing/decorators/RootDecorator.tsx
View File

@ -2,14 +2,18 @@ import { ApolloProvider } from '@apollo/client';
import { Decorator } from '@storybook/react';
import { RecoilRoot } from 'recoil';
import { ApolloMetadataClientProvider } from '@/metadata/components/ApolloMetadataClientProvider';
import { InitializeHotkeyStorybookHookEffect } from '../InitializeHotkeyStorybookHook';
import { mockedClient } from '../mockedClient';
export const RootDecorator: Decorator = (Story) => (
<RecoilRoot>
<ApolloProvider client={mockedClient}>
<InitializeHotkeyStorybookHookEffect />
<Story />
<ApolloMetadataClientProvider>
<InitializeHotkeyStorybookHookEffect />
<Story />
</ApolloMetadataClientProvider>
</ApolloProvider>
</RecoilRoot>
);

12
front/src/testing/graphqlMocks.ts
View File

@ -7,6 +7,7 @@ import { CREATE_EVENT } from '@/analytics/graphql/queries/createEvent';
import { GET_CLIENT_CONFIG } from '@/client-config/graphql/queries/getClientConfig';
import { INSERT_ONE_COMPANY } from '@/companies/graphql/mutations/insertOneCompany';
import { GET_COMPANIES } from '@/companies/graphql/queries/getCompanies';
import { FIND_MANY_METADATA_OBJECTS } from '@/metadata/graphql/queries';
import { INSERT_ONE_PERSON } from '@/people/graphql/mutations/insertOnePerson';
import { UPDATE_ONE_PERSON } from '@/people/graphql/mutations/updateOnePerson';
import { GET_PEOPLE } from '@/people/graphql/queries/getPeople';
@ -33,6 +34,7 @@ import { mockedApiKeys } from '~/testing/mock-data/api-keys';
import { mockedActivities, mockedTasks } from './mock-data/activities';
import { mockedCompaniesData } from './mock-data/companies';
import { mockedMetadataObjects } from './mock-data/metadata';
import { mockedPeopleData } from './mock-data/people';
import { mockedPipelineProgressData } from './mock-data/pipeline-progress';
import { mockedPipelinesData } from './mock-data/pipelines';
@ -43,6 +45,10 @@ import {
updateOneFromData,
} from './mock-data';
const metadataGraphql = graphql.link(
`${process.env.REACT_APP_SERVER_BASE_URL}/metadata`,
);
export const graphqlMocks = [
graphql.query(getOperationName(GET_COMPANIES) ?? '', (req, res, ctx) => {
const returnedMockedData = filterAndSortData<
@ -282,4 +288,10 @@ export const graphqlMocks = [
);
},
),
metadataGraphql.query(
getOperationName(FIND_MANY_METADATA_OBJECTS) ?? '',
(req, res, ctx) => {
return res(ctx.data({ objects: mockedMetadataObjects }));
},
),
];

179
front/src/testing/mock-data/metadata.ts Normal file
View File

@ -0,0 +1,179 @@
export const mockedMetadataObjects = {
edges: [
{
node: {
id: 'a3195559-cc20-4749-9565-572a2f506581',
dataSourceId: '',
nameSingular: 'company',
namePlural: 'companies',
labelSingular: 'Company',
labelPlural: 'Companies',
description: null,
icon: 'IconBuildingSkyscraper',
isCustom: false,
isActive: true,
createdAt: '',
updatedAt: '',
fields: {
edges: [
{
node: {
id: '397eabc0-c5a1-4550-8e68-839c878a8d0e',
type: 'text',
name: 'name',
label: 'Name',
description: 'The company name.',
placeholder: null,
icon: 'IconBuildingSkyscraper',
isCustom: false,
isActive: true,
isNullable: false,
createdAt: '',
updatedAt: '',
},
},
{
node: {
id: '7ad234c7-f3b9-4efc-813c-43dc97070b07',
type: 'url',
name: 'url',
label: 'URL',
description:
'The company website URL. We use this url to fetch the company icon.',
placeholder: null,
icon: 'IconLink',
isCustom: false,
isActive: true,
isNullable: true,
createdAt: '',
updatedAt: '',
},
},
{
node: {
id: 'a578ffb2-13db-483c-ace7-5c30a13dff2d',
type: 'relation',
name: 'accountOwner',
label: 'Account Owner',
description:
'Your team member responsible for managing the company account.',
placeholder: null,
icon: 'IconUserCircle',
isCustom: false,
isActive: true,
isNullable: true,
createdAt: '',
updatedAt: '',
},
},
{
node: {
id: 'b7fd622d-7d8b-4f5a-b148-a7e9fd2c4660',
type: 'number',
name: 'employees',
label: 'Employees',
description: 'Number of employees in the company.',
placeholder: null,
icon: 'IconUsers',
isCustom: true,
isActive: true,
isNullable: true,
createdAt: '',
updatedAt: '',
},
},
{
node: {
id: '60ab27ed-a959-471e-b583-887387f7accd',
type: 'url',
name: 'linkedin',
label: 'Linkedin',
description: null,
placeholder: null,
icon: 'IconBrandLinkedin',
isCustom: false,
isActive: true,
isNullable: true,
createdAt: '',
updatedAt: '',
},
},
{
node: {
id: '6daadb98-83ca-4c85-bca5-7792a7d958ad',
type: 'boolean',
name: 'prioritySupport',
label: 'Priority Support',
description: 'Whether the company has priority support.',
placeholder: null,
icon: 'IconHeadphones',
isCustom: true,
isActive: false,
isNullable: true,
createdAt: '',
updatedAt: '',
},
},
],
pageInfo: {
hasNextPage: false,
hasPreviousPage: false,
startCursor: null,
endCursor: null,
},
totalCount: 6,
},
},
},
{
node: {
id: 'c973efa3-436e-47ea-8dbc-983ed869c04d',
dataSourceId: '',
nameSingular: 'workspace',
namePlural: 'workspaces',
labelSingular: 'Workspace',
labelPlural: 'Workspaces',
description: null,
icon: 'IconApps',
isCustom: true,
isActive: true,
createdAt: '',
updatedAt: '',
fields: {
edges: [
{
node: {
id: 'f955402c-9e8f-4b91-a82c-95f6de392b99',
type: 'text',
name: 'slug',
label: 'Slug',
description: null,
placeholder: null,
icon: 'IconSlash',
isCustom: true,
isActive: true,
isNullable: true,
createdAt: '',
updatedAt: '',
},
},
],
pageInfo: {
hasNextPage: false,
hasPreviousPage: false,
startCursor: null,
endCursor: null,
},
totalCount: 1,
},
},
},
],
pageInfo: {
hasNextPage: false,
hasPreviousPage: false,
startCursor: null,
endCursor: null,
},
totalCount: 2,
};