diff options
Diffstat (limited to 'spec/javascript/components')
-rw-r--r-- | spec/javascript/components/avatar.test.js | 30 | ||||
-rw-r--r-- | spec/javascript/components/avatar_overlay.test.js | 34 | ||||
-rw-r--r-- | spec/javascript/components/display_name.test.js | 12 | ||||
-rw-r--r-- | spec/javascript/components/dropdown_menu.test.js | 132 | ||||
-rw-r--r-- | spec/javascript/components/emojify.test.js | 16 |
5 files changed, 69 insertions, 155 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')})`); + }); +}); diff --git a/spec/javascript/components/display_name.test.js b/spec/javascript/components/display_name.test.js index ad9288d4d..ab484cf3e 100644 --- a/spec/javascript/components/display_name.test.js +++ b/spec/javascript/components/display_name.test.js @@ -9,19 +9,9 @@ describe('<DisplayName />', () => { const account = fromJS({ username: 'bar', acct: 'bar@baz', - display_name: 'Foo', + display_name_html: '<p>Foo</p>', }); const wrapper = render(<DisplayName account={account} />); expect(wrapper).to.have.text('Foo @bar@baz'); }); - - it('renders the username + account name if display name is empty', () => { - const account = fromJS({ - username: 'bar', - acct: 'bar@baz', - display_name: '', - }); - const wrapper = render(<DisplayName account={account} />); - expect(wrapper).to.have.text('bar @bar@baz'); - }); }); diff --git a/spec/javascript/components/dropdown_menu.test.js b/spec/javascript/components/dropdown_menu.test.js deleted file mode 100644 index a5af730ef..000000000 --- a/spec/javascript/components/dropdown_menu.test.js +++ /dev/null @@ -1,132 +0,0 @@ -import { expect } from 'chai'; -import { shallow, mount } from 'enzyme'; -import sinon from 'sinon'; -import React from 'react'; -import DropdownMenu from '../../../app/javascript/mastodon/components/dropdown_menu'; -import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown'; - -const isTrue = () => true; - -describe('<DropdownMenu />', () => { - const icon = 'my-icon'; - const size = 123; - let items; - let wrapper; - let action; - - beforeEach(() => { - action = sinon.spy(); - - items = [ - { text: 'first item', action: action, href: '/some/url' }, - { text: 'second item', action: 'noop' }, - ]; - wrapper = shallow(<DropdownMenu icon={icon} items={items} size={size} />); - }); - - it('contains one <Dropdown />', () => { - expect(wrapper).to.have.exactly(1).descendants(Dropdown); - }); - - it('contains one <DropdownTrigger />', () => { - expect(wrapper.find(Dropdown)).to.have.exactly(1).descendants(DropdownTrigger); - }); - - it('contains one <DropdownContent />', () => { - expect(wrapper.find(Dropdown)).to.have.exactly(1).descendants(DropdownContent); - }); - - it('does not contain a <DropdownContent /> if isUserTouching', () => { - const touchingWrapper = shallow(<DropdownMenu icon={icon} items={items} size={size} isUserTouching={isTrue} />); - expect(touchingWrapper.find(Dropdown)).to.have.exactly(0).descendants(DropdownContent); - }); - - it('does not contain a <DropdownContent /> if isUserTouching', () => { - const touchingWrapper = shallow(<DropdownMenu icon={icon} items={items} size={size} isUserTouching={isTrue} />); - expect(touchingWrapper.find(Dropdown)).to.have.exactly(0).descendants(DropdownContent); - }); - - it('uses props.size for <DropdownTrigger /> style values', () => { - ['font-size', 'width', 'line-height'].map((property) => { - expect(wrapper.find(DropdownTrigger)).to.have.style(property, `${size}px`); - }); - }); - - it('uses props.icon as icon class name', () => { - expect(wrapper.find(DropdownTrigger).find('i')).to.have.className(`fa-${icon}`); - }); - - it('is not expanded by default', () => { - expect(wrapper.state('expanded')).to.be.equal(false); - }); - - it('does not render the list elements if not expanded', () => { - const lis = wrapper.find(DropdownContent).find('li'); - expect(lis.length).to.be.equal(0); - }); - - it('sets expanded to true when clicking the trigger', () => { - const wrapper = mount(<DropdownMenu icon={icon} items={items} size={size} />); - wrapper.find(DropdownTrigger).first().simulate('click'); - expect(wrapper.state('expanded')).to.be.equal(true); - }); - - it('calls onModalOpen when clicking the trigger if isUserTouching', () => { - const onModalOpen = sinon.spy(); - const touchingWrapper = mount(<DropdownMenu icon={icon} items={items} status={3.14} size={size} onModalOpen={onModalOpen} isUserTouching={isTrue} />); - touchingWrapper.find(DropdownTrigger).first().simulate('click'); - expect(onModalOpen.calledOnce).to.be.equal(true); - expect(onModalOpen.args[0][0]).to.be.deep.equal({ status: 3.14, actions: items, onClick: touchingWrapper.node.handleClick }); - }); - - it('calls onModalClose when clicking an action if isUserTouching and isModalOpen', () => { - const onModalOpen = sinon.spy(); - const onModalClose = sinon.spy(); - const touchingWrapper = mount(<DropdownMenu icon={icon} items={items} status={3.14} size={size} isModalOpen onModalOpen={onModalOpen} onModalClose={onModalClose} isUserTouching={isTrue} />); - touchingWrapper.find(DropdownTrigger).first().simulate('click'); - touchingWrapper.node.handleClick({ currentTarget: { getAttribute: () => '0' }, preventDefault: () => null }); - expect(onModalClose.calledOnce).to.be.equal(true); - }); - - // Error: ReactWrapper::state() can only be called on the root - /*it('sets expanded to false when clicking outside', () => { - const wrapper = mount(( - <div> - <DropdownMenu icon={icon} items={items} size={size} /> - <span /> - </div> - )); - - wrapper.find(DropdownTrigger).first().simulate('click'); - expect(wrapper.find(DropdownMenu).first().state('expanded')).to.be.equal(true); - - wrapper.find('span').first().simulate('click'); - expect(wrapper.find(DropdownMenu).first().state('expanded')).to.be.equal(false); - })*/ - - it('renders list elements for each props.items if expanded', () => { - const wrapper = mount(<DropdownMenu icon={icon} items={items} size={size} />); - wrapper.find(DropdownTrigger).first().simulate('click'); - const lis = wrapper.find(DropdownContent).find('li'); - expect(lis.length).to.be.equal(items.length); - }); - - it('uses the href passed in via props.items', () => { - wrapper - .find(DropdownContent).find('li a') - .forEach((a, i) => expect(a).to.have.attr('href', items[i].href)); - }); - - it('uses the text passed in via props.items', () => { - wrapper - .find(DropdownContent).find('li a') - .forEach((a, i) => expect(a).to.have.text(items[i].text)); - }); - - it('uses the action passed in via props.items as click handler', () => { - const wrapper = mount(<DropdownMenu icon={icon} items={items} size={size} />); - wrapper.find(DropdownTrigger).first().simulate('click'); - wrapper.find(DropdownContent).find('li a').first().simulate('click'); - expect(action.calledOnce).to.equal(true); - }); -}); diff --git a/spec/javascript/components/emojify.test.js b/spec/javascript/components/emojify.test.js index e165b4519..6e73c9251 100644 --- a/spec/javascript/components/emojify.test.js +++ b/spec/javascript/components/emojify.test.js @@ -22,23 +22,23 @@ describe('emojify', () => { it('does unicode', () => { expect(emojify('\uD83D\uDC69\u200D\uD83D\uDC69\u200D\uD83D\uDC66\u200D\uD83D\uDC66')).to.equal( - '<img draggable="false" class="emojione" alt="๐ฉโ๐ฉโ๐ฆโ๐ฆ" title=":family_wwbb:" src="/emoji/1f469-1f469-1f466-1f466.svg" />'); - expect(emojify('\uD83D\uDC68\uD83D\uDC69\uD83D\uDC67\uD83D\uDC67')).to.equal( - '<img draggable="false" class="emojione" alt="๐จ๐ฉ๐ง๐ง" title=":family_mwgg:" src="/emoji/1f468-1f469-1f467-1f467.svg" />'); - expect(emojify('\uD83D\uDC69\uD83D\uDC69\uD83D\uDC66')).to.equal('<img draggable="false" class="emojione" alt="๐ฉ๐ฉ๐ฆ" title=":family_wwb:" src="/emoji/1f469-1f469-1f466.svg" />'); + '<img draggable="false" class="emojione" alt="๐ฉโ๐ฉโ๐ฆโ๐ฆ" title=":woman-woman-boy-boy:" src="/emoji/1f469-200d-1f469-200d-1f466-200d-1f466.svg" />'); + expect(emojify('๐จโ๐ฉโ๐งโ๐ง')).to.equal( + '<img draggable="false" class="emojione" alt="๐จโ๐ฉโ๐งโ๐ง" title=":man-woman-girl-girl:" src="/emoji/1f468-200d-1f469-200d-1f467-200d-1f467.svg" />'); + expect(emojify('๐ฉโ๐ฉโ๐ฆ')).to.equal('<img draggable="false" class="emojione" alt="๐ฉโ๐ฉโ๐ฆ" title=":woman-woman-boy:" src="/emoji/1f469-200d-1f469-200d-1f466.svg" />'); expect(emojify('\u2757')).to.equal( '<img draggable="false" class="emojione" alt="โ" title=":exclamation:" src="/emoji/2757.svg" />'); }); it('does multiple unicode', () => { expect(emojify('\u2757 #\uFE0F\u20E3')).to.equal( - '<img draggable="false" class="emojione" alt="โ" title=":exclamation:" src="/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#๏ธโฃ" title=":hash:" src="/emoji/0023-20e3.svg" />'); + '<img draggable="false" class="emojione" alt="โ" title=":exclamation:" src="/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#๏ธโฃ" title=":hash:" src="/emoji/23-20e3.svg" />'); expect(emojify('\u2757#\uFE0F\u20E3')).to.equal( - '<img draggable="false" class="emojione" alt="โ" title=":exclamation:" src="/emoji/2757.svg" /><img draggable="false" class="emojione" alt="#๏ธโฃ" title=":hash:" src="/emoji/0023-20e3.svg" />'); + '<img draggable="false" class="emojione" alt="โ" title=":exclamation:" src="/emoji/2757.svg" /><img draggable="false" class="emojione" alt="#๏ธโฃ" title=":hash:" src="/emoji/23-20e3.svg" />'); expect(emojify('\u2757 #\uFE0F\u20E3 \u2757')).to.equal( - '<img draggable="false" class="emojione" alt="โ" title=":exclamation:" src="/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#๏ธโฃ" title=":hash:" src="/emoji/0023-20e3.svg" /> <img draggable="false" class="emojione" alt="โ" title=":exclamation:" src="/emoji/2757.svg" />'); + '<img draggable="false" class="emojione" alt="โ" title=":exclamation:" src="/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#๏ธโฃ" title=":hash:" src="/emoji/23-20e3.svg" /> <img draggable="false" class="emojione" alt="โ" title=":exclamation:" src="/emoji/2757.svg" />'); expect(emojify('foo \u2757 #\uFE0F\u20E3 bar')).to.equal( - 'foo <img draggable="false" class="emojione" alt="โ" title=":exclamation:" src="/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#๏ธโฃ" title=":hash:" src="/emoji/0023-20e3.svg" /> bar'); + 'foo <img draggable="false" class="emojione" alt="โ" title=":exclamation:" src="/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#๏ธโฃ" title=":hash:" src="/emoji/23-20e3.svg" /> bar'); }); it('ignores unicode inside of tags', () => { |