diff --git a/packages/twenty-front/.storybook/manager-head.html b/packages/twenty-front/.storybook/manager-head.html index 0be4849fc..347c19b21 100644 --- a/packages/twenty-front/.storybook/manager-head.html +++ b/packages/twenty-front/.storybook/manager-head.html @@ -2,4 +2,7 @@ [data-is-storybook="true"] { background-color: transparent!important; } - \ No newline at end of file + :has(#storybook-panel-root) { + z-index: 100; + } + diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormRawJsonFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormRawJsonFieldInput.stories.tsx index aac0d2b69..70bd7fd5f 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormRawJsonFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/__stories__/FormRawJsonFieldInput.stories.tsx @@ -87,6 +87,7 @@ export const DisplayDefaultValueWithVariablesProperly: Story = { args: { placeholder: 'Enter valid json', defaultValue: '{ "a": { "b" : {{var.test}} } }', + onPersist: fn(), }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); @@ -120,6 +121,7 @@ export const InsertVariableInTheMiddleOnTextInput: Story = { ); }, + onPersist: fn(), }, play: async ({ canvasElement, args }) => { const canvas = within(canvasElement); @@ -161,6 +163,7 @@ export const CanUseVariableAsObjectProperty: Story = { ); }, + onPersist: fn(), }, play: async ({ canvasElement, args }) => { const canvas = within(canvasElement); @@ -188,6 +191,7 @@ export const ClearField: Story = { args: { placeholder: 'Enter valid json', defaultValue: '{ "a": 2 }', + onPersist: fn(), }, play: async ({ canvasElement, args }) => { const defaultValueStringLength = args.defaultValue!.length; diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/components/__stories__/SettingsObjectInactiveMenuDropDown.stories.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/components/__stories__/SettingsObjectInactiveMenuDropDown.stories.tsx index 9ca74cfbd..bbde8a9f2 100644 --- a/packages/twenty-front/src/modules/settings/data-model/objects/components/__stories__/SettingsObjectInactiveMenuDropDown.stories.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/objects/components/__stories__/SettingsObjectInactiveMenuDropDown.stories.tsx @@ -38,7 +38,9 @@ export const Open: Story = { play: async () => { const canvas = within(document.body); - const dropdownButton = await canvas.getByRole('button'); + const dropdownButton = await canvas.findByRole('button', { + name: 'Inactive Object Options', + }); await userEvent.click(dropdownButton); }, @@ -48,7 +50,9 @@ export const WithActivate: Story = { play: async () => { const canvas = within(document.body); - const dropdownButton = await canvas.getByRole('button'); + const dropdownButton = await canvas.findByRole('button', { + name: 'Inactive Object Options', + }); await userEvent.click(dropdownButton); @@ -69,7 +73,9 @@ export const WithDelete: Story = { play: async () => { const canvas = within(document.body); - const dropdownButton = await canvas.getByRole('button'); + const dropdownButton = await canvas.findByRole('button', { + name: 'Inactive Object Options', + }); await userEvent.click(dropdownButton); diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx index 142608390..a654d10aa 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx @@ -82,22 +82,24 @@ export const Empty: Story = { play: async () => { const canvas = within(document.body); - const button = await canvas.findByRole('button'); - userEvent.click(button); + const buttons = await canvas.findAllByRole('button', { + name: 'Open Dropdown', + }); + userEvent.click(buttons[0]); await waitFor(async () => { const fakeMenu = await canvas.findByTestId('dropdown-content'); expect(fakeMenu).toBeInTheDocument(); }); - userEvent.click(button); + userEvent.click(buttons[0]); await waitFor(async () => { const fakeMenu = canvas.queryByTestId('dropdown-content'); expect(fakeMenu).not.toBeInTheDocument(); }); - userEvent.click(button); + userEvent.click(buttons[0]); await waitFor(async () => { const fakeMenu = await canvas.findByTestId('dropdown-content'); expect(fakeMenu).toBeInTheDocument(); @@ -205,8 +207,8 @@ const FakeCheckableMenuItemList = ({ hasAvatar }: { hasAvatar?: boolean }) => { const playInteraction: PlayFunction = async () => { const canvas = within(document.body); - const button = await canvas.findByRole('button'); - userEvent.click(button); + const buttons = await canvas.findAllByRole('button'); + userEvent.click(buttons[0]); await waitFor(async () => { expect(canvas.getByText('Company A')).toBeInTheDocument(); @@ -257,15 +259,15 @@ export const SearchWithLoadingMenu: Story = { play: async () => { const canvas = within(document.body); - const button = await canvas.findByRole('button'); + const buttons = await canvas.findAllByRole('button'); await waitFor(() => { - userEvent.click(button); + userEvent.click(buttons[0]); expect(canvas.getByDisplayValue('query')).toBeInTheDocument(); }); await waitFor(() => { - userEvent.click(button); + userEvent.click(buttons[0]); expect(canvas.queryByDisplayValue('query')).not.toBeInTheDocument(); }); }, diff --git a/packages/twenty-front/src/testing/decorators/RecordTableDecorator.tsx b/packages/twenty-front/src/testing/decorators/RecordTableDecorator.tsx index d7e05bd05..c634c91ec 100644 --- a/packages/twenty-front/src/testing/decorators/RecordTableDecorator.tsx +++ b/packages/twenty-front/src/testing/decorators/RecordTableDecorator.tsx @@ -2,6 +2,7 @@ import { Decorator } from '@storybook/react'; import { useRecoilValue } from 'recoil'; import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; +import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext'; import { RecordTableBodyContextProvider } from '@/object-record/record-table/contexts/RecordTableBodyContext'; import { RecordTableContextProvider } from '@/object-record/record-table/contexts/RecordTableContext'; import { isDefined } from 'twenty-ui'; @@ -18,28 +19,39 @@ export const RecordTableDecorator: Decorator = (Story) => { } return ( - '', + onIndexRecordsLoaded: () => {}, + objectNamePlural: personObjectMetadataItem.namePlural, objectNameSingular: personObjectMetadataItem.nameSingular, objectMetadataItem: personObjectMetadataItem, - recordTableId: 'persons', - viewBarId: 'view-bar', - visibleTableColumns: [], + recordIndexId: 'record-index', }} > - {}, - onCloseTableCell: () => {}, - onOpenTableCell: () => {}, - onActionMenuDropdownOpened: () => {}, - onMoveFocus: () => {}, - onMoveSoftFocusToCell: () => {}, - onUpsertRecord: () => {}, + objectNameSingular: personObjectMetadataItem.nameSingular, + objectMetadataItem: personObjectMetadataItem, + recordTableId: 'persons', + viewBarId: 'view-bar', + visibleTableColumns: [], }} > - - - + {}, + onCloseTableCell: () => {}, + onOpenTableCell: () => {}, + onActionMenuDropdownOpened: () => {}, + onMoveFocus: () => {}, + onMoveSoftFocusToCell: () => {}, + onUpsertRecord: () => {}, + }} + > + + + + ); };