Add latest changes from gitlab-org/gitlab@master

4 files changed, 55 insertions, 92 deletions

diff --git a/spec/frontend/badges/components/badge_form_spec.js b/spec/frontend/badges/components/badge_form_spec.js
index e375fcb4705..ba2ec775b61 100644
--- a/spec/frontend/badges/components/badge_form_spec.js
+++ b/spec/frontend/badges/components/badge_form_spec.js
@@ -1,5 +1,5 @@
 import MockAdapter from 'axios-mock-adapter';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { DUMMY_IMAGE_URL, TEST_HOST } from 'helpers/test_constants';
 import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import BadgeForm from '~/badges/components/badge_form.vue';
@@ -74,7 +74,7 @@ describe('BadgeForm component', () => {
       expect(feedbackElement).toBeVisible();
     };
 
-    beforeEach((done) => {
+    beforeEach(async () => {
       jest.spyOn(vm, submitAction).mockReturnValue(Promise.resolve());
       store.replaceState({
         ...store.state,
@@ -83,14 +83,10 @@ describe('BadgeForm component', () => {
         isSaving: false,
       });
 
-      Vue.nextTick()
-        .then(() => {
-          setValue(nameSelector, 'TestBadge');
-          setValue(linkUrlSelector, `${TEST_HOST}/link/url`);
-          setValue(imageUrlSelector, `${window.location.origin}${DUMMY_IMAGE_URL}`);
-        })
-        .then(done)
-        .catch(done.fail);
+      await nextTick();
+      setValue(nameSelector, 'TestBadge');
+      setValue(linkUrlSelector, `${TEST_HOST}/link/url`);
+      setValue(imageUrlSelector, `${window.location.origin}${DUMMY_IMAGE_URL}`);
     });
 
     it('returns immediately if imageUrl is empty', () => {
diff --git a/spec/frontend/badges/components/badge_list_row_spec.js b/spec/frontend/badges/components/badge_list_row_spec.js
index 372663017e2..0fb0fa86a02 100644
--- a/spec/frontend/badges/components/badge_list_row_spec.js
+++ b/spec/frontend/badges/components/badge_list_row_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import BadgeListRow from '~/badges/components/badge_list_row.vue';
 import { GROUP_BADGE, PROJECT_BADGE } from '~/badges/constants';
@@ -73,25 +73,21 @@ describe('BadgeListRow component', () => {
     expect(vm.editBadge).toHaveBeenCalled();
   });
 
-  it('calls updateBadgeInModal and shows modal when clicking then delete button', (done) => {
+  it('calls updateBadgeInModal and shows modal when clicking then delete button', async () => {
     jest.spyOn(vm, 'updateBadgeInModal').mockImplementation(() => {});
 
     const deleteButton = vm.$el.querySelector('.table-button-footer button:last-of-type');
     deleteButton.click();
 
-    Vue.nextTick()
-      .then(() => {
-        expect(vm.updateBadgeInModal).toHaveBeenCalled();
-      })
-      .then(done)
-      .catch(done.fail);
+    await nextTick();
+    expect(vm.updateBadgeInModal).toHaveBeenCalled();
   });
 
   describe('for a group badge', () => {
-    beforeEach((done) => {
+    beforeEach(async () => {
       badge.kind = GROUP_BADGE;
 
-      Vue.nextTick().then(done).catch(done.fail);
+      await nextTick();
     });
 
     it('renders the badge kind', () => {
diff --git a/spec/frontend/badges/components/badge_list_spec.js b/spec/frontend/badges/components/badge_list_spec.js
index 6cc90c6de46..39fa502b207 100644
--- a/spec/frontend/badges/components/badge_list_spec.js
+++ b/spec/frontend/badges/components/badge_list_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import BadgeList from '~/badges/components/badge_list.vue';
 import { GROUP_BADGE, PROJECT_BADGE } from '~/badges/constants';
@@ -48,46 +48,34 @@ describe('BadgeList component', () => {
     expect(rows).toHaveLength(numberOfDummyBadges);
   });
 
-  it('renders a message if no badges exist', (done) => {
+  it('renders a message if no badges exist', async () => {
     store.state.badges = [];
 
-    Vue.nextTick()
-      .then(() => {
-        expect(vm.$el.innerText).toMatch('This project has no badges');
-      })
-      .then(done)
-      .catch(done.fail);
+    await nextTick();
+    expect(vm.$el.innerText).toMatch('This project has no badges');
   });
 
-  it('shows a loading icon when loading', (done) => {
+  it('shows a loading icon when loading', async () => {
     store.state.isLoading = true;
 
-    Vue.nextTick()
-      .then(() => {
-        const loadingIcon = vm.$el.querySelector('.gl-spinner');
+    await nextTick();
+    const loadingIcon = vm.$el.querySelector('.gl-spinner');
 
-        expect(loadingIcon).toBeVisible();
-      })
-      .then(done)
-      .catch(done.fail);
+    expect(loadingIcon).toBeVisible();
   });
 
   describe('for group badges', () => {
-    beforeEach((done) => {
+    beforeEach(async () => {
       store.state.kind = GROUP_BADGE;
 
-      Vue.nextTick().then(done).catch(done.fail);
+      await nextTick();
     });
 
-    it('renders a message if no badges exist', (done) => {
+    it('renders a message if no badges exist', async () => {
       store.state.badges = [];
 
-      Vue.nextTick()
-        .then(() => {
-          expect(vm.$el.innerText).toMatch('This group has no badges');
-        })
-        .then(done)
-        .catch(done.fail);
+      await nextTick();
+      expect(vm.$el.innerText).toMatch('This group has no badges');
     });
   });
 });
diff --git a/spec/frontend/badges/components/badge_spec.js b/spec/frontend/badges/components/badge_spec.js
index 990bc094d59..2310fb8bd8e 100644
--- a/spec/frontend/badges/components/badge_spec.js
+++ b/spec/frontend/badges/components/badge_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import mountComponent from 'helpers/vue_mount_component_helper';
 import { DUMMY_IMAGE_URL, TEST_HOST } from 'spec/test_constants';
 import Badge from '~/badges/components/badge.vue';
@@ -27,7 +27,7 @@ describe('Badge component', () => {
       badgeImage.addEventListener('load', resolve);
       // Manually dispatch load event as it is not triggered
       badgeImage.dispatchEvent(new Event('load'));
-    }).then(() => Vue.nextTick());
+    }).then(() => nextTick());
   };
 
   afterEach(() => {
@@ -36,34 +36,25 @@ describe('Badge component', () => {
 
   describe('watchers', () => {
     describe('imageUrl', () => {
-      it('sets isLoading and resets numRetries and hasError', (done) => {
+      it('sets isLoading and resets numRetries and hasError', async () => {
         const props = { ...dummyProps };
-        createComponent(props)
-          .then(() => {
-            expect(vm.isLoading).toBe(false);
-            vm.hasError = true;
-            vm.numRetries = 42;
-
-            vm.imageUrl = `${props.imageUrl}#something/else`;
-
-            return Vue.nextTick();
-          })
-          .then(() => {
-            expect(vm.isLoading).toBe(true);
-            expect(vm.numRetries).toBe(0);
-            expect(vm.hasError).toBe(false);
-          })
-          .then(done)
-          .catch(done.fail);
+        await createComponent(props);
+        expect(vm.isLoading).toBe(false);
+        vm.hasError = true;
+        vm.numRetries = 42;
+
+        vm.imageUrl = `${props.imageUrl}#something/else`;
+        await nextTick();
+        expect(vm.isLoading).toBe(true);
+        expect(vm.numRetries).toBe(0);
+        expect(vm.hasError).toBe(false);
       });
     });
   });
 
   describe('methods', () => {
-    beforeEach((done) => {
-      createComponent({ ...dummyProps })
-        .then(done)
-        .catch(done.fail);
+    beforeEach(async () => {
+      await createComponent({ ...dummyProps });
     });
 
     it('onError resets isLoading and sets hasError', () => {
@@ -116,37 +107,29 @@ describe('Badge component', () => {
       expect(vm.$el.querySelector('.btn-group')).toBeHidden();
     });
 
-    it('shows a loading icon when loading', (done) => {
+    it('shows a loading icon when loading', async () => {
       vm.isLoading = true;
 
-      Vue.nextTick()
-        .then(() => {
-          const { badgeImage, loadingIcon, reloadButton } = findElements();
+      await nextTick();
+      const { badgeImage, loadingIcon, reloadButton } = findElements();
 
-          expect(badgeImage).toBeHidden();
-          expect(loadingIcon).toBeVisible();
-          expect(reloadButton).toBeHidden();
-          expect(vm.$el.querySelector('.btn-group')).toBeHidden();
-        })
-        .then(done)
-        .catch(done.fail);
+      expect(badgeImage).toBeHidden();
+      expect(loadingIcon).toBeVisible();
+      expect(reloadButton).toBeHidden();
+      expect(vm.$el.querySelector('.btn-group')).toBeHidden();
     });
 
-    it('shows an error and reload button if loading failed', (done) => {
+    it('shows an error and reload button if loading failed', async () => {
       vm.hasError = true;
 
-      Vue.nextTick()
-        .then(() => {
-          const { badgeImage, loadingIcon, reloadButton } = findElements();
+      await nextTick();
+      const { badgeImage, loadingIcon, reloadButton } = findElements();
 
-          expect(badgeImage).toBeHidden();
-          expect(loadingIcon).toBeHidden();
-          expect(reloadButton).toBeVisible();
-          expect(reloadButton).toHaveSpriteIcon('retry');
-          expect(vm.$el.innerText.trim()).toBe('No badge image');
-        })
-        .then(done)
-        .catch(done.fail);
+      expect(badgeImage).toBeHidden();
+      expect(loadingIcon).toBeHidden();
+      expect(reloadButton).toBeVisible();
+      expect(reloadButton).toHaveSpriteIcon('retry');
+      expect(vm.$el.innerText.trim()).toBe('No badge image');
     });
   });
 });