fix: fix Modules Storybook tests (#2339)

Fixes #2310
This commit is contained in:
Thaïs 2023-11-03 15:01:42 +01:00 committed by GitHub
parent e04f9230da
commit e053fba089
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 53 additions and 81 deletions

View File

@ -2,14 +2,26 @@ import { Meta, StoryObj } from '@storybook/react';
import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
import { ObjectFilterDropdownScope } from '@/ui/object/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { mockedTasks } from '~/testing/mock-data/activities';
import { ActivityTargetableEntityType } from '../../types/ActivityTargetableEntity';
const meta: Meta<typeof TaskGroups> = {
title: 'Modules/Activity/TaskGroups',
component: TaskGroups,
decorators: [ComponentWithRouterDecorator, ComponentWithRecoilScopeDecorator],
decorators: [
(Story) => (
<ObjectFilterDropdownScope filterScopeId="entity-tasks-filter-scope">
<Story />
</ObjectFilterDropdownScope>
),
ComponentWithRouterDecorator,
ComponentWithRecoilScopeDecorator,
],
parameters: {
msw: graphqlMocks,
customRecoilScopeContext: TasksRecoilScopeContext,
@ -19,4 +31,13 @@ const meta: Meta<typeof TaskGroups> = {
export default meta;
type Story = StoryObj<typeof TaskGroups>;
export const Default: Story = {};
export const Empty: Story = {};
export const WithTasks: Story = {
args: {
entity: {
id: mockedTasks[0].authorId,
type: ActivityTargetableEntityType.Person,
},
},
};

View File

@ -1,46 +0,0 @@
import { getOperationName } from '@apollo/client/utilities';
import { Meta, StoryObj } from '@storybook/react';
import { graphql } from 'msw';
import { GET_ACTIVITIES } from '@/activities/graphql/queries/getActivities';
import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
const meta: Meta<typeof TaskGroups> = {
title: 'Modules/Activity/TaskGroupsWithoutTasks',
component: TaskGroups,
decorators: [ComponentWithRouterDecorator, ComponentWithRecoilScopeDecorator],
parameters: {
msw: graphqlMocks,
customRecoilScopeContext: TasksRecoilScopeContext,
},
};
export default meta;
type Story = StoryObj<typeof TaskGroups>;
export const Default: Story = {
parameters: {
msw: [
...graphqlMocks.filter(
(graphqlMock) =>
graphqlMock.info.operationName !== getOperationName(GET_ACTIVITIES),
),
...[
graphql.query(
getOperationName(GET_ACTIVITIES) ?? '',
(_req, res, ctx) => {
return res(
ctx.data({
findManyActivities: [],
}),
);
},
),
],
],
},
};

View File

@ -1,12 +1,9 @@
import { MemoryRouter } from 'react-router-dom';
import { Meta, StoryObj } from '@storybook/react';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { CompanyBoard } from '../board/components/CompanyBoard';
import { HooksCompanyBoardEffect } from '../components/HooksCompanyBoardEffect';
import { CompanyBoardRecoilScopeContext } from '../states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
const meta: Meta<typeof CompanyBoard> = {
@ -14,14 +11,11 @@ const meta: Meta<typeof CompanyBoard> = {
component: CompanyBoard,
decorators: [
(Story) => (
<RecoilScope CustomRecoilScopeContext={CompanyBoardRecoilScopeContext}>
<MemoryRouter>
<HooksCompanyBoardEffect />
<Story />
</MemoryRouter>
</RecoilScope>
<CompanyBoardRecoilScopeContext.Provider value="opportunities">
<Story />
</CompanyBoardRecoilScopeContext.Provider>
),
ComponentDecorator,
ComponentWithRouterDecorator,
],
parameters: {
msw: graphqlMocks,

View File

@ -9,6 +9,7 @@ import { boardCardFieldsScopedState } from '@/ui/layout/board/states/boardCardFi
import { BoardColumnRecoilScopeContext } from '@/ui/layout/board/states/recoil-scope-contexts/BoardColumnRecoilScopeContext';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { ViewScope } from '@/views/scopes/ViewScope';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
@ -33,23 +34,27 @@ const meta: Meta<typeof CompanyBoardCard> = {
}, [setBoardCardFields]);
return (
<RecoilScope CustomRecoilScopeContext={BoardColumnRecoilScopeContext}>
<BoardContext.Provider
value={{
BoardRecoilScopeContext:
context.parameters.customRecoilScopeContext,
}}
>
<MemoryRouter>
<HooksCompanyBoardEffect />
<BoardCardIdContext.Provider
value={mockedPipelineProgressData[1].id}
<MemoryRouter>
<ViewScope viewScopeId="company-board-view">
<RecoilScope
CustomRecoilScopeContext={BoardColumnRecoilScopeContext}
>
<BoardContext.Provider
value={{
BoardRecoilScopeContext:
context.parameters.customRecoilScopeContext,
}}
>
<Story />
</BoardCardIdContext.Provider>
</MemoryRouter>
</BoardContext.Provider>
</RecoilScope>
<HooksCompanyBoardEffect />
<BoardCardIdContext.Provider
value={mockedPipelineProgressData[1].id}
>
<Story />
</BoardCardIdContext.Provider>
</BoardContext.Provider>
</RecoilScope>
</ViewScope>
</MemoryRouter>
);
},
ComponentWithRecoilScopeDecorator,

View File

@ -54,10 +54,7 @@ export const Opportunities = () => {
</PageHeader>
<PageBody>
<BoardOptionsContext.Provider value={opportunitiesBoardOptions}>
<RecoilScope
scopeId="opportunities"
CustomRecoilScopeContext={CompanyBoardRecoilScopeContext}
>
<CompanyBoardRecoilScopeContext.Provider value="opportunities">
<StyledBoardContainer>
<CompanyBoard
onColumnAdd={handlePipelineStageAdd}
@ -65,7 +62,7 @@ export const Opportunities = () => {
onEditColumnTitle={handleEditColumnTitle}
/>
</StyledBoardContainer>
</RecoilScope>
</CompanyBoardRecoilScopeContext.Provider>
</BoardOptionsContext.Provider>
</PageBody>
</RecoilScope>

View File

@ -22,6 +22,7 @@ import { GET_API_KEY } from '@/settings/developers/graphql/queries/getApiKey';
import { GET_API_KEYS } from '@/settings/developers/graphql/queries/getApiKeys';
import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
import {
ActivityType,
GetCompaniesQuery,
GetPeopleQuery,
GetPersonQuery,
@ -253,7 +254,7 @@ export const graphqlMocks = [
return res(
ctx.data({
findManyActivities:
req?.variables?.where?.type?.equals === 'Task'
req?.variables?.where?.type?.equals === ActivityType.Task
? mockedTasks
: mockedActivities,
}),