1 files changed, 31 insertions, 7 deletions

diff --git a/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js b/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js
index fb9487d0bf8..2319bf61482 100644
--- a/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js
+++ b/spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js
@@ -35,6 +35,9 @@ describe('RelatedIssuableItem', () => {
     weight: '<div class="js-weight-slot"></div>',
   };
 
+  const findRemoveButton = () => wrapper.find({ ref: 'removeButton' });
+  const findLockIcon = () => wrapper.find({ ref: 'lockIcon' });
+
   beforeEach(() => {
     mountComponent({ props, slots });
   });
@@ -121,10 +124,10 @@ describe('RelatedIssuableItem', () => {
     });
 
     it('renders milestone icon and name', () => {
-      const milestoneIcon = tokenMetadata().find('.item-milestone svg use');
+      const milestoneIcon = tokenMetadata().find('.item-milestone svg');
       const milestoneTitle = tokenMetadata().find('.item-milestone .milestone-title');
 
-      expect(milestoneIcon.attributes('href')).toContain('clock');
+      expect(milestoneIcon.attributes('data-testid')).toBe('clock-icon');
       expect(milestoneTitle.text()).toContain('Milestone title');
     });
 
@@ -143,25 +146,27 @@ describe('RelatedIssuableItem', () => {
   });
 
   describe('remove button', () => {
-    const removeButton = () => wrapper.find({ ref: 'removeButton' });
-
     beforeEach(() => {
       wrapper.setProps({ canRemove: true });
     });
 
     it('renders if canRemove', () => {
-      expect(removeButton().exists()).toBe(true);
+      expect(findRemoveButton().exists()).toBe(true);
+    });
+
+    it('does not render the lock icon', () => {
+      expect(findLockIcon().exists()).toBe(false);
     });
 
     it('renders disabled button when removeDisabled', async () => {
       wrapper.setData({ removeDisabled: true });
       await wrapper.vm.$nextTick();
 
-      expect(removeButton().attributes('disabled')).toEqual('disabled');
+      expect(findRemoveButton().attributes('disabled')).toEqual('disabled');
     });
 
     it('triggers onRemoveRequest when clicked', async () => {
-      removeButton().trigger('click');
+      findRemoveButton().trigger('click');
       await wrapper.vm.$nextTick();
       const { relatedIssueRemoveRequest } = wrapper.emitted();
 
@@ -169,4 +174,23 @@ describe('RelatedIssuableItem', () => {
       expect(relatedIssueRemoveRequest[0]).toEqual([props.idKey]);
     });
   });
+
+  describe('when issue is locked', () => {
+    const lockedMessage = 'Issues created from a vulnerability cannot be removed';
+
+    beforeEach(() => {
+      wrapper.setProps({
+        isLocked: true,
+        lockedMessage,
+      });
+    });
+
+    it('does not render the remove button', () => {
+      expect(findRemoveButton().exists()).toBe(false);
+    });
+
+    it('renders the lock icon with the correct title', () => {
+      expect(findLockIcon().attributes('title')).toBe(lockedMessage);
+    });
+  });
 });