mirror of
https://github.com/twentyhq/twenty.git
synced 2024-09-11 15:35:36 +03:00
Fix storybook tests (#6150)
The PRs merged on Friday introduced regressions on our storybook tests suite
This commit is contained in:
parent
7b3a590f79
commit
46dac5a0ef
@ -3,5 +3,5 @@ import toKebabCase from 'lodash.kebabcase';
|
|||||||
import { ObjectMetadataItem } from '../types/ObjectMetadataItem';
|
import { ObjectMetadataItem } from '../types/ObjectMetadataItem';
|
||||||
|
|
||||||
export const getObjectSlug = (
|
export const getObjectSlug = (
|
||||||
objectMetadataItem: Pick<ObjectMetadataItem, 'labelPlural'>,
|
objectMetadataItem: Pick<ObjectMetadataItem, 'namePlural'>,
|
||||||
) => toKebabCase(objectMetadataItem.labelPlural);
|
) => toKebabCase(objectMetadataItem.namePlural);
|
||||||
|
@ -31,8 +31,8 @@ export const Disabled: Story = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const WithOpenSelect: 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');
|
const inputField = await canvas.findByText('Text');
|
||||||
|
|
||||||
@ -49,8 +49,8 @@ export const WithExcludedFieldTypes: Story = {
|
|||||||
args: {
|
args: {
|
||||||
excludedFieldTypes: [FieldMetadataType.Uuid, FieldMetadataType.Numeric],
|
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');
|
const inputField = await canvas.findByText('Text');
|
||||||
|
|
||||||
|
@ -35,8 +35,8 @@ type Story = StoryObj<typeof SettingsObjectInactiveMenuDropDown>;
|
|||||||
export const Default: Story = {};
|
export const Default: Story = {};
|
||||||
|
|
||||||
export const Open: 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');
|
const dropdownButton = await canvas.getByRole('button');
|
||||||
|
|
||||||
@ -45,8 +45,8 @@ export const Open: Story = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const WithActivate: 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');
|
const dropdownButton = await canvas.getByRole('button');
|
||||||
|
|
||||||
@ -66,8 +66,8 @@ export const WithActivate: Story = {
|
|||||||
|
|
||||||
export const WithDelete: Story = {
|
export const WithDelete: Story = {
|
||||||
args: { isCustomObject: true },
|
args: { isCustomObject: true },
|
||||||
play: async ({ canvasElement }) => {
|
play: async () => {
|
||||||
const canvas = within(canvasElement);
|
const canvas = within(document.body);
|
||||||
|
|
||||||
const dropdownButton = await canvas.getByRole('button');
|
const dropdownButton = await canvas.getByRole('button');
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { Controller, useFormContext } from 'react-hook-form';
|
|
||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
|
import { Controller, useFormContext } from 'react-hook-form';
|
||||||
import { z } from 'zod';
|
import { z } from 'zod';
|
||||||
|
|
||||||
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
|
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
|
||||||
|
@ -37,8 +37,8 @@ type Story = StoryObj<typeof IconPicker>;
|
|||||||
export const Default: Story = {};
|
export const Default: Story = {};
|
||||||
|
|
||||||
export const WithOpen: 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', {
|
const iconPickerButton = await canvas.findByRole('button', {
|
||||||
name: 'Click to select icon (no icon selected)',
|
name: 'Click to select icon (no icon selected)',
|
||||||
@ -54,8 +54,8 @@ export const WithSelectedIcon: Story = {
|
|||||||
|
|
||||||
export const WithOpenAndSelectedIcon: Story = {
|
export const WithOpenAndSelectedIcon: Story = {
|
||||||
...WithSelectedIcon,
|
...WithSelectedIcon,
|
||||||
play: async ({ canvasElement }) => {
|
play: async () => {
|
||||||
const canvas = within(canvasElement);
|
const canvas = within(document.body);
|
||||||
|
|
||||||
const iconPickerButton = await canvas.findByRole('button', {
|
const iconPickerButton = await canvas.findByRole('button', {
|
||||||
name: 'Click to select icon (selected: IconCalendarEvent)',
|
name: 'Click to select icon (selected: IconCalendarEvent)',
|
||||||
@ -67,8 +67,8 @@ export const WithOpenAndSelectedIcon: Story = {
|
|||||||
|
|
||||||
export const WithSearch: Story = {
|
export const WithSearch: Story = {
|
||||||
...WithSelectedIcon,
|
...WithSelectedIcon,
|
||||||
play: async ({ canvasElement }) => {
|
play: async () => {
|
||||||
const canvas = within(canvasElement);
|
const canvas = within(document.body);
|
||||||
|
|
||||||
const iconPickerButton = await canvas.findByRole('button', {
|
const iconPickerButton = await canvas.findByRole('button', {
|
||||||
name: 'Click to select icon (selected: IconCalendarEvent)',
|
name: 'Click to select icon (selected: IconCalendarEvent)',
|
||||||
@ -92,8 +92,8 @@ export const WithSearch: Story = {
|
|||||||
|
|
||||||
export const WithSearchAndClose: Story = {
|
export const WithSearchAndClose: Story = {
|
||||||
...WithSelectedIcon,
|
...WithSelectedIcon,
|
||||||
play: async ({ canvasElement }) => {
|
play: async () => {
|
||||||
const canvas = within(canvasElement);
|
const canvas = within(document.body);
|
||||||
|
|
||||||
let iconPickerButton = await canvas.findByRole('button', {
|
let iconPickerButton = await canvas.findByRole('button', {
|
||||||
name: 'Click to select icon (selected: IconCalendarEvent)',
|
name: 'Click to select icon (selected: IconCalendarEvent)',
|
||||||
|
@ -20,8 +20,8 @@ type Story = StoryObj<typeof InternalDatePicker>;
|
|||||||
export const Default: Story = {};
|
export const Default: Story = {};
|
||||||
|
|
||||||
export const WithOpenMonthSelect: 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');
|
const monthSelect = await canvas.findByText('January');
|
||||||
|
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
import { useState } from 'react';
|
|
||||||
import styled from '@emotion/styled';
|
import styled from '@emotion/styled';
|
||||||
import { Decorator, Meta, StoryObj } from '@storybook/react';
|
import { Decorator, Meta, StoryObj } from '@storybook/react';
|
||||||
import { expect, userEvent, waitFor, within } from '@storybook/test';
|
import { expect, userEvent, waitFor, within } from '@storybook/test';
|
||||||
import { PlayFunction } from '@storybook/types';
|
import { PlayFunction } from '@storybook/types';
|
||||||
|
import { useState } from 'react';
|
||||||
import { Avatar, ComponentDecorator } from 'twenty-ui';
|
import { Avatar, ComponentDecorator } from 'twenty-ui';
|
||||||
|
|
||||||
import { Button } from '@/ui/input/button/components/Button';
|
import { Button } from '@/ui/input/button/components/Button';
|
||||||
@ -76,8 +76,8 @@ export const Empty: Story = {
|
|||||||
<StyledEmptyDropdownContent data-testid="dropdown-content" />
|
<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');
|
const button = await canvas.findByRole('button');
|
||||||
userEvent.click(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');
|
const button = await canvas.findByRole('button');
|
||||||
userEvent.click(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');
|
const button = await canvas.findByRole('button');
|
||||||
|
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import pick from 'lodash.pick';
|
||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
import { FormProvider, useForm } from 'react-hook-form';
|
import { FormProvider, useForm } from 'react-hook-form';
|
||||||
import { useNavigate, useParams } from 'react-router-dom';
|
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 { H2Title, IconArchive, IconSettings } from 'twenty-ui';
|
||||||
import { z } from 'zod';
|
import { z } from 'zod';
|
||||||
|
|
||||||
@ -81,7 +81,12 @@ export const SettingsObjectEdit = () => {
|
|||||||
),
|
),
|
||||||
});
|
});
|
||||||
|
|
||||||
navigate(`${settingsObjectsPagePath}/${getObjectSlug(formValues)}`);
|
navigate(
|
||||||
|
`${settingsObjectsPagePath}/${getObjectSlug({
|
||||||
|
...formValues,
|
||||||
|
namePlural: formValues.labelPlural,
|
||||||
|
})}`,
|
||||||
|
);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
enqueueSnackBar((error as Error).message, {
|
enqueueSnackBar((error as Error).message, {
|
||||||
variant: SnackBarVariant.Error,
|
variant: SnackBarVariant.Error,
|
||||||
|
@ -35,15 +35,13 @@ export const StandardObject: Story = {
|
|||||||
|
|
||||||
export const CustomObject: Story = {
|
export const CustomObject: Story = {
|
||||||
args: {
|
args: {
|
||||||
routeParams: { ':objectSlug': 'workspaces' },
|
routeParams: { ':objectSlug': 'my-customs' },
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ObjectDropdownMenu: Story = {
|
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(
|
const objectSummaryVerticalDotsIconButton = await canvas.findByRole(
|
||||||
'button',
|
'button',
|
||||||
{
|
{
|
||||||
@ -59,10 +57,8 @@ export const ObjectDropdownMenu: Story = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const FieldDropdownMenu: 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', {
|
const [fieldVerticalDotsIconButton] = await canvas.findAllByRole('button', {
|
||||||
name: 'Active Field Options',
|
name: 'Active Field Options',
|
||||||
});
|
});
|
||||||
|
@ -1,10 +1,6 @@
|
|||||||
import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
|
|
||||||
import {
|
import {
|
||||||
FieldMetadataType,
|
ObjectMetadataItemsQuery
|
||||||
ObjectEdge,
|
|
||||||
ObjectMetadataItemsQuery,
|
|
||||||
} from '~/generated-metadata/graphql';
|
} from '~/generated-metadata/graphql';
|
||||||
import { CalendarChannelVisibility, MessageChannelVisibility } from "~/generated/graphql";
|
|
||||||
|
|
||||||
// This file is not designed to be manually edited.
|
// This file is not designed to be manually edited.
|
||||||
// It's an extract from the dev seeded environment metadata call
|
// It's an extract from the dev seeded environment metadata call
|
||||||
|
Loading…
Reference in New Issue
Block a user