Add tests on companies page (#155)

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

@@ -0,0 +1,74 @@
+import { expect } from '@storybook/jest';
+import type { Meta } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import Companies from '../Companies';
+import { Story } from './Companies.stories';
+import { mocks, render } from './shared';
+
+const meta: Meta<typeof Companies> = {
+  title: 'Pages/Companies',
+  component: Companies,
+};
+
+export default meta;
+
+export const FilterByName: Story = {
+  render,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const filterButton = canvas.getByText('Filter');
+    await userEvent.click(filterButton);
+
+    const nameFilterButton = canvas.getByText('Name', { selector: 'li' });
+    await userEvent.click(nameFilterButton);
+
+    const nameInput = canvas.getByPlaceholderText('Name');
+    await userEvent.type(nameInput, 'Air', {
+      delay: 200,
+    });
+
+    expect(await canvas.findByText('Airbnb')).toBeInTheDocument();
+    expect(await canvas.findByText('Aircall')).toBeInTheDocument();
+    await expect(canvas.queryAllByText('Qonto')).toStrictEqual([]);
+
+    expect(await canvas.findByText('Name:')).toBeInTheDocument();
+    expect(await canvas.findByText('Contains Air')).toBeInTheDocument();
+  },
+  parameters: {
+    msw: mocks,
+  },
+};
+
+export const FilterByAccountOwner: Story = {
+  render,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const filterButton = canvas.getByText('Filter');
+    await userEvent.click(filterButton);
+
+    const accountOwnerFilterButton = canvas.getByText('Account Owner', {
+      selector: 'li',
+    });
+    await userEvent.click(accountOwnerFilterButton);
+
+    const accountOwnerNameInput = canvas.getByPlaceholderText('Account Owner');
+    await userEvent.type(accountOwnerNameInput, 'Char', {
+      delay: 200,
+    });
+
+    const charlesChip = canvas.getByText('Charles Test', { selector: 'li' });
+    await userEvent.click(charlesChip);
+
+    expect(await canvas.findByText('Airbnb')).toBeInTheDocument();
+    await expect(canvas.queryAllByText('Qonto')).toStrictEqual([]);
+
+    expect(await canvas.findByText('Account Owner:')).toBeInTheDocument();
+    expect(await canvas.findByText('Is Charles Test')).toBeInTheDocument();
+  },
+  parameters: {
+    msw: mocks,
+  },
+};

front/src/pages/companies/__stories__/Companies.mdx

@@ -0,0 +1,11 @@
+{ /* Companies.mdx */ }
+
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as Companies from './Companies.stories';
+
+<Meta of={Companies} />
+
+# Companies View
+
+<Canvas of={Companies.Default} />

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

@@ -0,0 +1,45 @@
+import { expect } from '@storybook/jest';
+import type { Meta } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import Companies from '../Companies';
+import { Story } from './Companies.stories';
+import { mocks, render } from './shared';
+
+const meta: Meta<typeof Companies> = {
+  title: 'Pages/Companies',
+  component: Companies,
+};
+
+export default meta;
+
+export const SortByName: Story = {
+  render,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const sortButton = canvas.getByText('Sort');
+    await userEvent.click(sortButton);
+
+    const nameSortButton = canvas.getByText('Name', { selector: 'li' });
+    await userEvent.click(nameSortButton);
+
+    expect(await canvas.getByTestId('remove-icon-name')).toBeInTheDocument();
+
+    expect(await canvas.findByText('Airbnb')).toBeInTheDocument();
+
+    expect(
+      (await canvas.findAllByRole('checkbox')).map((item) => {
+        return item.getAttribute('id');
+      })[1],
+    ).toStrictEqual('company-selected-89bb825c-171e-4bcc-9cf7-43448d6fb278');
+
+    const cancelButton = canvas.getByText('Cancel');
+    await userEvent.click(cancelButton);
+
+    await expect(canvas.queryAllByTestId('remove-icon-name')).toStrictEqual([]);
+  },
+  parameters: {
+    msw: mocks,
+  },
+};

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Companies from '../Companies';
+
+import { render, mocks } from './shared';
+
+const meta: Meta<typeof Companies> = {
+  title: 'Pages/Companies',
+  component: Companies,
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof Companies>;
+
+export const Default: Story = {
+  render,
+  parameters: {
+    msw: mocks,
+  },
+};

front/src/pages/companies/__stories__/shared.tsx

@@ -0,0 +1,61 @@
+import { graphql } from 'msw';
+import { RecoilRoot } from 'recoil';
+import { ThemeProvider } from '@emotion/react';
+import { MemoryRouter } from 'react-router-dom';
+import { ApolloProvider } from '@apollo/client';
+
+import { filterAndSortData } from '../../../testing/mock-data';
+import { mockedCompaniesData } from '../../../testing/mock-data/companies';
+import { GraphqlQueryCompany } from '../../../interfaces/entities/company.interface';
+
+import { lightTheme } from '../../../layout/styles/themes';
+import { FullHeightStorybookLayout } from '../../../testing/FullHeightStorybookLayout';
+import { mockedClient } from '../../../testing/mockedClient';
+import Companies from '../Companies';
+import { GraphqlQueryUser } from '../../../interfaces/entities/user.interface';
+import { mockedUsersData } from '../../../testing/mock-data/users';
+
+export const mocks = [
+  graphql.query('GetCompanies', (req, res, ctx) => {
+    const returnedMockedData = filterAndSortData<GraphqlQueryCompany>(
+      mockedCompaniesData,
+      req.variables.where,
+      req.variables.orderBy,
+      req.variables.limit,
+    );
+    return res(
+      ctx.data({
+        companies: returnedMockedData,
+      }),
+    );
+  }),
+  graphql.query('SearchUserQuery', (req, res, ctx) => {
+    const returnedMockedData = filterAndSortData<GraphqlQueryUser>(
+      mockedUsersData,
+      req.variables.where,
+      req.variables.orderBy,
+      req.variables.limit,
+    );
+    return res(
+      ctx.data({
+        searchResults: returnedMockedData,
+      }),
+    );
+  }),
+];
+
+export function render() {
+  return (
+    <RecoilRoot>
+      <ApolloProvider client={mockedClient}>
+        <ThemeProvider theme={lightTheme}>
+          <MemoryRouter>
+            <FullHeightStorybookLayout>
+              <Companies />
+            </FullHeightStorybookLayout>
+          </MemoryRouter>
+        </ThemeProvider>
+      </ApolloProvider>
+    </RecoilRoot>
+  );
+}

front/src/pages/companies/companies-filters.tsx

@@ -14,7 +14,7 @@ import { QueryMode } from '../../generated/graphql';
 
 export const nameFilter = {
   key: 'name',
-  label: 'Company',
+  label: 'Name',
   icon: <TbBuilding size={16} />,
   type: 'text',
   operands: [

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

@@ -0,0 +1,71 @@
+import { expect } from '@storybook/jest';
+import type { Meta } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import People from '../People';
+import { Story } from './People.stories';
+import { mocks, render } from './shared';
+
+const meta: Meta<typeof People> = {
+  title: 'Pages/People',
+  component: People,
+};
+
+export default meta;
+
+export const FilterByEmail: Story = {
+  render,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const filterButton = canvas.getByText('Filter');
+    await userEvent.click(filterButton);
+
+    const emailFilterButton = canvas.getByText('Email', { selector: 'li' });
+    await userEvent.click(emailFilterButton);
+
+    const emailInput = canvas.getByPlaceholderText('Email');
+    await userEvent.type(emailInput, 'al', {
+      delay: 200,
+    });
+
+    expect(await canvas.findByText('Alexandre Prot')).toBeInTheDocument();
+    await expect(canvas.queryAllByText('John Doe')).toStrictEqual([]);
+
+    expect(await canvas.findByText('Email:')).toBeInTheDocument();
+    expect(await canvas.findByText('Contains al')).toBeInTheDocument();
+  },
+  parameters: {
+    msw: mocks,
+  },
+};
+
+export const FilterByCompanyName: Story = {
+  render,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const filterButton = canvas.getByText('Filter');
+    await userEvent.click(filterButton);
+
+    const companyFilterButton = canvas.getByText('Company', { selector: 'li' });
+    await userEvent.click(companyFilterButton);
+
+    const companyNameInput = canvas.getByPlaceholderText('Company');
+    await userEvent.type(companyNameInput, 'Qon', {
+      delay: 200,
+    });
+
+    const qontoChip = canvas.getByText('Qonto', { selector: 'li' });
+    await userEvent.click(qontoChip);
+
+    expect(await canvas.findByText('Alexandre Prot')).toBeInTheDocument();
+    await expect(canvas.queryAllByText('John Doe')).toStrictEqual([]);
+
+    expect(await canvas.findByText('Company:')).toBeInTheDocument();
+    expect(await canvas.findByText('Is Qonto')).toBeInTheDocument();
+  },
+  parameters: {
+    msw: mocks,
+  },
+};

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

@@ -0,0 +1,47 @@
+import { expect } from '@storybook/jest';
+import type { Meta } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import People from '../People';
+import { Story } from './People.stories';
+import { mocks, render } from './shared';
+
+const meta: Meta<typeof People> = {
+  title: 'Pages/People',
+  component: People,
+};
+
+export default meta;
+
+export const SortByEmail: Story = {
+  render,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const sortButton = canvas.getByText('Sort');
+    await userEvent.click(sortButton);
+
+    const emailSortButton = canvas.getByText('Email', { selector: 'li' });
+    await userEvent.click(emailSortButton);
+
+    expect(await canvas.getByTestId('remove-icon-email')).toBeInTheDocument();
+
+    expect(await canvas.findByText('Alexandre Prot')).toBeInTheDocument();
+
+    expect(
+      (await canvas.findAllByRole('checkbox')).map((item) => {
+        return item.getAttribute('id');
+      })[1],
+    ).toStrictEqual('person-selected-7dfbc3f7-6e5e-4128-957e-8d86808cdf6b');
+
+    const cancelButton = canvas.getByText('Cancel');
+    await userEvent.click(cancelButton);
+
+    await expect(canvas.queryAllByTestId('remove-icon-email')).toStrictEqual(
+      [],
+    );
+  },
+  parameters: {
+    msw: mocks,
+  },
+};

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

@@ -1,113 +1,21 @@
-import { expect } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
-import { RecoilRoot } from 'recoil';
-import { ThemeProvider } from '@emotion/react';
-import { MemoryRouter } from 'react-router-dom';
-import { graphql } from 'msw';
-import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
-import { userEvent, within } from '@storybook/testing-library';
 
 import People from '../People';
-import { lightTheme } from '../../../layout/styles/themes';
-import { FullHeightStorybookLayout } from '../../../testing/FullHeightStorybookLayout';
-import { filterAndSortData } from '../../../testing/mock-data';
-import { GraphqlQueryPerson } from '../../../interfaces/entities/person.interface';
-import { mockedPeopleData } from '../../../testing/mock-data/people';
-import { GraphqlQueryCompany } from '../../../interfaces/entities/company.interface';
-import { mockCompaniesData } from '../../../testing/mock-data/companies';
+
+import { render, mocks } from './shared';
 
 const meta: Meta<typeof People> = {
   title: 'Pages/People',
   component: People,
 };
 
-const mockedClient = new ApolloClient({
-  uri: process.env.REACT_APP_API_URL,
-  cache: new InMemoryCache(),
-  defaultOptions: {
-    watchQuery: {
-      fetchPolicy: 'no-cache',
-      errorPolicy: 'all',
-    },
-    query: {
-      fetchPolicy: 'no-cache',
-      errorPolicy: 'all',
-    },
-  },
-});
-
 export default meta;
-type Story = StoryObj<typeof People>;
 
-const render = () => (
-  <RecoilRoot>
-    <ApolloProvider client={mockedClient}>
-      <ThemeProvider theme={lightTheme}>
-        <MemoryRouter>
-          <FullHeightStorybookLayout>
-            <People />
-          </FullHeightStorybookLayout>
-        </MemoryRouter>
-      </ThemeProvider>
-    </ApolloProvider>
-  </RecoilRoot>
-);
-
-const defaultMocks = [
-  graphql.query('GetPeople', (req, res, ctx) => {
-    const returnedMockedData = filterAndSortData<GraphqlQueryPerson>(
-      mockedPeopleData,
-      req.variables.where,
-      req.variables.orderBy,
-      req.variables.limit,
-    );
-    return res(
-      ctx.data({
-        people: returnedMockedData,
-      }),
-    );
-  }),
-  graphql.query('SearchQuery', (req, res, ctx) => {
-    const returnedMockedData = filterAndSortData<GraphqlQueryCompany>(
-      mockCompaniesData,
-      req.variables.where,
-      req.variables.orderBy,
-      req.variables.limit,
-    );
-    return res(
-      ctx.data({
-        searchResults: returnedMockedData,
-      }),
-    );
-  }),
-];
+export type Story = StoryObj<typeof People>;
 
 export const Default: Story = {
   render,
   parameters: {
-    msw: defaultMocks,
-  },
-};
-
-export const FilterByEmail: Story = {
-  render,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const filterButton = canvas.getByText('Filter');
-    await userEvent.click(filterButton);
-
-    const emailFilterButton = canvas.getByText('Email', { selector: 'li' });
-    await userEvent.click(emailFilterButton);
-
-    const emailInput = canvas.getByPlaceholderText('Email');
-    await userEvent.type(emailInput, 'al', {
-      delay: 200,
-    });
-
-    await expect(canvas.queryAllByText('John')).toStrictEqual([]);
-  },
-  parameters: {
-    msw: defaultMocks,
+    msw: mocks,
   },
 };

front/src/pages/people/__stories__/shared.tsx

@@ -0,0 +1,61 @@
+import { graphql } from 'msw';
+import { RecoilRoot } from 'recoil';
+import { ThemeProvider } from '@emotion/react';
+import { MemoryRouter } from 'react-router-dom';
+import { ApolloProvider } from '@apollo/client';
+
+import { filterAndSortData } from '../../../testing/mock-data';
+import { mockedPeopleData } from '../../../testing/mock-data/people';
+import { mockedCompaniesData } from '../../../testing/mock-data/companies';
+import { GraphqlQueryCompany } from '../../../interfaces/entities/company.interface';
+import { GraphqlQueryPerson } from '../../../interfaces/entities/person.interface';
+
+import { lightTheme } from '../../../layout/styles/themes';
+import { FullHeightStorybookLayout } from '../../../testing/FullHeightStorybookLayout';
+import { mockedClient } from '../../../testing/mockedClient';
+import People from '../People';
+
+export const mocks = [
+  graphql.query('GetPeople', (req, res, ctx) => {
+    const returnedMockedData = filterAndSortData<GraphqlQueryPerson>(
+      mockedPeopleData,
+      req.variables.where,
+      req.variables.orderBy,
+      req.variables.limit,
+    );
+    return res(
+      ctx.data({
+        people: returnedMockedData,
+      }),
+    );
+  }),
+  graphql.query('SearchCompanyQuery', (req, res, ctx) => {
+    const returnedMockedData = filterAndSortData<GraphqlQueryCompany>(
+      mockedCompaniesData,
+      req.variables.where,
+      req.variables.orderBy,
+      req.variables.limit,
+    );
+    return res(
+      ctx.data({
+        searchResults: returnedMockedData,
+      }),
+    );
+  }),
+];
+
+export function render() {
+  return (
+    <RecoilRoot>
+      <ApolloProvider client={mockedClient}>
+        <ThemeProvider theme={lightTheme}>
+          <MemoryRouter>
+            <FullHeightStorybookLayout>
+              <People />
+            </FullHeightStorybookLayout>
+          </MemoryRouter>
+        </ThemeProvider>
+      </ApolloProvider>
+    </RecoilRoot>
+  );
+}