diff --git a/app/assets/javascripts/branches/components/branch_more_actions.vue b/app/assets/javascripts/branches/components/branch_more_actions.vue index ee47f6af2f821518f1f84ab67673b3ede5a5c5f9..b60267546eb4cc65139262f730f55f4a94bc5759 100644 --- a/app/assets/javascripts/branches/components/branch_more_actions.vue +++ b/app/assets/javascripts/branches/components/branch_more_actions.vue @@ -45,6 +45,11 @@ export default { deleteBranch: s__('Branches|Delete branch'), deleteProtectedBranch: s__('Branches|Delete protected branch'), }, + data() { + return { + isDropdownVisible: false, + }; + }, computed: { deleteBranchText() { return this.isProtectedBranch @@ -80,6 +85,9 @@ export default { return items; }, + moreActionsTooltip() { + return !this.isDropdownVisible ? this.$options.i18n.toggleText : ''; + }, }, methods: { openModal() { @@ -91,16 +99,19 @@ export default { merged: this.merged, }); }, + showDropdown() { + this.isDropdownVisible = true; + }, + hideDropdown() { + this.isDropdownVisible = false; + }, }, }; </script> <template> <gl-disclosure-dropdown - v-gl-tooltip.hover.top="{ - title: $options.i18n.toggleText, - boundary: 'viewport', - }" + v-gl-tooltip.top.viewport="moreActionsTooltip" :items="dropdownItems" :toggle-text="$options.i18n.toggleText" icon="ellipsis_v" @@ -109,5 +120,7 @@ export default { data-testid="branch-more-actions" text-sr-only no-caret + @shown="showDropdown" + @hidden="hideDropdown" /> </template> diff --git a/app/assets/javascripts/groups_projects/components/more_actions_dropdown.vue b/app/assets/javascripts/groups_projects/components/more_actions_dropdown.vue index fb5370c7ce283bfac6a1dd2910dc0255d251c6b1..313fa624809a75ea2998add5a18a3047bd6caf58 100644 --- a/app/assets/javascripts/groups_projects/components/more_actions_dropdown.vue +++ b/app/assets/javascripts/groups_projects/components/more_actions_dropdown.vue @@ -32,6 +32,11 @@ export default { 'canEdit', 'editPath', ], + data() { + return { + isDropdownVisible: false, + }; + }, computed: { namespaceType() { return this.isGroup ? WORKSPACE_GROUP : WORKSPACE_PROJECT; @@ -113,9 +118,20 @@ export default { }, }; }, + showDropdownTooltip() { + return !this.isDropdownVisible ? this.$options.i18n.actionsLabel : ''; + }, + }, + methods: { + showDropdown() { + this.isDropdownVisible = true; + }, + hideDropdown() { + this.isDropdownVisible = false; + }, }, i18n: { - actionsLabel: __('Actions'), + actionsLabel: __('More actions'), groupCopiedToClipboard: s__('GroupPage|Group ID copied to clipboard.'), projectCopiedToClipboard: s__('ProjectPage|Project ID copied to clipboard.'), groupLeaveTitle: __('Leave group'), @@ -132,7 +148,7 @@ export default { <template> <gl-disclosure-dropdown - v-gl-tooltip.hover="$options.i18n.actionsLabel" + v-gl-tooltip="showDropdownTooltip" category="tertiary" icon="ellipsis_v" no-caret @@ -140,6 +156,8 @@ export default { text-sr-only data-testid="groups-projects-more-actions-dropdown" class="gl-relative gl-w-full gl-sm-w-auto" + @shown="showDropdown" + @hidden="hideDropdown" > <template #toggle> <div class="gl-min-h-7"> diff --git a/app/assets/javascripts/issues/show/components/header_actions.vue b/app/assets/javascripts/issues/show/components/header_actions.vue index 85e415de65e0bb38c67850e458bd05babaabde7a..4464b295e54322faefdb3668889d49dff5c22e8a 100644 --- a/app/assets/javascripts/issues/show/components/header_actions.vue +++ b/app/assets/javascripts/issues/show/components/header_actions.vue @@ -99,6 +99,7 @@ export default { return { isReportAbuseDrawerOpen: false, isUserSignedIn: isLoggedIn(), + isDesktopDropdownVisible: false, }; }, apollo: { @@ -203,6 +204,9 @@ export default { ? description : sanitize(`${description} <kbd class="flat gl-ml-1" aria-hidden=true>${key}</kbd>`); }, + showDropdownTooltip() { + return !this.isDesktopDropdownVisible ? this.dropdownText : ''; + }, }, created() { eventHub.$on('toggle.issuable.state', this.toggleIssueState); @@ -308,6 +312,12 @@ export default { this.$refs.issuableActionsDropdownMobile?.close(); this.$refs.issuableActionsDropdownDesktop?.close(); }, + showDesktopDropdown() { + this.isDesktopDropdownVisible = true; + }, + hideDesktopDropdown() { + this.isDesktopDropdownVisible = false; + }, }, TYPE_ISSUE, }; @@ -415,7 +425,7 @@ export default { v-if="hasDesktopDropdown" id="new-actions-header-dropdown" ref="issuableActionsDropdownDesktop" - v-gl-tooltip.hover + v-gl-tooltip="showDropdownTooltip" class="gl-display-none gl-md-display-inline-flex!" icon="ellipsis_v" category="tertiary" @@ -427,6 +437,8 @@ export default { :auto-close="false" data-testid="desktop-dropdown" no-caret + @shown="showDesktopDropdown" + @hidden="hideDesktopDropdown" > <template v-if="showMovedSidebarOptions && !glFeatures.notificationsTodosButtons"> <sidebar-subscriptions-widget diff --git a/app/assets/javascripts/pages/shared/wikis/components/wiki_more_dropdown.vue b/app/assets/javascripts/pages/shared/wikis/components/wiki_more_dropdown.vue index f09cde40a6ee39d2f99ee54a26e7fef4ba47c82b..0448cfdea9b380cf02688618b3c0d2ea71350124 100644 --- a/app/assets/javascripts/pages/shared/wikis/components/wiki_more_dropdown.vue +++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_more_dropdown.vue @@ -1,5 +1,5 @@ <script> -import { GlDisclosureDropdown } from '@gitlab/ui'; +import { GlDisclosureDropdown, GlTooltipDirective } from '@gitlab/ui'; import { s__, __ } from '~/locale'; import printMarkdownDom from '~/lib/print_markdown_dom'; import { isTemplate } from '../utils'; @@ -8,7 +8,18 @@ export default { components: { GlDisclosureDropdown, }, + directives: { + GlTooltip: GlTooltipDirective, + }, inject: ['print', 'history'], + i18n: { + wikiActions: s__('Wiki|Wiki actions'), + }, + data() { + return { + isDropdownVisible: false, + }; + }, computed: { isTemplate, dropdownItems() { @@ -36,6 +47,9 @@ export default { return items; }, + showDropdownTooltip() { + return !this.isDropdownVisible ? this.$options.i18n.wikiActions : ''; + }, }, methods: { printPage() { @@ -45,16 +59,25 @@ export default { stylesheet: this.print.stylesheet, }); }, + showDropdown() { + this.isDropdownVisible = true; + }, + hideDropdown() { + this.isDropdownVisible = false; + }, }, }; </script> <template> <gl-disclosure-dropdown + v-gl-tooltip="showDropdownTooltip" :items="dropdownItems" icon="ellipsis_v" category="tertiary" placement="right" no-caret data-testid="wiki-more-dropdown" + @shown="showDropdown" + @hidden="hideDropdown" /> </template> diff --git a/app/assets/javascripts/vue_shared/components/mr_more_dropdown.vue b/app/assets/javascripts/vue_shared/components/mr_more_dropdown.vue index 2c71da11c6995506bbd683116dadf43a6745f8c1..ab8f952e306ccb3c384af0e31a6121e81ce2dcb4 100644 --- a/app/assets/javascripts/vue_shared/components/mr_more_dropdown.vue +++ b/app/assets/javascripts/vue_shared/components/mr_more_dropdown.vue @@ -130,6 +130,7 @@ export default { isLoadingDraft: false, isLoadingClipboard: false, isReportAbuseDrawerOpen: false, + isDropdownVisible: false, }; }, computed: { @@ -148,6 +149,9 @@ export default { href: this.editUrl, }; }, + showDropdownTooltip() { + return !this.isDropdownVisible ? this.$options.i18n.mergeRequestActions : ''; + }, }, methods: { draftAction() { @@ -207,6 +211,12 @@ export default { showReopenMergeRequestOption() { return !this.sourceProjectMissing && !this.isOpen; }, + showDropdown() { + this.isDropdownVisible = true; + }, + hideDropdown() { + this.isDropdownVisible = false; + }, }, }; </script> @@ -219,9 +229,13 @@ export default { <gl-disclosure-dropdown id="new-actions-header-dropdown" ref="mrMoreActionsDropdown" + v-gl-tooltip="showDropdownTooltip" + :title="$options.i18n.mergeRequestActions" data-testid="dropdown-toggle" placement="right" :auto-close="false" + @shown="showDropdown" + @hidden="hideDropdown" > <template #toggle> <div class="gl-min-h-7 gl-mb-2 gl-md-mb-0!"> @@ -229,7 +243,6 @@ export default { class="gl-md-display-none! gl-new-dropdown-toggle gl-absolute gl-top-0 gl-left-0 gl-w-full" category="secondary" :aria-label="$options.i18n.mergeRequestActions" - :title="$options.i18n.mergeRequestActions" > <span class="">{{ $options.i18n.mergeRequestActions }}</span> <gl-icon class="dropdown-chevron" name="chevron-down" /> diff --git a/app/assets/javascripts/work_items/components/work_item_actions.vue b/app/assets/javascripts/work_items/components/work_item_actions.vue index 791a7b277baa12695037eee2476ba0a43b36d815..0eef9cf9ffbeeca21b7df5582b99bfeed43fa869 100644 --- a/app/assets/javascripts/work_items/components/work_item_actions.vue +++ b/app/assets/javascripts/work_items/components/work_item_actions.vue @@ -6,6 +6,7 @@ import { GlLoadingIcon, GlModal, GlModalDirective, + GlTooltipDirective, GlToggle, } from '@gitlab/ui'; @@ -52,6 +53,7 @@ export default { copyReference: __('Copy reference'), referenceCopied: __('Reference copied'), emailAddressCopied: __('Email address copied'), + moreActions: __('More actions'), }, components: { GlDisclosureDropdown, @@ -64,6 +66,7 @@ export default { }, directives: { GlModal: GlModalDirective, + GlTooltip: GlTooltipDirective, }, mixins: [glFeatureFlagMixin(), Tracking.mixin({ label: 'actions_menu' })], isLoggedIn: isLoggedIn(), @@ -154,6 +157,7 @@ export default { data() { return { isLockDiscussionUpdating: false, + isDropdownVisible: false, }; }, apollo: { @@ -206,6 +210,9 @@ export default { objectiveWorkItemTypeId() { return this.workItemTypes.find((type) => type.name === WORK_ITEM_TYPE_VALUE_OBJECTIVE).id; }, + showDropdownTooltip() { + return !this.isDropdownVisible ? this.$options.i18n.moreActions : ''; + }, }, methods: { copyToClipboard(text, message) { @@ -325,6 +332,12 @@ export default { this.closeDropdown(); } }, + showDropdown() { + this.isDropdownVisible = true; + }, + hideDropdown() { + this.isDropdownVisible = false; + }, }, }; </script> @@ -333,14 +346,17 @@ export default { <div> <gl-disclosure-dropdown ref="workItemsMoreActions" + v-gl-tooltip="showDropdownTooltip" icon="ellipsis_v" data-testid="work-item-actions-dropdown" text-sr-only - :toggle-text="__('More actions')" + :toggle-text="$options.i18n.moreActions" category="tertiary" :auto-close="false" no-caret right + @shown="showDropdown" + @hidden="hideDropdown" > <template v-if="$options.isLoggedIn && !hideSubscribe"> <gl-disclosure-dropdown-item diff --git a/ee/app/assets/javascripts/epic/components/epic_header_actions.vue b/ee/app/assets/javascripts/epic/components/epic_header_actions.vue index a49c183f7321bf51342314fd9c59f4fde70c8315..c8207ffa0c6401d73775a12e8ec5c9160edbc266 100644 --- a/ee/app/assets/javascripts/epic/components/epic_header_actions.vue +++ b/ee/app/assets/javascripts/epic/components/epic_header_actions.vue @@ -52,6 +52,7 @@ export default { data() { return { isReportAbuseDrawerOpen: false, + isDesktopDropdownVisible: false, }; }, computed: { @@ -152,6 +153,9 @@ export default { ? description : sanitize(`${description} <kbd class="flat gl-ml-1" aria-hidden=true>${key}</kbd>`); }, + showDropdownTooltip() { + return !this.isDesktopDropdownVisible ? this.$options.i18n.dropdownText : ''; + }, }, methods: { ...mapActions(['toggleEpicStatus']), @@ -172,6 +176,12 @@ export default { toggleReportAbuseDrawer(isOpen) { this.isReportAbuseDrawerOpen = isOpen; }, + showDesktopDropdown() { + this.isDesktopDropdownVisible = true; + }, + hideDesktopDropdown() { + this.isDesktopDropdownVisible = false; + }, }, }; </script> @@ -236,6 +246,7 @@ export default { <gl-disclosure-dropdown ref="epicActionsDropdownDesktop" + v-gl-tooltip="showDropdownTooltip" class="gl-display-none gl-md-display-block" placement="right" :auto-close="false" @@ -245,6 +256,8 @@ export default { icon="ellipsis_v" category="tertiary" no-caret + @shown="showDesktopDropdown" + @hidden="hideDesktopDropdown" > <gl-disclosure-dropdown-group v-if="showNotificationToggle && !glFeatures.notificationsTodosButtons" diff --git a/ee/spec/frontend/epic/components/epic_header_actions_spec.js b/ee/spec/frontend/epic/components/epic_header_actions_spec.js index e301c36ff62ab80302934fdc004519630c3d5fbc..f3e0daf8d5268d07e55a61c5b47eba7ff1e80f1d 100644 --- a/ee/spec/frontend/epic/components/epic_header_actions_spec.js +++ b/ee/spec/frontend/epic/components/epic_header_actions_spec.js @@ -1,8 +1,8 @@ -import { GlDisclosureDropdown } from '@gitlab/ui'; import Vue from 'vue'; // eslint-disable-next-line no-restricted-imports import Vuex from 'vuex'; import { mountExtended } from 'helpers/vue_test_utils_helper'; +import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import EpicHeaderActions from 'ee/epic/components/epic_header_actions.vue'; import { getStoreConfig } from 'ee/epic/store'; import { STATUS_CLOSED, STATUS_OPEN } from '~/issues/constants'; @@ -42,6 +42,9 @@ describe('EpicHeaderActions component', () => { wrapper = mountExtended(EpicHeaderActions, { store, + directives: { + GlTooltip: createMockDirective('gl-tooltip'), + }, provide: { fullPath: 'mock-path', iid: 'mock-iid', @@ -57,7 +60,8 @@ describe('EpicHeaderActions component', () => { wrapper.findByRole('button', { name: 'Copy reference' }); const findDeleteEpicButton = () => wrapper.findByRole('button', { name: 'Delete epic' }); const findDeleteEpicModal = () => wrapper.findComponent(DeleteIssueModal); - const findDropdown = () => wrapper.findComponent(GlDisclosureDropdown); + const findDropdown = () => wrapper.findByTestId('desktop-dropdown'); + const findDropdownTooltip = () => getBinding(findDropdown().element, 'gl-tooltip'); const findEditButton = () => wrapper.findByRole('button', { name: 'Edit title and description' }); const findNewEpicButton = () => wrapper.findByRole('link', { name: 'New epic' }); const findNotificationToggle = () => wrapper.findComponent(SidebarSubscriptionsWidget); @@ -162,6 +166,12 @@ describe('EpicHeaderActions component', () => { expect(findNotificationToggle().exists()).toBe(false); }); }); + + it('renders tooltip', () => { + createComponent(); + + expect(findDropdownTooltip().value).toBe('Epic actions'); + }); }); describe('delete issue modal', () => { diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 2d482cc612b917b26ee6a2dd362b4f77a726198f..9f837ded54b7ed1fd2c0cb89446a4a5e6e4a2fb6 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -57410,6 +57410,9 @@ msgstr "" msgid "Wiki|Wiki Templates" msgstr "" +msgid "Wiki|Wiki actions" +msgstr "" + msgid "Will be created" msgstr "" diff --git a/spec/frontend/branches/components/branch_more_actions_spec.js b/spec/frontend/branches/components/branch_more_actions_spec.js index 32b850a62a0add4d0216a90dcac841e42123189b..bb5624d26c235c3698f53119d154602635b32444 100644 --- a/spec/frontend/branches/components/branch_more_actions_spec.js +++ b/spec/frontend/branches/components/branch_more_actions_spec.js @@ -1,4 +1,5 @@ import { mountExtended } from 'helpers/vue_test_utils_helper'; +import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import BranchMoreDropdown from '~/branches/components/branch_more_actions.vue'; import eventHub from '~/branches/event_hub'; @@ -6,11 +7,16 @@ describe('Delete branch button', () => { let wrapper; let eventHubSpy; + const findMoreDropdown = () => wrapper.findByTestId('branch-more-actions'); + const findMoreDropdownTooltip = () => getBinding(findMoreDropdown().element, 'gl-tooltip'); const findCompareButton = () => wrapper.findByTestId('compare-branch-button'); const findDeleteButton = () => wrapper.findByTestId('delete-branch-button'); const createComponent = (props = {}) => { wrapper = mountExtended(BranchMoreDropdown, { + directives: { + GlTooltip: createMockDirective('gl-tooltip'), + }, propsData: { branchName: 'test', defaultBranchName: 'main', @@ -67,4 +73,20 @@ describe('Delete branch button', () => { expect(findDeleteButton().exists()).toBe(false); }); + + describe('More actions menu', () => { + createComponent(); + + it('renders the dropdown button', () => { + createComponent(); + + expect(findMoreDropdown().exists()).toBe(true); + }); + + it('renders tooltip', () => { + createComponent(); + + expect(findMoreDropdownTooltip().value).toBe('More actions'); + }); + }); }); diff --git a/spec/frontend/groups_projects/components/more_actions_dropdown_spec.js b/spec/frontend/groups_projects/components/more_actions_dropdown_spec.js index 0ba0e518ac1c75abc2feeba40e1185e602768f98..5665fc312e7f7d5376a113210965b6d0a9459381 100644 --- a/spec/frontend/groups_projects/components/more_actions_dropdown_spec.js +++ b/spec/frontend/groups_projects/components/more_actions_dropdown_spec.js @@ -4,6 +4,7 @@ import { GlDisclosureDropdownGroup, } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import moreActionsDropdown from '~/groups_projects/components/more_actions_dropdown.vue'; describe('moreActionsDropdown', () => { @@ -11,6 +12,9 @@ describe('moreActionsDropdown', () => { const createComponent = ({ provideData = {}, propsData = {} } = {}) => { wrapper = shallowMountExtended(moreActionsDropdown, { + directives: { + GlTooltip: createMockDirective('gl-tooltip'), + }, provide: { isGroup: false, groupOrProjectId: 1, @@ -34,6 +38,7 @@ describe('moreActionsDropdown', () => { const showDropdown = () => { findDropdown().vm.$emit('show'); }; + const findDropdownTooltip = () => getBinding(findDropdown().element, 'gl-tooltip'); const findDropdownGroup = () => wrapper.findComponent(GlDisclosureDropdownGroup); const findGroupSettings = () => wrapper.findByTestId('settings-group-link'); const findProjectSettings = () => wrapper.findByTestId('settings-project-link'); @@ -102,6 +107,12 @@ describe('moreActionsDropdown', () => { }); expect(findDropdownGroup().exists()).toBe(true); }); + + it('renders tooltip', () => { + createComponent(); + + expect(findDropdownTooltip().value).toBe('More actions'); + }); }); describe('request access', () => { diff --git a/spec/frontend/issues/show/components/header_actions_spec.js b/spec/frontend/issues/show/components/header_actions_spec.js index 9a4125df83131d99f670cc6b668393ffea01b3bf..d52167c2db4129fc7941caf6b9ab45de0d3ab9ca 100644 --- a/spec/frontend/issues/show/components/header_actions_spec.js +++ b/spec/frontend/issues/show/components/header_actions_spec.js @@ -13,6 +13,7 @@ import { stubComponent } from 'helpers/stub_component'; import waitForPromises from 'helpers/wait_for_promises'; import { mockTracking } from 'helpers/tracking_helper'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { createAlert, VARIANT_SUCCESS } from '~/alert'; import { STATUS_CLOSED, @@ -131,6 +132,7 @@ describe('HeaderActions component', () => { findMobileDropdown().findAllComponents(GlDisclosureDropdownItem); const findDesktopDropdownItems = () => findDesktopDropdown().findAllComponents(GlDisclosureDropdownItem); + const findDesktopDropdownTooltip = () => getBinding(findDesktopDropdown().element, 'gl-tooltip'); const findAbuseCategorySelector = () => wrapper.findComponent(AbuseCategorySelector); const findReportAbuseButton = () => wrapper.findByTestId('report-abuse-item'); const findCopyRefenceDropdownItem = () => wrapper.findByTestId('copy-reference'); @@ -176,6 +178,9 @@ describe('HeaderActions component', () => { return shallowMountExtended(HeaderActions, { apolloProvider: createMockApollo(handlers), store, + directives: { + GlTooltip: createMockDirective('gl-tooltip'), + }, provide: { ...defaultProps, ...props, @@ -306,6 +311,12 @@ describe('HeaderActions component', () => { ); }); + it('renders tooltip on desktop dropdown', () => { + wrapper = mountComponent(); + + expect(findDesktopDropdownTooltip().value).toBe('Issue actions'); + }); + describe(`show edit button ${issueType}`, () => { beforeEach(() => { wrapper = mountComponent({ diff --git a/spec/frontend/pages/shared/wikis/components/wiki_more_dropdown_spec.js b/spec/frontend/pages/shared/wikis/components/wiki_more_dropdown_spec.js index db79685276ebc8025ebd22b986be358a81c0e42d..0b580c2a927704acce3d210e0aeb4293c7e43acb 100644 --- a/spec/frontend/pages/shared/wikis/components/wiki_more_dropdown_spec.js +++ b/spec/frontend/pages/shared/wikis/components/wiki_more_dropdown_spec.js @@ -1,5 +1,6 @@ import { GlDisclosureDropdown, GlDisclosureDropdownItem } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import WikiMoreDropdown from '~/pages/shared/wikis/components/wiki_more_dropdown.vue'; import printMarkdownDom from '~/lib/print_markdown_dom'; import { mockLocation, restoreLocation } from '../test_utils'; @@ -11,6 +12,9 @@ describe('pages/shared/wikis/components/wiki_more_dropdown', () => { const createComponent = (provide) => { wrapper = shallowMountExtended(WikiMoreDropdown, { + directives: { + GlTooltip: createMockDirective('gl-tooltip'), + }, provide: { history: 'https://history.url/path', print: { @@ -27,6 +31,8 @@ describe('pages/shared/wikis/components/wiki_more_dropdown', () => { }); }; + const findMoreDropdown = () => wrapper.findByTestId('wiki-more-dropdown'); + const findMoreDropdownTooltip = () => getBinding(findMoreDropdown().element, 'gl-tooltip'); const findHistoryItem = () => wrapper.findByTestId('page-history-button'); const findPrintItem = () => wrapper.findByTestId('page-print-button'); @@ -97,4 +103,20 @@ describe('pages/shared/wikis/components/wiki_more_dropdown', () => { }); }); }); + + describe('More actions menu', () => { + createComponent(); + + it('renders the dropdown button', () => { + createComponent(); + + expect(findMoreDropdown().exists()).toBe(true); + }); + + it('renders tooltip', () => { + createComponent(); + + expect(findMoreDropdownTooltip().value).toBe('Wiki actions'); + }); + }); }); diff --git a/spec/frontend/vue_shared/components/mr_more_dropdown_spec.js b/spec/frontend/vue_shared/components/mr_more_dropdown_spec.js index b3274f86b9ff8a753d92eb021d510e89813419cf..89642c97fef3bbe876b80278ba5fd43ca85d527c 100644 --- a/spec/frontend/vue_shared/components/mr_more_dropdown_spec.js +++ b/spec/frontend/vue_shared/components/mr_more_dropdown_spec.js @@ -1,9 +1,12 @@ -import { shallowMount } from '@vue/test-utils'; +import { mountExtended } from 'helpers/vue_test_utils_helper'; +import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import MRMoreActionsDropdown from '~/vue_shared/components/mr_more_dropdown.vue'; describe('MR More actions sidebar', () => { let wrapper; + const findMoreDropdown = () => wrapper.findByTestId('dropdown-toggle'); + const findMoreDropdownTooltip = () => getBinding(findMoreDropdown().element, 'gl-tooltip'); const findNotificationToggle = () => wrapper.find('[data-testid="notification-toggle"]'); const findEditMergeRequestOption = () => wrapper.find('[data-testid="edit-merge-request"]'); const findMarkAsReadyAndDraftOption = () => @@ -18,7 +21,10 @@ describe('MR More actions sidebar', () => { open = false, canUpdateMergeRequest = false, } = {}) => { - wrapper = shallowMount(MRMoreActionsDropdown, { + wrapper = mountExtended(MRMoreActionsDropdown, { + directives: { + GlTooltip: createMockDirective('gl-tooltip'), + }, propsData: { mr: { iid: 1, @@ -118,4 +124,20 @@ describe('MR More actions sidebar', () => { expect(findReportAbuseOption().exists()).toBe(true); }); }); + + describe('More actions menu', () => { + createComponent(); + + it('renders the dropdown button', () => { + createComponent(); + + expect(findMoreDropdown().exists()).toBe(true); + }); + + it('renders tooltip', () => { + createComponent(); + + expect(findMoreDropdownTooltip().value).toBe('Merge request actions'); + }); + }); }); diff --git a/spec/frontend/work_items/components/work_item_actions_spec.js b/spec/frontend/work_items/components/work_item_actions_spec.js index 4888f68d8e9025dda182055d353457e965ec59a1..4d016fa5ae67cc39e7697b9bb660531fa9bae731 100644 --- a/spec/frontend/work_items/components/work_item_actions_spec.js +++ b/spec/frontend/work_items/components/work_item_actions_spec.js @@ -10,9 +10,10 @@ import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import { stubComponent } from 'helpers/stub_component'; + import waitForPromises from 'helpers/wait_for_promises'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; - +import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { isLoggedIn } from '~/lib/utils/common_utils'; import toast from '~/vue_shared/plugins/global_toast'; import WorkItemActions from '~/work_items/components/work_item_actions.vue'; @@ -62,6 +63,8 @@ describe('WorkItemActions component', () => { const findWorkItemToggleOption = () => wrapper.findComponent(WorkItemStateToggle); const findCopyCreateNoteEmailButton = () => wrapper.findByTestId(TEST_ID_COPY_CREATE_NOTE_EMAIL_ACTION); + const findMoreDropdown = () => wrapper.findByTestId('work-item-actions-dropdown'); + const findMoreDropdownTooltip = () => getBinding(findMoreDropdown().element, 'gl-tooltip'); const findDropdownItems = () => wrapper.findAll('[data-testid="work-item-actions-dropdown"] > *'); const findDropdownItemsActual = () => findDropdownItems().wrappers.map((x) => { @@ -125,6 +128,9 @@ describe('WorkItemActions component', () => { [updateWorkItemNotificationsMutation, notificationsMutationHandler], [updateWorkItemMutation, lockDiscussionMutationHandler], ]), + directives: { + GlTooltip: createMockDirective('gl-tooltip'), + }, propsData: { workItemState: STATE_OPEN, fullPath: 'gitlab-org/gitlab-test', @@ -463,4 +469,20 @@ describe('WorkItemActions component', () => { expect(findWorkItemToggleOption().exists()).toBe(true); }); + + describe('More actions menu', () => { + createComponent(); + + it('renders the dropdown button', () => { + createComponent(); + + expect(findMoreDropdown().exists()).toBe(true); + }); + + it('renders tooltip', () => { + createComponent(); + + expect(findMoreDropdownTooltip().value).toBe('More actions'); + }); + }); });