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

Fix storybook tests (#5487)

Browse Source 
Fixes #5486

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-twenty
2024-05-22 02:24:08 +08:00
committed by GitHub
parent e47101e08b
commit 36b467d301
16 changed files with 709 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
packages/twenty-front/src/testing/decorators/ComponentWithRouterDecorator.tsx
View File

@ -1,12 +1,64 @@
import { MemoryRouter } from 'react-router-dom';
import {
createMemoryRouter,
createRoutesFromElements,
Outlet,
Route,
RouterProvider,
} from 'react-router-dom';
import { Decorator } from '@storybook/react';
import {
computeLocation,
isRouteParams,
} from '~/testing/decorators/PageDecorator';
import { ComponentStorybookLayout } from '../ComponentStorybookLayout';
export const ComponentWithRouterDecorator: Decorator = (Story) => (
interface StrictArgs {
[name: string]: unknown;
}
const Providers = () => (
<ComponentStorybookLayout>
<MemoryRouter>
<Story />
</MemoryRouter>
<Outlet />
</ComponentStorybookLayout>
);
const createRouter = ({
Story,
args,
initialEntries,
initialIndex,
}: {
Story: () => JSX.Element;
args: StrictArgs;
initialEntries?: {
pathname: string;
}[];
initialIndex?: number;
}) =>
createMemoryRouter(
createRoutesFromElements(
<Route element={<Providers />}>
<Route path={(args.routePath as string) ?? '*'} element={<Story />} />
</Route>,
),
{ initialEntries, initialIndex },
);
export const ComponentWithRouterDecorator: Decorator = (Story, { args }) => {
return (
<RouterProvider
router={createRouter({
Story,
args,
initialEntries:
args.routePath &&
typeof args.routePath === 'string' &&
(args.routeParams === undefined || isRouteParams(args.routeParams))
? [computeLocation(args.routePath, args.routeParams)]
: [{ pathname: '/' }],
})}
/>
);
};

117
packages/twenty-front/src/testing/decorators/PageDecorator.tsx
View File

@ -1,5 +1,11 @@
import { HelmetProvider } from 'react-helmet-async';
import { MemoryRouter, Route, Routes } from 'react-router-dom';
import {
createMemoryRouter,
createRoutesFromElements,
Outlet,
Route,
RouterProvider,
} from 'react-router-dom';
import { ApolloProvider } from '@apollo/client';
import { loadDevMessages } from '@apollo/client/dev';
import { Decorator } from '@storybook/react';
@ -23,15 +29,26 @@ export type PageDecoratorArgs = {
additionalRoutes?: string[];
};
type RouteParams = {
export type RouteParams = {
[param: string]: string;
};
const computeLocation = (routePath: string, routeParams: RouteParams) => {
export const isRouteParams = (obj: any): obj is RouteParams => {
if (typeof obj !== 'object' || obj === null) {
return false;
}
return Object.keys(obj).every((key) => typeof obj[key] === 'string');
};
export const computeLocation = (
routePath: string,
routeParams?: RouteParams,
) => {
return {
pathname: routePath.replace(
/:(\w+)/g,
(paramName) => routeParams[paramName] ?? '',
(paramName) => routeParams?.[paramName] ?? '',
),
};
};
@ -42,11 +59,7 @@ const ApolloStorybookDevLogEffect = () => {
return <></>;
};
export const PageDecorator: Decorator<{
routePath: string;
routeParams: RouteParams;
additionalRoutes?: string[];
}> = (Story, { args }) => {
const Providers = () => {
return (
<RecoilRoot>
<ApolloProvider client={mockedApolloClient}>
@ -56,32 +69,15 @@ export const PageDecorator: Decorator<{
<UserProvider>
<ClientConfigProviderEffect />
<ClientConfigProvider>
<MemoryRouter
initialEntries={[
computeLocation(args.routePath, args.routeParams),
]}
>
<FullHeightStorybookLayout>
<HelmetProvider>
<SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
<ObjectMetadataItemsProvider>
<Routes>
<Route element={<DefaultLayout />}>
<Route path={args.routePath} element={<Story />} />
{args.additionalRoutes?.map((route) => (
<Route
key={route}
path={route}
element={<div>Navigated to {route}</div>}
/>
))}
</Route>
</Routes>
</ObjectMetadataItemsProvider>
</SnackBarProviderScope>
</HelmetProvider>
</FullHeightStorybookLayout>
</MemoryRouter>
<FullHeightStorybookLayout>
<HelmetProvider>
<SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
<ObjectMetadataItemsProvider>
<Outlet />
</ObjectMetadataItemsProvider>
</SnackBarProviderScope>
</HelmetProvider>
</FullHeightStorybookLayout>
</ClientConfigProvider>
</UserProvider>
</ApolloMetadataClientMockedProvider>
@ -89,3 +85,54 @@ export const PageDecorator: Decorator<{
</RecoilRoot>
);
};
const createRouter = ({
Story,
args,
initialEntries,
initialIndex,
}: {
Story: () => JSX.Element;
args: {
routePath: string;
routeParams: RouteParams;
additionalRoutes?: string[] | undefined;
};
initialEntries?: {
pathname: string;
}[];
initialIndex?: number;
}) =>
createMemoryRouter(
createRoutesFromElements(
<Route element={<Providers />}>
<Route element={<DefaultLayout />}>
<Route path={args.routePath} element={<Story />} />
{args.additionalRoutes?.map((route) => (
<Route
key={route}
path={route}
element={<div>Navigated to {route}</div>}
/>
))}
</Route>
</Route>,
),
{ initialEntries, initialIndex },
);
export const PageDecorator: Decorator<{
routePath: string;
routeParams: RouteParams;
additionalRoutes?: string[];
}> = (Story, { args }) => {
return (
<RouterProvider
router={createRouter({
Story,
args,
initialEntries: [computeLocation(args.routePath, args.routeParams)],
})}
/>
);
};