From 46dac5a0ef0f4f4659b759aedf327278f9af98f4 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Sat, 6 Jul 2024 09:32:30 +0200 Subject: [PATCH] Fix storybook tests (#6150) The PRs merged on Friday introduced regressions on our storybook tests suite --- .../object-metadata/utils/getObjectSlug.ts | 4 ++-- .../SettingsDataModelFieldTypeSelect.stories.tsx | 8 ++++---- ...ettingsObjectInactiveMenuDropDown.stories.tsx | 12 ++++++------ .../SettingsDataModelObjectAboutForm.tsx | 2 +- .../__stories__/IconPicker.stories.tsx | 16 ++++++++-------- .../__stories__/DatePicker.stories.tsx | 4 ++-- .../__stories__/DropdownMenu.stories.tsx | 14 +++++++------- .../settings/data-model/SettingsObjectEdit.tsx | 11 ++++++++--- .../__stories__/SettingsObjectDetail.stories.tsx | 14 +++++--------- .../generated/standard-metadata-query-result.ts | 6 +----- 10 files changed, 44 insertions(+), 47 deletions(-) diff --git a/packages/twenty-front/src/modules/object-metadata/utils/getObjectSlug.ts b/packages/twenty-front/src/modules/object-metadata/utils/getObjectSlug.ts index 465af568df..fa2132f9c3 100644 --- a/packages/twenty-front/src/modules/object-metadata/utils/getObjectSlug.ts +++ b/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, -) => toKebabCase(objectMetadataItem.labelPlural); + objectMetadataItem: Pick, +) => toKebabCase(objectMetadataItem.namePlural); diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/__stories__/SettingsDataModelFieldTypeSelect.stories.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/__stories__/SettingsDataModelFieldTypeSelect.stories.tsx index 6292d95223..01b5164d1f 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/__stories__/SettingsDataModelFieldTypeSelect.stories.tsx +++ b/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 }) => { - const canvas = within(canvasElement); + play: async () => { + 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 }) => { - const canvas = within(canvasElement); + play: async () => { + const canvas = within(document.body); const inputField = await canvas.findByText('Text'); diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/__stories__/SettingsObjectInactiveMenuDropDown.stories.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/__stories__/SettingsObjectInactiveMenuDropDown.stories.tsx index c67607f7cc..8401f576c8 100644 --- a/packages/twenty-front/src/modules/settings/data-model/objects/__stories__/SettingsObjectInactiveMenuDropDown.stories.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/objects/__stories__/SettingsObjectInactiveMenuDropDown.stories.tsx @@ -35,8 +35,8 @@ type Story = StoryObj; export const Default: Story = {}; export const Open: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); + play: async () => { + 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 }) => { - const canvas = within(canvasElement); + play: async () => { + 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 }) => { - const canvas = within(canvasElement); + play: async () => { + const canvas = within(document.body); const dropdownButton = await canvas.getByRole('button'); diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx index 5ea06ddda0..7a40b61e7a 100644 --- a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx +++ b/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'; diff --git a/packages/twenty-front/src/modules/ui/input/components/__stories__/IconPicker.stories.tsx b/packages/twenty-front/src/modules/ui/input/components/__stories__/IconPicker.stories.tsx index 16499b2344..fc8faa2a77 100644 --- a/packages/twenty-front/src/modules/ui/input/components/__stories__/IconPicker.stories.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/__stories__/IconPicker.stories.tsx @@ -37,8 +37,8 @@ type Story = StoryObj; export const Default: Story = {}; export const WithOpen: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); + play: async () => { + 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 }) => { - const canvas = within(canvasElement); + play: async () => { + 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 }) => { - const canvas = within(canvasElement); + play: async () => { + 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 }) => { - const canvas = within(canvasElement); + play: async () => { + const canvas = within(document.body); let iconPickerButton = await canvas.findByRole('button', { name: 'Click to select icon (selected: IconCalendarEvent)', diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/DatePicker.stories.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/DatePicker.stories.tsx index fdaf457543..aa9492c1df 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/DatePicker.stories.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/DatePicker.stories.tsx @@ -20,8 +20,8 @@ type Story = StoryObj; export const Default: Story = {}; export const WithOpenMonthSelect: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); + play: async () => { + const canvas = within(document.body); const monthSelect = await canvas.findByText('January'); diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx index 3d939b5be6..69c9c7b9cc 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx +++ b/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 = { ), }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); + play: async () => { + 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 = async ({ canvasElement }) => { - const canvas = within(canvasElement); +const playInteraction: PlayFunction = async () => { + 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 }) => { - const canvas = within(canvasElement); + play: async () => { + const canvas = within(document.body); const button = await canvas.findByRole('button'); diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx index e12103ee9f..d0232be5c3 100644 --- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx +++ b/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, diff --git a/packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectDetail.stories.tsx b/packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectDetail.stories.tsx index 0e4b4eeac4..687cf19a2c 100644 --- a/packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsObjectDetail.stories.tsx +++ b/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 }) => { - await sleep(100); - - const canvas = within(canvasElement); + play: async () => { + const canvas = within(document.body); const objectSummaryVerticalDotsIconButton = await canvas.findByRole( 'button', { @@ -59,10 +57,8 @@ export const ObjectDropdownMenu: Story = { }; export const FieldDropdownMenu: Story = { - play: async ({ canvasElement }) => { - await sleep(100); - - const canvas = within(canvasElement); + play: async () => { + const canvas = within(document.body); const [fieldVerticalDotsIconButton] = await canvas.findAllByRole('button', { name: 'Active Field Options', }); diff --git a/packages/twenty-front/src/testing/mock-data/generated/standard-metadata-query-result.ts b/packages/twenty-front/src/testing/mock-data/generated/standard-metadata-query-result.ts index ff934beff8..3394a5c460 100644 --- a/packages/twenty-front/src/testing/mock-data/generated/standard-metadata-query-result.ts +++ b/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, - ObjectEdge, - ObjectMetadataItemsQuery, + 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