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

packages/twenty-front/src/modules/views/components/__stories__/ViewBarFilterDropdown.stories.tsx

@@ -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);
   },
 };