Merge branch 'nmezzopera-clean-registry-list-tests' into 'master'

Clean registry list tests

See merge request gitlab-org/gitlab!22470

spec/frontend/registry/list/components/app_spec.js

-import Vue from 'vue';
 import { mount } from '@vue/test-utils';
 import { TEST_HOST } from 'helpers/test_constants';
 import registry from '~/registry/list/components/app.vue';
@@ -35,12 +34,8 @@ describe('Registry List', () => {
   };
 
   beforeEach(() => {
-    // This is needed due to console.error called by vue to emit a warning that stop the tests.
-    // See https://github.com/vuejs/vue-test-utils/issues/532.
-    Vue.config.silent = true;
     wrapper = mount(registry, {
       attachToDocument: true,
-      sync: false,
       propsData,
       computed: {
         repos() {
@@ -52,7 +47,6 @@ describe('Registry List', () => {
   });
 
   afterEach(() => {
-    Vue.config.silent = false;
     wrapper.destroy();
   });
 
@@ -138,7 +132,7 @@ describe('Registry List', () => {
       wrapper = mount(registry, {
         propsData: {
           ...propsData,
-          endpoint: null,
+          endpoint: '',
           isGroupPage,
         },
         methods,
@@ -146,7 +140,7 @@ describe('Registry List', () => {
     });
 
     it('call the right vuex setters', () => {
-      expect(methods.setMainEndpoint).toHaveBeenLastCalledWith(null);
+      expect(methods.setMainEndpoint).toHaveBeenLastCalledWith('');
       expect(methods.setIsDeleteDisabled).toHaveBeenLastCalledWith(true);
     });
 

spec/frontend/registry/list/components/collapsible_container_spec.js

-import Vue from 'vue';
 import Vuex from 'vuex';
 import { mount, createLocalVue } from '@vue/test-utils';
 import createFlash from '~/flash';
@@ -28,14 +27,10 @@ describe('collapsible registry container', () => {
       store,
       localVue,
       attachToDocument: true,
-      sync: false,
     });
 
   beforeEach(() => {
     createFlash.mockClear();
-    // This is needed due to  console.error called by vue to emit a warning that stop the tests
-    // see  https://github.com/vuejs/vue-test-utils/issues/532
-    Vue.config.silent = true;
     store = new Vuex.Store({
       state: {
         isDeleteDisabled: false,
@@ -51,7 +46,6 @@ describe('collapsible registry container', () => {
   });
 
   afterEach(() => {
-    Vue.config.silent = false;
     wrapper.destroy();
   });
 
@@ -72,25 +66,23 @@ describe('collapsible registry container', () => {
       expectIsClosed();
     });
 
-    it('should be open when user clicks on closed repo', done => {
+    it('should be open when user clicks on closed repo', () => {
       const toggleRepos = findToggleRepos();
       toggleRepos.at(0).trigger('click');
-      Vue.nextTick(() => {
+      return wrapper.vm.$nextTick().then(() => {
         const container = findContainerImageTags();
         expect(container.exists()).toBe(true);
         expect(wrapper.vm.fetchList).toHaveBeenCalled();
-        done();
       });
     });
 
-    it('should be closed when the user clicks on an opened repo', done => {
+    it('should be closed when the user clicks on an opened repo', () => {
       const toggleRepos = findToggleRepos();
       toggleRepos.at(0).trigger('click');
-      Vue.nextTick(() => {
+      return wrapper.vm.$nextTick().then(() => {
         toggleRepos.at(0).trigger('click');
-        Vue.nextTick(() => {
+        wrapper.vm.$nextTick(() => {
           expectIsClosed();
-          done();
         });
       });
     });

spec/frontend/registry/list/components/table_registry_spec.js

-import Vue from 'vue';
 import Vuex from 'vuex';
 import { mount, createLocalVue } from '@vue/test-utils';
 import createFlash from '~/flash';
@@ -29,13 +28,9 @@ describe('table registry', () => {
   const bulkDeletePath = 'path';
 
   const mountWithStore = config =>
-    mount(tableRegistry, { ...config, store, localVue, attachToDocument: true, sync: false });
+    mount(tableRegistry, { ...config, store, localVue, attachToDocument: true });
 
   beforeEach(() => {
-    // This is needed due to  console.error called by vue to emit a warning that stop the tests
-    // see  https://github.com/vuejs/vue-test-utils/issues/532
-    Vue.config.silent = true;
-
     store = new Vuex.Store({
       state: {
         isDeleteDisabled: false,
@@ -52,7 +47,6 @@ describe('table registry', () => {
   });
 
   afterEach(() => {
-    Vue.config.silent = false;
     wrapper.destroy();
   });
 
@@ -82,53 +76,53 @@ describe('table registry', () => {
   });
 
   describe('multi select', () => {
-    it('selecting a row should enable delete button', done => {
+    it('selecting a row should enable delete button', () => {
       const deleteBtn = findDeleteButton();
       const checkboxes = findSelectCheckboxes();
 
       expect(deleteBtn.attributes('disabled')).toBe('disabled');
 
       checkboxes.at(0).trigger('click');
-      Vue.nextTick(() => {
+      return wrapper.vm.$nextTick().then(() => {
         expect(deleteBtn.attributes('disabled')).toEqual(undefined);
-        done();
       });
     });
 
-    it('selecting all checkbox should select all rows and enable delete button', done => {
+    it('selecting all checkbox should select all rows and enable delete button', () => {
       const selectAll = findSelectAllCheckbox();
       selectAll.trigger('click');
 
-      Vue.nextTick(() => {
+      return wrapper.vm.$nextTick().then(() => {
         const checkboxes = findSelectCheckboxes();
         const checked = checkboxes.filter(w => w.element.checked);
         expect(checked.length).toBe(checkboxes.length);
-        done();
       });
     });
 
-    it('deselecting select all checkbox should deselect all rows and disable delete button', done => {
+    it('deselecting select all checkbox should deselect all rows and disable delete button', () => {
       const checkboxes = findSelectCheckboxes();
       const selectAll = findSelectAllCheckbox();
       selectAll.trigger('click');
       selectAll.trigger('click');
 
-      Vue.nextTick(() => {
+      return wrapper.vm.$nextTick().then(() => {
         const checked = checkboxes.filter(w => !w.element.checked);
         expect(checked.length).toBe(checkboxes.length);
-        done();
       });
     });
 
-    it('should delete multiple items when multiple items are selected', done => {
+    it('should delete multiple items when multiple items are selected', () => {
       const multiDeleteItems = jest.fn().mockResolvedValue();
       wrapper.setMethods({ multiDeleteItems });
 
-      Vue.nextTick(() => {
-        const selectAll = findSelectAllCheckbox();
-        selectAll.trigger('click');
-
-        Vue.nextTick(() => {
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
+          const selectAll = findSelectAllCheckbox();
+          selectAll.trigger('click');
+          return wrapper.vm.$nextTick();
+        })
+        .then(() => {
           const deleteBtn = findDeleteButton();
           expect(wrapper.vm.selectedItems).toEqual([0, 1]);
           expect(deleteBtn.attributes('disabled')).toEqual(undefined);
@@ -140,9 +134,7 @@ describe('table registry', () => {
             path: bulkDeletePath,
             items: [firstImage.tag, secondImage.tag],
           });
-          done();
         });
-      });
     });
 
     it('should show an error message if bulkDeletePath is not set', () => {