2 files changed, 19 insertions, 8 deletions

diff --git a/spec/frontend/sidebar/lock/edit_form_buttons_spec.js b/spec/frontend/sidebar/lock/edit_form_buttons_spec.js
index de1da3456f8..913646c8f8d 100644
--- a/spec/frontend/sidebar/lock/edit_form_buttons_spec.js
+++ b/spec/frontend/sidebar/lock/edit_form_buttons_spec.js
@@ -1,5 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
 import EditFormButtons from '~/sidebar/components/lock/edit_form_buttons.vue';
 import eventHub from '~/sidebar/event_hub';
 import { deprecatedCreateFlash as flash } from '~/flash';
@@ -22,7 +21,6 @@ describe('EditFormButtons', () => {
   };
 
   const findLockToggle = () => wrapper.find('[data-testid="lock-toggle"]');
-  const findGlLoadingIcon = () => wrapper.find(GlLoadingIcon);
 
   const createComponent = ({ props = {}, data = {}, resolved = true }) => {
     store = issuableType === ISSUABLE_TYPE_ISSUE ? createStore() : createMrStore();
@@ -33,7 +31,7 @@ describe('EditFormButtons', () => {
       jest.spyOn(store, 'dispatch').mockRejectedValue();
     }
 
-    wrapper = shallowMount(EditFormButtons, {
+    wrapper = mount(EditFormButtons, {
       store,
       provide: {
         fullPath: '',
@@ -78,8 +76,8 @@ describe('EditFormButtons', () => {
         expect(findLockToggle().attributes('disabled')).toBe('disabled');
       });
 
-      it('displays the GlLoadingIcon', () => {
-        expect(findGlLoadingIcon().exists()).toBe(true);
+      it('sets loading on the toggle button', () => {
+        expect(findLockToggle().props('loading')).toBe(true);
       });
     });
 
@@ -121,7 +119,7 @@ describe('EditFormButtons', () => {
 
           it('resets loading', async () => {
             await wrapper.vm.$nextTick().then(() => {
-              expect(findGlLoadingIcon().exists()).toBe(false);
+              expect(findLockToggle().props('loading')).toBe(false);
             });
           });
 
@@ -156,7 +154,7 @@ describe('EditFormButtons', () => {
 
           it('resets loading', async () => {
             await wrapper.vm.$nextTick().then(() => {
-              expect(findGlLoadingIcon().exists()).toBe(false);
+              expect(findLockToggle().props('loading')).toBe(false);
             });
           });
 
diff --git a/spec/frontend/sidebar/lock/issuable_lock_form_spec.js b/spec/frontend/sidebar/lock/issuable_lock_form_spec.js
index ab1423a9bbb..e8091dcb51d 100644
--- a/spec/frontend/sidebar/lock/issuable_lock_form_spec.js
+++ b/spec/frontend/sidebar/lock/issuable_lock_form_spec.js
@@ -1,5 +1,6 @@
 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');
+            });
           });
         });
       });