1 files changed, 21 insertions, 0 deletions
diff --git a/spec/frontend/jobs/components/job/manual_variables_form_spec.js b/spec/frontend/jobs/components/job/manual_variables_form_spec.js
index 45a1e9dca76..3040570df19 100644
--- a/spec/frontend/jobs/components/job/manual_variables_form_spec.js
+++ b/spec/frontend/jobs/components/job/manual_variables_form_spec.js
@@ -212,9 +212,30 @@ describe('Manual Variables Form', () => {
 
       expect(findDeleteVarBtn().exists()).toBe(true);
     });
+  });
+
+  describe('variable delete button placeholder', () => {
+    beforeEach(async () => {
+      getJobQueryResponse.mockResolvedValue(mockJobResponse);
+      await createComponentWithApollo();
+    });
 
     it('delete variable button placeholder should only exist when a user cannot remove', async () => {
       expect(findDeleteVarBtnPlaceholder().exists()).toBe(true);
     });
+
+    it('does not show the placeholder button', () => {
+      expect(findDeleteVarBtnPlaceholder().classes('gl-opacity-0')).toBe(true);
+    });
+
+    it('placeholder button will not delete the row on click', async () => {
+      expect(findAllCiVariableKeys()).toHaveLength(1);
+      expect(findDeleteVarBtnPlaceholder().exists()).toBe(true);
+
+      await findDeleteVarBtnPlaceholder().trigger('click');
+
+      expect(findAllCiVariableKeys()).toHaveLength(1);
+      expect(findDeleteVarBtnPlaceholder().exists()).toBe(true);
+    });
   });
 });