Merge branch 'master' into docs-patch-71docs-patch-71

5 files changed, 239 insertions, 25 deletions

diff --git a/spec/javascripts/registry/components/app_spec.js b/spec/javascripts/registry/components/app_spec.js
index 76a17e6fb31..e7675669f7a 100644
--- a/spec/javascripts/registry/components/app_spec.js
+++ b/spec/javascripts/registry/components/app_spec.js
@@ -8,6 +8,13 @@ import { reposServerResponse } from '../mock_data';
 
 describe('Registry List', () => {
   const Component = Vue.extend(registry);
+  const props = {
+    endpoint: `${TEST_HOST}/foo`,
+    helpPagePath: 'foo',
+    noContainersImage: 'foo',
+    containersErrorImage: 'foo',
+    repositoryUrl: 'foo',
+  };
   let vm;
   let mock;
 
@@ -24,7 +31,7 @@ describe('Registry List', () => {
     beforeEach(() => {
       mock.onGet(`${TEST_HOST}/foo`).replyOnce(200, reposServerResponse);
 
-      vm = mountComponent(Component, { endpoint: `${TEST_HOST}/foo` });
+      vm = mountComponent(Component, { ...props });
     });
 
     it('should render a list of repos', done => {
@@ -72,7 +79,7 @@ describe('Registry List', () => {
     beforeEach(() => {
       mock.onGet(`${TEST_HOST}/foo`).replyOnce(200, []);
 
-      vm = mountComponent(Component, { endpoint: `${TEST_HOST}/foo` });
+      vm = mountComponent(Component, { ...props });
     });
 
     it('should render empty message', done => {
@@ -83,7 +90,7 @@ describe('Registry List', () => {
             .textContent.trim()
             .replace(/[\r\n]+/g, ' '),
         ).toEqual(
-          'No container images stored for this project. Add one by following the instructions above.',
+          'With the Container Registry, every project can have its own space to store its Docker images. More Information',
         );
         done();
       }, 0);
@@ -94,12 +101,30 @@ describe('Registry List', () => {
     beforeEach(() => {
       mock.onGet(`${TEST_HOST}/foo`).replyOnce(200, []);
 
-      vm = mountComponent(Component, { endpoint: `${TEST_HOST}/foo` });
+      vm = mountComponent(Component, { ...props });
     });
 
     it('should render a loading spinner', done => {
       Vue.nextTick(() => {
-        expect(vm.$el.querySelector('.spinner')).not.toBe(null);
+        expect(vm.$el.querySelector('.gl-spinner')).not.toBe(null);
+        done();
+      });
+    });
+  });
+
+  describe('invalid characters in path', () => {
+    beforeEach(() => {
+      mock.onGet(`${TEST_HOST}/foo`).replyOnce(200, []);
+
+      vm = mountComponent(Component, {
+        ...props,
+        characterError: true,
+      });
+    });
+
+    it('should render invalid characters error message', done => {
+      setTimeout(() => {
+        expect(vm.$el.querySelector('.container-message')).not.toBe(null);
         done();
       });
     });
diff --git a/spec/javascripts/registry/components/collapsible_container_spec.js b/spec/javascripts/registry/components/collapsible_container_spec.js
index a3f7ff76dc7..2a5d8dd11da 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,19 @@ 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();
+    });
+
+    it('should call deleteItem when confirming deletion', done => {
+      findDeleteBtn().click();
+      spyOn(vm, 'deleteItem').and.returnValue(Promise.resolve());
+
+      Vue.nextTick(() => {
+        document.querySelector(`#${vm.modalId} .btn-danger`).click();
+
+        expect(vm.deleteItem).toHaveBeenCalledWith(vm.repo);
+        done();
+      });
     });
   });
 });
diff --git a/spec/javascripts/registry/components/table_registry_spec.js b/spec/javascripts/registry/components/table_registry_spec.js
index 7f5252a7d6c..9c7439206ef 100644
--- a/spec/javascripts/registry/components/table_registry_spec.js
+++ b/spec/javascripts/registry/components/table_registry_spec.js
@@ -1,44 +1,161 @@
 import Vue from 'vue';
 import tableRegistry from '~/registry/components/table_registry.vue';
 import store from '~/registry/stores';
+import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import { repoPropsData } from '../mock_data';
 
+const [firstImage, secondImage] = repoPropsData.list;
+
 describe('table registry', () => {
   let vm;
-  let Component;
+  const Component = Vue.extend(tableRegistry);
+  const bulkDeletePath = 'path';
 
-  beforeEach(() => {
-    Component = Vue.extend(tableRegistry);
-    vm = new Component({
+  const findDeleteBtn = () => vm.$el.querySelector('.js-delete-registry');
+  const findDeleteBtnRow = () => vm.$el.querySelector('.js-delete-registry-row');
+  const findSelectAllCheckbox = () => vm.$el.querySelector('.js-select-all-checkbox > input');
+  const findAllRowCheckboxes = () =>
+    Array.from(vm.$el.querySelectorAll('.js-select-checkbox input'));
+  const confirmationModal = (child = '') => document.querySelector(`#${vm.modalId} ${child}`);
+
+  const createComponent = () => {
+    vm = mountComponentWithStore(Component, {
       store,
-      propsData: {
+      props: {
         repo: repoPropsData,
       },
-    }).$mount();
+    });
+  };
+
+  const selectAllCheckboxes = () => vm.selectAll();
+  const deselectAllCheckboxes = () => vm.deselectAll();
+
+  beforeEach(() => {
+    createComponent();
   });
 
   afterEach(() => {
     vm.$destroy();
   });
 
-  it('should render a table with the registry list', () => {
-    expect(vm.$el.querySelectorAll('table tbody tr').length).toEqual(repoPropsData.list.length);
+  describe('rendering', () => {
+    it('should render a table with the registry list', () => {
+      expect(vm.$el.querySelectorAll('table tbody tr').length).toEqual(repoPropsData.list.length);
+    });
+
+    it('should render registry tag', () => {
+      const textRendered = vm.$el
+        .querySelector('.table tbody tr')
+        .textContent.trim()
+        // replace additional whitespace characters (e.g. new lines) with a single empty space
+        .replace(/\s\s+/g, ' ');
+
+      expect(textRendered).toContain(repoPropsData.list[0].tag);
+      expect(textRendered).toContain(repoPropsData.list[0].shortRevision);
+      expect(textRendered).toContain(repoPropsData.list[0].layers);
+      expect(textRendered).toContain(repoPropsData.list[0].size);
+    });
   });
 
-  it('should render registry tag', () => {
-    const textRendered = vm.$el
-      .querySelector('.table tbody tr')
-      .textContent.trim()
-      .replace(/\s\s+/g, ' ');
+  describe('multi select', () => {
+    it('should support multiselect and selecting a row should enable delete button', done => {
+      findSelectAllCheckbox().click();
+      selectAllCheckboxes();
+
+      expect(findSelectAllCheckbox().checked).toBe(true);
+
+      Vue.nextTick(() => {
+        expect(findDeleteBtn().disabled).toBe(false);
+        done();
+      });
+    });
+
+    it('selecting all checkbox should select all rows and enable delete button', done => {
+      selectAllCheckboxes();
+
+      Vue.nextTick(() => {
+        const checkedValues = findAllRowCheckboxes().filter(x => x.checked);
+
+        expect(checkedValues.length).toBe(repoPropsData.list.length);
+        done();
+      });
+    });
+
+    it('deselecting select all checkbox should deselect all rows and disable delete button', done => {
+      selectAllCheckboxes();
+      deselectAllCheckboxes();
+
+      Vue.nextTick(() => {
+        const checkedValues = findAllRowCheckboxes().filter(x => x.checked);
+
+        expect(checkedValues.length).toBe(0);
+        done();
+      });
+    });
+
+    it('should delete multiple items when multiple items are selected', done => {
+      selectAllCheckboxes();
+
+      Vue.nextTick(() => {
+        expect(vm.itemsToBeDeleted).toEqual([0, 1]);
+        expect(findDeleteBtn().disabled).toBe(false);
+
+        findDeleteBtn().click();
+        spyOn(vm, 'multiDeleteItems').and.returnValue(Promise.resolve());
+
+        Vue.nextTick(() => {
+          const modal = confirmationModal();
+          confirmationModal('.btn-danger').click();
+
+          expect(modal).toExist();
 
-    expect(textRendered).toContain(repoPropsData.list[0].tag);
-    expect(textRendered).toContain(repoPropsData.list[0].shortRevision);
-    expect(textRendered).toContain(repoPropsData.list[0].layers);
-    expect(textRendered).toContain(repoPropsData.list[0].size);
+          Vue.nextTick(() => {
+            expect(vm.itemsToBeDeleted).toEqual([]);
+            expect(vm.multiDeleteItems).toHaveBeenCalledWith({
+              path: bulkDeletePath,
+              items: [firstImage.tag, secondImage.tag],
+            });
+            done();
+          });
+        });
+      });
+    });
   });
 
-  it('should be possible to delete a registry', () => {
-    expect(vm.$el.querySelector('.table tbody tr .js-delete-registry')).toBeDefined();
+  describe('delete registry', () => {
+    beforeEach(() => {
+      vm.itemsToBeDeleted = [0];
+    });
+
+    it('should be possible to delete a registry', done => {
+      Vue.nextTick(() => {
+        expect(vm.itemsToBeDeleted).toEqual([0]);
+        expect(findDeleteBtn()).toBeDefined();
+        expect(findDeleteBtn().disabled).toBe(false);
+        expect(findDeleteBtnRow()).toBeDefined();
+        done();
+      });
+    });
+
+    it('should call deleteItems and reset itemsToBeDeleted when confirming deletion', done => {
+      Vue.nextTick(() => {
+        expect(vm.itemsToBeDeleted).toEqual([0]);
+        expect(findDeleteBtn().disabled).toBe(false);
+        findDeleteBtn().click();
+        spyOn(vm, 'multiDeleteItems').and.returnValue(Promise.resolve());
+
+        Vue.nextTick(() => {
+          confirmationModal('.btn-danger').click();
+
+          expect(vm.itemsToBeDeleted).toEqual([]);
+          expect(vm.multiDeleteItems).toHaveBeenCalledWith({
+            path: bulkDeletePath,
+            items: [firstImage.tag],
+          });
+          done();
+        });
+      });
+    });
   });
 
   describe('pagination', () => {
@@ -46,4 +163,27 @@ describe('table registry', () => {
       expect(vm.$el.querySelector('.gl-pagination')).toBeDefined();
     });
   });
+
+  describe('modal content', () => {
+    it('should show the singular title and image name when deleting a single image', done => {
+      findDeleteBtnRow().click();
+
+      Vue.nextTick(() => {
+        expect(vm.modalTitle).toBe('Remove image');
+        expect(vm.modalDescription).toContain(firstImage.tag);
+        done();
+      });
+    });
+
+    it('should show the plural title and image count when deleting more than one image', done => {
+      selectAllCheckboxes();
+      vm.setModalDescription();
+
+      Vue.nextTick(() => {
+        expect(vm.modalTitle).toBe('Remove images');
+        expect(vm.modalDescription).toContain('<b>2</b> images');
+        done();
+      });
+    });
+  });
 });
diff --git a/spec/javascripts/registry/mock_data.js b/spec/javascripts/registry/mock_data.js
index 22db203e77f..130ab298e89 100644
--- a/spec/javascripts/registry/mock_data.js
+++ b/spec/javascripts/registry/mock_data.js
@@ -108,6 +108,17 @@ export const repoPropsData = {
       destroyPath: 'path',
       canDelete: true,
     },
+    {
+      tag: 'test-image',
+      revision: 'b969de599faea2b3d9b6605a8b0897261c571acaa36db1bdc7349b5775b4e0b4',
+      shortRevision: 'b969de599',
+      size: 19,
+      layers: 10,
+      location: 'location-2',
+      createdAt: 1505828744434,
+      destroyPath: 'path-2',
+      canDelete: true,
+    },
   ],
   location: 'location',
   name: 'foo',
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);
+    });
+  });
 });