fix: fix Pages Storybook tests (#2305)

* fix: fix Companies pages tests

* fix: fix People pages tests

* fix: fix Opportunities page tests

front/src/pages/companies/__stories__/Companies.add.stories.tsx

@@ -8,6 +8,7 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedCompaniesData } from '~/testing/mock-data/companies';
 import { sleep } from '~/testing/sleep';
 
 import { Companies } from '../Companies';
@@ -27,26 +28,35 @@ const meta: Meta<PageDecoratorArgs> = {
 export default meta;
 
 export const AddNewCompany: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
-    await sleep(2000);
+    await step('Wait for rows to appear', async () => {
+      await canvas.findByText(
+        mockedCompaniesData[0].name,
+        {},
+        { timeout: 3000 },
+      );
+    });
 
     const rowsBeforeAdd = canvas.getAllByRole('row');
 
-    const addButton = canvas.getByRole('button', { name: 'Add' });
+    await step('Click on add button', async () => {
+      const addButton = canvas.getByRole('button', { name: 'Add' });
 
-    userEvent.click(addButton);
+      await userEvent.click(addButton);
+    });
 
     await sleep(1000);
 
-    const rowsAfterAdd = canvas.getAllByRole('row');
+    await step('Check an empty row has been added', async () => {
+      const rowsAfterAdd = canvas.getAllByRole('row');
 
-    const firstRow = rowsAfterAdd[1];
-    const cells = within(firstRow).getAllByRole('cell');
+      const firstRow = rowsAfterAdd[1];
+      const cells = within(firstRow).getAllByRole('cell');
 
-    expect(cells[1].textContent).toBe('');
-
-    expect(rowsAfterAdd).toHaveLength(rowsBeforeAdd.length + 1);
+      expect(cells[1].textContent).toBe('');
+      expect(rowsAfterAdd).toHaveLength(rowsBeforeAdd.length + 1);
+    });
   },
 };

front/src/pages/companies/__stories__/Companies.filterBy.stories.tsx

@@ -1,7 +1,6 @@
 import { expect } from '@storybook/jest';
 import { Meta } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
-import assert from 'assert';
 
 import { AppPath } from '@/types/AppPath';
 import {
@@ -9,6 +8,7 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedCompaniesData } from '~/testing/mock-data/companies';
 import { sleep } from '~/testing/sleep';
 
 import { Companies } from '../Companies';
@@ -28,81 +28,92 @@ const meta: Meta<PageDecoratorArgs> = {
 export default meta;
 
 export const FilterByName: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
-    const filterButton = await canvas.findByText('Filter');
-    await userEvent.click(filterButton);
-
-    const nameFilterButton = await canvas.findByTestId('select-filter-0');
-
-    assert(nameFilterButton);
-
-    await userEvent.click(nameFilterButton);
-
-    const nameInput = canvas.getByPlaceholderText('Name');
-    await userEvent.type(nameInput, 'Air', {
-      delay: 200,
+    await step('Wait for rows to appear', async () => {
+      await canvas.findByText(
+        mockedCompaniesData[0].name,
+        {},
+        { timeout: 3000 },
+      );
     });
 
-    await sleep(200);
-
-    expect(await canvas.findByText('Airbnb')).toBeInTheDocument();
-    expect(await canvas.findByText('Aircall')).toBeInTheDocument();
-    expect(await canvas.queryAllByText('Qonto')).toStrictEqual([]);
-
-    const nameFilter = canvas.getAllByText('Name').find((item) => {
-      return item.parentElement?.textContent?.includes('Name:  Air');
+    await step('Click on filter button', async () => {
+      const filterButton = canvas.getByText('Filter');
+      await userEvent.click(filterButton);
     });
-    expect(nameFilter).toBeInTheDocument();
-  },
-};
 
-export const FilterByAccountOwner: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
+    await step('Select name filter', async () => {
+      const nameFilterButton = canvas.getByTestId('select-filter-0');
+      await userEvent.click(nameFilterButton);
 
-    const filterButton = await canvas.findByText('Filter');
-    await userEvent.click(filterButton);
+      const nameInput = canvas.getByPlaceholderText('Name');
+      await userEvent.type(nameInput, 'Air', { delay: 200 });
 
-    const accountOwnerFilterButton = await canvas.findByTestId(
-      'select-filter-5',
-    );
-
-    assert(accountOwnerFilterButton);
-
-    await userEvent.click(accountOwnerFilterButton);
-
-    const accountOwnerNameInput = await canvas.findByPlaceholderText(
-      'Account owner',
-    );
-    await userEvent.type(accountOwnerNameInput, 'Char', {
-      delay: 200,
+      const nameFilter = canvas.getAllByText(
+        (_, element) => !!element?.textContent?.includes('Name:  Air'),
+      );
+      expect(nameFilter).not.toHaveLength(0);
     });
 
     await sleep(1000);
 
-    const charlesChip = (await canvas.findAllByTestId('menu-item')).find(
-      (item) => {
-        return item.textContent?.includes('Charles Test');
-      },
-    );
-
-    assert(charlesChip);
-
-    await userEvent.click(charlesChip);
-
-    // TODO: fix msw where clauses
-    // expect(await canvas.findByText('Airbnb')).toBeInTheDocument();
-    // await expect(canvas.queryAllByText('Qonto')).toStrictEqual([]);
-
-    const accountOwnerFilter = canvas
-      .getAllByText('Account owner')
-      .find((item) => {
-        return item.parentElement?.textContent?.includes(
-          'Account owner:  Charles Test',
-        );
-      });
-    expect(accountOwnerFilter).toBeInTheDocument();
+    await step('Check filtered rows', async () => {
+      expect(canvas.getByText('Airbnb')).toBeVisible();
+      expect(canvas.getByText('Aircall')).toBeVisible();
+      expect(canvas.queryByText('Qonto')).toBeNull();
+    });
+  },
+};
+
+export const FilterByAccountOwner: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Wait for rows to appear', async () => {
+      await canvas.findByText(
+        mockedCompaniesData[0].name,
+        {},
+        { timeout: 3000 },
+      );
+    });
+
+    await step('Click on filter button', async () => {
+      const filterButton = canvas.getByText('Filter');
+      await userEvent.click(filterButton);
+    });
+
+    await step('Select account owner filter', async () => {
+      const accountOwnerFilterButton = canvas.getByTestId('select-filter-5');
+      await userEvent.click(accountOwnerFilterButton);
+
+      const accountOwnerNameInput =
+        canvas.getByPlaceholderText('Account owner');
+      await userEvent.type(accountOwnerNameInput, 'Char', { delay: 200 });
+
+      const charlesChip = await canvas.findByRole(
+        'listitem',
+        {
+          name: (_, element) =>
+            !!element?.textContent?.includes('Charles Test'),
+        },
+        { timeout: 1000 },
+      );
+      await userEvent.click(charlesChip);
+
+      const accountOwnerFilter = canvas.getAllByText(
+        (_, element) =>
+          !!element?.textContent?.includes('Account owner:  Charles Test'),
+      );
+      expect(accountOwnerFilter).not.toHaveLength(0);
+    });
+
+    await sleep(1000);
+
+    await step('Check filtered rows', async () => {
+      expect(canvas.getByText('Airbnb')).toBeVisible();
+      expect(canvas.queryByText('Qonto')).toBeNull();
+    });
   },
 };

front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx

@@ -8,6 +8,8 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedCompaniesData } from '~/testing/mock-data/companies';
+import { sleep } from '~/testing/sleep';
 
 import { Companies } from '../Companies';
 
@@ -25,24 +27,50 @@ const meta: Meta<PageDecoratorArgs> = {
 
 export default meta;
 
+const sortedCompanyNames = mockedCompaniesData
+  .map(({ name }) => name)
+  .toSorted();
+
 export const SortByName: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
-    const sortButton = await canvas.findByText('Sort');
-    await userEvent.click(sortButton);
+    await step('Wait for rows to appear', async () => {
+      await canvas.findByText(
+        mockedCompaniesData[0].name,
+        {},
+        { timeout: 3000 },
+      );
+    });
 
-    const nameSortButton = await canvas.findByTestId('select-sort-0');
+    await step('Click on sort button', async () => {
+      const sortButton = canvas.getByRole('button', { name: 'Sort' });
+      await userEvent.click(sortButton);
+    });
 
-    await userEvent.click(nameSortButton);
+    await step('Select sort by name', async () => {
+      const nameSortButton = canvas.getByTestId('select-sort-0');
+      await userEvent.click(nameSortButton);
 
-    expect(await canvas.getByTestId('remove-icon-name')).toBeInTheDocument();
+      await canvas.findByTestId('remove-icon-name', {}, { timeout: 3000 });
+    });
 
-    expect(await canvas.findByText('Airbnb')).toBeInTheDocument();
+    await sleep(1000);
 
-    const resetButton = canvas.getByText('Reset');
-    await userEvent.click(resetButton);
+    await step('Check rows are sorted by name', async () => {
+      const nameCells = canvas.getAllByText(
+        (_, element) =>
+          sortedCompanyNames.some((name) =>
+            element?.textContent?.includes(name),
+          ),
+        { selector: '[data-testid="editable-cell-display-mode"]' },
+      );
 
-    await expect(canvas.queryAllByTestId('remove-icon-name')).toStrictEqual([]);
+      expect(nameCells).toHaveLength(sortedCompanyNames.length);
+
+      sortedCompanyNames.forEach((name, index) =>
+        expect(nameCells[index]).toHaveTextContent(name),
+      );
+    });
   },
 };

front/src/pages/companies/__stories__/Company.stories.tsx

@@ -10,6 +10,7 @@ import { GET_ACTIVITY } from '@/activities/graphql/queries/getActivity';
 import { UPDATE_ONE_COMPANY } from '@/companies/graphql/mutations/updateOneCompany';
 import { GET_COMPANY } from '@/companies/graphql/queries/getCompany';
 import { AppPath } from '@/types/AppPath';
+import { ObjectFilterDropdownScope } from '@/ui/object/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
 import {
   PageDecorator,
   PageDecoratorArgs,
@@ -176,6 +177,13 @@ export const NoteTab: Story = {
 };
 
 export const TaskTab: Story = {
+  decorators: [
+    (Story) => (
+      <ObjectFilterDropdownScope filterScopeId="tasks-filter-scope">
+        <Story />
+      </ObjectFilterDropdownScope>
+    ),
+  ],
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const taskTab = await canvas.findByTestId('tab-tasks');