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