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

Improve test coverage and refactor storybook arch (#723)

Browse Source 
* Improve test coverage and refactor storybook arch

* Fix coverage

* Fix tests

* Fix lint

* Fix lint
This commit is contained in:
Charles Bochet
2023-07-17 17:14:53 -07:00
committed by GitHub
parent 5b21657c4e
commit a972705ce6
43 changed files with 365 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
front/src/pages/companies/__stories__/Companies.mdx
View File

@ -1,11 +0,0 @@
{ /* Companies.mdx */ }
import { Canvas, Meta } from '@storybook/blocks';
import * as Companies from './Companies.stories';
<Meta of={Companies} />
# Companies View
<Canvas of={Companies.Default} />

72
front/src/pages/companies/__stories__/Company.stories.tsx
View File

@ -1,4 +1,5 @@
import { getOperationName } from '@apollo/client/utilities';
import { expect } from '@storybook/jest';
import type { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/testing-library';
import { graphql } from 'msw';
@ -25,19 +26,66 @@ export default meta;
export type Story = StoryObj<typeof CompanyShow>;
const companyShowCommonGraphqlMocks = [
graphql.query(
getOperationName(GET_COMMENT_THREADS_BY_TARGETS) ?? '',
(req, res, ctx) => {
return res(
ctx.data({
findManyCommentThreads: mockedCommentThreads,
}),
);
},
),
graphql.query(getOperationName(GET_COMPANY) ?? '', (req, res, ctx) => {
return res(
ctx.data({
findUniqueCompany: mockedCompaniesData[0],
}),
);
}),
];
export const Default: Story = {
render: getRenderWrapperForPage(
<CompanyShow />,
'/companies/89bb825c-171e-4bcc-9cf7-43448d6fb278',
),
parameters: {
msw: [...graphqlMocks, ...companyShowCommonGraphqlMocks],
},
};
export const EditNote: Story = {
render: getRenderWrapperForPage(
<CompanyShow />,
'/companies/89bb825c-171e-4bcc-9cf7-43448d6fb278',
),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const notesButton = await canvas.findByText('Note');
await notesButton.click();
const firstNoteTitle = await canvas.findByText('My very first note');
await firstNoteTitle.click();
expect(
await canvas.findByDisplayValue('My very first note'),
).toBeInTheDocument();
const workspaceName = await canvas.findByText('Twenty');
await workspaceName.click();
expect(await canvas.queryByDisplayValue('My very first note')).toBeNull();
const noteButton = await canvas.findByText('Note');
await noteButton.click();
expect(
await canvas.findByDisplayValue('My very first note'),
).toBeInTheDocument();
},
parameters: {
msw: [
...graphqlMocks,
...companyShowCommonGraphqlMocks,
graphql.mutation(
getOperationName(CREATE_COMMENT_THREAD_WITH_COMMENT) ?? '',
(req, res, ctx) => {
@ -48,33 +96,17 @@ export const Default: Story = {
);
},
),
graphql.query(
getOperationName(GET_COMMENT_THREADS_BY_TARGETS) ?? '',
(req, res, ctx) => {
return res(
ctx.data({
findManyCommentThreads: mockedCommentThreads,
}),
);
},
),
graphql.query(
getOperationName(GET_COMMENT_THREAD) ?? '',
(req, res, ctx) => {
console.log('coucou');
return res(
ctx.data({
findManyCommentThreads: mockedCommentThreads[0],
findManyCommentThreads: [mockedCommentThreads[0]],
}),
);
},
),
graphql.query(getOperationName(GET_COMPANY) ?? '', (req, res, ctx) => {
return res(
ctx.data({
findUniqueCompany: mockedCompaniesData[0],
}),
);
}),
],
},
};

2
front/src/pages/opportunities/__stories__/Opportunities.stories.tsx
View File

@ -6,7 +6,7 @@ import { getRenderWrapperForPage } from '~/testing/renderWrappers';
import { Opportunities } from '../Opportunities';
const meta: Meta<typeof Opportunities> = {
title: 'Pages/Opportunities',
title: 'Pages/Opportunities/Default',
component: Opportunities,
};

11
front/src/pages/people/__stories__/People.mdx
View File

@ -1,11 +0,0 @@
{ /* People.mdx */ }
import { Canvas, Meta } from '@storybook/blocks';
import * as People from './People.stories';
<Meta of={People} />
# People View
<Canvas of={People.Default} />

17
front/src/pages/settings/__stories__/SettingsProfile.stories.tsx
View File

@ -1,6 +1,8 @@
import type { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/testing-library';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { mockedUserJWT } from '~/testing/mock-data/jwt';
import { getRenderWrapperForPage } from '~/testing/renderWrappers';
import { SettingsProfile } from '../SettingsProfile';
@ -16,6 +18,21 @@ export type Story = StoryObj<typeof SettingsProfile>;
export const Default: Story = {
render: getRenderWrapperForPage(<SettingsProfile />, '/settings/profile'),
parameters: {
msw: graphqlMocks,
cookie: {
tokenPair: `{%22accessToken%22:{%22token%22:%22${mockedUserJWT}%22%2C%22expiresAt%22:%222023-07-18T15:06:40.704Z%22%2C%22__typename%22:%22AuthToken%22}%2C%22refreshToken%22:{%22token%22:%22${mockedUserJWT}%22%2C%22expiresAt%22:%222023-10-15T15:06:41.558Z%22%2C%22__typename%22:%22AuthToken%22}%2C%22__typename%22:%22AuthTokenPair%22}`,
},
},
};
export const LogOut: Story = {
render: getRenderWrapperForPage(<SettingsProfile />, '/settings/profile'),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const logoutButton = await canvas.findByText('Logout');
await logoutButton.click();
},
parameters: {
msw: graphqlMocks,
},

4
front/src/pages/settings/__stories__/SettingsWorkspaceMembers.stories.tsx
View File

@ -1,6 +1,7 @@
import type { Meta, StoryObj } from '@storybook/react';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { mockedUserJWT } from '~/testing/mock-data/jwt';
import { getRenderWrapperForPage } from '~/testing/renderWrappers';
import { SettingsWorkspaceMembers } from '../SettingsWorkspaceMembers';
@ -21,5 +22,8 @@ export const Default: Story = {
),
parameters: {
msw: graphqlMocks,
cookie: {
tokenPair: `{%22accessToken%22:{%22token%22:%22${mockedUserJWT}%22%2C%22expiresAt%22:%222023-07-18T15:06:40.704Z%22%2C%22__typename%22:%22AuthToken%22}%2C%22refreshToken%22:{%22token%22:%22${mockedUserJWT}%22%2C%22expiresAt%22:%222023-10-15T15:06:41.558Z%22%2C%22__typename%22:%22AuthToken%22}%2C%22__typename%22:%22AuthTokenPair%22}`,
},
},
};