fix: fix Pages Storybook tests (#2305)

* fix: fix Companies pages tests

* fix: fix People pages tests

* fix: fix Opportunities page tests

front/src/pages/people/__stories__/People.add.stories.tsx

@@ -8,6 +8,7 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedPeopleData } from '~/testing/mock-data/people';
 import { sleep } from '~/testing/sleep';
 
 import { People } from '../People';
@@ -27,26 +28,35 @@ const meta: Meta<PageDecoratorArgs> = {
 export default meta;
 
 export const AddNewPerson: 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(
+        mockedPeopleData[0].displayName,
+        {},
+        { 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/people/__stories__/People.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 { mockedPeopleData } from '~/testing/mock-data/people';
 import { sleep } from '~/testing/sleep';
 
 import { People } from '../People';
@@ -28,75 +28,86 @@ const meta: Meta<PageDecoratorArgs> = {
 export default meta;
 
 export const Email: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
-    const filterButton = await canvas.findByText('Filter');
-    await userEvent.click(filterButton);
-
-    const emailFilterButton = await canvas.findByTestId('select-filter-2');
-
-    assert(emailFilterButton);
-
-    await userEvent.click(emailFilterButton);
-
-    const emailInput = canvas.getByPlaceholderText('Email');
-
-    await userEvent.type(emailInput, 'al', {
-      delay: 200,
+    await step('Wait for rows to appear', async () => {
+      await canvas.findByText(
+        mockedPeopleData[0].displayName,
+        {},
+        { timeout: 3000 },
+      );
     });
 
-    await sleep(100);
-
-    expect(await canvas.findByText('Alexandre Prot')).toBeInTheDocument();
-    await expect(canvas.queryAllByText('John Doe')).toStrictEqual([]);
-
-    const emailFilter = canvas.getAllByText('Email').find((item) => {
-      return item.parentElement?.textContent?.includes('Email:  al');
+    await step('Click on filter button', async () => {
+      const filterButton = canvas.getByText('Filter');
+      await userEvent.click(filterButton);
+    });
+
+    await step('Select email filter', async () => {
+      const emailFilterButton = canvas.getByTestId('select-filter-2');
+      await userEvent.click(emailFilterButton);
+
+      const emailInput = canvas.getByPlaceholderText('Email');
+      await userEvent.type(emailInput, 'al', { delay: 200 });
+
+      const emailFilter = canvas.getAllByText(
+        (_, element) => !!element?.textContent?.includes('Email:  al'),
+      );
+      expect(emailFilter).not.toHaveLength(0);
+    });
+
+    await sleep(1000);
+
+    await step('Check filtered rows', async () => {
+      expect(canvas.getByText('Alexandre Prot')).toBeVisible();
+      expect(canvas.queryByText('John Doe')).toBeNull();
     });
-    expect(emailFilter).toBeInTheDocument();
   },
 };
 
 export const CompanyName: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
-    const filterButton = await canvas.findByText('Filter');
-    await userEvent.click(filterButton);
-
-    const companyFilterButton = await canvas.findByTestId('select-filter-3');
-
-    assert(companyFilterButton);
-
-    await userEvent.click(companyFilterButton);
-
-    const companyNameInput = canvas.getByPlaceholderText('Company');
-    await userEvent.type(companyNameInput, 'Qon', {
-      delay: 200,
+    await step('Wait for rows to appear', async () => {
+      await canvas.findByText(
+        mockedPeopleData[0].displayName,
+        {},
+        { timeout: 3000 },
+      );
     });
 
-    await sleep(500);
-
-    const qontoChip = (await canvas.findAllByTestId('menu-item')).find(
-      (item) => {
-        return item.textContent?.includes('Qonto');
-      },
-    );
-
-    expect(qontoChip).toBeInTheDocument();
-
-    assert(qontoChip);
-
-    await userEvent.click(qontoChip);
-
-    // TODO: fix msw where clauses
-    // expect(await canvas.findByText('Alexandre Prot')).toBeInTheDocument();
-    // await expect(canvas.queryAllByText('John Doe')).toStrictEqual([]);
-
-    const companyFilter = canvas.getAllByText('Company').find((item) => {
-      return item.parentElement?.textContent?.includes('Company:  Qonto');
+    await step('Click on filter button', async () => {
+      const filterButton = canvas.getByText('Filter');
+      await userEvent.click(filterButton);
+    });
+
+    await step('Select company filter', async () => {
+      const companyFilterButton = canvas.getByTestId('select-filter-3');
+      await userEvent.click(companyFilterButton);
+
+      const companyNameInput = canvas.getByPlaceholderText('Company');
+      await userEvent.type(companyNameInput, 'Qon', { delay: 200 });
+
+      const qontoChip = await canvas.findByRole(
+        'listitem',
+        { name: (_, element) => !!element?.textContent?.includes('Qonto') },
+        { timeout: 1000 },
+      );
+      await userEvent.click(qontoChip);
+
+      const companyFilter = canvas.getAllByText(
+        (_, element) => !!element?.textContent?.includes('Company:  Qonto'),
+      );
+      expect(companyFilter).not.toHaveLength(0);
+    });
+
+    await sleep(1000);
+
+    await step('Check filtered rows', async () => {
+      expect(canvas.getByText('Alexandre Prot')).toBeVisible();
+      expect(canvas.queryByText('John Doe')).toBeNull();
     });
-    expect(companyFilter).toBeInTheDocument();
   },
 };

front/src/pages/people/__stories__/People.inputs.stories.tsx

@@ -1,21 +1,14 @@
-import { getOperationName } from '@apollo/client/utilities';
-import { isString } from '@sniptt/guards';
 import { expect } from '@storybook/jest';
 import { Meta } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
-import { graphql } from 'msw';
+import assert from 'assert';
 
-import { UPDATE_ONE_PERSON } from '@/people/graphql/mutations/updateOnePerson';
-import { SEARCH_COMPANY_QUERY } from '@/search/graphql/queries/searchCompanyQuery';
 import { AppPath } from '@/types/AppPath';
-import { Company } from '~/generated/graphql';
 import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { fetchOneFromData } from '~/testing/mock-data';
-import { mockedCompaniesData } from '~/testing/mock-data/companies';
 import { mockedPeopleData } from '~/testing/mock-data/people';
 import { sleep } from '~/testing/sleep';
 
@@ -41,29 +34,23 @@ export const InteractWithManyRows: Story = {
 
     const firstRowEmailCell = await canvas.findByText(
       mockedPeopleData[0].email,
+      {},
+      { timeout: 3000 },
     );
+    assert(firstRowEmailCell.parentElement);
 
-    const secondRowEmailCell = await canvas.findByText(
-      mockedPeopleData[1].email,
-    );
+    const secondRowEmailCell = canvas.getByText(mockedPeopleData[1].email);
+    assert(secondRowEmailCell.parentElement);
 
     expect(
       canvas.queryByTestId('editable-cell-edit-mode-container'),
     ).toBeNull();
 
-    if (!firstRowEmailCell.parentElement) {
-      throw new Error('No parent node');
-    }
-
     await userEvent.click(firstRowEmailCell.parentElement);
 
     expect(
-      canvas.queryByTestId('editable-cell-edit-mode-container'),
-    ).toBeInTheDocument();
-
-    if (!secondRowEmailCell.parentElement) {
-      throw new Error('No parent node');
-    }
+      canvas.getByTestId('editable-cell-edit-mode-container'),
+    ).toBeVisible();
 
     await userEvent.click(secondRowEmailCell.parentElement);
 
@@ -75,220 +62,138 @@ export const InteractWithManyRows: Story = {
 
     await userEvent.click(secondRowEmailCell.parentElement);
 
-    await sleep(25);
-
     expect(
-      canvas.queryByTestId('editable-cell-edit-mode-container'),
-    ).toBeInTheDocument();
+      canvas.getByTestId('editable-cell-edit-mode-container'),
+    ).toBeVisible();
   },
 };
 
 export const CheckCheckboxes: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
-    await canvas.findByText(mockedPeopleData[0].email);
+    await step('Wait for rows to appear', async () => {
+      await canvas.findByText(
+        mockedPeopleData[0].displayName,
+        {},
+        { timeout: 3000 },
+      );
+    });
 
-    const inputCheckboxContainers = await canvas.findAllByTestId(
-      'input-checkbox',
-    );
+    const [, firstRowCheckbox, secondRowCheckbox] =
+      canvas.getAllByRole<HTMLInputElement>('checkbox');
 
-    const inputCheckboxes = await canvas.findAllByTestId('input-checkbox');
+    await step('Select first row', async () => {
+      assert(firstRowCheckbox.parentElement);
 
-    const secondCheckboxContainer = inputCheckboxContainers[1];
-    const secondCheckbox = inputCheckboxes[1] as HTMLInputElement;
+      await userEvent.click(firstRowCheckbox.parentElement);
+      await sleep(25);
 
-    expect(secondCheckboxContainer).toBeDefined();
+      expect(firstRowCheckbox).toBeChecked();
+    });
 
-    await userEvent.click(secondCheckboxContainer);
+    await step('Select second row', async () => {
+      await userEvent.click(secondRowCheckbox);
+      await sleep(25);
 
-    expect(secondCheckbox.checked).toBe(true);
+      expect(secondRowCheckbox).toBeChecked();
+    });
 
-    await userEvent.click(secondCheckbox);
+    await step('Unselect second row', async () => {
+      assert(secondRowCheckbox.parentElement);
 
-    expect(secondCheckbox.checked).toBe(false);
+      await userEvent.click(secondRowCheckbox.parentElement);
+      await sleep(25);
+
+      expect(secondRowCheckbox).not.toBeChecked();
+    });
   },
 };
 
-const editRelationMocks = (
-  initiallySelectedCompanyName: string,
-  searchCompanyNames: Array<string>,
-  updateSelectedCompany: Pick<Company, 'name' | 'domainName'>,
-) => [
-  ...graphqlMocks.filter((graphqlMock) => {
-    if (
-      isString(graphqlMock.info.operationName) &&
-      [
-        getOperationName(UPDATE_ONE_PERSON),
-        getOperationName(SEARCH_COMPANY_QUERY),
-      ].includes(graphqlMock.info.operationName)
-    ) {
-      return false;
-    }
-    return true;
-  }),
-  ...[
-    graphql.mutation(
-      getOperationName(UPDATE_ONE_PERSON) ?? '',
-      (req, res, ctx) => {
-        return res(
-          ctx.data({
-            updateOnePerson: {
-              ...fetchOneFromData(mockedPeopleData, req.variables.where.id),
-              ...{
-                company: {
-                  id: req.variables.where.id,
-                  name: updateSelectedCompany.name,
-                  domainName: updateSelectedCompany.domainName,
-                  __typename: 'Company',
-                },
-              },
-            },
-          }),
-        );
-      },
-    ),
-    graphql.query(
-      getOperationName(SEARCH_COMPANY_QUERY) ?? '',
-      (req, res, ctx) => {
-        if (!req.variables.where?.AND) {
-          // Selected company case
-          const searchResults = mockedCompaniesData.filter((company) =>
-            [initiallySelectedCompanyName].includes(company.name),
-          );
-          return res(
-            ctx.data({
-              searchResults: searchResults,
-            }),
-          );
-        }
-
-        if (
-          req.variables.where?.AND?.some(
-            (where: { id?: { in: Array<string> } }) => where.id?.in,
-          )
-        ) {
-          // Selected company case
-          const searchResults = mockedCompaniesData.filter((company) =>
-            [initiallySelectedCompanyName].includes(company.name),
-          );
-          return res(
-            ctx.data({
-              searchResults: searchResults,
-            }),
-          );
-        } else {
-          // Search case
-
-          const searchResults = mockedCompaniesData.filter((company) =>
-            searchCompanyNames.includes(company.name),
-          );
-          return res(
-            ctx.data({
-              searchResults: searchResults,
-            }),
-          );
-        }
-      },
-    ),
-  ],
-];
-
 export const EditRelation: Story = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
-    await step('Click on second row company cell', async () => {
-      const secondRowCompanyCell = await canvas.findByText(
+    await step('Click on third row company cell', async () => {
+      const thirdRowCompanyCell = await canvas.findByText(
         mockedPeopleData[2].company.name,
+        {},
+        { timeout: 3000 },
       );
 
-      await userEvent.click(
-        secondRowCompanyCell.parentNode?.parentNode?.parentNode
-          ?.parentElement as HTMLElement,
-      );
+      await userEvent.click(thirdRowCompanyCell);
     });
 
     await step('Type "Air" in relation picker', async () => {
-      const relationInput = await canvas.findByPlaceholderText('Search');
+      const relationSearchInput = canvas.getByPlaceholderText('Search');
 
-      await userEvent.type(relationInput, 'Air', {
-        delay: 200,
-      });
+      await userEvent.type(relationSearchInput, 'Air', { delay: 200 });
     });
 
     await step('Select "Airbnb"', async () => {
-      const airbnbChip = await canvas.findByText('Airbnb', {
-        selector: 'div',
+      const airbnbChip = await canvas.findByRole('listitem', {
+        name: (_, element) => !!element?.textContent?.includes('Airbnb'),
       });
 
       await userEvent.click(airbnbChip);
     });
 
-    await step('Check if Airbnb is in second row company cell', async () => {
-      await canvas.findByText('Airbnb');
+    await step('Check if Airbnb is in the table', async () => {
+      expect(
+        await canvas.findByText('Airbnb', {}, { timeout: 3000 }),
+      ).toBeVisible();
     });
   },
-  parameters: {
-    msw: editRelationMocks('Qonto', ['Airbnb', 'Aircall'], {
-      name: 'Airbnb',
-      domainName: 'airbnb.com',
-    }),
-  },
 };
 
 export const SelectRelationWithKeys: Story = {
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
-    let firstRowCompanyCell = await canvas.findByText(
-      mockedPeopleData[0].company.name,
-    );
-    await sleep(25);
+    await step('Click on first row company cell', async () => {
+      const firstRowCompanyCell = await canvas.findByText(
+        mockedPeopleData[0].company.name,
+        {},
+        { timeout: 3000 },
+      );
 
-    await userEvent.click(
-      firstRowCompanyCell.parentNode?.parentNode?.parentNode
-        ?.parentElement as HTMLElement,
-    );
-    firstRowCompanyCell = await canvas.findByText(
-      mockedPeopleData[0].company.name,
-    );
-    await sleep(25);
-    await userEvent.click(firstRowCompanyCell);
-
-    const relationInput = await canvas.findByPlaceholderText('Search');
-
-    await userEvent.type(relationInput, 'Air', {
-      delay: 200,
+      await userEvent.click(firstRowCompanyCell);
     });
 
-    await userEvent.type(relationInput, '{arrowdown}');
+    const relationSearchInput = canvas.getByPlaceholderText('Search');
 
-    await sleep(50);
+    await step('Type "Air" in relation picker', async () => {
+      await userEvent.type(relationSearchInput, 'Air', { delay: 200 });
+    });
 
-    await userEvent.type(relationInput, '{arrowup}');
+    await step('Select "Aircall"', async () => {
+      await userEvent.keyboard('{arrowdown}');
 
-    await sleep(50);
+      await sleep(50);
 
-    await userEvent.type(relationInput, '{arrowdown}');
+      await userEvent.keyboard('{arrowup}');
 
-    await sleep(50);
+      await sleep(50);
 
-    await userEvent.type(relationInput, '{arrowdown}');
+      await userEvent.keyboard('{arrowdown}');
 
-    await sleep(50);
+      await sleep(50);
 
-    await userEvent.type(relationInput, '{enter}');
+      await userEvent.keyboard('{arrowdown}');
 
-    await sleep(200);
+      await sleep(50);
 
-    const allAirbns = await canvas.findAllByText('Aircall');
-    expect(allAirbns.length).toBe(1);
-  },
-  parameters: {
-    msw: editRelationMocks('Qonto', ['Airbnb', 'Aircall'], {
-      name: 'Aircall',
-      domainName: 'aircall.io',
-    }),
+      await userEvent.keyboard('{arrowdown}');
+
+      await sleep(50);
+
+      await userEvent.keyboard('{enter}');
+    });
+
+    await step('Check if Aircall is in the table', async () => {
+      expect(
+        await canvas.findByText('Aircall', {}, { timeout: 3000 }),
+      ).toBeVisible();
+    });
   },
 };

front/src/pages/people/__stories__/People.sortBy.stories.tsx

@@ -8,6 +8,7 @@ import {
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedPeopleData } from '~/testing/mock-data/people';
 import { sleep } from '~/testing/sleep';
 
 import { People } from '../People';
@@ -26,41 +27,98 @@ const meta: Meta<PageDecoratorArgs> = {
 
 export default meta;
 
+const peopleEmails = mockedPeopleData.map(({ email }) => email);
+const sortedPeopleEmails = peopleEmails.toSorted();
+
 export const Email: 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(
+        mockedPeopleData[0].displayName,
+        {},
+        { timeout: 3000 },
+      );
+    });
 
-    const emailSortButton = await canvas.findByTestId('select-sort-2');
-    await userEvent.click(emailSortButton);
+    await step('Click on sort button', async () => {
+      const sortButton = canvas.getByRole('button', { name: 'Sort' });
+      await userEvent.click(sortButton);
+    });
 
-    expect(await canvas.getByTestId('remove-icon-email')).toBeInTheDocument();
+    await step('Select sort by email', async () => {
+      const emailSortButton = canvas.getByTestId('select-sort-2');
+      await userEvent.click(emailSortButton);
 
-    expect(await canvas.findByText('Alexandre Prot')).toBeInTheDocument();
+      await canvas.findByTestId('remove-icon-email', {}, { timeout: 3000 });
+    });
+
+    await sleep(1000);
+
+    await step('Check rows are sorted by email', async () => {
+      const emailCells = canvas.getAllByText(
+        (_, element) =>
+          sortedPeopleEmails.some((email) =>
+            element?.textContent?.includes(email),
+          ),
+        { selector: '[data-testid="editable-cell-display-mode"]' },
+      );
+
+      expect(emailCells).toHaveLength(sortedPeopleEmails.length);
+
+      sortedPeopleEmails.forEach((email, index) =>
+        expect(emailCells[index]).toHaveTextContent(email),
+      );
+    });
   },
 };
 
 export const Reset: 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(
+        mockedPeopleData[0].displayName,
+        {},
+        { timeout: 3000 },
+      );
+    });
 
-    const emailSortButton = await canvas.findByTestId('select-sort-2');
-    await userEvent.click(emailSortButton);
+    await step('Click on sort button', async () => {
+      const sortButton = canvas.getByRole('button', { name: 'Sort' });
+      await userEvent.click(sortButton);
+    });
 
-    expect(await canvas.getByTestId('remove-icon-email')).toBeInTheDocument();
+    await step('Select sort by email', async () => {
+      const emailSortButton = canvas.getByTestId('select-sort-2');
+      await userEvent.click(emailSortButton);
 
-    const resetButton = canvas.getByText('Reset');
-    await userEvent.click(resetButton);
+      expect(
+        await canvas.findByTestId('remove-icon-email'),
+      ).toBeInTheDocument();
+    });
 
-    await sleep(1000);
+    await step('Click on reset button', async () => {
+      const resetButton = canvas.getByRole('button', { name: 'Reset' });
+      await userEvent.click(resetButton);
 
-    await expect(canvas.queryAllByTestId('remove-icon-email')).toStrictEqual(
-      [],
-    );
+      expect(canvas.queryByTestId('remove-icon-email')).toBeNull();
+    });
+
+    await step('Check rows are in initial order', async () => {
+      const emailCells = canvas.getAllByText(
+        (_, element) =>
+          peopleEmails.some((email) => element?.textContent?.includes(email)),
+        { selector: '[data-testid="editable-cell-display-mode"]' },
+      );
+
+      expect(emailCells).toHaveLength(peopleEmails.length);
+
+      peopleEmails.forEach((email, index) =>
+        expect(emailCells[index]).toHaveTextContent(email),
+      );
+    });
   },
 };