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;
     }
+    :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');
+    const buttons = await canvas.findAllByRole('button', {
-    userEvent.click(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');
+  const buttons = await canvas.findAllByRole('button');
-  userEvent.click(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,6 +19,16 @@ export const RecordTableDecorator: Decorator = (Story) => {
   }
 
   return (
+    <RecordIndexContextProvider
+      value={{
+        indexIdentifierUrl: () => '',
+        onIndexRecordsLoaded: () => {},
+        objectNamePlural: personObjectMetadataItem.namePlural,
+        objectNameSingular: personObjectMetadataItem.nameSingular,
+        objectMetadataItem: personObjectMetadataItem,
+        recordIndexId: 'record-index',
+      }}
+    >
       <RecordTableContextProvider
         value={{
           objectNameSingular: personObjectMetadataItem.nameSingular,
@@ -41,5 +52,6 @@ export const RecordTableDecorator: Decorator = (Story) => {
           <Story />
         </RecordTableBodyContextProvider>
       </RecordTableContextProvider>
+    </RecordIndexContextProvider>
   );
 };