Merge branch '323715-add-missing-tooltip-to-apply-suggestion-button' into 'master'

Resolve "Add missing tooltip to Apply suggestion button"

See merge request gitlab-org/gitlab!59202

app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue

@@ -147,6 +147,7 @@ export default {
       </gl-button>
       <apply-suggestion
         v-if="isLoggedIn"
+        v-gl-tooltip.viewport="tooltipMessage"
         :disabled="isDisableButton"
         :default-commit-message="defaultCommitMessage"
         class="gl-ml-3"

changelogs/unreleased/59202-add-missing-tooltip-to-apply-suggestion-button.yml

+---
+title: Fix tooltip not rendering
+merge_request: 59202
+author:
+type: fixed

spec/frontend/vue_shared/components/markdown/suggestion_diff_header_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import ApplySuggestion from '~/vue_shared/components/markdown/apply_suggestion.vue';
 import SuggestionDiffHeader from '~/vue_shared/components/markdown/suggestion_diff_header.vue';
 
@@ -22,6 +23,9 @@ describe('Suggestion Diff component', () => {
         ...DEFAULT_PROPS,
         ...props,
       },
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
     });
   };
 
@@ -218,15 +222,23 @@ describe('Suggestion Diff component', () => {
   });
 
   describe('tooltip message for apply button', () => {
+    const findTooltip = () => getBinding(findApplyButton().element, 'gl-tooltip');
+
     it('renders correct tooltip message when button is applicable', () => {
       createComponent();
-      expect(wrapper.vm.tooltipMessage).toBe('This also resolves this thread');
+      const tooltip = findTooltip();
+
+      expect(tooltip.modifiers.viewport).toBe(true);
+      expect(tooltip.value).toBe('This also resolves this thread');
     });
 
     it('renders the inapplicable reason in the tooltip when button is not applicable', () => {
       const inapplicableReason = 'lorem';
       createComponent({ canApply: false, inapplicableReason });
-      expect(wrapper.vm.tooltipMessage).toBe(inapplicableReason);
+      const tooltip = findTooltip();
+
+      expect(tooltip.modifiers.viewport).toBe(true);
+      expect(tooltip.value).toBe(inapplicableReason);
     });
   });
 });