From cb30675958ea2c3b7841cdd20236a2dd35530bf0 Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Thu, 1 Jun 2017 17:28:00 +0300
Subject: [PATCH] Fix tests other components too (Avatar is used in several
 places).

---
 .../OrderDetailsPanel/OrderDetailsPanel.js     |  2 +-
 .../OrderDetailsPanel.test.js.snap             |  4 +++-
 .../SaleDetailsPanel/SaleDetailsPanel.js       |  2 +-
 .../SaleDetailsPanel.test.js.snap              |  4 +++-
 .../__snapshots__/TopbarDesktop.test.js.snap   |  9 ++++++---
 src/containers/InboxPage/InboxPage.js          | 16 +++++++++-------
 .../__snapshots__/InboxPage.test.js.snap       | 18 ++++++++++++------
 src/containers/ListingPage/ListingPage.js      |  2 +-
 .../__snapshots__/ListingPage.test.js.snap     |  4 +++-
 9 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/src/components/OrderDetailsPanel/OrderDetailsPanel.js b/src/components/OrderDetailsPanel/OrderDetailsPanel.js
index 6e54635b..1c44202c 100644
--- a/src/components/OrderDetailsPanel/OrderDetailsPanel.js
+++ b/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>
diff --git a/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap b/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap
index ef0fac82..eb2ddd3c 100644
--- a/src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap
+++ b/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
diff --git a/src/components/SaleDetailsPanel/SaleDetailsPanel.js b/src/components/SaleDetailsPanel/SaleDetailsPanel.js
index 08f951ff..86e6b249 100644
--- a/src/components/SaleDetailsPanel/SaleDetailsPanel.js
+++ b/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}
diff --git a/src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap b/src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap
index e35c4221..df115e10 100644
--- a/src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap
+++ b/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
diff --git a/src/components/TopbarDesktop/__snapshots__/TopbarDesktop.test.js.snap b/src/components/TopbarDesktop/__snapshots__/TopbarDesktop.test.js.snap
index c021c935..5d742707 100644
--- a/src/components/TopbarDesktop/__snapshots__/TopbarDesktop.test.js.snap
+++ b/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=""
diff --git a/src/containers/InboxPage/InboxPage.js b/src/containers/InboxPage/InboxPage.js
index abaead35..aa5b936f 100644
--- a/src/containers/InboxPage/InboxPage.js
+++ b/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>
diff --git a/src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap b/src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap
index 959f29fb..e981a9c3 100644
--- a/src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap
+++ b/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}>
diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
index 120bb337..fa6649e7 100644
--- a/src/containers/ListingPage/ListingPage.js
+++ b/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>
diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
index 341e6583..6101b1fe 100644
--- a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
+++ b/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>