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

Increase storybook pages coverage (#4885)

Browse Source 
On FE:
- refreshing metadata mocks
- updating jest tests
- fixing storybook pages coverage
- fixing storybook modules coverage
This commit is contained in:
Charles Bochet
2024-04-17 16:24:04 +02:00
committed by GitHub
parent 6804a90f2f
commit 75fd430149
46 changed files with 13679 additions and 7354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,75 @@
import { getOperationName } from '@apollo/client/utilities';
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/testing-library';
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 { sleep } from '~/testing/sleep';
import { ChooseYourPlan } from '../ChooseYourPlan';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Auth/ChooseYourPlan',
component: ChooseYourPlan,
decorators: [PageDecorator],
args: { routePath: AppPath.PlanRequired },
parameters: {
msw: {
handlers: [
graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
return HttpResponse.json({
data: {
currentUser: mockedOnboardingUsersData[0],
},
});
}),
graphql.query('GetProductPrices', () => {
return HttpResponse.json({
data: {
getProductPrices: {
__typename: 'ProductPricesEntity',
productPrices: [
{
__typename: 'ProductPriceEntity',
created: 1699860608,
recurringInterval: 'month',
stripePriceId: 'monthly8usd',
unitAmount: 900,
},
{
__typename: 'ProductPriceEntity',
created: 1701874964,
recurringInterval: 'year',
stripePriceId: 'priceId',
unitAmount: 9000,
},
],
},
},
});
}),
graphqlMocks.handlers,
],
},
},
};
export default meta;
export type Story = StoryObj<typeof ChooseYourPlan>;
export const Default: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
sleep(100);
await canvas.findByText('Choose your Plan');
},
};

19
packages/twenty-front/src/pages/auth/__stories__/PasswordReset.stories.tsx
View File

@ -4,6 +4,7 @@ import { within } from '@storybook/test';
import { graphql, HttpResponse } from 'msw';
import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
import { ValidatePasswordResetTokenDocument } from '~/generated/graphql';
import { PasswordReset } from '~/pages/auth/PasswordReset';
import {
PageDecorator,
@ -16,10 +17,26 @@ const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Auth/PasswordReset',
component: PasswordReset,
decorators: [PageDecorator],
args: { routePath: '/reset-password/resetToken' },
args: {
routePath: '/reset-password/:passwordResetToken',
routeParams: { ':passwordResetToken': 'MOCKED_TOKEN' },
},
parameters: {
msw: {
handlers: [
graphql.query(
getOperationName(ValidatePasswordResetTokenDocument) ?? '',
() => {
return HttpResponse.json({
data: {
validatePasswordResetToken: {
id: mockedOnboardingUsersData[0].id,
email: mockedOnboardingUsersData[0].email,
},
},
});
},
),
graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
return HttpResponse.json({
data: {

2
packages/twenty-front/src/pages/not-found/__stories__/NotFound.stories.tsx
View File

@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { HelmetProviderDecorator } from '~/testing/decorators/HelmetProviderDecorator';
import { PageDecoratorArgs } from '~/testing/decorators/PageDecorator';
import { RelationPickerDecorator } from '~/testing/decorators/RelationPickerDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@ -12,6 +13,7 @@ const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/NotFound/Default',
component: NotFound,
decorators: [
HelmetProviderDecorator,
ComponentWithRouterDecorator,
SnackBarDecorator,
RelationPickerDecorator,

11
packages/twenty-front/src/pages/settings/__stories__/SettingsBilling.stories.tsx
View File

@ -1,4 +1,5 @@
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
@ -7,6 +8,7 @@ import {
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { sleep } from '~/testing/sleep';
import { SettingsBilling } from '../SettingsBilling';
@ -24,4 +26,11 @@ export default meta;
export type Story = StoryObj<typeof SettingsBilling>;
export const Default: Story = {};
export const Default: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
sleep(1000);
await canvas.findByRole('button', { name: 'View billing details' });
},
};

11
packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsAccountsCalendars.stories.tsx
View File

@ -1,4 +1,5 @@
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
@ -7,6 +8,7 @@ import {
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { sleep } from '~/testing/sleep';
import { SettingsAccountsCalendars } from '../SettingsAccountsCalendars';
@ -27,4 +29,11 @@ export default meta;
export type Story = StoryObj<typeof SettingsAccountsCalendars>;
export const Default: Story = {};
export const Default: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
sleep(100);
await canvas.findByText('Calendar settings');
},
};

33
packages/twenty-front/src/pages/settings/accounts/__stories__/SettingsAccountsCalendarsSettings.stories.tsx
View File

@ -1,4 +1,6 @@
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import { graphql, HttpResponse } from 'msw';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
@ -8,6 +10,7 @@ import {
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
import { sleep } from '~/testing/sleep';
import { SettingsAccountsCalendarsSettings } from '../SettingsAccountsCalendarsSettings';
@ -21,7 +24,26 @@ const meta: Meta<PageDecoratorArgs> = {
},
parameters: {
layout: 'fullscreen',
msw: graphqlMocks,
msw: {
handlers: [
...graphqlMocks.handlers,
graphql.query('FindOneCalendarChannel', () => {
return HttpResponse.json({
data: {
calendarChannel: {
edges: [],
pageInfo: {
hasNextPage: false,
hasPreviousPage: false,
startCursor: null,
endCursor: null,
},
},
},
});
}),
],
},
},
};
@ -29,4 +51,11 @@ export default meta;
export type Story = StoryObj<typeof SettingsAccountsCalendarsSettings>;
export const Default: Story = {};
export const Default: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
sleep(100);
await canvas.findByText('Event visibility');
},
};

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

@ -34,6 +34,6 @@ export const StandardObject: Story = {
export const CustomObject: Story = {
args: {
routeParams: { ':objectSlug': 'workspaces' },
routeParams: { ':objectSlug': 'listings' },
},
};

6
packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopers.stories.tsx
View File

@ -1,4 +1,5 @@
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import { SettingsDevelopers } from '~/pages/settings/developers/SettingsDevelopers';
import {
@ -23,7 +24,10 @@ export default meta;
export type Story = StoryObj<typeof SettingsDevelopers>;
export const Default: Story = {
play: async () => {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await sleep(100);
await canvas.findByText('API keys');
},
};

11
packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationDatabase.stories.tsx
View File

@ -1,4 +1,5 @@
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
@ -8,6 +9,7 @@ import {
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { sleep } from '~/testing/sleep';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/Integrations/SettingsIntegrationDatabase',
@ -26,4 +28,11 @@ export default meta;
export type Story = StoryObj<typeof SettingsIntegrationDatabase>;
export const Default: Story = {};
export const Default: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
sleep(1000);
await canvas.findByText('PostgreSQL database');
},
};

12
packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationDatabaseConnection.stories.tsx
View File

@ -1,4 +1,5 @@
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
@ -8,6 +9,7 @@ import {
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { sleep } from '~/testing/sleep';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/Integrations/SettingsIntegrationDatabaseConnection',
@ -29,4 +31,12 @@ export default meta;
export type Story = StoryObj<typeof SettingsIntegrationDatabaseConnection>;
export const Default: Story = {};
export const Default: Story = {
play: async ({ canvasElement }) => {
within(canvasElement);
sleep(1000);
// Todo: Implement mocks in graphqlMocks for databaseConnection
// await canvas.findByText('Tables');
},
};

11
packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationNewDatabaseConnection.stories.tsx
View File

@ -1,4 +1,5 @@
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import { SettingsIntegrationNewDatabaseConnection } from '~/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection';
import {
@ -6,6 +7,7 @@ import {
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { sleep } from '~/testing/sleep';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/Integrations/SettingsIntegrationNewDatabaseConnection',
@ -24,4 +26,11 @@ export default meta;
export type Story = StoryObj<typeof SettingsIntegrationNewDatabaseConnection>;
export const Default: Story = {};
export const Default: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
sleep(100);
await canvas.findByText('Connect a new database');
},
};

15
packages/twenty-front/src/pages/tasks/__stories__/Tasks.stories.tsx
View File

@ -1,4 +1,5 @@
import { Meta, StoryObj } from '@storybook/react';
import { graphql, HttpResponse } from 'msw';
import { AppPath } from '@/types/AppPath';
import {
@ -6,6 +7,7 @@ import {
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { mockedWorkspaceMemberData } from '~/testing/mock-data/users';
import { sleep } from '~/testing/sleep';
import { Tasks } from '../Tasks';
@ -16,7 +18,18 @@ const meta: Meta<PageDecoratorArgs> = {
decorators: [PageDecorator],
args: { routePath: AppPath.TasksPage },
parameters: {
msw: graphqlMocks,
msw: {
handlers: [
graphql.query('FindOneWorkspaceMember', () => {
return HttpResponse.json({
data: {
workspaceMember: mockedWorkspaceMemberData,
},
});
}),
graphqlMocks.handlers,
],
},
},
};