fix: fix Modules Storybook tests (#2339)

Fixes #2310

front/src/modules/activities/tasks/__stories__/TaskGroups.stories.tsx

@@ -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,
+    },
+  },
+};

front/src/modules/activities/tasks/__stories__/TaskGroupsWithoutTasks.stories.tsx

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

front/src/modules/companies/__stories__/Board.stories.tsx

@@ -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 { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
-import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 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}>
+      <CompanyBoardRecoilScopeContext.Provider value="opportunities">
-        <MemoryRouter>
+        <Story />
-          <HooksCompanyBoardEffect />
+      </CompanyBoardRecoilScopeContext.Provider>
-          <Story />
-        </MemoryRouter>
-      </RecoilScope>
     ),
-    ComponentDecorator,
+    ComponentWithRouterDecorator,
   ],
   parameters: {
     msw: graphqlMocks,

front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx

@@ -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}>
+        <MemoryRouter>
-          <BoardContext.Provider
+          <ViewScope viewScopeId="company-board-view">
-            value={{
+            <RecoilScope
-              BoardRecoilScopeContext:
+              CustomRecoilScopeContext={BoardColumnRecoilScopeContext}
-                context.parameters.customRecoilScopeContext,
+            >
-            }}
+              <BoardContext.Provider
-          >
+                value={{
-            <MemoryRouter>
+                  BoardRecoilScopeContext:
-              <HooksCompanyBoardEffect />
+                    context.parameters.customRecoilScopeContext,
-              <BoardCardIdContext.Provider
+                }}
-                value={mockedPipelineProgressData[1].id}
               >
-                <Story />
+                <HooksCompanyBoardEffect />
-              </BoardCardIdContext.Provider>
+                <BoardCardIdContext.Provider
-            </MemoryRouter>
+                  value={mockedPipelineProgressData[1].id}
-          </BoardContext.Provider>
+                >
-        </RecoilScope>
+                  <Story />
+                </BoardCardIdContext.Provider>
+              </BoardContext.Provider>
+            </RecoilScope>
+          </ViewScope>
+        </MemoryRouter>
       );
     },
     ComponentWithRecoilScopeDecorator,

front/src/pages/opportunities/Opportunities.tsx

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

front/src/testing/graphqlMocks.ts

@@ -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,
       }),