diff --git a/app/javascript/glitch/components/account/header.js b/app/javascript/glitch/components/account/header.js index b79140c02d..a1197c4be8 100644 --- a/app/javascript/glitch/components/account/header.js +++ b/app/javascript/glitch/components/account/header.js @@ -194,11 +194,7 @@ Here, we render our component using all the things we've defined above.
- + ` if we don't. >
{ friend ? ( - + ) : ( - + ) }
diff --git a/app/javascript/mastodon/components/account.js b/app/javascript/mastodon/components/account.js index b6ca0661fb..69cc63d106 100644 --- a/app/javascript/mastodon/components/account.js +++ b/app/javascript/mastodon/components/account.js @@ -70,7 +70,7 @@ export default class Account extends ImmutablePureComponent {
-
+
diff --git a/app/javascript/mastodon/components/avatar.js b/app/javascript/mastodon/components/avatar.js index 4f81706576..dd155f0590 100644 --- a/app/javascript/mastodon/components/avatar.js +++ b/app/javascript/mastodon/components/avatar.js @@ -1,11 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; export default class Avatar extends React.PureComponent { static propTypes = { - src: PropTypes.string.isRequired, - staticSrc: PropTypes.string, + account: ImmutablePropTypes.map.isRequired, size: PropTypes.number.isRequired, style: PropTypes.object, animate: PropTypes.bool, @@ -33,9 +33,12 @@ export default class Avatar extends React.PureComponent { } render () { - const { src, size, staticSrc, animate, inline } = this.props; + const { account, size, animate, inline } = this.props; const { hovering } = this.state; + const src = account.get('avatar'); + const staticSrc = account.get('avatar_static'); + let className = 'account__avatar'; if (inline) { @@ -61,6 +64,7 @@ export default class Avatar extends React.PureComponent { onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} style={style} + data-avatar-of={`@${account.get('acct')}`} /> ); } diff --git a/app/javascript/mastodon/components/avatar_overlay.js b/app/javascript/mastodon/components/avatar_overlay.js index de43e0ef51..2ecf9fa448 100644 --- a/app/javascript/mastodon/components/avatar_overlay.js +++ b/app/javascript/mastodon/components/avatar_overlay.js @@ -1,28 +1,28 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; export default class AvatarOverlay extends React.PureComponent { static propTypes = { - staticSrc: PropTypes.string.isRequired, - overlaySrc: PropTypes.string.isRequired, + account: ImmutablePropTypes.map.isRequired, + friend: ImmutablePropTypes.map.isRequired, }; render() { - const { staticSrc, overlaySrc } = this.props; + const { account, friend } = this.props; const baseStyle = { - backgroundImage: `url(${staticSrc})`, + backgroundImage: `url(${account.get('avatar_static')})`, }; const overlayStyle = { - backgroundImage: `url(${overlaySrc})`, + backgroundImage: `url(${friend.get('avatar_static')})`, }; return (
-
-
+
+
); } diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index ac82e536f7..9bc3523c82 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -231,9 +231,9 @@ export default class Status extends ImmutablePureComponent { } if (account === undefined || account === null) { - statusAvatar = ; + statusAvatar = ; }else{ - statusAvatar = ; + statusAvatar = ; } return ( diff --git a/app/javascript/mastodon/features/compose/components/autosuggest_account.js b/app/javascript/mastodon/features/compose/components/autosuggest_account.js index ebfa3c247b..e7de3716ba 100644 --- a/app/javascript/mastodon/features/compose/components/autosuggest_account.js +++ b/app/javascript/mastodon/features/compose/components/autosuggest_account.js @@ -15,7 +15,7 @@ export default class AutosuggestAccount extends ImmutablePureComponent { return (
-
+
); diff --git a/app/javascript/mastodon/features/compose/components/navigation_bar.js b/app/javascript/mastodon/features/compose/components/navigation_bar.js index 5000ea2f1f..7f346854ce 100644 --- a/app/javascript/mastodon/features/compose/components/navigation_bar.js +++ b/app/javascript/mastodon/features/compose/components/navigation_bar.js @@ -19,7 +19,7 @@ export default class NavigationBar extends ImmutablePureComponent {
{this.props.account.get('acct')} - + diff --git a/app/javascript/mastodon/features/follow_requests/components/account_authorize.js b/app/javascript/mastodon/features/follow_requests/components/account_authorize.js index 566953ddd6..66fa5c235c 100644 --- a/app/javascript/mastodon/features/follow_requests/components/account_authorize.js +++ b/app/javascript/mastodon/features/follow_requests/components/account_authorize.js @@ -32,7 +32,7 @@ export default class AccountAuthorize extends ImmutablePureComponent {
-
+
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js index 5d28d4390b..a098322ba0 100644 --- a/app/javascript/mastodon/features/status/components/detailed_status.js +++ b/app/javascript/mastodon/features/status/components/detailed_status.js @@ -81,7 +81,7 @@ export default class DetailedStatus extends ImmutablePureComponent { return (
-
+
diff --git a/app/javascript/mastodon/features/ui/components/actions_modal.js b/app/javascript/mastodon/features/ui/components/actions_modal.js index cc0620d1c4..3d40033be1 100644 --- a/app/javascript/mastodon/features/ui/components/actions_modal.js +++ b/app/javascript/mastodon/features/ui/components/actions_modal.js @@ -46,7 +46,7 @@ export default class ActionsModal extends ImmutablePureComponent {
- +
diff --git a/app/javascript/mastodon/features/ui/components/boost_modal.js b/app/javascript/mastodon/features/ui/components/boost_modal.js index a1b0cf4bd9..dfd1284e93 100644 --- a/app/javascript/mastodon/features/ui/components/boost_modal.js +++ b/app/javascript/mastodon/features/ui/components/boost_modal.js @@ -62,7 +62,7 @@ export default class BoostModal extends ImmutablePureComponent {
- +
diff --git a/spec/javascript/components/avatar.test.js b/spec/javascript/components/avatar.test.js index 03b71dc9d9..ee40812caf 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('', () => { - 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(); + const animated = render(); + const still = render(); + // 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 0000000000..a8f0e13d52 --- /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('', () => { + 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(); + + 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')})`); + }); +});