From 237f434ce83488f252b5f593c67ecaf76ceb9e86 Mon Sep 17 00:00:00 2001 From: Nick Kipling Date: Thu, 18 Jul 2019 17:56:09 +0100 Subject: [PATCH] Updating with suggestions as per review --- .../registry/components/table_registry.vue | 7 +- .../components/table_registry_spec.js | 83 ++++++++++++------- 2 files changed, 58 insertions(+), 32 deletions(-) diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue index cf1ee0e06a6..807b81c66e9 100644 --- a/app/assets/javascripts/registry/components/table_registry.vue +++ b/app/assets/javascripts/registry/components/table_registry.vue @@ -52,7 +52,7 @@ export default { return this.repo.pagination.total > this.repo.pagination.perPage; }, modalTitle() { - if (this.singleItemToBeDeleted !== null || this.itemsToBeDeleted.length === 1) { + if (this.singleItemSelected) { return s__('ContainerRegistry|Remove image'); } return s__('ContainerRegistry|Remove images'); @@ -60,7 +60,7 @@ export default { modalDescription() { const selectedCount = this.itemsToBeDeleted.length; - if (this.singleItemToBeDeleted !== null || selectedCount === 1) { + if (this.singleItemSelected) { const { tag } = this.singleItemToBeDeleted !== null ? this.repo.list[this.singleItemToBeDeleted] @@ -79,6 +79,9 @@ export default { { count: selectedCount }, ); }, + singleItemSelected() { + return this.singleItemToBeDeleted !== null || this.itemsToBeDeleted.length === 1; + }, }, methods: { ...mapActions(['fetchList', 'deleteItems']), diff --git a/spec/javascripts/registry/components/table_registry_spec.js b/spec/javascripts/registry/components/table_registry_spec.js index 9dca29d4702..556a66c5666 100644 --- a/spec/javascripts/registry/components/table_registry_spec.js +++ b/spec/javascripts/registry/components/table_registry_spec.js @@ -1,13 +1,14 @@ 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'; const findDeleteBtn = () => vm.$el.querySelector('.js-delete-registry'); @@ -15,17 +16,19 @@ describe('table registry', () => { 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 = () => { - Component = Vue.extend(tableRegistry); - vm = new Component({ + vm = mountComponentWithStore(Component, { store, - propsData: { + props: { repo: repoPropsData, }, - }).$mount(); + }); }; + const toggleSelectAll = () => vm.selectAll(); + beforeEach(() => { createComponent(); }); @@ -34,31 +37,28 @@ describe('table registry', () => { 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(/\s\s+/g, ' '); + it('should render registry tag', () => { + const textRendered = vm.$el + .querySelector('.table tbody tr') + .textContent.trim() + .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); + 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); + }); }); describe('multi select', () => { - beforeEach(() => { - vm.itemsToBeDeleted = []; - }); - it('should support multiselect and selecting a row should enable delete button', done => { findSelectAllCheckbox().click(); - - vm.selectAll(); + toggleSelectAll(); expect(findSelectAllCheckbox().checked).toBe(true); @@ -70,7 +70,7 @@ describe('table registry', () => { it('selecting all checkbox should select all rows and enable delete button', done => { findSelectAllCheckbox().click(); - vm.selectAll(); + toggleSelectAll(); Vue.nextTick(() => { const checkedValues = findAllRowCheckboxes().filter(x => x.checked); @@ -82,8 +82,8 @@ describe('table registry', () => { it('deselecting select all checkbox should deselect all rows and disable delete button', done => { findSelectAllCheckbox().click(); - vm.selectAll(); // Select them all on - vm.selectAll(); // Select them all off + toggleSelectAll(); // Select them all on + toggleSelectAll(); // Select them all off Vue.nextTick(() => { const checkedValues = findAllRowCheckboxes().filter(x => x.checked); @@ -95,7 +95,7 @@ describe('table registry', () => { it('should delete multiple items when multiple items are selected', done => { findSelectAllCheckbox().click(); - vm.selectAll(); + toggleSelectAll(); Vue.nextTick(() => { expect(vm.itemsToBeDeleted).toEqual([0, 1]); @@ -105,8 +105,8 @@ describe('table registry', () => { spyOn(vm, 'deleteItems').and.returnValue(Promise.resolve()); Vue.nextTick(() => { - const modal = document.querySelector(`#${vm.modalId}`); - document.querySelector(`#${vm.modalId} .btn-danger`).click(); + const modal = confirmationModal(); + confirmationModal('.btn-danger').click(); expect(modal).toExist(); @@ -146,7 +146,7 @@ describe('table registry', () => { spyOn(vm, 'deleteItems').and.returnValue(Promise.resolve()); Vue.nextTick(() => { - document.querySelector(`#${vm.modalId} .btn-danger`).click(); + confirmationModal('.btn-danger').click(); expect(vm.itemsToBeDeleted).toEqual([]); expect(vm.deleteItems).toHaveBeenCalledWith({ @@ -164,4 +164,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 => { + findSelectAllCheckbox().click(); + toggleSelectAll(); + + Vue.nextTick(() => { + expect(vm.modalTitle).toBe('Remove images'); + expect(vm.modalDescription).toContain('2 images'); + done(); + }); + }); + }); });