From 471d6743ad6c9b8a073499325513881bf6820469 Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Wed, 19 Apr 2023 12:03:02 +0200
Subject: [PATCH 1/9] refactor: create company chip

---
 front/src/components/chips/CompanyChip.tsx    | 44 +++++++++++++++++++
 .../chips/__stories__/CompanyChip.tsx         | 30 +++++++++++++
 .../chips/__tests__/CompanyChip.test.tsx      | 18 ++++++++
 front/src/components/table/CellLink.tsx       | 27 +-----------
 4 files changed, 94 insertions(+), 25 deletions(-)
 create mode 100644 front/src/components/chips/CompanyChip.tsx
 create mode 100644 front/src/components/chips/__stories__/CompanyChip.tsx
 create mode 100644 front/src/components/chips/__tests__/CompanyChip.test.tsx

diff --git a/front/src/components/chips/CompanyChip.tsx b/front/src/components/chips/CompanyChip.tsx
new file mode 100644
index 000000000..4c734627f
--- /dev/null
+++ b/front/src/components/chips/CompanyChip.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  name: string;
+  picture?: string;
+};
+
+const StyledContainer = styled.span`
+  background-color: ${(props) => props.theme.tertiaryBackground};
+  border-radius: ${(props) => props.theme.spacing(1)};
+  color: ${(props) => props.theme.text80};
+  display: inline-flex;
+  align-items: center;
+  padding: ${(props) => props.theme.spacing(1)};
+  gap: ${(props) => props.theme.spacing(1)};
+
+  :hover {
+    filter: brightness(95%);
+  }
+
+  img {
+    height: 14px;
+    width: 14px;
+    object-fit: cover;
+  }
+`;
+
+function CompanyChip({ name, picture }: OwnProps) {
+  return (
+    <StyledContainer data-testid="company-chip">
+      {picture && (
+        <img
+          data-testid="company-chip-image"
+          src={picture?.toString()}
+          alt=""
+        />
+      )}
+      {name}
+    </StyledContainer>
+  );
+}
+
+export default CompanyChip;
diff --git a/front/src/components/chips/__stories__/CompanyChip.tsx b/front/src/components/chips/__stories__/CompanyChip.tsx
new file mode 100644
index 000000000..b98fc234c
--- /dev/null
+++ b/front/src/components/chips/__stories__/CompanyChip.tsx
@@ -0,0 +1,30 @@
+import { MemoryRouter } from 'react-router-dom';
+
+import CompanyChip from '../CompanyChip';
+import { ThemeProvider } from '@emotion/react';
+import { lightTheme } from '../../../layout/styles/themes';
+
+export default {
+  title: 'CompanyChip',
+  component: CompanyChip,
+};
+
+export const RegularCompanyChip = () => {
+  return (
+    <ThemeProvider theme={lightTheme}>
+      <MemoryRouter initialEntries={['/companies']}>
+        <CompanyChip name="selected-company-1" />
+      </MemoryRouter>
+    </ThemeProvider>
+  );
+};
+
+export const RegularCompanyChipWithImage = () => {
+  return (
+    <ThemeProvider theme={lightTheme}>
+      <MemoryRouter initialEntries={['/companies']}>
+        <CompanyChip name="selected-company-1" picture="coucou.fr" />
+      </MemoryRouter>
+    </ThemeProvider>
+  );
+};
diff --git a/front/src/components/chips/__tests__/CompanyChip.test.tsx b/front/src/components/chips/__tests__/CompanyChip.test.tsx
new file mode 100644
index 000000000..ed4e57893
--- /dev/null
+++ b/front/src/components/chips/__tests__/CompanyChip.test.tsx
@@ -0,0 +1,18 @@
+import { render } from '@testing-library/react';
+
+import {
+  RegularCompanyChip,
+  RegularCompanyChipWithImage,
+} from '../__stories__/CompanyChip';
+
+it('Checks the NavItem renders', () => {
+  const { getByText } = render(<RegularCompanyChip />);
+
+  expect(getByText('selected-company-1')).toBeDefined();
+});
+
+it('Checks the img renders', () => {
+  const { getByTestId } = render(<RegularCompanyChipWithImage />);
+
+  expect(getByTestId('company-chip-image')).toHaveAttribute('src', 'coucou.fr');
+});
diff --git a/front/src/components/table/CellLink.tsx b/front/src/components/table/CellLink.tsx
index 18c29a249..623f542da 100644
--- a/front/src/components/table/CellLink.tsx
+++ b/front/src/components/table/CellLink.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import styled from '@emotion/styled';
 import { Link } from 'react-router-dom';
+import CompanyChip from '../chips/CompanyChip';
 
 type OwnProps = {
   name: string;
@@ -8,33 +8,10 @@ type OwnProps = {
   href: string;
 };
 
-const StyledContainer = styled.span`
-  background-color: ${(props) => props.theme.tertiaryBackground};
-  border-radius: ${(props) => props.theme.spacing(1)};
-  color: ${(props) => props.theme.text80};
-  display: inline-flex;
-  align-items: center;
-  padding: ${(props) => props.theme.spacing(1)};
-  gap: ${(props) => props.theme.spacing(1)};
-
-  :hover {
-    filter: brightness(95%);
-  }
-
-  img {
-    height: 14px;
-    width: 14px;
-    object-fit: cover;
-  }
-`;
-
 function CellLink({ name, picture, href }: OwnProps) {
   return (
     <Link to={href}>
-      <StyledContainer>
-        {picture && <img src={picture?.toString()} alt="" />}
-        {name}
-      </StyledContainer>
+      <CompanyChip name={name} picture={picture} />
     </Link>
   );
 }

From 3696bf2617abe6591330734bb53a44f9c1f6f006 Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Wed, 19 Apr 2023 12:23:27 +0200
Subject: [PATCH 2/9] feature: CellLinkacceptd children

---
 front/src/components/table/CellLink.tsx | 10 +++------
 front/src/pages/people/People.tsx       | 30 +++++++++++++++++++------
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/front/src/components/table/CellLink.tsx b/front/src/components/table/CellLink.tsx
index 623f542da..e577854f6 100644
--- a/front/src/components/table/CellLink.tsx
+++ b/front/src/components/table/CellLink.tsx
@@ -1,19 +1,15 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import CompanyChip from '../chips/CompanyChip';
 
 type OwnProps = {
   name: string;
   picture?: string;
   href: string;
+  children?: React.ReactNode;
 };
 
-function CellLink({ name, picture, href }: OwnProps) {
-  return (
-    <Link to={href}>
-      <CompanyChip name={name} picture={picture} />
-    </Link>
-  );
+function CellLink({ href, children }: OwnProps) {
+  return <Link to={href}>{children}</Link>;
 }
 
 export default CellLink;
diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx
index fc6831b42..5fae4d689 100644
--- a/front/src/pages/people/People.tsx
+++ b/front/src/pages/people/People.tsx
@@ -18,6 +18,7 @@ import personPlaceholder from './placeholder.png';
 import { parsePhoneNumber, CountryCode } from 'libphonenumber-js';
 import Checkbox from '../../components/form/Checkbox';
 import HorizontalyAlignedContainer from '../../layout/containers/HorizontalyAlignedContainer';
+import CompanyChip from '../../components/chips/CompanyChip';
 
 type Person = {
   fullName: string;
@@ -116,7 +117,12 @@ const columns = [
           name={props.row.original.fullName}
           picture={props.row.original.picture}
           href="#"
-        />
+        >
+          <CompanyChip
+            name={props.row.original.fullName}
+            picture={props.row.original.picture}
+          />
+        </CellLink>
       </HorizontalyAlignedContainer>
     ),
   }),
@@ -132,10 +138,15 @@ const columns = [
     header: () => <ColumnHead viewName="Company" viewIcon={faBuildings} />,
     cell: (props) => (
       <CellLink
-        name={props.row.original.company.name}
-        picture={`https://www.google.com/s2/favicons?domain=${props.row.original.company.domain}&sz=256`}
+        name={props.row.original.fullName}
+        picture={props.row.original.picture}
         href="#"
-      />
+      >
+        <CompanyChip
+          name={props.row.original.company.name}
+          picture={`https://www.google.com/s2/favicons?domain=${props.row.original.company.domain}&sz=256`}
+        />
+      </CellLink>
     ),
   }),
   columnHelper.accessor('phone', {
@@ -167,10 +178,15 @@ const columns = [
     header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleList} />,
     cell: (props) => (
       <CellLink
-        name={props.row.original.pipe.name}
-        picture={props.row.original.pipe.icon}
+        name={props.row.original.fullName}
+        picture={props.row.original.picture}
         href="#"
-      />
+      >
+        <CompanyChip
+          name={props.row.original.pipe.name}
+          picture={props.row.original.pipe.icon}
+        />
+      </CellLink>
     ),
   }),
   columnHelper.accessor('city', {

From 5962140656e87cbc0d6af09d8954315565d062c2 Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Wed, 19 Apr 2023 12:24:25 +0200
Subject: [PATCH 3/9] refactor: rename CellLink to ClickableCell

---
 .../table/{CellLink.tsx => ClickableCell.tsx}      |  4 ++--
 front/src/pages/people/People.tsx                  | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)
 rename front/src/components/table/{CellLink.tsx => ClickableCell.tsx} (72%)

diff --git a/front/src/components/table/CellLink.tsx b/front/src/components/table/ClickableCell.tsx
similarity index 72%
rename from front/src/components/table/CellLink.tsx
rename to front/src/components/table/ClickableCell.tsx
index e577854f6..eddcbc172 100644
--- a/front/src/components/table/CellLink.tsx
+++ b/front/src/components/table/ClickableCell.tsx
@@ -8,8 +8,8 @@ type OwnProps = {
   children?: React.ReactNode;
 };
 
-function CellLink({ href, children }: OwnProps) {
+function ClickableCell({ href, children }: OwnProps) {
   return <Link to={href}>{children}</Link>;
 }
 
-export default CellLink;
+export default ClickableCell;
diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx
index 5fae4d689..cd90d7791 100644
--- a/front/src/pages/people/People.tsx
+++ b/front/src/pages/people/People.tsx
@@ -12,7 +12,7 @@ import { Company } from '../../interfaces/company.interface';
 import { Pipe } from '../../interfaces/pipe.interface';
 import { createColumnHelper } from '@tanstack/react-table';
 import styled from '@emotion/styled';
-import CellLink from '../../components/table/CellLink';
+import ClickableCell from '../../components/table/ClickableCell';
 import ColumnHead from '../../components/table/ColumnHead';
 import personPlaceholder from './placeholder.png';
 import { parsePhoneNumber, CountryCode } from 'libphonenumber-js';
@@ -113,7 +113,7 @@ const columns = [
           id={`person-selected-${props.row.original.email}`}
           name={`person-selected${props.row.original.email}`}
         />
-        <CellLink
+        <ClickableCell
           name={props.row.original.fullName}
           picture={props.row.original.picture}
           href="#"
@@ -122,7 +122,7 @@ const columns = [
             name={props.row.original.fullName}
             picture={props.row.original.picture}
           />
-        </CellLink>
+        </ClickableCell>
       </HorizontalyAlignedContainer>
     ),
   }),
@@ -137,7 +137,7 @@ const columns = [
   columnHelper.accessor('company', {
     header: () => <ColumnHead viewName="Company" viewIcon={faBuildings} />,
     cell: (props) => (
-      <CellLink
+      <ClickableCell
         name={props.row.original.fullName}
         picture={props.row.original.picture}
         href="#"
@@ -146,7 +146,7 @@ const columns = [
           name={props.row.original.company.name}
           picture={`https://www.google.com/s2/favicons?domain=${props.row.original.company.domain}&sz=256`}
         />
-      </CellLink>
+      </ClickableCell>
     ),
   }),
   columnHelper.accessor('phone', {
@@ -177,7 +177,7 @@ const columns = [
   columnHelper.accessor('pipe', {
     header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleList} />,
     cell: (props) => (
-      <CellLink
+      <ClickableCell
         name={props.row.original.fullName}
         picture={props.row.original.picture}
         href="#"
@@ -186,7 +186,7 @@ const columns = [
           name={props.row.original.pipe.name}
           picture={props.row.original.pipe.icon}
         />
-      </CellLink>
+      </ClickableCell>
     ),
   }),
   columnHelper.accessor('city', {

From 8d321013f3aec7ff1717b712aced1b96de5aee84 Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Wed, 19 Apr 2023 12:25:20 +0200
Subject: [PATCH 4/9] refactor: remove useless ClickableCell props

---
 front/src/components/table/ClickableCell.tsx |  2 --
 front/src/pages/people/People.tsx            | 18 +++---------------
 2 files changed, 3 insertions(+), 17 deletions(-)

diff --git a/front/src/components/table/ClickableCell.tsx b/front/src/components/table/ClickableCell.tsx
index eddcbc172..a1ecb43af 100644
--- a/front/src/components/table/ClickableCell.tsx
+++ b/front/src/components/table/ClickableCell.tsx
@@ -2,8 +2,6 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 
 type OwnProps = {
-  name: string;
-  picture?: string;
   href: string;
   children?: React.ReactNode;
 };
diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx
index cd90d7791..b62b2008e 100644
--- a/front/src/pages/people/People.tsx
+++ b/front/src/pages/people/People.tsx
@@ -113,11 +113,7 @@ const columns = [
           id={`person-selected-${props.row.original.email}`}
           name={`person-selected${props.row.original.email}`}
         />
-        <ClickableCell
-          name={props.row.original.fullName}
-          picture={props.row.original.picture}
-          href="#"
-        >
+        <ClickableCell href="#">
           <CompanyChip
             name={props.row.original.fullName}
             picture={props.row.original.picture}
@@ -137,11 +133,7 @@ const columns = [
   columnHelper.accessor('company', {
     header: () => <ColumnHead viewName="Company" viewIcon={faBuildings} />,
     cell: (props) => (
-      <ClickableCell
-        name={props.row.original.fullName}
-        picture={props.row.original.picture}
-        href="#"
-      >
+      <ClickableCell href="#">
         <CompanyChip
           name={props.row.original.company.name}
           picture={`https://www.google.com/s2/favicons?domain=${props.row.original.company.domain}&sz=256`}
@@ -177,11 +169,7 @@ const columns = [
   columnHelper.accessor('pipe', {
     header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleList} />,
     cell: (props) => (
-      <ClickableCell
-        name={props.row.original.fullName}
-        picture={props.row.original.picture}
-        href="#"
-      >
+      <ClickableCell href="#">
         <CompanyChip
           name={props.row.original.pipe.name}
           picture={props.row.original.pipe.icon}

From 16a1aadba91f05ff80999e305d0be7f27f30df9b Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Wed, 19 Apr 2023 12:28:32 +0200
Subject: [PATCH 5/9] feature: add alt tag for image in company chip

---
 front/src/components/chips/CompanyChip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/components/chips/CompanyChip.tsx b/front/src/components/chips/CompanyChip.tsx
index 4c734627f..5aa3a3235 100644
--- a/front/src/components/chips/CompanyChip.tsx
+++ b/front/src/components/chips/CompanyChip.tsx
@@ -33,7 +33,7 @@ function CompanyChip({ name, picture }: OwnProps) {
         <img
           data-testid="company-chip-image"
           src={picture?.toString()}
-          alt=""
+          alt={`${name}-company-logo`}
         />
       )}
       {name}

From bb5ae02c3a907fac144be7c2a1a583283c825890 Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Wed, 19 Apr 2023 12:35:19 +0200
Subject: [PATCH 6/9] refactor: use PersonChip in people page

---
 front/src/components/chips/PersonChip.tsx     |  44 ++++++++++++++++++
 .../chips}/placeholder.png                    | Bin
 front/src/pages/people/People.tsx             |  12 ++---
 3 files changed, 49 insertions(+), 7 deletions(-)
 create mode 100644 front/src/components/chips/PersonChip.tsx
 rename front/src/{pages/people => components/chips}/placeholder.png (100%)

diff --git a/front/src/components/chips/PersonChip.tsx b/front/src/components/chips/PersonChip.tsx
new file mode 100644
index 000000000..2c3be2e93
--- /dev/null
+++ b/front/src/components/chips/PersonChip.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import personPlaceholder from './placeholder.png';
+
+type OwnProps = {
+  name: string;
+  picture?: string;
+};
+
+const StyledContainer = styled.span`
+  background-color: ${(props) => props.theme.tertiaryBackground};
+  border-radius: ${(props) => props.theme.spacing(1)};
+  color: ${(props) => props.theme.text80};
+  display: inline-flex;
+  align-items: center;
+  padding: ${(props) => props.theme.spacing(1)};
+  gap: ${(props) => props.theme.spacing(1)};
+
+  :hover {
+    filter: brightness(95%);
+  }
+
+  img {
+    height: 14px;
+    width: 14px;
+    object-fit: cover;
+  }
+`;
+
+function PersonChip({ name, picture }: OwnProps) {
+  console.log(picture ? picture.toString() : personPlaceholder);
+  return (
+    <StyledContainer data-testid="person-chip">
+      <img
+        data-testid="person-chip-image"
+        src={picture ? picture.toString() : personPlaceholder.toString()}
+        alt="person-picture"
+      />
+      {name}
+    </StyledContainer>
+  );
+}
+
+export default PersonChip;
diff --git a/front/src/pages/people/placeholder.png b/front/src/components/chips/placeholder.png
similarity index 100%
rename from front/src/pages/people/placeholder.png
rename to front/src/components/chips/placeholder.png
diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx
index b62b2008e..edd55f15f 100644
--- a/front/src/pages/people/People.tsx
+++ b/front/src/pages/people/People.tsx
@@ -14,11 +14,11 @@ import { createColumnHelper } from '@tanstack/react-table';
 import styled from '@emotion/styled';
 import ClickableCell from '../../components/table/ClickableCell';
 import ColumnHead from '../../components/table/ColumnHead';
-import personPlaceholder from './placeholder.png';
 import { parsePhoneNumber, CountryCode } from 'libphonenumber-js';
 import Checkbox from '../../components/form/Checkbox';
 import HorizontalyAlignedContainer from '../../layout/containers/HorizontalyAlignedContainer';
 import CompanyChip from '../../components/chips/CompanyChip';
+import PersonChip from '../../components/chips/PersonChip';
 
 type Person = {
   fullName: string;
@@ -47,7 +47,7 @@ const StyledPeopleContainer = styled.div`
 const defaultData: Array<Person> = [
   {
     fullName: 'Alexandre Prot',
-    picture: personPlaceholder,
+    picture: 'http://placekitten.com/256',
     email: 'alexandre@qonto.com',
     company: { id: 1, name: 'Qonto', domain: 'qonto.com' },
     phone: '06 12 34 56 78',
@@ -58,7 +58,6 @@ const defaultData: Array<Person> = [
   },
   {
     fullName: 'Alexandre Prot',
-    picture: personPlaceholder,
     email: 'alexandre@qonto.com',
     company: { id: 2, name: 'LinkedIn', domain: 'linkedin.com' },
     phone: '06 12 34 56 78',
@@ -69,7 +68,7 @@ const defaultData: Array<Person> = [
   },
   {
     fullName: 'Alexandre Prot',
-    picture: personPlaceholder,
+    picture: 'http://placekitten.com/256',
     email: 'alexandre@qonto.com',
     company: { id: 1, name: 'Qonto', domain: 'qonto.com' },
     phone: '06 12 34 56 78',
@@ -80,7 +79,7 @@ const defaultData: Array<Person> = [
   },
   {
     fullName: 'Alexandre Prot',
-    picture: personPlaceholder,
+    picture: 'https://placekitten.com/g/256',
     email: 'alexandre@qonto.com',
     company: { id: 1, name: 'Slack', domain: 'slack.com' },
     phone: '06 12 34 56 78',
@@ -91,7 +90,6 @@ const defaultData: Array<Person> = [
   },
   {
     fullName: 'Alexandre Prot',
-    picture: personPlaceholder,
     email: 'alexandre@qonto.com',
     company: { id: 2, name: 'Facebook', domain: 'facebook.com' },
     phone: '06 12 34 56 78',
@@ -114,7 +112,7 @@ const columns = [
           name={`person-selected${props.row.original.email}`}
         />
         <ClickableCell href="#">
-          <CompanyChip
+          <PersonChip
             name={props.row.original.fullName}
             picture={props.row.original.picture}
           />

From b434f3da45d8cf38e0dd2e804668da165cd78a7c Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Wed, 19 Apr 2023 12:40:53 +0200
Subject: [PATCH 7/9] feature: make the person picture circle

---
 front/src/components/chips/PersonChip.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/front/src/components/chips/PersonChip.tsx b/front/src/components/chips/PersonChip.tsx
index 2c3be2e93..08ed43690 100644
--- a/front/src/components/chips/PersonChip.tsx
+++ b/front/src/components/chips/PersonChip.tsx
@@ -23,6 +23,7 @@ const StyledContainer = styled.span`
   img {
     height: 14px;
     width: 14px;
+    border-radius: 100%;
     object-fit: cover;
   }
 `;

From 97457f54cb574a5812ac76e3d83edd65c90067db Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Wed, 19 Apr 2023 14:25:27 +0200
Subject: [PATCH 8/9] test: rename test and remove useless nav wrapper

---
 front/src/components/chips/__stories__/CompanyChip.tsx | 10 ++--------
 .../components/chips/__tests__/CompanyChip.test.tsx    |  4 ++--
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/front/src/components/chips/__stories__/CompanyChip.tsx b/front/src/components/chips/__stories__/CompanyChip.tsx
index b98fc234c..fc4413161 100644
--- a/front/src/components/chips/__stories__/CompanyChip.tsx
+++ b/front/src/components/chips/__stories__/CompanyChip.tsx
@@ -1,5 +1,3 @@
-import { MemoryRouter } from 'react-router-dom';
-
 import CompanyChip from '../CompanyChip';
 import { ThemeProvider } from '@emotion/react';
 import { lightTheme } from '../../../layout/styles/themes';
@@ -12,9 +10,7 @@ export default {
 export const RegularCompanyChip = () => {
   return (
     <ThemeProvider theme={lightTheme}>
-      <MemoryRouter initialEntries={['/companies']}>
-        <CompanyChip name="selected-company-1" />
-      </MemoryRouter>
+      <CompanyChip name="selected-company-1" />
     </ThemeProvider>
   );
 };
@@ -22,9 +18,7 @@ export const RegularCompanyChip = () => {
 export const RegularCompanyChipWithImage = () => {
   return (
     <ThemeProvider theme={lightTheme}>
-      <MemoryRouter initialEntries={['/companies']}>
-        <CompanyChip name="selected-company-1" picture="coucou.fr" />
-      </MemoryRouter>
+      <CompanyChip name="selected-company-1" picture="coucou.fr" />
     </ThemeProvider>
   );
 };
diff --git a/front/src/components/chips/__tests__/CompanyChip.test.tsx b/front/src/components/chips/__tests__/CompanyChip.test.tsx
index ed4e57893..8cea157f5 100644
--- a/front/src/components/chips/__tests__/CompanyChip.test.tsx
+++ b/front/src/components/chips/__tests__/CompanyChip.test.tsx
@@ -5,13 +5,13 @@ import {
   RegularCompanyChipWithImage,
 } from '../__stories__/CompanyChip';
 
-it('Checks the NavItem renders', () => {
+it('Checks the CompanyChip renders', () => {
   const { getByText } = render(<RegularCompanyChip />);
 
   expect(getByText('selected-company-1')).toBeDefined();
 });
 
-it('Checks the img renders', () => {
+it('Checks the CompanyChip img renders', () => {
   const { getByTestId } = render(<RegularCompanyChipWithImage />);
 
   expect(getByTestId('company-chip-image')).toHaveAttribute('src', 'coucou.fr');

From 59f64695a2f6546a836ac616e8ced98dff666653 Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Wed, 19 Apr 2023 14:29:25 +0200
Subject: [PATCH 9/9] test: test PersonChip displays image or placeholder

---
 front/src/components/chips/PersonChip.tsx     |   5 ++--
 .../chips/__stories__/PersonChip.tsx          |  24 ++++++++++++++++++
 .../chips/__tests__/PersonChip.test.tsx       |  22 ++++++++++++++++
 ...placeholder.png => person-placeholder.png} | Bin
 4 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 front/src/components/chips/__stories__/PersonChip.tsx
 create mode 100644 front/src/components/chips/__tests__/PersonChip.test.tsx
 rename front/src/components/chips/{placeholder.png => person-placeholder.png} (100%)

diff --git a/front/src/components/chips/PersonChip.tsx b/front/src/components/chips/PersonChip.tsx
index 08ed43690..e92923a87 100644
--- a/front/src/components/chips/PersonChip.tsx
+++ b/front/src/components/chips/PersonChip.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import personPlaceholder from './placeholder.png';
+import PersonPlaceholder from './person-placeholder.png';
 
 type OwnProps = {
   name: string;
@@ -29,12 +29,11 @@ const StyledContainer = styled.span`
 `;
 
 function PersonChip({ name, picture }: OwnProps) {
-  console.log(picture ? picture.toString() : personPlaceholder);
   return (
     <StyledContainer data-testid="person-chip">
       <img
         data-testid="person-chip-image"
-        src={picture ? picture.toString() : personPlaceholder.toString()}
+        src={picture ? picture.toString() : PersonPlaceholder.toString()}
         alt="person-picture"
       />
       {name}
diff --git a/front/src/components/chips/__stories__/PersonChip.tsx b/front/src/components/chips/__stories__/PersonChip.tsx
new file mode 100644
index 000000000..22466a2b0
--- /dev/null
+++ b/front/src/components/chips/__stories__/PersonChip.tsx
@@ -0,0 +1,24 @@
+import { ThemeProvider } from '@emotion/react';
+import { lightTheme } from '../../../layout/styles/themes';
+import PersonChip from '../PersonChip';
+
+export default {
+  title: 'PersonChip',
+  component: PersonChip,
+};
+
+export const RegularPersonChip = () => {
+  return (
+    <ThemeProvider theme={lightTheme}>
+      <PersonChip name="selected-company-1" />
+    </ThemeProvider>
+  );
+};
+
+export const RegularPersonChipWithImage = () => {
+  return (
+    <ThemeProvider theme={lightTheme}>
+      <PersonChip name="selected-company-1" picture="coucou.fr" />
+    </ThemeProvider>
+  );
+};
diff --git a/front/src/components/chips/__tests__/PersonChip.test.tsx b/front/src/components/chips/__tests__/PersonChip.test.tsx
new file mode 100644
index 000000000..2c2a0b922
--- /dev/null
+++ b/front/src/components/chips/__tests__/PersonChip.test.tsx
@@ -0,0 +1,22 @@
+import { render } from '@testing-library/react';
+
+import {
+  RegularPersonChip,
+  RegularPersonChipWithImage,
+} from '../__stories__/PersonChip';
+
+it('Checks the PersonChip renders', () => {
+  const { getByText, getByTestId } = render(<RegularPersonChip />);
+
+  expect(getByText('selected-company-1')).toBeDefined();
+  expect(getByTestId('person-chip-image')).toHaveAttribute(
+    'src',
+    'person-placeholder.png',
+  );
+});
+
+it('Checks the PersonChip img renders', () => {
+  const { getByTestId } = render(<RegularPersonChipWithImage />);
+
+  expect(getByTestId('person-chip-image')).toHaveAttribute('src', 'coucou.fr');
+});
diff --git a/front/src/components/chips/placeholder.png b/front/src/components/chips/person-placeholder.png
similarity index 100%
rename from front/src/components/chips/placeholder.png
rename to front/src/components/chips/person-placeholder.png