Apply Mark's review comments42399-registry-confirm-deletion

- Use functio nnotation instead of arrow function for data
- Eagerly reset itemToBeDeleted
- Improve specs

4 files changed, 25 insertions, 20 deletions

diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue
index f3f5324d104..0ec5e2c7a87 100644
--- a/app/assets/javascripts/registry/components/table_registry.vue
+++ b/app/assets/javascripts/registry/components/table_registry.vue
@@ -29,9 +29,11 @@ export default {
       required: true,
     },
   },
-  data: () => ({
-    itemToBeDeleted: null,
-  }),
+  data() {
+    return {
+      itemToBeDeleted: null,
+    };
+  },
   computed: {
     shouldRenderPagination() {
       return this.repo.pagination.total > this.repo.pagination.perPage;
@@ -49,12 +51,11 @@ export default {
       this.itemToBeDeleted = item;
     },
     handleDeleteRegistry() {
-      this.deleteItem(this.itemToBeDeleted)
+      const { itemToBeDeleted } = this;
+      this.itemToBeDeleted = null;
+      this.deleteItem(itemToBeDeleted)
         .then(() => this.fetchList({ repo: this.repo }))
-        .catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY))
-        .finally(() => {
-          this.itemToBeDeleted = null;
-        });
+        .catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY));
     },
     onPageChange(pageNumber) {
       this.fetchList({ repo: this.repo, page: pageNumber }).catch(() =>
@@ -91,9 +92,9 @@ export default {
             />
           </td>
           <td>
-            <span v-gl-tooltip.bottom class="monospace" :title="item.revision">{{
-              item.shortRevision
-            }}</span>
+            <span v-gl-tooltip.bottom class="monospace" :title="item.revision">
+              {{ item.shortRevision }}
+            </span>
           </td>
           <td>
             {{ formatSize(item.size) }}
@@ -104,9 +105,9 @@ export default {
           </td>
 
           <td>
-            <span v-gl-tooltip.bottom :title="tooltipTitle(item.createdAt)">{{
-              timeFormated(item.createdAt)
-            }}</span>
+            <span v-gl-tooltip.bottom :title="tooltipTitle(item.createdAt)">
+              {{ timeFormated(item.createdAt) }}
+            </span>
           </td>
 
           <td class="content">
diff --git a/spec/javascripts/registry/components/collapsible_container_spec.js b/spec/javascripts/registry/components/collapsible_container_spec.js
index a065a2e7e3e..9ed4b04324a 100644
--- a/spec/javascripts/registry/components/collapsible_container_spec.js
+++ b/spec/javascripts/registry/components/collapsible_container_spec.js
@@ -86,7 +86,7 @@ describe('collapsible registry container', () => {
         spyOn(vm, 'deleteItem').and.returnValue(Promise.resolve());
         vm.$el.querySelector('#confirm-repo-deletion-modal .btn-danger').click();
 
-        expect(vm.deleteItem).toHaveBeenCalled();
+        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 3f41b72b4b9..d366c67a1b9 100644
--- a/spec/javascripts/registry/components/table_registry_spec.js
+++ b/spec/javascripts/registry/components/table_registry_spec.js
@@ -3,11 +3,13 @@ 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('.table tbody tr .js-delete-registry');
+  const findDeleteBtn = () => vm.$el.querySelector('.js-delete-registry');
 
   beforeEach(() => {
     Component = Vue.extend(tableRegistry);
@@ -50,15 +52,17 @@ describe('table registry', () => {
         Vue.nextTick(done);
       });
 
-      it('should open confirmation modal', () => {
+      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 when confirming deletion', () => {
+      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).toHaveBeenCalled();
+        expect(vm.deleteItem).toHaveBeenCalledWith(firstImage);
+        expect(vm.itemToBeDeleted).toBeNull();
       });
     });
   });
diff --git a/spec/javascripts/registry/stores/actions_spec.js b/spec/javascripts/registry/stores/actions_spec.js
index 4605572a1d3..0613ec8e0f1 100644
--- a/spec/javascripts/registry/stores/actions_spec.js
+++ b/spec/javascripts/registry/stores/actions_spec.js
@@ -110,7 +110,7 @@ describe('Actions Registry Store', () => {
     it('should perform DELETE request on destroyPath', done => {
       const destroyPath = `${TEST_HOST}/mygroup/myproject/container_registry/1.json`;
       let deleted = false;
-      mock.onDelete(destroyPath).reply(() => {
+      mock.onDelete(destroyPath).replyOnce(() => {
         deleted = true;
         return [200];
       });