twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-23 14:03:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

TWNTY-3968 - Fix and enhance storybook:pages tests (#4072)

Browse Source 
* Fix and enhance storybook:pages tests

Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>

* Fix and enhance storybook:pages tests

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>

* Add minor refactors

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>

* Revert temporary changes

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>

* Fix tests

* Fix tests duplicated locale

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-app[bot] 2024-02-24 15:06:51 +01:00 committed by GitHub
parent 3d809d5317
commit c434d1edb5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 605 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/nyc.config.cjs
View File

@ -16,7 +16,7 @@ const pagesCoverage = {
statements: 50,
lines: 50,
functions: 45,
exclude: ['src/generated/**/*', 'src/modules/**/*'],
exclude: ['src/generated/**/*', 'src/modules/**/*', '*.ts'],
};
const storybookStoriesFolders = process.env.STORYBOOK_SCOPE;

2
packages/twenty-front/package.json
View File

@ -32,7 +32,7 @@
"storybook:test": "test-storybook",
"storybook:test-slow": "test-storybook --maxWorkers=3",
"storybook:test-single-worker": "test-storybook --maxWorkers=1",
"storybook:coverage": "yarn storybook:test-slow --coverage && npx nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook --check-coverage",
"storybook:coverage": "yarn storybook:test-slow --coverage ; npx nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook --check-coverage",
"storybook:modules:coverage": "STORYBOOK_SCOPE=modules yarn storybook:coverage",
"storybook:pages:coverage": "STORYBOOK_SCOPE=pages yarn storybook:coverage",
"graphql:data:generate": "dotenv cross-var graphql-codegen -- --config codegen.cjs",

1
packages/twenty-front/src/modules/settings/accounts/constants/ianaTimeZones.ts
View File

@ -452,7 +452,6 @@ export const ianaTimeZones = [
'Europe/Kaliningrad',
'Europe/Kiev',
'Europe/Kirov',
'Europe/Kyiv',
'Europe/Lisbon',
'Europe/Ljubljana',
'Europe/London',

46
packages/twenty-front/src/pages/auth/__stories__/PasswordResert.stories.tsx Normal file
View File

@ -0,0 +1,46 @@
import { getOperationName } from '@apollo/client/utilities';
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import { graphql, HttpResponse } from 'msw';
import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
import { PasswordReset } from '~/pages/auth/PasswordReset';
import {
PageDecorator,
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Auth/PasswordReset',
component: PasswordReset,
decorators: [PageDecorator],
args: { routePath: '/reset-password/resetToken' },
parameters: {
msw: {
handlers: [
graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
return HttpResponse.json({
data: {
currentUser: mockedOnboardingUsersData[0],
},
});
}),
graphqlMocks.handlers,
],
},
},
};
export default meta;
export type Story = StoryObj<typeof PasswordReset>;
export const Default: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findByText('Reset Password');
},
};

90
packages/twenty-front/src/pages/object-record/__stories__/RecordShowPage.stories.tsx Normal file
View File

@ -0,0 +1,90 @@
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import { graphql, HttpResponse } from 'msw';
import {
PageDecorator,
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { mockedPeopleData } from '~/testing/mock-data/people';
import { mockedWorkspaceMemberData } from '~/testing/mock-data/users';
import { RecordShowPage } from '../RecordShowPage';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/ObjectRecord/RecordShowPage',
component: RecordShowPage,
decorators: [PageDecorator],
args: {
routePath: '/object/:objectNameSingular/:objectRecordId',
routeParams: {
':objectNameSingular': 'person',
':objectRecordId': '1234',
},
},
parameters: {
msw: {
handlers: [
graphql.query('FindOneperson', () => {
return HttpResponse.json({
data: {
person: mockedPeopleData[0],
},
});
}),
graphql.query('FindManyActivityTargets', () => {
return HttpResponse.json({
data: {
activityTargets: {
edges: [],
pageInfo: {
hasNextPage: false,
startCursor: '',
endCursor: '',
},
totalCount: 0,
},
},
});
}),
graphql.query('FindOneworkspaceMember', () => {
return HttpResponse.json({
data: {
workspaceMember: mockedWorkspaceMemberData,
},
});
}),
graphql.query('FindManyViews', () => {
return HttpResponse.json({
data: {
views: {
edges: [],
pageInfo: {
hasNextPage: false,
startCursor: '1234',
endCursor: '1234',
},
totalCount: 0,
},
},
});
}),
graphqlMocks.handlers,
],
},
},
};
export default meta;
export type Story = StoryObj<typeof RecordShowPage>;
export const Default: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findAllByText('Alexandre Prot');
await canvas.findByText('Add your first Activity');
},
};

9
packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsAccounts.stories.tsx
View File

@ -1,4 +1,5 @@
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import {
PageDecorator,
@ -25,4 +26,10 @@ export default meta;
export type Story = StoryObj<typeof SettingsAccounts>;
export const Default: Story = {};
export const Default: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findByText('Connected accounts');
},
};

78
packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsAccountsEmailsInboxSettings.stories.tsx Normal file
View File

@ -0,0 +1,78 @@
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import { graphql, HttpResponse } from 'msw';
import { SettingsAccountsEmailsInboxSettings } from '~/pages/settings/accounts/SettingsAccountsEmailsInboxSettings';
import {
PageDecorator,
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/Accounts/SettingsAccountsEmailsInboxSettings',
component: SettingsAccountsEmailsInboxSettings,
decorators: [PageDecorator],
args: {
routePath: '/settings/accounts/emails/:accountUuid',
routeParams: { ':accountUuid': '123' },
},
parameters: {
layout: 'fullscreen',
msw: {
handlers: [
graphql.query('FindOnemessageChannel', () => {
return HttpResponse.json({
data: {
messageChannel: {
id: '1',
visibility: 'share_everything',
messageThreads: { edges: [] },
createdAt: '2021-08-27T12:00:00Z',
type: 'email',
updatedAt: '2021-08-27T12:00:00Z',
targetUrl: 'https://example.com/webhook',
connectedAccountId: '1',
handle: 'handle',
connectedAccount: {
id: '1',
handle: 'handle',
updatedAt: '2021-08-27T12:00:00Z',
accessToken: 'accessToken',
messageChannels: { edges: [] },
refreshToken: 'refreshToken',
__typename: 'ConnectedAccount',
accountOwner: { id: '1', __typename: 'WorkspaceMember' },
provider: 'provider',
createdAt: '2021-08-27T12:00:00Z',
accountOwnerId: '1',
},
__typename: 'MessageChannel',
},
},
});
}),
graphqlMocks.handlers,
],
},
},
};
export default meta;
export type Story = StoryObj<typeof SettingsAccountsEmailsInboxSettings>;
export const Default: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findByText('Email visibility');
await canvas.findByText(
'Define what will be visible to other users in your workspace',
);
await canvas.findByText('Contact auto-creation');
await canvas.findByText(
'Automatically create contacts for people you’ve sent emails to',
);
},
};

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

@ -1,11 +1,11 @@
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/test';
import {
PageDecorator,
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { sleep } from '~/testing/sleep';
import { SettingsNewObject } from '../SettingsNewObject';
@ -27,6 +27,17 @@ export type Story = StoryObj<typeof SettingsNewObject>;
export const WithStandardSelected: Story = {
play: async () => {
await sleep(100);
const canvas = within(document.body);
const listingInput = await canvas.findByPlaceholderText('Listing');
const pluralInput = await canvas.findByPlaceholderText('Listings');
const descriptionInput = await canvas.findByPlaceholderText(
'Write a description',
);
const saveButton = await canvas.findByText('Save');
await userEvent.type(listingInput, 'Company');
await userEvent.type(pluralInput, 'Companies');
await userEvent.type(descriptionInput, 'Test Description');
await userEvent.click(saveButton);
},
};

11
packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep1.stories.tsx
View File

@ -1,11 +1,11 @@
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import {
PageDecorator,
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { sleep } from '~/testing/sleep';
import { SettingsObjectNewFieldStep1 } from '../../SettingsObjectNewField/SettingsObjectNewFieldStep1';
@ -28,7 +28,12 @@ export default meta;
export type Story = StoryObj<typeof SettingsObjectNewFieldStep1>;
export const Default: Story = {
play: async () => {
await sleep(100);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findByText('Settings');
await canvas.findByText('Objects');
await canvas.findByText('Companies');
await canvas.findByText('Check disabled fields');
await canvas.findByText('Add Custom Field');
},
};

23
packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep2.stories.tsx
View File

@ -1,11 +1,11 @@
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/test';
import {
PageDecorator,
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { sleep } from '~/testing/sleep';
import { SettingsObjectNewFieldStep2 } from '../../SettingsObjectNewField/SettingsObjectNewFieldStep2';
@ -28,7 +28,24 @@ export default meta;
export type Story = StoryObj<typeof SettingsObjectNewFieldStep2>;
export const Default: Story = {
play: async () => {
await sleep(100);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findByText('Settings');
await canvas.findByText('Objects');
await canvas.findByText('Name and description');
const employeeInput = await canvas.findByPlaceholderText('Employees');
await userEvent.type(employeeInput, 'Test');
const descriptionInput = await canvas.findByPlaceholderText(
'Write a description',
);
await userEvent.type(descriptionInput, 'Test description');
await canvas.findByText('Type and values');
const saveButton = await canvas.findByText('Save');
await userEvent.click(saveButton);
},
};

8
packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopersApiKeysDetail.stories.tsx
View File

@ -1,4 +1,5 @@
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import { graphql, HttpResponse } from 'msw';
import { SettingsDevelopersApiKeyDetail } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail';
@ -7,7 +8,6 @@ import {
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { sleep } from '~/testing/sleep';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/Developers/ApiKeys/SettingsDevelopersApiKeyDetail',
@ -47,7 +47,9 @@ export default meta;
export type Story = StoryObj<typeof SettingsDevelopersApiKeyDetail>;
export const Default: Story = {
play: async () => {
await sleep(100);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findByText('Settings');
await canvas.findByText('Regenerate an Api key');
},
};

20
packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopersApiKeysNew.stories.tsx
View File

@ -1,4 +1,5 @@
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/test';
import { SettingsDevelopersApiKeysNew } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew';
import {
@ -6,7 +7,6 @@ import {
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { sleep } from '~/testing/sleep';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/Developers/ApiKeys/SettingsDevelopersApiKeysNew',
@ -23,7 +23,21 @@ export default meta;
export type Story = StoryObj<typeof SettingsDevelopersApiKeysNew>;
export const Default: Story = {
play: async () => {
await sleep(100);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findByText('Settings');
await canvas.findByText('New API Key');
await canvas.findByText('Name');
await canvas.findByText('Expiration Date');
const input = await canvas.findByPlaceholderText(
'E.g. backoffice integration',
);
await userEvent.type(input, 'Test');
const saveButton = await canvas.findByText('Save');
await userEvent.click(saveButton);
},
};

55
packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopersWebhooksDetail.stories.tsx Normal file
View File

@ -0,0 +1,55 @@
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import { graphql, HttpResponse } from 'msw';
import { SettingsDevelopersWebhooksDetail } from '~/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail';
import {
PageDecorator,
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/Developers/SettingsDevelopersWebhooksDetail',
component: SettingsDevelopersWebhooksDetail,
decorators: [PageDecorator],
args: {
routePath: '/settings/developers/webhooks/:webhookId',
routeParams: { ':webhookId': '1234' },
},
parameters: {
msw: {
handlers: [
graphql.query('FindOnewebhook', () => {
return HttpResponse.json({
data: {
webhook: {
id: '1',
createdAt: '2021-08-27T12:00:00Z',
targetUrl: 'https://example.com/webhook',
updatedAt: '2021-08-27T12:00:00Z',
operation: 'create',
__typename: 'Webhook',
},
},
});
}),
graphqlMocks.handlers,
],
},
},
};
export default meta;
export type Story = StoryObj<typeof SettingsDevelopersWebhooksDetail>;
export const Default: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findByText(
'We will send POST requests to this endpoint for every new event',
);
await canvas.findByText('Delete this integration');
},
};

32
packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopersWebhooksNew.stories.tsx Normal file
View File

@ -0,0 +1,32 @@
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import { SettingsDevelopersWebhooksNew } from '~/pages/settings/developers/webhooks/SettingsDevelopersWebhooksNew';
import {
PageDecorator,
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/Developers/SettingsDevelopersWebhooksNew',
component: SettingsDevelopersWebhooksNew,
decorators: [PageDecorator],
args: { routePath: '/settings/developers' },
parameters: {
msw: graphqlMocks,
},
};
export default meta;
export type Story = StoryObj<typeof SettingsDevelopersWebhooksNew>;
export const Default: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findByText(
'We will send POST requests to this endpoint for every new event',
);
},
};

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

File diff suppressed because it is too large Load Diff