Add confirmation for registry image deletion

Adds a modal to let the user confirm their action before
proceeding to registry/image deletion

3 files changed, 73 insertions, 3 deletions

diff --git a/spec/javascripts/registry/components/collapsible_container_spec.js b/spec/javascripts/registry/components/collapsible_container_spec.js
index a3f7ff76dc7..9ed4b04324a 100644
--- a/spec/javascripts/registry/components/collapsible_container_spec.js
+++ b/spec/javascripts/registry/components/collapsible_container_spec.js
@@ -12,6 +12,8 @@ describe('collapsible registry container', () => {
   let mock;
   const Component = Vue.extend(collapsibleComponent);
 
+  const findDeleteBtn = () => vm.$el.querySelector('.js-remove-repo');
+
   beforeEach(() => {
     mock = new MockAdapter(axios);
 
@@ -67,7 +69,25 @@ describe('collapsible registry container', () => {
 
   describe('delete repo', () => {
     it('should be possible to delete a repo', () => {
-      expect(vm.$el.querySelector('.js-remove-repo')).not.toBeNull();
+      expect(findDeleteBtn()).not.toBeNull();
+    });
+
+    describe('clicked on delete', () => {
+      beforeEach(done => {
+        findDeleteBtn().click();
+        Vue.nextTick(done);
+      });
+
+      it('should open confirmation modal', () => {
+        expect(vm.$el.querySelector('#confirm-repo-deletion-modal')).not.toBeNull();
+      });
+
+      it('should call deleteItem when confirming deletion', () => {
+        spyOn(vm, 'deleteItem').and.returnValue(Promise.resolve());
+        vm.$el.querySelector('#confirm-repo-deletion-modal .btn-danger').click();
+
+        expect(vm.deleteItem).toHaveBeenCalledWith(vm.repo);
+      });
     });
   });
 });
diff --git a/spec/javascripts/registry/components/table_registry_spec.js b/spec/javascripts/registry/components/table_registry_spec.js
index 7f5252a7d6c..d366c67a1b9 100644
--- a/spec/javascripts/registry/components/table_registry_spec.js
+++ b/spec/javascripts/registry/components/table_registry_spec.js
@@ -3,10 +3,14 @@ import tableRegistry from '~/registry/components/table_registry.vue';
 import store from '~/registry/stores';
 import { repoPropsData } from '../mock_data';
 
+const [firstImage] = repoPropsData.list;
+
 describe('table registry', () => {
   let vm;
   let Component;
 
+  const findDeleteBtn = () => vm.$el.querySelector('.js-delete-registry');
+
   beforeEach(() => {
     Component = Vue.extend(tableRegistry);
     vm = new Component({
@@ -37,8 +41,30 @@ describe('table registry', () => {
     expect(textRendered).toContain(repoPropsData.list[0].size);
   });
 
-  it('should be possible to delete a registry', () => {
-    expect(vm.$el.querySelector('.table tbody tr .js-delete-registry')).toBeDefined();
+  describe('delete registry', () => {
+    it('should be possible to delete a registry', () => {
+      expect(findDeleteBtn()).toBeDefined();
+    });
+
+    describe('clicked on delete', () => {
+      beforeEach(done => {
+        findDeleteBtn().click();
+        Vue.nextTick(done);
+      });
+
+      it('should open confirmation modal and set itemToBeDeleted properly', () => {
+        expect(vm.itemToBeDeleted).toEqual(firstImage);
+        expect(vm.$el.querySelector('#confirm-image-deletion-modal')).not.toBeNull();
+      });
+
+      it('should call deleteItem and reset itemToBeDeleted when confirming deletion', () => {
+        spyOn(vm, 'deleteItem').and.returnValue(Promise.resolve());
+        vm.$el.querySelector('#confirm-image-deletion-modal .btn-danger').click();
+
+        expect(vm.deleteItem).toHaveBeenCalledWith(firstImage);
+        expect(vm.itemToBeDeleted).toBeNull();
+      });
+    });
   });
 
   describe('pagination', () => {
diff --git a/spec/javascripts/registry/stores/actions_spec.js b/spec/javascripts/registry/stores/actions_spec.js
index c9aa82dba90..0613ec8e0f1 100644
--- a/spec/javascripts/registry/stores/actions_spec.js
+++ b/spec/javascripts/registry/stores/actions_spec.js
@@ -105,4 +105,28 @@ describe('Actions Registry Store', () => {
       );
     });
   });
+
+  describe('deleteItem', () => {
+    it('should perform DELETE request on destroyPath', done => {
+      const destroyPath = `${TEST_HOST}/mygroup/myproject/container_registry/1.json`;
+      let deleted = false;
+      mock.onDelete(destroyPath).replyOnce(() => {
+        deleted = true;
+        return [200];
+      });
+      testAction(
+        actions.deleteItem,
+        {
+          destroyPath,
+        },
+        mockedState,
+      )
+        .then(() => {
+          expect(mock.history.delete.length).toBe(1);
+          expect(deleted).toBe(true);
+          done();
+        })
+        .catch(done.fail);
+    });
+  });
 });