From 50d38d7605b8998463b1428b8da886f33e0714da Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Thu, 27 Jul 2017 22:31:59 +0200 Subject: fix(dropdown_menu): Open as modal on mobile (#4295) * fix(dropdown_menu): Open as modal on mobile * fix(dropdown_menu): Open modal on touch * fix(dropdown_menu): Show status * fix(dropdown_menu): Max dimensions and reduce padding * chore(dropdown_menu): Test new functionality * refactor: Use DropdownMenuContainer instead of DropdownMenu * feat(privacy_dropdown): Open as modal on touch devices * feat(modal_root): Do not load actions-modal async --- spec/javascript/components/dropdown_menu.test.js | 49 ++++++++++++++++++++---- 1 file changed, 42 insertions(+), 7 deletions(-) (limited to 'spec/javascript/components') 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('', () => { 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(); + 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); @@ -28,6 +36,16 @@ describe('', () => { 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`); @@ -53,6 +71,23 @@ describe('', () => { 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(( -- cgit