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

Replace test-runner with vitest for storybook (#17187)

Browse Source
This commit is contained in:
Abdullah.
2026-01-18 08:25:45 +05:00
committed by GitHub
parent c737028dd6
commit 92eff62523
56 changed files with 4999 additions and 715 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/action-menu/components/__stories__/CommandMenuActionMenuDropdown.stories.tsx
+3 -7
View File
@@ -9,11 +9,7 @@ import { createMockActionMenuActions } from '@/action-menu/mock/action-menu-acti
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
import {
ComponentDecorator,
RouterDecorator,
getCanvasElementForDropdownTesting,
} from 'twenty-ui/testing';
import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
import { ContextStoreDecorator } from '~/testing/decorators/ContextStoreDecorator';
const deleteMock = test.fn();
const addToFavoritesMock = test.fn();
@@ -86,8 +82,8 @@ export const WithButtonClicks: Story = {
args: {
actionMenuId: 'story-action-menu',
},
play: async () => {
const canvas = within(getCanvasElementForDropdownTesting());
play: async ({ canvasElement }) => {
const canvas = within(canvasElement.ownerDocument.body);
let actionButton = await canvas.findByText('Options');
await userEvent.click(actionButton);
packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuDropdown.stories.tsx
+3 -6
View File
@@ -10,10 +10,7 @@ import { ActionMenuComponentInstanceContext } from '@/action-menu/states/context
import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState';
import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
import {
RouterDecorator,
getCanvasElementForDropdownTesting,
} from 'twenty-ui/testing';
import { RouterDecorator } from 'twenty-ui/testing';
import { ContextStoreDecorator } from '~/testing/decorators/ContextStoreDecorator';
const deleteMock = test.fn();
@@ -81,8 +78,8 @@ export const WithInteractions: Story = {
args: {
actionMenuId: 'story',
},
play: async () => {
const canvas = within(getCanvasElementForDropdownTesting());
play: async ({ canvasElement }) => {
const canvas = within(canvasElement.ownerDocument.body);
const deleteButton = await canvas.findByText('Delete');
await userEvent.click(deleteButton);
packages/twenty-front/src/modules/activities/tasks/components/__stories__/TaskGroups.stories.tsx
+2
View File
@@ -6,6 +6,7 @@ import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/ob
import { TabListComponentInstanceContext } from '@/ui/layout/tab-list/states/contexts/TabListComponentInstanceContext';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { RightDrawerDecorator } from '~/testing/decorators/RightDrawerDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { mockedTasks } from '~/testing/mock-data/tasks';
@@ -27,6 +28,7 @@ const meta: Meta<typeof TaskGroups> = {
),
ComponentWithRouterDecorator,
ObjectMetadataItemsDecorator,
RightDrawerDecorator,
SnackBarDecorator,
],
};
packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx
+14 -14
View File
@@ -116,8 +116,8 @@ export default meta;
type Story = StoryObj<typeof CommandMenu>;
export const DefaultWithoutSearch: Story = {
play: async () => {
const canvas = within(document.body);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
expect(await canvas.findByText('Go to People')).toBeVisible();
expect(await canvas.findByText('Go to Opportunities')).toBeVisible();
@@ -128,8 +128,8 @@ export const DefaultWithoutSearch: Story = {
};
export const LimitedPermissions: Story = {
play: async () => {
const canvas = within(document.body);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
expect(await canvas.findByText('Go to People')).toBeVisible();
expect(canvas.queryByText('Go to Opportunities')).not.toBeInTheDocument();
expect(canvas.queryByText('Go to Tasks')).not.toBeInTheDocument();
@@ -151,8 +151,8 @@ export const LimitedPermissions: Story = {
};
export const MatchingNavigate: Story = {
play: async () => {
const canvas = within(document.body);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const searchInput = await canvas.findByTestId(
COMMAND_MENU_SEARCH_INPUT_FOCUS_ID,
);
@@ -163,8 +163,8 @@ export const MatchingNavigate: Story = {
};
export const MatchingNavigateShortcuts: Story = {
play: async () => {
const canvas = within(document.body);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const searchInput = await canvas.findByTestId(
COMMAND_MENU_SEARCH_INPUT_FOCUS_ID,
);
@@ -176,8 +176,8 @@ export const MatchingNavigateShortcuts: Story = {
// TEMP_DISABLED_TEST: Temporarily commented out due to test failure
// export const SearchRecordsAction: Story = {
// play: async () => {
// const canvas = within(document.body);
// play: async ({ canvasElement }) => {
// const canvas = within(canvasElement.ownerDocument.body);
// const searchRecordsButton = await canvas.findByText('Search records');
// await userEvent.click(searchRecordsButton);
// const searchInput = await canvas.findByPlaceholderText('Type anything...');
@@ -190,8 +190,8 @@ export const MatchingNavigateShortcuts: Story = {
// };
export const NoResultsSearchFallback: Story = {
play: async () => {
const canvas = within(document.body);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const searchInput = await canvas.findByTestId(
COMMAND_MENU_SEARCH_INPUT_FOCUS_ID,
);
@@ -225,8 +225,8 @@ export const NoResultsSearchFallback: Story = {
// TEMP_DISABLED_TEST: Temporarily commented out due to test failure
// export const ClickOnSearchRecordsAndGoBack: Story = {
// play: async () => {
// const canvas = within(document.body);
// play: async ({ canvasElement }) => {
// const canvas = within(canvasElement.ownerDocument.body);
// const searchRecordsButton = await canvas.findByText('Search records');
// await userEvent.click(searchRecordsButton);
// await sleep(openTimeout);
packages/twenty-front/src/modules/keyboard-shortcut-menu/components/__stories__/KeyboardShortcutMenu.stories.tsx
+2 -2
View File
@@ -28,8 +28,8 @@ export default meta;
type Story = StoryObj<typeof KeyboardShortcutMenu>;
export const Default: Story = {
play: async () => {
const canvas = within(document.body);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
expect(await canvas.findByText('Keyboard shortcuts')).toBeInTheDocument();
},
packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/duplicate/components/__stories__/RecordDetailDuplicatesSection.stories.tsx
+18
View File
@@ -1,6 +1,7 @@
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingContext';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@@ -9,6 +10,7 @@ import { getCompaniesMock } from '~/testing/mock-data/companies';
import { RecordDetailDuplicatesSection } from '@/object-record/record-field-list/record-detail-section/duplicate/components/RecordDetailDuplicatesSection';
import { ComponentDecorator } from 'twenty-ui/testing';
import { PageLayoutType } from '~/generated/graphql';
const companiesMock = getCompaniesMock();
@@ -17,6 +19,22 @@ const meta: Meta<typeof RecordDetailDuplicatesSection> = {
'Modules/ObjectRecord/RecordShow/RecordDetailSection/RecordDetailDuplicatesSection',
component: RecordDetailDuplicatesSection,
decorators: [
(Story) => (
<LayoutRenderingProvider
value={{
targetRecordIdentifier: {
id: companiesMock[0].id,
targetObjectNameSingular: 'company',
},
layoutType: PageLayoutType.RECORD_PAGE,
isInRightDrawer: false,
// TODO: Remove once the traditional record show page is removed.
isLegacyRecordShowPage: true,
}}
>
<Story />
</LayoutRenderingProvider>
),
ComponentDecorator,
ObjectMetadataItemsDecorator,
SnackBarDecorator,
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/__stories__/FormArrayFieldInput.stories.tsx
+8 -9
View File
@@ -2,7 +2,6 @@ import { FormArrayFieldInput } from '@/object-record/record-field/ui/form-types/
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
import { isDefined } from 'twenty-shared/utils';
import { getCanvasElementForDropdownTesting } from 'twenty-ui/testing';
import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorator';
import { MOCKED_STEP_ID } from '~/testing/mock-data/workflow';
@@ -44,7 +43,7 @@ export const AddTwoItems: Story = {
});
const addItemButton = await within(
getCanvasElementForDropdownTesting(),
canvasElement.ownerDocument.body,
).findByText('Add item');
await userEvent.click(addItemButton);
@@ -54,7 +53,7 @@ export const AddTwoItems: Story = {
});
const newItemInput = await within(
getCanvasElementForDropdownTesting(),
canvasElement.ownerDocument.body,
).findByRole('textbox');
await userEvent.type(newItemInput, 'Second item{enter}');
@@ -69,7 +68,7 @@ export const AddTwoItems: Story = {
const secondItemMenuItem = await waitFor(() => {
const allSecondItems = within(
getCanvasElementForDropdownTesting(),
canvasElement.ownerDocument.body,
).getAllByText('Second item');
expect(allSecondItems).toHaveLength(2);
@@ -95,7 +94,7 @@ export const EditExistingItem: Story = {
await userEvent.click(firstItemChip);
const openSecondItemMenuButton = await waitFor(() => {
const button = getCanvasElementForDropdownTesting().querySelector(
const button = canvasElement.ownerDocument.body.querySelector(
'[aria-controls$="-1-options"] > button',
);
@@ -109,13 +108,13 @@ export const EditExistingItem: Story = {
await userEvent.click(openSecondItemMenuButton);
const editSecondItemButton = await within(
getCanvasElementForDropdownTesting(),
canvasElement.ownerDocument.body,
).findByText('Edit');
await userEvent.click(editSecondItemButton);
const editSecondItemInput = await within(
getCanvasElementForDropdownTesting(),
canvasElement.ownerDocument.body,
).findByRole('textbox');
expect(editSecondItemInput).toHaveValue('Second item');
@@ -152,7 +151,7 @@ export const DeleteExistingItem: Story = {
await userEvent.click(firstItemChip);
const openSecondItemMenuButton = await waitFor(() => {
const button = getCanvasElementForDropdownTesting().querySelector(
const button = canvasElement.ownerDocument.body.querySelector(
'[aria-controls$="-1-options"] > button',
);
@@ -166,7 +165,7 @@ export const DeleteExistingItem: Story = {
await userEvent.click(openSecondItemMenuButton);
const deleteSecondItemButton = await within(
getCanvasElementForDropdownTesting(),
canvasElement.ownerDocument.body,
).findByText('Delete');
await userEvent.click(deleteSecondItemButton);
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/__stories__/FormBooleanFieldInput.stories.tsx
+2 -3
View File
@@ -1,7 +1,6 @@
import { FormBooleanFieldInput } from '@/object-record/record-field/ui/form-types/components/FormBooleanFieldInput';
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
import { getCanvasElementForDropdownTesting } from 'twenty-ui/testing';
import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorator';
import { MOCKED_STEP_ID } from '~/testing/mock-data/workflow';
@@ -118,7 +117,7 @@ export const ChangesValueToTrue: Story = {
await userEvent.click(select);
const trueOption = await within(
getCanvasElementForDropdownTesting(),
canvasElement.ownerDocument.body,
).findByText('True');
await userEvent.click(trueOption);
@@ -143,7 +142,7 @@ export const ChangesValueToFalse: Story = {
await userEvent.click(select);
const falseOption = await within(
getCanvasElementForDropdownTesting(),
canvasElement.ownerDocument.body,
).findByText('False');
await userEvent.click(falseOption);
packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/__stories__/EmailsFieldInput.stories.tsx
+2 -3
View File
@@ -1,7 +1,6 @@
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { useEffect } from 'react';
import { expect, fn, userEvent, within } from 'storybook/test';
import { getCanvasElementForDropdownTesting } from 'twenty-ui/testing';
import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldContext';
import { useEmailsField } from '@/object-record/record-field/ui/meta-types/hooks/useEmailsField';
@@ -170,13 +169,13 @@ export const CanNotSetPrimaryLinkAsPrimaryLink: Story = {
await userEvent.click(openDropdownButtons[0]);
const editOption = await within(
getCanvasElementForDropdownTesting(),
canvasElement.ownerDocument.body,
).findByText('Edit');
expect(editOption).toBeVisible();
const setPrimaryOption = within(
getCanvasElementForDropdownTesting(),
canvasElement.ownerDocument.body,
).queryByText('Set as Primary');
expect(setPrimaryOption).not.toBeInTheDocument();
packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/__stories__/LinksFieldInput.stories.tsx
+5 -6
View File
@@ -11,7 +11,6 @@ import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/
import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { getCanvasElementForDropdownTesting } from 'twenty-ui/testing';
import { FieldMetadataType } from '~/generated-metadata/graphql';
const updateRecord = fn();
@@ -296,7 +295,7 @@ export const DeletePrimaryLink: Story = {
await userEvent.click(openDropdownButton);
const deleteOption = await within(
getCanvasElementForDropdownTesting(),
canvasElement.ownerDocument.body,
).findByText('Delete');
await userEvent.click(deleteOption);
@@ -335,7 +334,7 @@ export const DeletePrimaryLinkAndUseSecondaryLinkAsTheNewPrimaryLink: Story = {
await userEvent.click(openDropdownButtons[0]);
const deleteOption = await within(
getCanvasElementForDropdownTesting(),
canvasElement.ownerDocument.body,
).findByText('Delete');
await userEvent.click(deleteOption);
@@ -377,7 +376,7 @@ export const DeleteSecondaryLink: Story = {
await userEvent.click(openDropdownButtons[1]);
const deleteOption = await within(
getCanvasElementForDropdownTesting(),
canvasElement.ownerDocument.body,
).findByText('Delete');
await userEvent.click(deleteOption);
@@ -485,7 +484,7 @@ export const MakeSecondaryLinkPrimary: Story = {
await userEvent.click(openDropdownButtons[1]); // Click the secondary link's dropdown
const setPrimaryOption = await within(
getCanvasElementForDropdownTesting(),
canvasElement.ownerDocument.body,
).findByText('Set as Primary');
await userEvent.click(setPrimaryOption);
},
@@ -514,7 +513,7 @@ export const CanNotSetPrimaryLinkAsPrimaryLink: Story = {
// Should not see "Set as Primary" option for primary link
const setPrimaryOption = within(
getCanvasElementForDropdownTesting(),
canvasElement.ownerDocument.body,
).queryByText('Set as Primary');
expect(setPrimaryOption).not.toBeInTheDocument();
},
packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/__stories__/PhonesFieldInput.stories.tsx
+2 -3
View File
@@ -1,7 +1,6 @@
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { useEffect } from 'react';
import { expect, userEvent, within } from 'storybook/test';
import { getCanvasElementForDropdownTesting } from 'twenty-ui/testing';
import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldContext';
import { usePhonesField } from '@/object-record/record-field/ui/meta-types/hooks/usePhonesField';
@@ -185,13 +184,13 @@ export const CanNotSetPrimaryLinkAsPrimaryLink: Story = {
await userEvent.click(openDropdownButtons[0]);
const editOption = await within(
getCanvasElementForDropdownTesting(),
canvasElement.ownerDocument.body,
).findByText('Edit');
expect(editOption).toBeVisible();
const setPrimaryOption = within(
getCanvasElementForDropdownTesting(),
canvasElement.ownerDocument.body,
).queryByText('Set as Primary');
expect(setPrimaryOption).not.toBeInTheDocument();
packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/__stories__/RelationManyToOneFieldInput.stories.tsx
+4 -5
View File
@@ -25,7 +25,6 @@ import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePush
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { FieldMetadataType } from 'twenty-shared/types';
import { getCanvasElementForDropdownTesting } from 'twenty-ui/testing';
import { RelationManyToOneFieldInput } from '@/object-record/record-field/ui/meta-types/input/components/RelationManyToOneFieldInput';
import { getFieldInputEventContextProviderWithJestMocks } from './utils/getFieldInputEventContextProviderWithJestMocks';
@@ -158,8 +157,8 @@ type Story = StoryObj<typeof RelationManyToOneFieldInputWithContext>;
export const Default: Story = {};
export const Submit: Story = {
play: async () => {
const canvas = within(getCanvasElementForDropdownTesting());
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
expect(handleSubmitMocked).toHaveBeenCalledTimes(0);
@@ -176,8 +175,8 @@ export const Submit: Story = {
};
export const Cancel: Story = {
play: async () => {
const canvas = within(getCanvasElementForDropdownTesting());
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
expect(handleCancelMocked).toHaveBeenCalledTimes(0);
await canvas.findByText('Linkedin', undefined, { timeout: 3000 });
packages/twenty-front/src/modules/object-record/record-table/__stories__/RecordTable.stories.tsx
+13 -12
View File
@@ -47,15 +47,16 @@ export const Default: Story = {
};
export const HeaderMenuOpen: Story = {
play: async () => {
const canvas = within(document.body);
await canvas.findByText('Linkedin', {}, { timeout: 3000 });
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const body = within(canvasElement.ownerDocument.body);
await canvas.findAllByText('Linkedin', {}, { timeout: 3000 });
const headerMenuButton = await canvas.findByText('Domain Name');
await userEvent.click(headerMenuButton);
await canvas.findByText('Move right');
await body.findByText('Move right');
},
};
@@ -65,11 +66,11 @@ export const ScrolledLeft: Story = {
width: 1000,
},
},
play: async () => {
const canvas = within(document.body);
await canvas.findByText('Linkedin', {}, { timeout: 3000 });
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findAllByText('Linkedin', {}, { timeout: 3000 });
const scrollWrapper = document.body.querySelector(
const scrollWrapper = canvasElement.ownerDocument.body.querySelector(
'.scroll-wrapper-x-enabled',
);
@@ -95,11 +96,11 @@ export const ScrolledBottom: Story = {
height: 300,
},
},
play: async () => {
const canvas = within(document.body);
await canvas.findByText('Linkedin', {}, { timeout: 3000 });
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findAllByText('Linkedin', {}, { timeout: 3000 });
const scrollWrapper = document.body.querySelector(
const scrollWrapper = canvasElement.ownerDocument.body.querySelector(
'.scroll-wrapper-y-enabled',
);
packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardEditorSideMenu.tsx
+1 -2
View File
@@ -44,8 +44,7 @@ const StyledDragHandleContainer = styled.div`
background: ${({ theme }) => theme.background.transparent.secondary};
backdrop-filter: ${({ theme }) => theme.blur.medium};
color: ${({ theme }) => theme.font.color.primary};
box-shadow:
${({ theme }) => theme.boxShadow.light},
box-shadow: ${({ theme }) => theme.boxShadow.light},
${({ theme }) => theme.boxShadow.strong};
}
packages/twenty-front/src/modules/page-layout/widgets/widget-card/components/WidgetCard.tsx
+2 -4
View File
@@ -67,8 +67,7 @@ const StyledWidgetCard = styled.div<{
${isDragging &&
css`
background:
linear-gradient(
background: linear-gradient(
0deg,
${theme.background.transparent.lighter} 0%,
${theme.background.transparent.lighter} 100%
@@ -120,8 +119,7 @@ const StyledWidgetCard = styled.div<{
${isDragging &&
css`
background:
linear-gradient(
background: linear-gradient(
0deg,
${theme.background.transparent.lighter} 0%,
${theme.background.transparent.lighter} 100%
packages/twenty-front/src/modules/settings/components/__stories__/SettingsMorphRelationMultiSelect.stories.tsx
-2
View File
@@ -34,6 +34,4 @@ export const Default: Story = {
hasRightElement: false,
onChange: fn(),
},
decorators: [ObjectMetadataItemsDecorator],
};
packages/twenty-front/src/modules/settings/constants/SettingsObjectModel.ts
+2 -1
View File
@@ -1 +1,2 @@
export const SETTINGS_OBJECT_MODEL_IS_LABEL_SYNCED_WITH_NAME_LABEL_DEFAULT_VALUE = true;
export const SETTINGS_OBJECT_MODEL_IS_LABEL_SYNCED_WITH_NAME_LABEL_DEFAULT_VALUE =
true;
packages/twenty-front/src/modules/settings/data-model/objects/components/__stories__/SettingsObjectInactiveMenuDropDown.stories.tsx
+6 -6
View File
@@ -39,8 +39,8 @@ type Story = StoryObj<typeof SettingsObjectInactiveMenuDropDown>;
export const Default: Story = {};
export const Open: Story = {
play: async () => {
const canvas = within(document.body);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement.ownerDocument.body);
const dropdownButton = await canvas.findByRole('button', {
name: 'Inactive Object Options',
@@ -51,8 +51,8 @@ export const Open: Story = {
};
export const WithActivate: Story = {
play: async () => {
const canvas = within(document.body);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement.ownerDocument.body);
const dropdownButton = await canvas.findByRole('button', {
name: 'Inactive Object Options',
@@ -74,8 +74,8 @@ export const WithActivate: Story = {
export const WithDelete: Story = {
args: { isCustomObject: true },
play: async () => {
const canvas = within(document.body);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement.ownerDocument.body);
const dropdownButton = await canvas.findByRole('button', {
name: 'Inactive Object Options',
packages/twenty-front/src/modules/ui/input/components/__stories__/IconPicker.stories.tsx
+18 -16
View File
@@ -1,5 +1,5 @@
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { useArgs } from 'storybook/preview-api';
import { useState } from 'react';
import { expect, userEvent, within } from 'storybook/test';
import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
@@ -11,16 +11,17 @@ import {
} from '@/ui/input/components/IconPicker';
import { ComponentDecorator } from 'twenty-ui/testing';
type RenderProps = IconPickerProps;
const Render = (args: RenderProps) => {
const [{ selectedIconKey }, updateArgs] = useArgs();
type IconPickerStoryProps = IconPickerProps;
const IconPickerStory = (args: IconPickerStoryProps) => {
const [selectedIconKey, setSelectedIconKey] = useState(args.selectedIconKey);
return (
<IconPicker
// eslint-disable-next-line react/jsx-props-no-spreading
{...args}
onChange={({ iconKey }) => {
updateArgs({ selectedIconKey: iconKey });
setSelectedIconKey(iconKey);
}}
selectedIconKey={selectedIconKey}
/>
@@ -31,7 +32,10 @@ const meta: Meta<typeof IconPicker> = {
title: 'UI/Input/IconPicker/IconPicker',
component: IconPicker,
decorators: [IconsProviderDecorator, ComponentDecorator],
render: Render,
render: (args: IconPickerProps) => (
// eslint-disable-next-line react/jsx-props-no-spreading
<IconPickerStory key={args.selectedIconKey ?? 'no-selection'} {...args} />
),
};
export default meta;
@@ -40,8 +44,8 @@ type Story = StoryObj<typeof IconPicker>;
export const Default: Story = {};
export const WithOpen: Story = {
play: async () => {
const canvas = within(document.body);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement.ownerDocument.body);
const iconPickerButton = await canvas.findByRole('button', {
name: 'Click to select icon (no icon selected)',
@@ -57,8 +61,8 @@ export const WithSelectedIcon: Story = {
export const WithOpenAndSelectedIcon: Story = {
...WithSelectedIcon,
play: async () => {
const canvas = within(document.body);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement.ownerDocument.body);
const iconPickerButton = await canvas.findByRole('button', {
name: 'Click to select icon (selected: IconCalendarEvent)',
@@ -70,8 +74,8 @@ export const WithOpenAndSelectedIcon: Story = {
export const WithSearch: Story = {
...WithSelectedIcon,
play: async () => {
const canvas = within(document.body);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement.ownerDocument.body);
const iconPickerButton = await canvas.findByRole('button', {
name: 'Click to select icon (selected: IconCalendarEvent)',
@@ -95,8 +99,8 @@ export const WithSearch: Story = {
export const WithSearchAndClose: Story = {
...WithSelectedIcon,
play: async () => {
const canvas = within(document.body);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement.ownerDocument.body);
let iconPickerButton = await canvas.findByRole('button', {
name: 'Click to select icon (selected: IconCalendarEvent)',
@@ -128,8 +132,6 @@ export const WithSearchAndClose: Story = {
await userEvent.click(iconPickerButton);
await sleep(500);
searchInput = await canvas.findByRole('textbox');
expect(searchInput).toHaveValue('');
packages/twenty-front/src/modules/ui/input/components/__stories__/TextArea.stories.tsx
+2 -2
View File
@@ -41,8 +41,8 @@ export const Disabled: Story = {
export const WithLabel: Story = {
args: { label: 'My Textarea' },
play: async () => {
const canvas = within(document.body);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const label = await canvas.findByText('My Textarea');
packages/twenty-front/src/modules/ui/input/components/internal/date/components/__stories__/InternalDatePicker.stories.tsx
+33 -33
View File
@@ -1,33 +1,31 @@
import { DateTimePicker } from '@/ui/input/components/internal/date/components/DateTimePicker';
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { useArgs } from 'storybook/preview-api';
import { useState } from 'react';
import { expect, userEvent, within } from 'storybook/test';
import { Temporal } from 'temporal-polyfill';
import { ComponentDecorator } from 'twenty-ui/testing';
const INITIAL_DATE = Temporal.ZonedDateTime.from(
'2023-01-01T02:00:00+00:00[UTC]',
);
const DateTimePickerStory = () => {
const [date, setDate] = useState<Temporal.ZonedDateTime | null>(INITIAL_DATE);
return (
<DateTimePicker
instanceId="story-date-time-picker"
date={date}
onChange={setDate}
/>
);
};
const meta: Meta<typeof DateTimePicker> = {
title: 'UI/Input/Internal/InternalDatePicker',
component: DateTimePicker,
decorators: [ComponentDecorator],
argTypes: {
date: { control: 'date' },
},
render: ({ date }) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const [, updateArgs] = useArgs();
return (
<DateTimePicker
instanceId="story-date-time-picker"
date={date}
onChange={(newDate) => updateArgs({ date: newDate })}
/>
);
},
args: {
date: Temporal.Instant.from('2023-01-01T02:00:00Z').toZonedDateTimeISO(
'UTC',
),
},
render: () => <DateTimePickerStory />,
};
export default meta;
@@ -36,14 +34,15 @@ type Story = StoryObj<typeof DateTimePicker>;
export const Default: Story = {};
export const WithOpenMonthSelect: Story = {
play: async () => {
const canvas = within(document.body);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const body = within(canvasElement.ownerDocument.body);
const monthSelect = await canvas.findByText('January');
await userEvent.click(monthSelect);
[
for (const monthLabel of [
'February',
'March',
'April',
@@ -55,29 +54,30 @@ export const WithOpenMonthSelect: Story = {
'October',
'November',
'December',
].forEach(async (monthLabel) =>
expect(await canvas.findByText(monthLabel)).toBeInTheDocument(),
);
]) {
expect(await body.findByText(monthLabel)).toBeInTheDocument();
}
await userEvent.click(await canvas.findByText('February'));
await userEvent.click(await body.findByText('February'));
expect(await canvas.findByText('February')).toBeInTheDocument();
},
};
export const WithOpenYearSelect: Story = {
play: async () => {
const canvas = within(document.body);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const body = within(canvasElement.ownerDocument.body);
const yearSelect = await canvas.findByText('2023');
await userEvent.click(yearSelect);
['2024', '2025', '2026'].forEach(async (yearLabel) =>
expect(await canvas.findByText(yearLabel)).toBeInTheDocument(),
);
for (const yearLabel of ['2024', '2025', '2026']) {
expect(await body.findByText(yearLabel)).toBeInTheDocument();
}
await userEvent.click(await canvas.findByText('2024'));
await userEvent.click(await body.findByText('2024'));
expect(await canvas.findByText('2024')).toBeInTheDocument();
},
packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/Dropdown.stories.tsx
+6 -6
View File
@@ -91,8 +91,8 @@ export const Empty: Story = {
</DropdownContent>
),
},
play: async () => {
const canvas = within(document.body);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement.ownerDocument.body);
const buttons = await canvas.findAllByRole('button');
await userEvent.click(buttons[0]);
@@ -222,8 +222,8 @@ const optionsMock = [
// );
// };
const playInteraction: PlayFunction<any, any> = async () => {
const canvas = within(document.body);
const playInteraction: PlayFunction<any, any> = async ({ canvasElement }) => {
const canvas = within(canvasElement.ownerDocument.body);
const buttons = await canvas.findAllByRole('button');
await userEvent.click(buttons[0]);
@@ -279,8 +279,8 @@ export const SearchWithLoadingMenu: Story = {
</DropdownContent>
),
},
play: async () => {
const canvas = within(document.body);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement.ownerDocument.body);
const buttons = await canvas.findAllByRole('button');
packages/twenty-front/src/modules/ui/layout/modal/components/__stories__/ConfirmationModal.stories.tsx
+10 -10
View File
@@ -75,8 +75,8 @@ export const CloseOnEscape: Story = {
confirmButtonText: 'Confirm',
onClose: closeMock,
},
play: async () => {
const body = within(document.body);
play: async ({ canvasElement }) => {
const body = within(canvasElement.ownerDocument.body);
await body.findByText('Escape Key Test');
@@ -98,8 +98,8 @@ export const CloseOnClickOutside: Story = {
confirmButtonText: 'Confirm',
onClose: closeMock,
},
play: async () => {
const body = within(document.body);
play: async ({ canvasElement }) => {
const body = within(canvasElement.ownerDocument.body);
await body.findByText('Click Outside Test');
@@ -124,8 +124,8 @@ export const ConfirmWithEnterKey: Story = {
confirmButtonText: 'Confirm',
onConfirmClick: confirmMock,
},
play: async () => {
const body = within(document.body);
play: async ({ canvasElement }) => {
const body = within(canvasElement.ownerDocument.body);
await body.findByText('Enter Key Test');
@@ -145,8 +145,8 @@ export const CancelButtonClick: Story = {
confirmButtonText: 'Confirm',
onClose: closeMock,
},
play: async () => {
const body = within(document.body);
play: async ({ canvasElement }) => {
const body = within(canvasElement.ownerDocument.body);
await body.findByText('Cancel Button Test');
@@ -169,8 +169,8 @@ export const ConfirmButtonClick: Story = {
confirmButtonText: 'Confirm',
onConfirmClick: confirmMock,
},
play: async () => {
const body = within(document.body);
play: async ({ canvasElement }) => {
const body = within(canvasElement.ownerDocument.body);
await body.findByText('Confirm Button Test');
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx
+4 -4
View File
@@ -121,8 +121,8 @@ export const Default: Story = {
</>
),
},
play: async () => {
const canvas = within(document.body);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
expect(await canvas.findByText('Workspace')).toBeInTheDocument();
},
@@ -200,8 +200,8 @@ export const Settings: Story = {
</>
),
},
play: async () => {
const canvas = within(document.body);
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
expect(await canvas.findByText('User')).toBeInTheDocument();
},
packages/twenty-front/src/modules/views/components/__stories__/ViewBarFilterDropdown.stories.tsx
+17 -21
View File
@@ -1,6 +1,5 @@
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { type TaskGroups } from '@/activities/tasks/components/TaskGroups';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -19,11 +18,8 @@ import { useRecordIndexFieldMetadataDerivedStates } from '@/object-record/record
import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds';
import { coreViewsState } from '@/views/states/coreViewState';
import { useSetRecoilState } from 'recoil';
import { within } from 'storybook/test';
import {
ComponentDecorator,
getCanvasElementForDropdownTesting,
} from 'twenty-ui/testing';
import { userEvent, within } from 'storybook/test';
import { ComponentDecorator } from 'twenty-ui/testing';
import { ContextStoreDecorator } from '~/testing/decorators/ContextStoreDecorator';
import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
@@ -128,54 +124,54 @@ const meta: Meta<typeof ViewBarFilterDropdown> = {
};
export default meta;
type Story = StoryObj<typeof TaskGroups>;
type Story = StoryObj<typeof ViewBarFilterDropdown>;
export const Default: Story = {
play: async () => {
const canvas = within(getCanvasElementForDropdownTesting());
play: async ({ canvasElement }) => {
const canvas = within(canvasElement.ownerDocument.body);
const filterButton = await canvas.findByText('Filter');
filterButton.click();
await userEvent.click(filterButton);
const textFilter = await canvas.findByText('Tagline');
textFilter.click();
await userEvent.click(textFilter);
const operatorDropdown = await canvas.findByText('Contains');
operatorDropdown.click();
await userEvent.click(operatorDropdown);
const containsOption = await canvas.findByText("Doesn't contain");
containsOption.click();
await userEvent.click(containsOption);
},
};
export const Date: Story = {
play: async () => {
const canvas = within(getCanvasElementForDropdownTesting());
play: async ({ canvasElement }) => {
const canvas = within(canvasElement.ownerDocument.body);
const filterButton = await canvas.findByText('Filter');
filterButton.click();
await userEvent.click(filterButton);
const dateFilter = await canvas.findByText('Last update');
dateFilter.click();
await userEvent.click(dateFilter);
},
};
export const Number: Story = {
play: async () => {
const canvas = within(getCanvasElementForDropdownTesting());
play: async ({ canvasElement }) => {
const canvas = within(canvasElement.ownerDocument.body);
const filterButton = await canvas.findByText('Filter');
filterButton.click();
await userEvent.click(filterButton);
const dateFilter = await canvas.findByText('Employees');
dateFilter.click();
await userEvent.click(dateFilter);
},
};
packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeContainer.tsx
+1 -2
View File
@@ -36,8 +36,7 @@ const StyledNodeContainer = styled.div<{
: colors.unselected.borderColor};
&:hover {
background:
linear-gradient(
background: linear-gradient(
0deg,
${theme.background.transparent.lighter} 0%,
${theme.background.transparent.lighter} 100%
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/__stories__/WorkflowEditActionCreateRecord.stories.tsx
+2 -1
View File
@@ -1,7 +1,7 @@
import { WorkflowEditActionCreateRecord } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionCreateRecord';
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { expect, fn, userEvent, within } from 'storybook/test';
import { ComponentDecorator } from 'twenty-ui/testing';
import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { WorkflowStepActionDrawerDecorator } from '~/testing/decorators/WorkflowStepActionDrawerDecorator';
@@ -43,6 +43,7 @@ const meta: Meta<typeof WorkflowEditActionCreateRecord> = {
WorkflowStepActionDrawerDecorator,
WorkflowStepDecorator,
ComponentDecorator,
RouterDecorator,
ObjectMetadataItemsDecorator,
SnackBarDecorator,
WorkspaceDecorator,
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/filter-action/components/__stories__/WorkflowEditActionFilter.stories.tsx
+2 -1
View File
@@ -3,7 +3,7 @@ import { WorkflowEditActionFilter } from '@/workflow/workflow-steps/workflow-act
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { fn } from 'storybook/test';
import { StepLogicalOperator, ViewFilterOperand } from 'twenty-shared/types';
import { ComponentDecorator } from 'twenty-ui/testing';
import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
import { WorkflowStepActionDrawerDecorator } from '~/testing/decorators/WorkflowStepActionDrawerDecorator';
import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorator';
import { WorkspaceDecorator } from '~/testing/decorators/WorkspaceDecorator';
@@ -85,6 +85,7 @@ const meta: Meta<typeof WorkflowEditActionFilter> = {
WorkflowStepActionDrawerDecorator,
WorkflowStepDecorator,
ComponentDecorator,
RouterDecorator,
WorkspaceDecorator,
],
};
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/__stories__/WorkflowEditActionFormFiller.stories.tsx
+1 -1
View File
@@ -192,7 +192,7 @@ export const ReadonlyMode: Story = {
// await waitFor(() => {
// expect(
// within(getCanvasElementForDropdownTesting()).getByText('Louis Duss'),
// within(document.body).getByText('Louis Duss'),
// ).toBeVisible();
// });