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

docs: use ComponentDecorator (#800)

Browse Source 
Related to #702
This commit is contained in:
Thaïs
2023-07-21 21:02:21 +02:00
committed by GitHub
parent 79fccb0404
commit 56cff63c4b
36 changed files with 777 additions and 910 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
front/src/testing/decorators.tsx
View File

@ -1,20 +1,11 @@
import { useEffect } from 'react';
import { ApolloProvider } from '@apollo/client';
import { Decorator } from '@storybook/react';
import { RecoilRoot } from 'recoil';
import { HooksCompanyBoard } from '@/companies/components/HooksCompanyBoard';
import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext';
import { defaultPipelineProgressOrderBy } from '@/pipeline/queries';
import { BoardCardContext } from '@/pipeline/states/BoardCardContext';
import { BoardColumnContext } from '@/pipeline/states/BoardColumnContext';
import { pipelineProgressIdScopedState } from '@/pipeline/states/pipelineProgressIdScopedState';
import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { CellContext } from '@/ui/table/states/CellContext';
import { RowContext } from '@/ui/table/states/RowContext';
import { mockedPipelineProgressData } from './mock-data/pipeline-progress';
import { ComponentStorybookLayout } from './ComponentStorybookLayout';
import { mockedClient } from './mockedClient';
@ -39,46 +30,3 @@ export const CellPositionDecorator: Decorator = (Story) => (
</RecoilScope>
</RecoilScope>
);
export const BoardDecorator: Decorator = (Story) => (
<>
<RecoilScope SpecificContext={CompanyBoardContext}>
<HooksCompanyBoard
availableFilters={[]}
orderBy={defaultPipelineProgressOrderBy}
/>
<Story />
</RecoilScope>
</>
);
function HookLoadFakeBoardContextState() {
const [, setPipelineProgressId] = useRecoilScopedState(
pipelineProgressIdScopedState,
BoardCardContext,
);
const pipelineProgress = mockedPipelineProgressData[1];
useEffect(() => {
setPipelineProgressId(pipelineProgress?.id || '');
}, [pipelineProgress?.id, setPipelineProgressId]);
return <></>;
}
export const BoardCardDecorator: Decorator = (Story) => {
return (
<>
<RecoilScope SpecificContext={CompanyBoardContext}>
<HooksCompanyBoard
availableFilters={[]}
orderBy={defaultPipelineProgressOrderBy}
/>
<RecoilScope SpecificContext={BoardColumnContext}>
<RecoilScope SpecificContext={BoardCardContext}>
<HookLoadFakeBoardContextState />
<Story />
</RecoilScope>
</RecoilScope>
</RecoilScope>
</>
);
};

3
front/src/testing/mock-data/users.ts
View File

@ -2,6 +2,9 @@ import { ColorScheme, GetCurrentUserQuery } from '~/generated/graphql';
type MockedUser = GetCurrentUserQuery['currentUser'];
export const avatarUrl =
'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=';
export const mockedUsersData: Array<MockedUser> = [
{
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6d',

6
front/src/testing/renderWrappers.tsx
View File

@ -35,12 +35,6 @@ export function getRenderWrapperForPage(
};
}
export function getRenderWrapperForComponent(children: React.ReactElement) {
return function render() {
return <ComponentStorybookLayout>{children}</ComponentStorybookLayout>;
};
}
export function getRenderWrapperForEntityTableComponent(
children: React.ReactElement,
) {