Refactor Avatar and AvatarOverlay to have 'account' as prop instead of src and staticSrc (#4526)

* Refactored Avatar and AvatarOverlay (DRY) to have 'account' as prop.
Also removed animate attribute from compose navigation bar, which should
have never been there. Added test for avatar overlay.

* fix broken tests

* god dammit another bug in tests! travis please let this pass

* formatting in avatar overlay

2 files changed, 60 insertions, 4 deletions

diff --git a/spec/javascript/components/avatar.test.js b/spec/javascript/components/avatar.test.js
index 03b71dc9d..ee40812ca 100644
--- a/spec/javascript/components/avatar.test.js
+++ b/spec/javascript/components/avatar.test.js
@@ -1,20 +1,42 @@
 import { expect } from 'chai';
 import { render } from 'enzyme';
+import { fromJS }  from 'immutable';
 import React from 'react';
 import Avatar from '../../../app/javascript/mastodon/components/avatar';
 
 describe('<Avatar />', () => {
-  const src = '/path/to/image.jpg';
+  const account = fromJS({
+    username: 'alice',
+    acct: 'alice',
+    display_name: 'Alice',
+    avatar: '/animated/alice.gif',
+    avatar_static: '/static/alice.jpg',
+  });
   const size = 100;
-  const wrapper = render(<Avatar src={src} animate size={size} />);
+  const animated = render(<Avatar account={account} animate size={size} />);
+  const still = render(<Avatar account={account} size={size} />);
 
+  // Autoplay
   it('renders a div element with the given src as background', () => {
-    expect(wrapper.find('div')).to.have.style('background-image', `url(${src})`);
+    expect(animated.find('div')).to.have.style('background-image', `url(${account.get('avatar')})`);
   });
 
   it('renders a div element of the given size', () => {
     ['width', 'height'].map((attr) => {
-      expect(wrapper.find('div')).to.have.style(attr, `${size}px`);
+      expect(animated.find('div')).to.have.style(attr, `${size}px`);
+    });
+  });
+
+  // Still
+  it('renders a div element with the given static src as background if not autoplay', () => {
+    expect(still.find('div')).to.have.style('background-image', `url(${account.get('avatar_static')})`);
+  });
+
+  it('renders a div element of the given size if not autoplay', () => {
+    ['width', 'height'].map((attr) => {
+      expect(still.find('div')).to.have.style(attr, `${size}px`);
     });
   });
+
+  // TODO add autoplay test if possible
 });
diff --git a/spec/javascript/components/avatar_overlay.test.js b/spec/javascript/components/avatar_overlay.test.js
new file mode 100644
index 000000000..a8f0e13d5
--- /dev/null
+++ b/spec/javascript/components/avatar_overlay.test.js
@@ -0,0 +1,34 @@
+import { expect } from 'chai';
+import { render } from 'enzyme';
+import { fromJS }  from 'immutable';
+import React from 'react';
+import AvatarOverlay from '../../../app/javascript/mastodon/components/avatar_overlay';
+
+describe('<Avatar />', () => {
+  const account = fromJS({
+    username: 'alice',
+    acct: 'alice',
+    display_name: 'Alice',
+    avatar: '/animated/alice.gif',
+    avatar_static: '/static/alice.jpg',
+  });
+  const friend = fromJS({
+    username: 'eve',
+    acct: 'eve@blackhat.lair',
+    display_name: 'Evelyn',
+    avatar: '/animated/eve.gif',
+    avatar_static: '/static/eve.jpg',
+  });
+
+  const overlay = render(<AvatarOverlay account={account} friend={friend} />);
+
+  it('renders account static src as base of overlay avatar', () => {
+    expect(overlay.find('.account__avatar-overlay-base'))
+      .to.have.style('background-image', `url(${account.get('avatar_static')})`);
+  });
+
+  it('renders friend static src as overlay of overlay avatar', () => {
+    expect(overlay.find('.account__avatar-overlay-overlay'))
+      .to.have.style('background-image', `url(${friend.get('avatar_static')})`);
+  });
+});