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

3
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/AddressFieldInput.stories.tsx
View File

@ -146,8 +146,9 @@ export const Enter: Story = {
play: async () => {
expect(enterJestFn).toHaveBeenCalledTimes(0);
await userEvent.keyboard('{enter}');
await waitFor(() => {
userEvent.keyboard('{enter}');
expect(enterJestFn).toHaveBeenCalledTimes(1);
});
},

14
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx
View File

@ -139,9 +139,9 @@ export const Default: Story = {};
export const Enter: Story = {
play: async () => {
expect(enterJestFn).toHaveBeenCalledTimes(0);
await userEvent.keyboard('{enter}');
await waitFor(() => {
userEvent.keyboard('{enter}');
expect(enterJestFn).toHaveBeenCalledTimes(1);
});
},
@ -151,8 +151,9 @@ export const Escape: Story = {
play: async () => {
expect(escapeJestfn).toHaveBeenCalledTimes(0);
await userEvent.keyboard('{esc}');
await waitFor(() => {
userEvent.keyboard('{esc}');
expect(escapeJestfn).toHaveBeenCalledTimes(1);
});
},
@ -166,8 +167,9 @@ export const ClickOutside: Story = {
const emptyDiv = canvas.getByTestId('data-field-input-click-outside-div');
await userEvent.click(emptyDiv);
await waitFor(() => {
userEvent.click(emptyDiv);
expect(clickOutsideJestFn).toHaveBeenCalledTimes(1);
});
},
@ -177,8 +179,9 @@ export const Tab: Story = {
play: async () => {
expect(tabJestFn).toHaveBeenCalledTimes(0);
await userEvent.keyboard('{tab}');
await waitFor(() => {
userEvent.keyboard('{tab}');
expect(tabJestFn).toHaveBeenCalledTimes(1);
});
},
@ -188,8 +191,9 @@ export const ShiftTab: Story = {
play: async () => {
expect(shiftTabJestFn).toHaveBeenCalledTimes(0);
await userEvent.keyboard('{shift>}{tab}');
await waitFor(() => {
userEvent.keyboard('{shift>}{tab}');
expect(shiftTabJestFn).toHaveBeenCalledTimes(1);
});
},

8
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RatingFieldInput.stories.tsx
View File

@ -9,7 +9,6 @@ import { RecordFieldComponentInstanceContext } from '@/object-record/record-fiel
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
import { FieldMetadataType } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { FieldRatingValue } from '../../../../types/FieldMetadata';
import { useRatingField } from '../../../hooks/useRatingField';
import { RatingFieldInput, RatingFieldInputProps } from '../RatingFieldInput';
@ -118,11 +117,10 @@ export const Submit: Story = {
const input = canvas.getByRole('slider', { name: 'Rating' });
const firstStar = input.firstElementChild;
await userEvent.click(firstStar);
await waitFor(() => {
if (isDefined(firstStar)) {
userEvent.click(firstStar);
expect(submitJestFn).toHaveBeenCalledTimes(1);
}
expect(submitJestFn).toHaveBeenCalledTimes(1);
});
},
};

11
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RichTextFieldInput.stories.tsx
View File

@ -111,8 +111,9 @@ export const Escape: Story = {
play: async () => {
expect(escapeJestFn).toHaveBeenCalledTimes(0);
await userEvent.keyboard('{esc}');
await waitFor(() => {
userEvent.keyboard('{esc}');
expect(escapeJestFn).toHaveBeenCalledTimes(1);
});
},
@ -123,9 +124,11 @@ export const ClickOutside: Story = {
const canvas = within(canvasElement);
expect(clickOutsideJestFn).toHaveBeenCalledTimes(0);
await waitFor(async () => {
const outsideElement = await canvas.findByTestId('click-outside-element');
userEvent.click(outsideElement);
const outsideElement = await canvas.findByTestId('click-outside-element');
await userEvent.click(outsideElement);
await waitFor(() => {
expect(clickOutsideJestFn).toHaveBeenCalledTimes(1);
});
},

21
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx
View File

@ -11,6 +11,7 @@ import { FieldMetadataType } from '~/generated/graphql';
import { StorybookFieldInputDropdownFocusIdSetterEffect } from '~/testing/components/StorybookFieldInputDropdownFocusIdSetterEffect';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { sleep } from '~/utils/sleep';
import { useTextField } from '../../../hooks/useTextField';
import { TextFieldInput, TextFieldInputProps } from '../TextFieldInput';
const TextFieldValueSetterEffect = ({ value }: { value: string }) => {
@ -131,9 +132,11 @@ export const Default: Story = {};
export const Enter: Story = {
play: async () => {
expect(enterJestFn).toHaveBeenCalledTimes(0);
await sleep(100);
await userEvent.keyboard('{enter}');
await waitFor(() => {
userEvent.keyboard('{enter}');
expect(enterJestFn).toHaveBeenCalledTimes(1);
});
},
@ -142,9 +145,11 @@ export const Enter: Story = {
export const Escape: Story = {
play: async () => {
expect(escapeJestfn).toHaveBeenCalledTimes(0);
await sleep(100);
await userEvent.keyboard('{esc}');
await waitFor(() => {
userEvent.keyboard('{esc}');
expect(escapeJestfn).toHaveBeenCalledTimes(1);
});
},
@ -153,13 +158,15 @@ export const Escape: Story = {
export const ClickOutside: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await sleep(100);
expect(clickOutsideJestFn).toHaveBeenCalledTimes(0);
const emptyDiv = canvas.getByTestId('data-field-input-click-outside-div');
await userEvent.click(emptyDiv);
await waitFor(() => {
userEvent.click(emptyDiv);
expect(clickOutsideJestFn).toHaveBeenCalled();
});
},
@ -168,9 +175,11 @@ export const ClickOutside: Story = {
export const Tab: Story = {
play: async () => {
expect(tabJestFn).toHaveBeenCalledTimes(0);
await sleep(100);
await userEvent.keyboard('{tab}');
await waitFor(() => {
userEvent.keyboard('{tab}');
expect(tabJestFn).toHaveBeenCalledTimes(1);
});
},
@ -179,9 +188,11 @@ export const Tab: Story = {
export const ShiftTab: Story = {
play: async () => {
expect(shiftTabJestFn).toHaveBeenCalledTimes(0);
await sleep(100);
await userEvent.keyboard('{shift>}{tab}');
await waitFor(() => {
userEvent.keyboard('{shift>}{tab}');
expect(shiftTabJestFn).toHaveBeenCalledTimes(1);
});
},

4
packages/twenty-front/src/modules/object-record/record-index/export/hooks/__tests__/useExportFetchRecords.test.ts
View File

@ -206,7 +206,7 @@ describe('useRecordData', () => {
result.current.tableData.getTableData();
});
await waitFor(async () => {
await waitFor(() => {
expect(callback).toHaveBeenCalledWith(
[mockPerson],
[
@ -297,7 +297,7 @@ describe('useRecordData', () => {
result.current.tableData.getTableData();
});
await waitFor(async () => {
await waitFor(() => {
expect(callback).toHaveBeenCalledWith([mockPerson], []);
});
});