diff options
Diffstat (limited to 'spec/javascript/components/dropdown_menu.test.js')
-rw-r--r-- | spec/javascript/components/dropdown_menu.test.js | 49 |
1 files changed, 42 insertions, 7 deletions
diff --git a/spec/javascript/components/dropdown_menu.test.js b/spec/javascript/components/dropdown_menu.test.js index 54cdcabf0..a5af730ef 100644 --- a/spec/javascript/components/dropdown_menu.test.js +++ b/spec/javascript/components/dropdown_menu.test.js @@ -5,16 +5,24 @@ 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; - const action = sinon.spy(); - - const items = [ - { text: 'first item', action: action, href: '/some/url' }, - { text: 'second item', action: 'noop' }, - ]; - const wrapper = shallow(<DropdownMenu icon={icon} items={items} size={size} />); + 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); @@ -28,6 +36,16 @@ describe('<DropdownMenu />', () => { 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`); @@ -53,6 +71,23 @@ describe('<DropdownMenu />', () => { 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(( |