Fix Storybook tests (#9554)

Finally fixing the storybook tests!

packages/twenty-front/.storybook/manager-head.html

@@ -2,4 +2,7 @@
     [data-is-storybook="true"] {
         background-color: transparent!important;
     }
-</style>
+    :has(#storybook-panel-root) {
+        z-index: 100;
+    }
+</style>

packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormRawJsonFieldInput.stories.tsx

@@ -87,6 +87,7 @@ export const DisplayDefaultValueWithVariablesProperly: Story = {
   args: {
     placeholder: 'Enter valid json',
     defaultValue: '{ "a": { "b" :  {{var.test}} } }',
+    onPersist: fn(),
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
@@ -120,6 +121,7 @@ export const InsertVariableInTheMiddleOnTextInput: Story = {
         </button>
       );
     },
+    onPersist: fn(),
   },
   play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
@@ -161,6 +163,7 @@ export const CanUseVariableAsObjectProperty: Story = {
         </button>
       );
     },
+    onPersist: fn(),
   },
   play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
@@ -188,6 +191,7 @@ export const ClearField: Story = {
   args: {
     placeholder: 'Enter valid json',
     defaultValue: '{ "a": 2 }',
+    onPersist: fn(),
   },
   play: async ({ canvasElement, args }) => {
     const defaultValueStringLength = args.defaultValue!.length;

packages/twenty-front/src/modules/settings/data-model/objects/components/__stories__/SettingsObjectInactiveMenuDropDown.stories.tsx

@@ -38,7 +38,9 @@ export const Open: Story = {
   play: async () => {
     const canvas = within(document.body);
 
-    const dropdownButton = await canvas.getByRole('button');
+    const dropdownButton = await canvas.findByRole('button', {
+      name: 'Inactive Object Options',
+    });
 
     await userEvent.click(dropdownButton);
   },
@@ -48,7 +50,9 @@ export const WithActivate: Story = {
   play: async () => {
     const canvas = within(document.body);
 
-    const dropdownButton = await canvas.getByRole('button');
+    const dropdownButton = await canvas.findByRole('button', {
+      name: 'Inactive Object Options',
+    });
 
     await userEvent.click(dropdownButton);
 
@@ -69,7 +73,9 @@ export const WithDelete: Story = {
   play: async () => {
     const canvas = within(document.body);
 
-    const dropdownButton = await canvas.getByRole('button');
+    const dropdownButton = await canvas.findByRole('button', {
+      name: 'Inactive Object Options',
+    });
 
     await userEvent.click(dropdownButton);
 

packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx

@@ -82,22 +82,24 @@ export const Empty: Story = {
   play: async () => {
     const canvas = within(document.body);
 
-    const button = await canvas.findByRole('button');
-    userEvent.click(button);
+    const buttons = await canvas.findAllByRole('button', {
+      name: 'Open Dropdown',
+    });
+    userEvent.click(buttons[0]);
 
     await waitFor(async () => {
       const fakeMenu = await canvas.findByTestId('dropdown-content');
       expect(fakeMenu).toBeInTheDocument();
     });
 
-    userEvent.click(button);
+    userEvent.click(buttons[0]);
 
     await waitFor(async () => {
       const fakeMenu = canvas.queryByTestId('dropdown-content');
       expect(fakeMenu).not.toBeInTheDocument();
     });
 
-    userEvent.click(button);
+    userEvent.click(buttons[0]);
     await waitFor(async () => {
       const fakeMenu = await canvas.findByTestId('dropdown-content');
       expect(fakeMenu).toBeInTheDocument();
@@ -205,8 +207,8 @@ const FakeCheckableMenuItemList = ({ hasAvatar }: { hasAvatar?: boolean }) => {
 const playInteraction: PlayFunction<any, any> = async () => {
   const canvas = within(document.body);
 
-  const button = await canvas.findByRole('button');
-  userEvent.click(button);
+  const buttons = await canvas.findAllByRole('button');
+  userEvent.click(buttons[0]);
 
   await waitFor(async () => {
     expect(canvas.getByText('Company A')).toBeInTheDocument();
@@ -257,15 +259,15 @@ export const SearchWithLoadingMenu: Story = {
   play: async () => {
     const canvas = within(document.body);
 
-    const button = await canvas.findByRole('button');
+    const buttons = await canvas.findAllByRole('button');
 
     await waitFor(() => {
-      userEvent.click(button);
+      userEvent.click(buttons[0]);
       expect(canvas.getByDisplayValue('query')).toBeInTheDocument();
     });
 
     await waitFor(() => {
-      userEvent.click(button);
+      userEvent.click(buttons[0]);
       expect(canvas.queryByDisplayValue('query')).not.toBeInTheDocument();
     });
   },

packages/twenty-front/src/testing/decorators/RecordTableDecorator.tsx

@@ -2,6 +2,7 @@ import { Decorator } from '@storybook/react';
 import { useRecoilValue } from 'recoil';
 
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { RecordTableBodyContextProvider } from '@/object-record/record-table/contexts/RecordTableBodyContext';
 import { RecordTableContextProvider } from '@/object-record/record-table/contexts/RecordTableContext';
 import { isDefined } from 'twenty-ui';
@@ -18,28 +19,39 @@ export const RecordTableDecorator: Decorator = (Story) => {
   }
 
   return (
-    <RecordTableContextProvider
+    <RecordIndexContextProvider
       value={{
+        indexIdentifierUrl: () => '',
+        onIndexRecordsLoaded: () => {},
+        objectNamePlural: personObjectMetadataItem.namePlural,
         objectNameSingular: personObjectMetadataItem.nameSingular,
         objectMetadataItem: personObjectMetadataItem,
-        recordTableId: 'persons',
-        viewBarId: 'view-bar',
-        visibleTableColumns: [],
+        recordIndexId: 'record-index',
       }}
     >
-      <RecordTableBodyContextProvider
+      <RecordTableContextProvider
         value={{
-          onCellMouseEnter: () => {},
-          onCloseTableCell: () => {},
-          onOpenTableCell: () => {},
-          onActionMenuDropdownOpened: () => {},
-          onMoveFocus: () => {},
-          onMoveSoftFocusToCell: () => {},
-          onUpsertRecord: () => {},
+          objectNameSingular: personObjectMetadataItem.nameSingular,
+          objectMetadataItem: personObjectMetadataItem,
+          recordTableId: 'persons',
+          viewBarId: 'view-bar',
+          visibleTableColumns: [],
         }}
       >
-        <Story />
-      </RecordTableBodyContextProvider>
-    </RecordTableContextProvider>
+        <RecordTableBodyContextProvider
+          value={{
+            onCellMouseEnter: () => {},
+            onCloseTableCell: () => {},
+            onOpenTableCell: () => {},
+            onActionMenuDropdownOpened: () => {},
+            onMoveFocus: () => {},
+            onMoveSoftFocusToCell: () => {},
+            onUpsertRecord: () => {},
+          }}
+        >
+          <Story />
+        </RecordTableBodyContextProvider>
+      </RecordTableContextProvider>
+    </RecordIndexContextProvider>
   );
 };