Updated tooltip to gl-tooltip

Apply 1 suggestion(s) to 1 file(s)

Apply 1 suggestion(s) to 1 file(s)

Apply 1 suggestion(s) to 1 file(s)

Add spec for sidebar lock icon tooltip

app/assets/javascripts/sidebar/components/lock/issuable_lock_form.vue

 <script>
 import { mapGetters } from 'vuex';
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
-import tooltip from '~/vue_shared/directives/tooltip';
 import eventHub from '~/sidebar/event_hub';
 import editForm from './edit_form.vue';
 
@@ -26,7 +25,7 @@ export default {
   },
 
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
 
   props: {
@@ -79,13 +78,9 @@ export default {
 <template>
   <div class="block issuable-sidebar-item lock">
     <div
-      v-tooltip
-      :title="tooltipLabel"
+      v-gl-tooltip.left.viewport="{ title: tooltipLabel }"
       class="sidebar-collapsed-icon"
       data-testid="sidebar-collapse-icon"
-      data-container="body"
-      data-placement="left"
-      data-boundary="viewport"
       @click="toggleForm"
     >
       <gl-icon :name="lockStatus.icon" class="sidebar-item-icon is-active" />

spec/frontend/sidebar/lock/issuable_lock_form_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { mockTracking, triggerEvent } from 'helpers/tracking_helper';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import IssuableLockForm from '~/sidebar/components/lock/issuable_lock_form.vue';
 import EditForm from '~/sidebar/components/lock/edit_form.vue';
 import createStore from '~/notes/stores';
@@ -19,6 +20,8 @@ describe('IssuableLockForm', () => {
   const findLockStatus = () => wrapper.find('[data-testid="lock-status"]');
   const findEditLink = () => wrapper.find('[data-testid="edit-link"]');
   const findEditForm = () => wrapper.find(EditForm);
+  const findSidebarLockStatusTooltip = () =>
+    getBinding(findSidebarCollapseIcon().element, 'gl-tooltip');
 
   const initStore = isLocked => {
     if (issuableType === ISSUABLE_TYPE_ISSUE) {
@@ -37,6 +40,9 @@ describe('IssuableLockForm', () => {
         isEditable: true,
         ...props,
       },
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
     });
   };
 
@@ -125,6 +131,13 @@ describe('IssuableLockForm', () => {
                 expect(findEditForm().exists()).toBe(true);
               });
             });
+
+            it('renders a tooltip with the lock status text', () => {
+              const tooltip = findSidebarLockStatusTooltip();
+
+              expect(tooltip).toBeDefined();
+              expect(tooltip.value.title).toBe(isLocked ? 'Locked' : 'Unlocked');
+            });
           });
         });
       });