Fix storybook tests (#5487)

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>

packages/twenty-front/src/modules/activities/calendar/components/__stories__/Calendar.stories.tsx

@@ -1,22 +1,60 @@
+import { getOperationName } from '@apollo/client/utilities';
 import { Meta, StoryObj } from '@storybook/react';
+import { graphql, HttpResponse } from 'msw';
 import { ComponentDecorator } from 'twenty-ui';
 
 import { Calendar } from '@/activities/calendar/components/Calendar';
+import { getTimelineCalendarEventsFromCompanyId } from '@/activities/calendar/queries/getTimelineCalendarEventsFromCompanyId';
+import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedTimelineCalendarEvents } from '~/testing/mock-data/timeline-calendar-events';
 
 const meta: Meta<typeof Calendar> = {
   title: 'Modules/Activities/Calendar/Calendar',
   component: Calendar,
-  decorators: [ComponentDecorator, SnackBarDecorator],
+  decorators: [
+    ComponentDecorator,
+    ObjectMetadataItemsDecorator,
+    SnackBarDecorator,
+  ],
   parameters: {
     container: { width: 728 },
-    msw: graphqlMocks,
+    msw: {
+      handlers: [
+        ...graphqlMocks.handlers,
+        graphql.query(
+          getOperationName(getTimelineCalendarEventsFromCompanyId) ?? '',
+          ({ variables }) => {
+            if (variables.page > 1) {
+              return HttpResponse.json({
+                data: {
+                  getTimelineCalendarEventsFromCompanyId: {
+                    __typename: 'TimelineCalendarEventsWithTotal',
+                    totalNumberOfCalendarEvents: 3,
+                    timelineCalendarEvents: [],
+                  },
+                },
+              });
+            }
+            return HttpResponse.json({
+              data: {
+                getTimelineCalendarEventsFromCompanyId: {
+                  __typename: 'TimelineCalendarEventsWithTotal',
+                  totalNumberOfCalendarEvents: 3,
+                  timelineCalendarEvents: mockedTimelineCalendarEvents,
+                },
+              },
+            });
+          },
+        ),
+      ],
+    },
   },
   args: {
     targetableObject: {
       id: '1',
-      targetObjectNameSingular: 'Person',
+      targetObjectNameSingular: 'Company',
     },
   },
 };

packages/twenty-front/src/modules/activities/tasks/__stories__/TaskGroups.stories.tsx

@@ -6,6 +6,7 @@ import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableE
 import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
 import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedTasks } from '~/testing/mock-data/activities';
@@ -21,10 +22,10 @@ const meta: Meta<typeof TaskGroups> = {
     ),
     ComponentWithRouterDecorator,
     ComponentWithRecoilScopeDecorator,
+    ObjectMetadataItemsDecorator,
     SnackBarDecorator,
   ],
   parameters: {
-    msw: graphqlMocks,
     customRecoilScopeContext: TasksRecoilScopeContext,
   },
 };
@@ -43,4 +44,7 @@ export const WithTasks: Story = {
       },
     ] as ActivityTargetableObject[],
   },
+  parameters: {
+    msw: graphqlMocks,
+  },
 };

packages/twenty-front/src/modules/navigation/utils/indexAppPath.ts

@@ -0,0 +1,12 @@
+import { AppPath } from '@/types/AppPath';
+
+const getIndexAppPath = () => {
+  return AppPath.Index;
+};
+
+// This file is using the default export pattern to be compatible
+// with the way it is imported in the tests.
+// Otherwise we cannot mock it: https://github.com/jestjs/jest/issues/12145 as we are using ES native modules
+// TBH: I am not a big fan of this pattern, alternatively we could set a global variable or a recoilState
+// to store the value
+export default { getIndexAppPath };

packages/twenty-front/src/modules/object-metadata/types/FieldMetadataItem.ts

@@ -43,7 +43,7 @@ export type FieldMetadataItem = Omit<
       })
     | null;
   defaultValue?: any;
-  options?: FieldMetadataItemOption[];
+  options?: FieldMetadataItemOption[] | null;
   relationDefinition?: {
     relationId: RelationDefinition['relationId'];
     direction: RelationDefinitionType;

packages/twenty-front/src/modules/object-metadata/validation-schemas/fieldMetadataItemSchema.ts

@@ -51,6 +51,7 @@ export const fieldMetadataItemSchema = z.object({
         value: z.string().trim().min(1),
       }),
     )
+    .nullable()
     .optional(),
   relationDefinition: z
     .object({

packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx

@@ -103,7 +103,7 @@ export const SettingsDataModelFieldPreview = ({
                 objectMetadataNameSingular: objectMetadataItem.nameSingular,
                 relationObjectMetadataNameSingular:
                   relationObjectMetadataItem?.nameSingular,
-                options: fieldMetadataItem.options,
+                options: fieldMetadataItem.options ?? [],
               },
               defaultValue: fieldMetadataItem.defaultValue,
             },