chore: Add some test ids for use by cozy-contacts tests

There wasn't any straightforward way to retrieve these elements.

react/Avatar/index.jsx

@@ -55,6 +55,7 @@ export const Avatar = ({
   const IconToRender = Icon.isProperIcon(icon) ? <Icon icon={icon} /> : icon
   return (
     <div
+      data-testid="Avatar" // used by a test in cozy-contacts
       className={cx(
         styles['c-avatar'],
         text ? styles['c-avatar--text'] : '',

react/ContactsList/Contacts/ContactCozy.jsx

@@ -5,7 +5,10 @@ import { TableCell } from '../../Table'
 import styles from '../styles.styl'
 
 const ContactCozy = ({ cozyUrl }) => (
-  <TableCell className={`${styles['contact-cozyurl']} u-ellipsis`}>
+  <TableCell
+    data-testid="ContactCozy" // used by a test in cozy-contacts
+    className={`${styles['contact-cozyurl']} u-ellipsis`}
+  >
     {cozyUrl}
   </TableCell>
 )

react/ContactsList/Contacts/ContactEmail.jsx

@@ -5,7 +5,10 @@ import { TableCell } from '../../Table'
 import styles from '../styles.styl'
 
 const ContactEmail = ({ email }) => (
-  <TableCell className={`${styles['contact-email']} u-ellipsis`}>
+  <TableCell
+    data-testid="ContactEmail" // used by a test in cozy-contacts
+    className={`${styles['contact-email']} u-ellipsis`}
+  >
     {email}
   </TableCell>
 )

react/ContactsList/Contacts/ContactIdentity.jsx

@@ -20,6 +20,7 @@ const ContactIdentity = ({ contact }) => {
 
   return (
     <TableCell
+      data-testid="ContactIdentity" // used by a test in cozy-contacts
       className={`${
         styles['contact-identity']
       } u-flex u-flex-items-center u-ellipsis`}

react/ContactsList/Contacts/ContactName.jsx

@@ -9,6 +9,7 @@ const ContactName = ({ displayName, familyName }) => {
 
   return (
     <Typography
+      data-testid="ContactName" // used by a test in cozy-contacts
       className="u-ml-1"
       variant="body1"
       noWrap

react/ContactsList/Contacts/ContactPhone.jsx

@@ -5,7 +5,10 @@ import { TableCell } from '../../Table'
 import styles from '../styles.styl'
 
 const ContactPhone = ({ phone }) => (
-  <TableCell className={`${styles['contact-phone']} u-ellipsis`}>
+  <TableCell
+    data-testid="ContactPhone" // used by a test in cozy-contacts
+    className={`${styles['contact-phone']} u-ellipsis`}
+  >
     {phone}
   </TableCell>
 )

react/ContactsList/__snapshots__/ContactRow.spec.js.snap

@@ -9,9 +9,11 @@ exports[`ContactRow should match the contact snapshot 1`] = `
 >
   <div
     className="styles__TableCell___yJCq7 styles__contact-identity___mL3IJ u-flex u-flex-items-center u-ellipsis"
+    data-testid="ContactIdentity"
   >
     <div
       className="styles__c-avatar___PpDI- styles__c-avatar--text___2dvna"
+      data-testid="Avatar"
       style={
         Object {
           "--circleSize": "32px",
@@ -28,6 +30,7 @@ exports[`ContactRow should match the contact snapshot 1`] = `
     </div>
     <p
       className="MuiTypography-root u-ml-1 MuiTypography-body1 MuiTypography-colorTextPrimary MuiTypography-noWrap MuiTypography-gutterBottom MuiTypography-displayInline"
+      data-testid="ContactName"
     >
       <span
         className=""
@@ -45,16 +48,19 @@ exports[`ContactRow should match the contact snapshot 1`] = `
   </div>
   <div
     className="styles__TableCell___yJCq7 styles__contact-email___3n3q2 u-ellipsis"
+    data-testid="ContactEmail"
   >
     johndoe@localhost
   </div>
   <div
     className="styles__TableCell___yJCq7 styles__contact-phone___1sA_m u-ellipsis"
+    data-testid="ContactPhone"
   >
     0123456789
   </div>
   <div
     className="styles__TableCell___yJCq7 styles__contact-cozyurl___3kBp5 u-ellipsis"
+    data-testid="ContactCozy"
   >
     http://johndoe.mycozy.cloud
   </div>