1 files changed, 41 insertions, 3 deletions

diff --git a/spec/frontend/blob/components/blob_edit_header_spec.js b/spec/frontend/blob/components/blob_edit_header_spec.js
index db7d7d7d48d..c71595a79cf 100644
--- a/spec/frontend/blob/components/blob_edit_header_spec.js
+++ b/spec/frontend/blob/components/blob_edit_header_spec.js
@@ -1,18 +1,21 @@
 import { shallowMount } from '@vue/test-utils';
+import { GlFormInput, GlButton } from '@gitlab/ui';
 import BlobEditHeader from '~/blob/components/blob_edit_header.vue';
-import { GlFormInput } from '@gitlab/ui';
 
 describe('Blob Header Editing', () => {
   let wrapper;
   const value = 'foo.md';
 
-  function createComponent() {
+  const createComponent = (props = {}) => {
     wrapper = shallowMount(BlobEditHeader, {
       propsData: {
         value,
+        ...props,
       },
     });
-  }
+  };
+  const findDeleteButton = () =>
+    wrapper.findAll(GlButton).wrappers.find(x => x.text() === 'Delete file');
 
   beforeEach(() => {
     createComponent();
@@ -30,6 +33,10 @@ describe('Blob Header Editing', () => {
     it('contains a form input field', () => {
       expect(wrapper.contains(GlFormInput)).toBe(true);
     });
+
+    it('does not show delete button', () => {
+      expect(findDeleteButton()).toBeUndefined();
+    });
   });
 
   describe('functionality', () => {
@@ -47,4 +54,35 @@ describe('Blob Header Editing', () => {
       });
     });
   });
+
+  describe.each`
+    props                                     | expectedDisabled
+    ${{ showDelete: true }}                   | ${false}
+    ${{ showDelete: true, canDelete: false }} | ${true}
+  `('with $props', ({ props, expectedDisabled }) => {
+    beforeEach(() => {
+      createComponent(props);
+    });
+
+    it(`shows delete button (disabled=${expectedDisabled})`, () => {
+      const deleteButton = findDeleteButton();
+
+      expect(deleteButton.exists()).toBe(true);
+      expect(deleteButton.props('disabled')).toBe(expectedDisabled);
+    });
+  });
+
+  describe('with delete button', () => {
+    beforeEach(() => {
+      createComponent({ showDelete: true, canDelete: true });
+    });
+
+    it('emits delete when clicked', () => {
+      expect(wrapper.emitted().delete).toBeUndefined();
+
+      findDeleteButton().vm.$emit('click');
+
+      expect(wrapper.emitted().delete).toEqual([[]]);
+    });
+  });
 });