admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Remove user action from waitFor in stories (#11588)

Browse Source 
As per title:
- waitFor is a loop that waits for a condition to be filled, it should
be use to expect or in rare case to wait for element to be present in
the page (in most cases, you can use findByXXX)
- user actions should not be in this loop, otherwise they will be
triggered multiple times
This commit is contained in:
Charles Bochet
2025-04-15 17:34:28 +02:00
committed by GitHub
parent c40baf036c
commit dee779179b
10 changed files with 77 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,8 +5,8 @@ import { expect, userEvent, within } from '@storybook/test';
import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
import { sleep } from '~/utils/sleep';
import { IconPicker, IconPickerProps } from '../IconPicker';
import { ComponentDecorator } from 'twenty-ui/testing';
import { IconPicker, IconPickerProps } from '../IconPicker';
type RenderProps = IconPickerProps;
const Render = (args: RenderProps) => {
@ -123,7 +123,7 @@ export const WithSearchAndClose: Story = {
name: 'Click to select icon (selected: IconBuildingSkyscraper)',
});
userEvent.click(iconPickerButton);
await userEvent.click(iconPickerButton);
await sleep(500);

54
packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx → packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/Dropdown.stories.tsx
View File

@ -6,6 +6,15 @@ import { useState } from 'react';
import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { Avatar, IconChevronLeft } from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import {
MenuItem,
MenuItemMultiSelectAvatar,
MenuItemSelectAvatar,
} from 'twenty-ui/navigation';
import { ComponentDecorator } from 'twenty-ui/testing';
import { Dropdown } from '../Dropdown';
import { DropdownMenuHeader } from '../DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuInput } from '../DropdownMenuInput';
@ -13,26 +22,17 @@ import { DropdownMenuItemsContainer } from '../DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '../DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '../DropdownMenuSeparator';
import { StyledDropdownMenuSubheader } from '../StyledDropdownMenuSubheader';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { Avatar, IconChevronLeft } from 'twenty-ui/display';
import { Button } from 'twenty-ui/input';
import { ComponentDecorator } from 'twenty-ui/testing';
import {
MenuItem,
MenuItemMultiSelectAvatar,
MenuItemSelectAvatar,
} from 'twenty-ui/navigation';
const meta: Meta<typeof Dropdown> = {
title: 'UI/Layout/Dropdown/Dropdown',
component: Dropdown,
decorators: [ComponentDecorator, (Story) => <Story />],
args: {
clickableComponent: <Button title="Open Dropdown" />,
dropdownHotkeyScope: { scope: 'testDropdownMenu' },
dropdownOffset: { x: 0, y: 8 },
dropdownId: 'test-dropdown-id',
dropdownWidth: '200px',
},
argTypes: {
clickableComponent: { control: false },
@ -84,24 +84,26 @@ export const Empty: Story = {
const canvas = within(document.body);
const buttons = await canvas.findAllByRole('button');
userEvent.click(buttons[0]);
await userEvent.click(buttons[0]);
await waitFor(async () => {
const fakeMenu = await canvas.findByTestId('dropdown-content');
const fakeMenu = await canvas.findByTestId('dropdown-content');
await waitFor(() => {
expect(fakeMenu).toBeInTheDocument();
});
userEvent.click(buttons[0]);
await userEvent.click(buttons[0]);
await waitFor(async () => {
const fakeMenu = canvas.queryByTestId('dropdown-content');
expect(fakeMenu).not.toBeInTheDocument();
await waitFor(() => {
const fakeMenuBis = canvas.queryByTestId('dropdown-content');
expect(fakeMenuBis).not.toBeInTheDocument();
});
userEvent.click(buttons[0]);
await waitFor(async () => {
const fakeMenu = await canvas.findByTestId('dropdown-content');
expect(fakeMenu).toBeInTheDocument();
await userEvent.click(buttons[0]);
const fakeMenuTer = await canvas.findByTestId('dropdown-content');
await waitFor(() => {
expect(fakeMenuTer).toBeInTheDocument();
});
},
};
@ -207,9 +209,9 @@ const playInteraction: PlayFunction<any, any> = async () => {
const canvas = within(document.body);
const buttons = await canvas.findAllByRole('button');
userEvent.click(buttons[0]);
await userEvent.click(buttons[0]);
await waitFor(async () => {
await waitFor(() => {
expect(canvas.getByText('Company A')).toBeInTheDocument();
});
};
@ -265,13 +267,15 @@ export const SearchWithLoadingMenu: Story = {
const buttons = await canvas.findAllByRole('button');
await userEvent.click(buttons[0]);
await waitFor(() => {
userEvent.click(buttons[0]);
expect(canvas.getByDisplayValue('query')).toBeInTheDocument();
});
await userEvent.click(buttons[0]);
await waitFor(() => {
userEvent.click(buttons[0]);
expect(canvas.queryByDisplayValue('query')).not.toBeInTheDocument();
});
},