Re-write test with storybook testing library (#150)

* Re-write test with storybook testing library

* Update CI

front/src/testing/FullHeightStorybookLayout.tsx

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+
+const StyledLayout = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: calc(100vw - 32px);
+  height: calc(100vh - 32px);
+`;
+
+type OwnProps = {
+  children: JSX.Element;
+};
+
+export function FullHeightStorybookLayout({ children }: OwnProps) {
+  return <StyledLayout>{children}</StyledLayout>;
+}

front/src/testing/mock-data/companies.ts

@@ -0,0 +1,74 @@
+import { GraphqlQueryCompany } from '../../interfaces/entities/company.interface';
+
+export const mockCompaniesData: Array<GraphqlQueryCompany> = [
+  {
+    id: '89bb825c-171e-4bcc-9cf7-43448d6fb278',
+    domain_name: 'airbnb.com',
+    name: 'Airbnb',
+    created_at: '2023-04-26T10:08:54.724515+00:00',
+    address: '17 rue de clignancourt',
+    employees: 12,
+    account_owner: null,
+    __typename: 'companies',
+  },
+  {
+    id: 'b396e6b9-dc5c-4643-bcff-61b6cf7523ae',
+    domain_name: 'aircall.io',
+    name: 'Aircall',
+    created_at: '2023-04-26T10:12:42.33625+00:00',
+    address: '',
+    employees: 1,
+    account_owner: null,
+    __typename: 'companies',
+  },
+  {
+    id: 'a674fa6c-1455-4c57-afaf-dd5dc086361d',
+    domain_name: 'algolia.com',
+    name: 'Algolia',
+    created_at: '2023-04-26T10:10:32.530184+00:00',
+    address: '',
+    employees: 1,
+    account_owner: null,
+    __typename: 'companies',
+  },
+  {
+    id: 'b1cfd51b-a831-455f-ba07-4e30671e1dc3',
+    domain_name: 'apple.com',
+    name: 'Apple',
+    created_at: '2023-03-21T06:30:25.39474+00:00',
+    address: '',
+    employees: 10,
+    account_owner: null,
+    __typename: 'companies',
+  },
+  {
+    id: '5c21e19e-e049-4393-8c09-3e3f8fb09ecb',
+    domain_name: 'qonto.com',
+    name: 'Qonto',
+    created_at: '2023-04-26T10:13:29.712485+00:00',
+    address: '10 rue de la Paix',
+    employees: 1,
+    account_owner: null,
+    __typename: 'companies',
+  },
+  {
+    id: '9d162de6-cfbf-4156-a790-e39854dcd4eb',
+    domain_name: 'facebook.com',
+    name: 'Facebook',
+    created_at: '2023-04-26T10:09:25.656555+00:00',
+    address: '',
+    employees: 1,
+    account_owner: null,
+    __typename: 'companies',
+  },
+  {
+    id: '9d162de6-cfbf-4156-a790-e39854dcd4eb',
+    domain_name: 'sequoia.com',
+    name: 'Sequoia',
+    created_at: '2023-04-26T10:09:25.656555+00:00',
+    address: '',
+    employees: 1,
+    account_owner: null,
+    __typename: 'companies',
+  },
+];

front/src/testing/mock-data/index.ts

@@ -0,0 +1,98 @@
+import {
+  CompanyOrderByWithRelationInput,
+  PersonOrderByWithRelationInput,
+  StringFilter,
+} from '../../generated/graphql';
+import { Company } from '../../interfaces/entities/company.interface';
+import { BoolExpType } from '../../interfaces/entities/generic.interface';
+import { Person } from '../../interfaces/entities/person.interface';
+
+function filterData<DataT>(
+  data: Array<DataT>,
+  where: BoolExpType<Company> | BoolExpType<Person>,
+): Array<DataT> {
+  return data.filter((item) => {
+    // { firstname: {contains: '%string%' }}
+    // { firstname: {equals: 'string' }}
+    // { is: { company: { equals: 'string' }}}
+    let isMatch: boolean = (
+      Object.keys(where) as Array<keyof typeof where>
+    ).every((key) => {
+      if (!['OR', 'AND', 'NOT'].includes(key)) {
+        const filterElement = where[key] as StringFilter & { is?: object };
+
+        if (filterElement.is) {
+          const nestedKey = Object.keys(filterElement.is)[0] as string;
+          if (typeof item[key as keyof typeof item] === 'object') {
+            const nestedItem = item[key as keyof typeof item];
+            return (
+              nestedItem[nestedKey as keyof typeof nestedItem] ===
+              (
+                filterElement.is[
+                  nestedKey as keyof typeof filterElement.is
+                ] as StringFilter
+              ).equals
+            );
+          }
+        }
+        if (filterElement.equals) {
+          return item[key as keyof typeof item] === filterElement.equals;
+        }
+        if (filterElement.contains) {
+          return (item[key as keyof typeof item] as string)
+            .toLocaleLowerCase()
+            .includes(
+              filterElement.contains.replaceAll('%', '').toLocaleLowerCase(),
+            );
+        }
+      }
+      return false;
+    });
+
+    // { OR: [{ firstname: filter }, { lastname: filter }]
+    if (where.OR && Array.isArray(where.OR)) {
+      isMatch =
+        isMatch ||
+        where.OR.some((orFilter) =>
+          filterData<DataT>(data, orFilter).includes(item),
+        );
+    }
+
+    return isMatch;
+  });
+}
+
+export function filterAndSortData<DataT>(
+  data: Array<DataT>,
+  where: BoolExpType<Company> | BoolExpType<Person>,
+  orderBy: Array<
+    PersonOrderByWithRelationInput & CompanyOrderByWithRelationInput
+  >,
+  limit: number,
+): Array<DataT> {
+  let filteredData = filterData<DataT>(data, where);
+
+  if (orderBy) {
+    const firstOrderBy = orderBy[0];
+
+    const key = Object.keys(firstOrderBy)[0];
+
+    filteredData.sort((itemA, itemB) => {
+      const itemAValue = itemA[key as unknown as keyof typeof itemA];
+      const itemBValue = itemB[key as unknown as keyof typeof itemB];
+      if (!itemAValue || !itemBValue) {
+        return 0;
+      }
+
+      if (typeof itemAValue === 'string' && typeof itemBValue === 'string') {
+        return itemBValue.localeCompare(itemAValue);
+      }
+      return 0;
+    });
+  }
+
+  if (limit) {
+    filteredData = filteredData.slice(0, limit);
+  }
+  return filteredData;
+}

front/src/testing/mock-data/people.ts

@@ -0,0 +1,73 @@
+import { GraphqlQueryPerson } from '../../interfaces/entities/person.interface';
+
+export const mockedPeopleData: Array<GraphqlQueryPerson> = [
+  {
+    id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
+    __typename: 'Person',
+    firstname: 'Alexandre',
+    lastname: 'Prot',
+    email: 'alexandre@qonto.com',
+    company: {
+      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6c',
+      name: 'Qonto',
+      domain_name: 'qonto.com',
+      __typename: 'Company',
+    },
+    phone: '06 12 34 56 78',
+    created_at: '2023-04-20T13:20:09.158312+00:00',
+
+    city: 'Paris',
+  },
+  {
+    id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6d',
+    __typename: 'Person',
+    firstname: 'John',
+    lastname: 'Doe',
+    email: 'john@linkedin.com',
+    company: {
+      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6e',
+      name: 'LinkedIn',
+      domain_name: 'linkedin.com',
+      __typename: 'Company',
+    },
+    phone: '06 12 34 56 78',
+    created_at: '2023-04-20T13:20:09.158312+00:00',
+
+    city: 'Paris',
+  },
+  {
+    id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6f',
+    __typename: 'Person',
+    firstname: 'Jane',
+    lastname: 'Doe',
+    email: 'jane@sequoiacap.com',
+    company: {
+      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6g',
+      name: 'Sequoia',
+      domain_name: 'sequoiacap.com',
+      __typename: 'Company',
+    },
+    phone: '06 12 34 56 78',
+    created_at: '2023-04-20T13:20:09.158312+00:00',
+
+    city: 'Paris',
+  },
+
+  {
+    id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6h',
+    __typename: 'Person',
+    firstname: 'Janice',
+    lastname: 'Dane',
+    email: 'janice@facebook.com',
+    company: {
+      id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6i',
+      name: 'Facebook',
+      domain_name: 'facebook.com',
+      __typename: 'Company',
+    },
+    phone: '06 12 34 56 78',
+    created_at: '2023-04-20T13:20:09.158312+00:00',
+
+    city: 'Paris',
+  },
+];