Fix storybook tests (#6150)

The PRs merged on Friday introduced regressions on our storybook tests
suite

packages/twenty-front/src/modules/object-metadata/utils/getObjectSlug.ts

@@ -3,5 +3,5 @@ import toKebabCase from 'lodash.kebabcase';
 import { ObjectMetadataItem } from '../types/ObjectMetadataItem';
 
 export const getObjectSlug = (
-  objectMetadataItem: Pick<ObjectMetadataItem, 'labelPlural'>,
+  objectMetadataItem: Pick<ObjectMetadataItem, 'namePlural'>,
-) => toKebabCase(objectMetadataItem.labelPlural);
+) => toKebabCase(objectMetadataItem.namePlural);

packages/twenty-front/src/modules/settings/data-model/fields/forms/components/__stories__/SettingsDataModelFieldTypeSelect.stories.tsx

@@ -31,8 +31,8 @@ export const Disabled: Story = {
 };
 
 export const WithOpenSelect: Story = {
-  play: async ({ canvasElement }) => {
+  play: async () => {
-    const canvas = within(canvasElement);
+    const canvas = within(document.body);
 
     const inputField = await canvas.findByText('Text');
 
@@ -49,8 +49,8 @@ export const WithExcludedFieldTypes: Story = {
   args: {
     excludedFieldTypes: [FieldMetadataType.Uuid, FieldMetadataType.Numeric],
   },
-  play: async ({ canvasElement }) => {
+  play: async () => {
-    const canvas = within(canvasElement);
+    const canvas = within(document.body);
 
     const inputField = await canvas.findByText('Text');
 

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

@@ -35,8 +35,8 @@ type Story = StoryObj<typeof SettingsObjectInactiveMenuDropDown>;
 export const Default: Story = {};
 
 export const Open: Story = {
-  play: async ({ canvasElement }) => {
+  play: async () => {
-    const canvas = within(canvasElement);
+    const canvas = within(document.body);
 
     const dropdownButton = await canvas.getByRole('button');
 
@@ -45,8 +45,8 @@ export const Open: Story = {
 };
 
 export const WithActivate: Story = {
-  play: async ({ canvasElement }) => {
+  play: async () => {
-    const canvas = within(canvasElement);
+    const canvas = within(document.body);
 
     const dropdownButton = await canvas.getByRole('button');
 
@@ -66,8 +66,8 @@ export const WithActivate: Story = {
 
 export const WithDelete: Story = {
   args: { isCustomObject: true },
-  play: async ({ canvasElement }) => {
+  play: async () => {
-    const canvas = within(canvasElement);
+    const canvas = within(document.body);
 
     const dropdownButton = await canvas.getByRole('button');
 

packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx

@@ -1,5 +1,5 @@
-import { Controller, useFormContext } from 'react-hook-form';
 import styled from '@emotion/styled';
+import { Controller, useFormContext } from 'react-hook-form';
 import { z } from 'zod';
 
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';

packages/twenty-front/src/modules/ui/input/components/__stories__/IconPicker.stories.tsx

@@ -37,8 +37,8 @@ type Story = StoryObj<typeof IconPicker>;
 export const Default: Story = {};
 
 export const WithOpen: Story = {
-  play: async ({ canvasElement }) => {
+  play: async () => {
-    const canvas = within(canvasElement);
+    const canvas = within(document.body);
 
     const iconPickerButton = await canvas.findByRole('button', {
       name: 'Click to select icon (no icon selected)',
@@ -54,8 +54,8 @@ export const WithSelectedIcon: Story = {
 
 export const WithOpenAndSelectedIcon: Story = {
   ...WithSelectedIcon,
-  play: async ({ canvasElement }) => {
+  play: async () => {
-    const canvas = within(canvasElement);
+    const canvas = within(document.body);
 
     const iconPickerButton = await canvas.findByRole('button', {
       name: 'Click to select icon (selected: IconCalendarEvent)',
@@ -67,8 +67,8 @@ export const WithOpenAndSelectedIcon: Story = {
 
 export const WithSearch: Story = {
   ...WithSelectedIcon,
-  play: async ({ canvasElement }) => {
+  play: async () => {
-    const canvas = within(canvasElement);
+    const canvas = within(document.body);
 
     const iconPickerButton = await canvas.findByRole('button', {
       name: 'Click to select icon (selected: IconCalendarEvent)',
@@ -92,8 +92,8 @@ export const WithSearch: Story = {
 
 export const WithSearchAndClose: Story = {
   ...WithSelectedIcon,
-  play: async ({ canvasElement }) => {
+  play: async () => {
-    const canvas = within(canvasElement);
+    const canvas = within(document.body);
 
     let iconPickerButton = await canvas.findByRole('button', {
       name: 'Click to select icon (selected: IconCalendarEvent)',

packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/DatePicker.stories.tsx

@@ -20,8 +20,8 @@ type Story = StoryObj<typeof InternalDatePicker>;
 export const Default: Story = {};
 
 export const WithOpenMonthSelect: Story = {
-  play: async ({ canvasElement }) => {
+  play: async () => {
-    const canvas = within(canvasElement);
+    const canvas = within(document.body);
 
     const monthSelect = await canvas.findByText('January');
 

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

@@ -1,8 +1,8 @@
-import { useState } from 'react';
 import styled from '@emotion/styled';
 import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, waitFor, within } from '@storybook/test';
 import { PlayFunction } from '@storybook/types';
+import { useState } from 'react';
 import { Avatar, ComponentDecorator } from 'twenty-ui';
 
 import { Button } from '@/ui/input/button/components/Button';
@@ -76,8 +76,8 @@ export const Empty: Story = {
       <StyledEmptyDropdownContent data-testid="dropdown-content" />
     ),
   },
-  play: async ({ canvasElement }) => {
+  play: async () => {
-    const canvas = within(canvasElement);
+    const canvas = within(document.body);
 
     const button = await canvas.findByRole('button');
     userEvent.click(button);
@@ -199,8 +199,8 @@ const FakeCheckableMenuItemList = ({ hasAvatar }: { hasAvatar?: boolean }) => {
   );
 };
 
-const playInteraction: PlayFunction<any, any> = async ({ canvasElement }) => {
+const playInteraction: PlayFunction<any, any> = async () => {
-  const canvas = within(canvasElement);
+  const canvas = within(document.body);
 
   const button = await canvas.findByRole('button');
   userEvent.click(button);
@@ -251,8 +251,8 @@ export const SearchWithLoadingMenu: Story = {
       </>
     ),
   },
-  play: async ({ canvasElement }) => {
+  play: async () => {
-    const canvas = within(canvasElement);
+    const canvas = within(document.body);
 
     const button = await canvas.findByRole('button');
 

packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx

@@ -1,8 +1,8 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import pick from 'lodash.pick';
 import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
-import { zodResolver } from '@hookform/resolvers/zod';
-import pick from 'lodash.pick';
 import { H2Title, IconArchive, IconSettings } from 'twenty-ui';
 import { z } from 'zod';
 
@@ -81,7 +81,12 @@ export const SettingsObjectEdit = () => {
         ),
       });
 
-      navigate(`${settingsObjectsPagePath}/${getObjectSlug(formValues)}`);
+      navigate(
+        `${settingsObjectsPagePath}/${getObjectSlug({
+          ...formValues,
+          namePlural: formValues.labelPlural,
+        })}`,
+      );
     } catch (error) {
       enqueueSnackBar((error as Error).message, {
         variant: SnackBarVariant.Error,

packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectDetail.stories.tsx

@@ -35,15 +35,13 @@ export const StandardObject: Story = {
 
 export const CustomObject: Story = {
   args: {
-    routeParams: { ':objectSlug': 'workspaces' },
+    routeParams: { ':objectSlug': 'my-customs' },
   },
 };
 
 export const ObjectDropdownMenu: Story = {
-  play: async ({ canvasElement }) => {
+  play: async () => {
-    await sleep(100);
+    const canvas = within(document.body);
-
-    const canvas = within(canvasElement);
     const objectSummaryVerticalDotsIconButton = await canvas.findByRole(
       'button',
       {
@@ -59,10 +57,8 @@ export const ObjectDropdownMenu: Story = {
 };
 
 export const FieldDropdownMenu: Story = {
-  play: async ({ canvasElement }) => {
+  play: async () => {
-    await sleep(100);
+    const canvas = within(document.body);
-
-    const canvas = within(canvasElement);
     const [fieldVerticalDotsIconButton] = await canvas.findAllByRole('button', {
       name: 'Active Field Options',
     });

packages/twenty-front/src/testing/mock-data/generated/standard-metadata-query-result.ts

@@ -1,10 +1,6 @@
-import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
 import {
-  FieldMetadataType,
+	ObjectMetadataItemsQuery
-  ObjectEdge,
-  ObjectMetadataItemsQuery,
 } from '~/generated-metadata/graphql';
-import { CalendarChannelVisibility, MessageChannelVisibility } from "~/generated/graphql";
 
 // This file is not designed to be manually edited.
 // It's an extract from the dev seeded environment metadata call