From be485a781d6fde502627f891a1c11e93c9bfbf3c Mon Sep 17 00:00:00 2001 From: Simon Knox <simon@gitlab.com> Date: Wed, 9 Jan 2019 23:46:43 +0000 Subject: [PATCH] Hide More Actions tooltip when the menu opens --- .../notes/components/note_actions.vue | 6 ++++ .../55209-tool-tip-hides-menu-item.yml | 5 ++++ .../notes/components/note_actions_spec.js | 30 ++++++++++++++----- 3 files changed, 33 insertions(+), 8 deletions(-) create mode 100644 changelogs/unreleased/55209-tool-tip-hides-menu-item.yml diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue index 394f2a80a67..26485a9bbd1 100644 --- a/app/assets/javascripts/notes/components/note_actions.vue +++ b/app/assets/javascripts/notes/components/note_actions.vue @@ -126,6 +126,11 @@ export default { onResolve() { this.$emit('handleResolve'); }, + closeTooltip() { + this.$nextTick(() => { + this.$root.$emit('bv::hide::tooltip'); + }); + }, }, }; </script> @@ -202,6 +207,7 @@ export default { title="More actions" class="note-action-button more-actions-toggle btn btn-transparent" data-toggle="dropdown" + @click="closeTooltip" > <icon css-classes="icon" name="ellipsis_v" /> </button> diff --git a/changelogs/unreleased/55209-tool-tip-hides-menu-item.yml b/changelogs/unreleased/55209-tool-tip-hides-menu-item.yml new file mode 100644 index 00000000000..44ea4141632 --- /dev/null +++ b/changelogs/unreleased/55209-tool-tip-hides-menu-item.yml @@ -0,0 +1,5 @@ +--- +title: Close More Actions tooltip when menu opens +merge_request: 24285 +author: +type: fixed diff --git a/spec/javascripts/notes/components/note_actions_spec.js b/spec/javascripts/notes/components/note_actions_spec.js index 0c1962912b4..d604e90b529 100644 --- a/spec/javascripts/notes/components/note_actions_spec.js +++ b/spec/javascripts/notes/components/note_actions_spec.js @@ -1,5 +1,5 @@ import Vue from 'vue'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount, createLocalVue, createWrapper } from '@vue/test-utils'; import createStore from '~/notes/stores'; import noteActions from '~/notes/components/note_actions.vue'; import { TEST_HOST } from 'spec/test_constants'; @@ -10,7 +10,7 @@ describe('noteActions', () => { let store; let props; - const createWrapper = propsData => { + const shallowMountNoteActions = propsData => { const localVue = createLocalVue(); return shallowMount(noteActions, { store, @@ -44,7 +44,7 @@ describe('noteActions', () => { beforeEach(() => { store.dispatch('setUserData', userDataMock); - wrapper = createWrapper(props); + wrapper = shallowMountNoteActions(props); }); it('should render access level badge', () => { @@ -90,13 +90,27 @@ describe('noteActions', () => { it('should be possible to delete comment', () => { expect(wrapper.find('.js-note-delete').exists()).toBe(true); }); + + it('closes tooltip when dropdown opens', done => { + wrapper.find('.more-actions-toggle').trigger('click'); + + const rootWrapper = createWrapper(wrapper.vm.$root); + Vue.nextTick() + .then(() => { + const emitted = Object.keys(rootWrapper.emitted()); + + expect(emitted).toEqual(['bv::hide::tooltip']); + done(); + }) + .catch(done.fail); + }); }); }); describe('user is not logged in', () => { beforeEach(() => { store.dispatch('setUserData', {}); - wrapper = createWrapper({ + wrapper = shallowMountNoteActions({ ...props, canDelete: false, canEdit: false, @@ -127,7 +141,7 @@ describe('noteActions', () => { describe('for showReply = true', () => { beforeEach(() => { - wrapper = createWrapper({ + wrapper = shallowMountNoteActions({ ...props, showReply: true, }); @@ -142,7 +156,7 @@ describe('noteActions', () => { describe('for showReply = false', () => { beforeEach(() => { - wrapper = createWrapper({ + wrapper = shallowMountNoteActions({ ...props, showReply: false, }); @@ -169,7 +183,7 @@ describe('noteActions', () => { describe('for showReply = true', () => { beforeEach(() => { - wrapper = createWrapper({ + wrapper = shallowMountNoteActions({ ...props, showReply: true, }); @@ -184,7 +198,7 @@ describe('noteActions', () => { describe('for showReply = false', () => { beforeEach(() => { - wrapper = createWrapper({ + wrapper = shallowMountNoteActions({ ...props, showReply: false, }); -- 2.30.9