From 034fab39abe5f98e7a2caec861cf1c68c46747e8 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 22 Sep 2017 04:59:17 +0200 Subject: Make dropdowns render into portal, expand animation (#5018) * Make dropdowns render into portal, expand animation * Improve actions modal style --- spec/javascript/components/dropdown_menu.test.js | 132 ----------------------- 1 file changed, 132 deletions(-) delete mode 100644 spec/javascript/components/dropdown_menu.test.js (limited to 'spec/javascript/components/dropdown_menu.test.js') 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('', () => { - 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(); - }); - - it('contains one ', () => { - expect(wrapper).to.have.exactly(1).descendants(Dropdown); - }); - - it('contains one ', () => { - expect(wrapper.find(Dropdown)).to.have.exactly(1).descendants(DropdownTrigger); - }); - - it('contains one ', () => { - expect(wrapper.find(Dropdown)).to.have.exactly(1).descendants(DropdownContent); - }); - - it('does not contain a if isUserTouching', () => { - const touchingWrapper = shallow(); - expect(touchingWrapper.find(Dropdown)).to.have.exactly(0).descendants(DropdownContent); - }); - - it('does not contain a if isUserTouching', () => { - const touchingWrapper = shallow(); - expect(touchingWrapper.find(Dropdown)).to.have.exactly(0).descendants(DropdownContent); - }); - - it('uses props.size for 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(); - 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(); - 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(); - 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(( -
- - -
- )); - - 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(); - 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(); - wrapper.find(DropdownTrigger).first().simulate('click'); - wrapper.find(DropdownContent).find('li a').first().simulate('click'); - expect(action.calledOnce).to.equal(true); - }); -}); -- cgit