Fix and enhance storybook:modules:tests (#3107)
* Fix and enhance storybook:modules:tests Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com> * Fix and enhance storybook:modules:tests Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com> * Fix and enhance storybook:modules:tests Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com> * Remove unnecessary changes Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com> * Fix email thread story * Re-enable storybook:modules * Fix --------- Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com> Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-twenty
@ -1,6 +1,6 @@
|
||||
import { useEffect } from 'react';
|
||||
import { Decorator, Meta, StoryObj } from '@storybook/react';
|
||||
import { expect, fn, userEvent, within } from '@storybook/test';
|
||||
import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
|
||||
|
||||
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
|
||||
import { FieldMetadataType } from '~/generated-metadata/graphql';
|
||||
@ -99,8 +99,11 @@ export const Submit: Story = {
|
||||
const input = canvas.getByRole('slider', { name: 'Rating' });
|
||||
const firstStar = input.firstElementChild;
|
||||
|
||||
if (firstStar) userEvent.click(firstStar);
|
||||
|
||||
expect(submitJestFn).toHaveBeenCalledTimes(1);
|
||||
await waitFor(() => {
|
||||
if (firstStar) {
|
||||
userEvent.click(firstStar);
|
||||
expect(submitJestFn).toHaveBeenCalledTimes(1);
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
@ -2,9 +2,11 @@ import { useEffect } from 'react';
|
||||
import { Decorator, Meta, StoryObj } from '@storybook/react';
|
||||
import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
|
||||
|
||||
import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
|
||||
import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
|
||||
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
|
||||
import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
|
||||
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
|
||||
import { graphqlMocks } from '~/testing/graphqlMocks';
|
||||
|
||||
import { FieldContextProvider } from '../../../__stories__/FieldContextProvider';
|
||||
@ -43,24 +45,28 @@ const RelationFieldInputWithContext = ({
|
||||
|
||||
return (
|
||||
<div>
|
||||
<RelationPickerScope relationPickerScopeId="relation-picker">
|
||||
<FieldContextProvider
|
||||
fieldDefinition={{
|
||||
fieldMetadataId: 'relation',
|
||||
label: 'Relation',
|
||||
type: 'RELATION',
|
||||
iconName: 'IconLink',
|
||||
metadata: {
|
||||
fieldName: 'Relation',
|
||||
},
|
||||
}}
|
||||
entityId={entityId}
|
||||
>
|
||||
<RelationFieldValueSetterEffect value={value} />
|
||||
<RelationFieldInput onSubmit={onSubmit} onCancel={onCancel} />
|
||||
</FieldContextProvider>
|
||||
</RelationPickerScope>
|
||||
<div data-testid="data-field-input-click-outside-div" />
|
||||
<ObjectMetadataItemsProvider>
|
||||
<RelationPickerScope relationPickerScopeId="relation-picker">
|
||||
<FieldContextProvider
|
||||
fieldDefinition={{
|
||||
fieldMetadataId: 'relation',
|
||||
label: 'Relation',
|
||||
type: 'RELATION',
|
||||
iconName: 'IconLink',
|
||||
metadata: {
|
||||
fieldName: 'Relation',
|
||||
relationObjectMetadataNamePlural: 'workspaceMembers',
|
||||
relationObjectMetadataNameSingular: 'workspaceMember',
|
||||
},
|
||||
}}
|
||||
entityId={entityId}
|
||||
>
|
||||
<RelationFieldValueSetterEffect value={value} />
|
||||
<RelationFieldInput onSubmit={onSubmit} onCancel={onCancel} />
|
||||
</FieldContextProvider>
|
||||
</RelationPickerScope>
|
||||
<div data-testid="data-field-input-click-outside-div" />
|
||||
</ObjectMetadataItemsProvider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -88,7 +94,7 @@ const meta: Meta = {
|
||||
onSubmit: { control: false },
|
||||
onCancel: { control: false },
|
||||
},
|
||||
decorators: [clearMocksDecorator],
|
||||
decorators: [SnackBarDecorator, clearMocksDecorator],
|
||||
parameters: {
|
||||
clearMocks: true,
|
||||
msw: graphqlMocks,
|
||||
@ -110,12 +116,12 @@ export const Submit: Story = {
|
||||
|
||||
expect(submitJestFn).toHaveBeenCalledTimes(0);
|
||||
|
||||
// FIXME: Failing because the picker is not fetching any items
|
||||
const item = await canvas.findByText('Jane Doe');
|
||||
const item = await canvas.findByText('John Wick');
|
||||
|
||||
userEvent.click(item);
|
||||
|
||||
expect(submitJestFn).toHaveBeenCalledTimes(1);
|
||||
await waitFor(() => {
|
||||
userEvent.click(item);
|
||||
expect(submitJestFn).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -146,7 +146,7 @@ export const ClickOutside: Story = {
|
||||
|
||||
await waitFor(() => {
|
||||
userEvent.click(emptyDiv);
|
||||
expect(clickOutsideJestFn).toHaveBeenCalledTimes(1);
|
||||
expect(clickOutsideJestFn).toHaveBeenCalled();
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
@ -58,7 +58,9 @@ export const RecordBoardColumnEditTitleMenu = ({
|
||||
const [internalValue, setInternalValue] = useState(title);
|
||||
const { onTitleEdit } = useContext(BoardColumnContext) || {};
|
||||
|
||||
const { setBoardColumns } = useRecordBoard();
|
||||
const { setBoardColumns } = useRecordBoard({
|
||||
recordBoardScopeId: 'company-board',
|
||||
});
|
||||
|
||||
const debouncedOnUpdateTitle = debounce(
|
||||
(newTitle) => onTitleEdit?.({ title: newTitle, color }),
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { expect, userEvent, within } from '@storybook/test';
|
||||
|
||||
import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
|
||||
import { IconUserCircle } from '@/ui/display/icon';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
|
||||
@ -41,8 +40,9 @@ const meta: Meta<typeof SingleEntitySelect> = {
|
||||
selectedEntity,
|
||||
width,
|
||||
}) => {
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
const { relationPickerSearchFilter } = useRelationPicker();
|
||||
const filteredEntities = entities.filter(
|
||||
(entity) => entity.id !== selectedEntity?.id,
|
||||
);
|
||||
|
||||
return (
|
||||
<SingleEntitySelect
|
||||
@ -57,11 +57,7 @@ const meta: Meta<typeof SingleEntitySelect> = {
|
||||
selectedEntity,
|
||||
width,
|
||||
}}
|
||||
entitiesToSelect={entities.filter(
|
||||
(entity) =>
|
||||
entity.id !== selectedEntity?.id &&
|
||||
entity.name.includes(relationPickerSearchFilter),
|
||||
)}
|
||||
entitiesToSelect={filteredEntities}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
||||
@ -7,7 +7,9 @@ export const useEntitySelectSearch = () => {
|
||||
setRelationPickerPreselectedId,
|
||||
relationPickerSearchFilter,
|
||||
setRelationPickerSearchFilter,
|
||||
} = useRelationPicker();
|
||||
} = useRelationPicker({
|
||||
relationPickerScopeId: 'relation-picker',
|
||||
});
|
||||
|
||||
const debouncedSetSearchFilter = debounce(
|
||||
setRelationPickerSearchFilter,
|
||||
|
||||
Reference in New Issue
Block a user