Fix tests other components too (Avatar is used in several places).

src/components/OrderDetailsPanel/OrderDetailsPanel.js

@@ -128,7 +128,7 @@ const OrderDetailsPanel = props => {
       <h1 className={css.title}>{stateMsgData.title}</h1>
       <div className={css.message}>
         <div className={css.avatarWrapper}>
-          <Avatar name={providerName} />
+          <Avatar firstName={firstName} lastName={lastName} />
         </div>
         {stateMsgData.message}
       </div>

src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap

@@ -23,7 +23,9 @@ exports[`OrderDetailsPanel matches snapshot 1`] = `
     <div>
       <Avatar
         className={null}
-        name="provider first name provider last name" />
+        firstName="provider first name"
+        lastName="provider last name"
+        rootClassName={null} />
     </div>
     <div>
       <FormattedMessage

src/components/SaleDetailsPanel/SaleDetailsPanel.js

@@ -153,7 +153,7 @@ const SaleDetailsPanel = props => {
     <div className={className}>
       <div className={css.messagesContainer}>
         <div className={css.avatarWrapper}>
-          <Avatar name={customerName} />
+          <Avatar firstName={firstName} lastName={lastName} />
         </div>
         <h1 className={css.title}>
           {stateMsgData.title}

src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap

@@ -5,7 +5,9 @@ exports[`SaleDetailsPanel matches snapshot 1`] = `
     <div>
       <Avatar
         className={null}
-        name="customer1 first name customer1 last name" />
+        firstName="customer1 first name"
+        lastName="customer1 last name"
+        rootClassName={null} />
     </div>
     <h1>
       <FormattedMessage

src/components/TopbarDesktop/__snapshots__/TopbarDesktop.test.js.snap

@@ -51,10 +51,13 @@ exports[`TopbarDesktop data matches snapshot 1`] = `
     <button
       className=""
       onClick={[Function]}>
-      <img
-        alt="John Doe"
+      <div
         className=""
-        src="wireframeAvatar.svg" />
+        title="">
+        <span>
+          
+        </span>
+      </div>
     </button>
     <div
       className=""

src/containers/InboxPage/InboxPage.js

@@ -20,10 +20,12 @@ const { shape, string, arrayOf, bool, oneOf, instanceOf } = PropTypes;
 
 // Formatted username
 const username = user => {
-  const profile = user && user.attributes && user.attributes.profile
-    ? user.attributes.profile
-    : null;
-  return profile ? `${profile.firstName} ${profile.lastName}` : '';
+  const profile = user && user.attributes && user.attributes.profile ? user.attributes.profile : {};
+  return {
+    firstName: profile.firstName,
+    lastName: profile.lastName,
+    name: profile.firstName ? `${profile.firstName} ${profile.lastName}` : '',
+  };
 };
 
 // Localised timestamp when the given transaction was updated
@@ -63,7 +65,7 @@ export const InboxItem = props => {
   const { type, tx, intl } = props;
   const { customer, provider } = tx;
   const isOrder = type === 'order';
-  const otherUserName = username(isOrder ? provider : customer);
+  const otherUser = username(isOrder ? provider : customer);
   const changedDate = timestamp(intl, tx);
   return (
     <NamedLink
@@ -72,11 +74,11 @@ export const InboxItem = props => {
       params={{ id: tx.id.uuid }}
     >
       <div className={css.itemAvatar}>
-        <Avatar name={otherUserName} />
+        <Avatar firstName={otherUser.firstName} lastName={otherUser.lastName} />
       </div>
       <div className={css.itemInfo}>
         <div>
-          <span className={css.itemUsername}>{otherUserName}</span>
+          <span className={css.itemUsername}>{otherUser.name}</span>
           <span className={css.itemTimestamp} title={changedDate.datetime}>{changedDate.date}</span>
         </div>
         <div className={css.itemState}>{txState(intl, tx)}</div>

src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap

@@ -149,10 +149,13 @@ exports[`InboxPage matches snapshot 2`] = `
   style={Object {}}>
   <div
     className={undefined}>
-    <img
-      alt="provider-user-id first name provider-user-id last name"
+    <div
       className=""
-      src="wireframeAvatar.svg" />
+      title="provider-user-id first name provider-user-id last name">
+      <span>
+        pp
+      </span>
+    </div>
   </div>
   <div
     className={undefined}>
@@ -326,10 +329,13 @@ exports[`InboxPage matches snapshot 4`] = `
   style={Object {}}>
   <div
     className={undefined}>
-    <img
-      alt="customer-user-id first name customer-user-id last name"
+    <div
       className=""
-      src="wireframeAvatar.svg" />
+      title="customer-user-id first name customer-user-id last name">
+      <span>
+        cc
+      </span>
+    </div>
   </div>
   <div
     className={undefined}>

src/containers/ListingPage/ListingPage.js

@@ -170,7 +170,7 @@ export class ListingPageComponent extends Component {
     const authorInfo = authorAvailable
       ? <div className={css.author}>
           <div className={css.avatarWrapper}>
-            <Avatar name={authorName} />
+            <Avatar firstName={authorProfile.firstName} lastName={authorProfile.lastName} />
           </div>
           <div className={css.authorDetails}>
             <span className={css.authorName}>{authorName}</span>

src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap

@@ -44,7 +44,9 @@ exports[`ListingPage matches snapshot 1`] = `
       <div>
         <Avatar
           className={null}
-          name="user-1 first name user-1 last name" />
+          firstName="user-1 first name"
+          lastName="user-1 last name"
+          rootClassName={null} />
       </div>
       <div>
         <span>