Add latest changes from gitlab-org/gitlab@14-8-stable-eev14.8.0-rc42

3 files changed, 105 insertions, 131 deletions

diff --git a/spec/frontend/error_tracking/components/error_details_spec.js b/spec/frontend/error_tracking/components/error_details_spec.js
index 77f51193258..03ae437a89e 100644
--- a/spec/frontend/error_tracking/components/error_details_spec.js
+++ b/spec/frontend/error_tracking/components/error_details_spec.js
@@ -7,7 +7,8 @@ import {
   GlAlert,
   GlSprintf,
 } from '@gitlab/ui';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import {
   severityLevel,
@@ -27,8 +28,7 @@ import Tracking from '~/tracking';
 
 jest.mock('~/flash');
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('ErrorDetails', () => {
   let store;
@@ -53,7 +53,6 @@ describe('ErrorDetails', () => {
   function mountComponent() {
     wrapper = shallowMount(ErrorDetails, {
       stubs: { GlButton, GlSprintf },
-      localVue,
       store,
       mocks,
       propsData: {
@@ -140,32 +139,30 @@ describe('ErrorDetails', () => {
       mountComponent();
     });
 
-    it('when before timeout, still shows loading', () => {
+    it('when before timeout, still shows loading', async () => {
       Date.now.mockReturnValue(endTime - 1);
 
       wrapper.vm.onNoApolloResult();
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
-        expect(createFlash).not.toHaveBeenCalled();
-        expect(mocks.$apollo.queries.error.stopPolling).not.toHaveBeenCalled();
-      });
+      await nextTick();
+      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+      expect(createFlash).not.toHaveBeenCalled();
+      expect(mocks.$apollo.queries.error.stopPolling).not.toHaveBeenCalled();
     });
 
-    it('when timeout is hit and no apollo result, stops loading and shows flash', () => {
+    it('when timeout is hit and no apollo result, stops loading and shows flash', async () => {
       Date.now.mockReturnValue(endTime + 1);
 
       wrapper.vm.onNoApolloResult();
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-        expect(wrapper.find(GlLink).exists()).toBe(false);
-        expect(createFlash).toHaveBeenCalledWith({
-          message: 'Could not connect to Sentry. Refresh the page to try again.',
-          type: 'warning',
-        });
-        expect(mocks.$apollo.queries.error.stopPolling).toHaveBeenCalled();
+      await nextTick();
+      expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+      expect(wrapper.find(GlLink).exists()).toBe(false);
+      expect(createFlash).toHaveBeenCalledWith({
+        message: 'Could not connect to Sentry. Refresh the page to try again.',
+        type: 'warning',
       });
+      expect(mocks.$apollo.queries.error.stopPolling).toHaveBeenCalled();
     });
   });
 
@@ -225,7 +222,7 @@ describe('ErrorDetails', () => {
     });
 
     describe('Badges', () => {
-      it('should show language and error level badges', () => {
+      it('should show language and error level badges', async () => {
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
         wrapper.setData({
@@ -233,12 +230,11 @@ describe('ErrorDetails', () => {
             tags: { level: 'error', logger: 'ruby' },
           },
         });
-        return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.findAll(GlBadge).length).toBe(2);
-        });
+        await nextTick();
+        expect(wrapper.findAll(GlBadge).length).toBe(2);
       });
 
-      it('should NOT show the badge if the tag is not present', () => {
+      it('should NOT show the badge if the tag is not present', async () => {
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
         wrapper.setData({
@@ -246,14 +242,13 @@ describe('ErrorDetails', () => {
             tags: { level: 'error' },
           },
         });
-        return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.findAll(GlBadge).length).toBe(1);
-        });
+        await nextTick();
+        expect(wrapper.findAll(GlBadge).length).toBe(1);
       });
 
       it.each(Object.keys(severityLevel))(
         'should set correct severity level variant for %s badge',
-        (level) => {
+        async (level) => {
           // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
           // eslint-disable-next-line no-restricted-syntax
           wrapper.setData({
@@ -261,15 +256,14 @@ describe('ErrorDetails', () => {
               tags: { level: severityLevel[level] },
             },
           });
-          return wrapper.vm.$nextTick().then(() => {
-            expect(wrapper.find(GlBadge).props('variant')).toEqual(
-              severityLevelVariant[severityLevel[level]],
-            );
-          });
+          await nextTick();
+          expect(wrapper.find(GlBadge).props('variant')).toEqual(
+            severityLevelVariant[severityLevel[level]],
+          );
         },
       );
 
-      it('should fallback for ERROR severityLevelVariant when severityLevel is unknown', () => {
+      it('should fallback for ERROR severityLevelVariant when severityLevel is unknown', async () => {
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
         wrapper.setData({
@@ -277,32 +271,29 @@ describe('ErrorDetails', () => {
             tags: { level: 'someNewErrorLevel' },
           },
         });
-        return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.find(GlBadge).props('variant')).toEqual(
-            severityLevelVariant[severityLevel.ERROR],
-          );
-        });
+        await nextTick();
+        expect(wrapper.find(GlBadge).props('variant')).toEqual(
+          severityLevelVariant[severityLevel.ERROR],
+        );
       });
     });
 
     describe('Stacktrace', () => {
-      it('should show stacktrace', () => {
+      it('should show stacktrace', async () => {
         store.state.details.loadingStacktrace = false;
-        return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-          expect(wrapper.find(Stacktrace).exists()).toBe(true);
-          expect(findAlert().exists()).toBe(false);
-        });
+        await nextTick();
+        expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+        expect(wrapper.find(Stacktrace).exists()).toBe(true);
+        expect(findAlert().exists()).toBe(false);
       });
 
-      it('should NOT show stacktrace if no entries and show Alert message', () => {
+      it('should NOT show stacktrace if no entries and show Alert message', async () => {
         store.state.details.loadingStacktrace = false;
         store.getters = { 'details/sentryUrl': () => 'sentry.io', 'details/stacktrace': () => [] };
-        return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-          expect(wrapper.find(Stacktrace).exists()).toBe(false);
-          expect(findAlert().text()).toBe('No stack trace for this error');
-        });
+        await nextTick();
+        expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+        expect(wrapper.find(Stacktrace).exists()).toBe(false);
+        expect(findAlert().text()).toBe('No stack trace for this error');
       });
     });
 
@@ -339,10 +330,10 @@ describe('ErrorDetails', () => {
       });
 
       describe('when error is unresolved', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           store.state.details.errorStatus = errorStatus.UNRESOLVED;
 
-          return wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         it('displays Ignore and Resolve buttons', () => {
@@ -366,10 +357,10 @@ describe('ErrorDetails', () => {
       });
 
       describe('when error is ignored', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           store.state.details.errorStatus = errorStatus.IGNORED;
 
-          return wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         it('displays Undo Ignore and Resolve buttons', () => {
@@ -393,10 +384,10 @@ describe('ErrorDetails', () => {
       });
 
       describe('when error is resolved', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           store.state.details.errorStatus = errorStatus.RESOLVED;
 
-          return wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         it('displays Ignore and Unresolve buttons', () => {
@@ -418,7 +409,7 @@ describe('ErrorDetails', () => {
           );
         });
 
-        it('should show alert with closed issueId', () => {
+        it('should show alert with closed issueId', async () => {
           const closedIssueId = 123;
           // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
           // eslint-disable-next-line no-restricted-syntax
@@ -427,10 +418,9 @@ describe('ErrorDetails', () => {
             closedIssueId,
           });
 
-          return wrapper.vm.$nextTick().then(() => {
-            expect(findAlert().exists()).toBe(true);
-            expect(findAlert().text()).toContain(`#${closedIssueId}`);
-          });
+          await nextTick();
+          expect(findAlert().exists()).toBe(true);
+          expect(findAlert().text()).toContain(`#${closedIssueId}`);
         });
       });
     });
@@ -496,7 +486,7 @@ describe('ErrorDetails', () => {
         '/gitlab-org/gitlab-test/commit/7975be0116940bf2ad4321f79d02a55c5f7779aa';
       const findGitLabCommitLink = () => wrapper.find(`[href$="${gitlabCommitPath}"]`);
 
-      it('should display a link', () => {
+      it('should display a link', async () => {
         mocks.$apollo.queries.error.loading = false;
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
@@ -506,12 +496,11 @@ describe('ErrorDetails', () => {
             gitlabCommitPath,
           },
         });
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findGitLabCommitLink().exists()).toBe(true);
-        });
+        await nextTick();
+        expect(findGitLabCommitLink().exists()).toBe(true);
       });
 
-      it('should not display a link', () => {
+      it('should not display a link', async () => {
         mocks.$apollo.queries.error.loading = false;
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
@@ -520,9 +509,8 @@ describe('ErrorDetails', () => {
             gitlabCommit: null,
           },
         });
-        return wrapper.vm.$nextTick().then(() => {
-          expect(findGitLabCommitLink().exists()).toBe(false);
-        });
+        await nextTick();
+        expect(findGitLabCommitLink().exists()).toBe(false);
       });
     });
 
@@ -595,33 +583,25 @@ describe('ErrorDetails', () => {
       expect(Tracking.event).toHaveBeenCalledWith(category, action);
     });
 
-    it('should track IGNORE status update', () => {
+    it('should track IGNORE status update', async () => {
       Tracking.event.mockClear();
-      findUpdateIgnoreStatusButton().vm.$emit('click');
-      setImmediate(() => {
-        const { category, action } = trackErrorStatusUpdateOptions('ignored');
-        expect(Tracking.event).toHaveBeenCalledWith(category, action);
-      });
+      await findUpdateIgnoreStatusButton().trigger('click');
+      const { category, action } = trackErrorStatusUpdateOptions('ignored');
+      expect(Tracking.event).toHaveBeenCalledWith(category, action);
     });
 
-    it('should track RESOLVE status update', () => {
+    it('should track RESOLVE status update', async () => {
       Tracking.event.mockClear();
-      findUpdateResolveStatusButton().vm.$emit('click');
-      setImmediate(() => {
-        const { category, action } = trackErrorStatusUpdateOptions('resolved');
-        expect(Tracking.event).toHaveBeenCalledWith(category, action);
-      });
+      await findUpdateResolveStatusButton().trigger('click');
+      const { category, action } = trackErrorStatusUpdateOptions('resolved');
+      expect(Tracking.event).toHaveBeenCalledWith(category, action);
     });
 
-    it('should track external Sentry link views', () => {
+    it('should track external Sentry link views', async () => {
       Tracking.event.mockClear();
-      findExternalUrl().trigger('click');
-      setImmediate(() => {
-        const { category, action, label, property } = trackClickErrorLinkToSentryOptions(
-          externalUrl,
-        );
-        expect(Tracking.event).toHaveBeenCalledWith(category, action, { label, property });
-      });
+      await findExternalUrl().trigger('click');
+      const { category, action, label, property } = trackClickErrorLinkToSentryOptions(externalUrl);
+      expect(Tracking.event).toHaveBeenCalledWith(category, action, { label, property });
     });
   });
 });
diff --git a/spec/frontend/error_tracking/components/error_tracking_actions_spec.js b/spec/frontend/error_tracking/components/error_tracking_actions_spec.js
index e21c40423c3..7ed4e5f6b05 100644
--- a/spec/frontend/error_tracking/components/error_tracking_actions_spec.js
+++ b/spec/frontend/error_tracking/components/error_tracking_actions_spec.js
@@ -1,5 +1,6 @@
 import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import ErrorTrackingActions from '~/error_tracking/components/error_tracking_actions.vue';
 
 describe('Error Tracking Actions', () => {
@@ -37,13 +38,12 @@ describe('Error Tracking Actions', () => {
   const findButtons = () => wrapper.findAll(GlButton);
 
   describe('when error status is unresolved', () => {
-    it('renders the correct actions buttons to allow ignore and resolve', () => {
+    it('renders the correct actions buttons to allow ignore and resolve', async () => {
       expect(findButtons().exists()).toBe(true);
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findButtons().at(0).attributes('title')).toBe('Ignore');
-        expect(findButtons().at(1).attributes('title')).toBe('Resolve');
-      });
+      await nextTick();
+      expect(findButtons().at(0).attributes('title')).toBe('Ignore');
+      expect(findButtons().at(1).attributes('title')).toBe('Resolve');
     });
   });
 
@@ -52,12 +52,11 @@ describe('Error Tracking Actions', () => {
       mountComponent({ error: { status: 'ignored' } });
     });
 
-    it('renders the correct action button to undo ignore', () => {
+    it('renders the correct action button to undo ignore', async () => {
       expect(findButtons().exists()).toBe(true);
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findButtons().at(0).attributes('title')).toBe('Undo Ignore');
-      });
+      await nextTick();
+      expect(findButtons().at(0).attributes('title')).toBe('Undo Ignore');
     });
   });
 
@@ -66,12 +65,11 @@ describe('Error Tracking Actions', () => {
       mountComponent({ error: { status: 'resolved' } });
     });
 
-    it('renders the correct action button to undo unresolve', () => {
+    it('renders the correct action button to undo unresolve', async () => {
       expect(findButtons().exists()).toBe(true);
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findButtons().at(1).attributes('title')).toBe('Unresolve');
-      });
+      await nextTick();
+      expect(findButtons().at(1).attributes('title')).toBe('Unresolve');
     });
   });
 });
diff --git a/spec/frontend/error_tracking/components/error_tracking_list_spec.js b/spec/frontend/error_tracking/components/error_tracking_list_spec.js
index 74d5731bbea..59671c175e7 100644
--- a/spec/frontend/error_tracking/components/error_tracking_list_spec.js
+++ b/spec/frontend/error_tracking/components/error_tracking_list_spec.js
@@ -1,5 +1,6 @@
 import { GlEmptyState, GlLoadingIcon, GlFormInput, GlPagination, GlDropdown } from '@gitlab/ui';
-import { createLocalVue, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import stubChildren from 'helpers/stub_children';
 import ErrorTrackingActions from '~/error_tracking/components/error_tracking_actions.vue';
@@ -8,8 +9,7 @@ import { trackErrorListViewsOptions, trackErrorStatusUpdateOptions } from '~/err
 import Tracking from '~/tracking';
 import errorsList from './list_mock.json';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('ErrorTrackingList', () => {
   let store;
@@ -32,7 +32,6 @@ describe('ErrorTrackingList', () => {
     stubs = {},
   } = {}) {
     wrapper = mount(ErrorTrackingList, {
-      localVue,
       store,
       propsData: {
         indexPath: '/path',
@@ -317,15 +316,14 @@ describe('ErrorTrackingList', () => {
       expect(findRecentSearchesDropdown().text()).toContain("You don't have any recent searches");
     });
 
-    it('shows items', () => {
+    it('shows items', async () => {
       store.state.list.recentSearches = ['great', 'search'];
 
-      return wrapper.vm.$nextTick().then(() => {
-        const dropdownItems = wrapper.findAll('.filtered-search-box li');
-        expect(dropdownItems.length).toBe(3);
-        expect(dropdownItems.at(0).text()).toBe('great');
-        expect(dropdownItems.at(1).text()).toBe('search');
-      });
+      await nextTick();
+      const dropdownItems = wrapper.findAll('.filtered-search-box li');
+      expect(dropdownItems.length).toBe(3);
+      expect(dropdownItems.at(0).text()).toBe('great');
+      expect(dropdownItems.at(1).text()).toBe('search');
     });
 
     describe('clear', () => {
@@ -337,23 +335,21 @@ describe('ErrorTrackingList', () => {
         expect(clearRecentButton().exists()).toBe(false);
       });
 
-      it('is visible when list has items', () => {
+      it('is visible when list has items', async () => {
         store.state.list.recentSearches = ['some', 'searches'];
 
-        return wrapper.vm.$nextTick().then(() => {
-          expect(clearRecentButton().exists()).toBe(true);
-          expect(clearRecentButton().text()).toBe('Clear recent searches');
-        });
+        await nextTick();
+        expect(clearRecentButton().exists()).toBe(true);
+        expect(clearRecentButton().text()).toBe('Clear recent searches');
       });
 
-      it('clears items on click', () => {
+      it('clears items on click', async () => {
         store.state.list.recentSearches = ['some', 'searches'];
 
-        return wrapper.vm.$nextTick().then(() => {
-          clearRecentButton().vm.$emit('click');
+        await nextTick();
+        clearRecentButton().vm.$emit('click');
 
-          expect(actions.clearRecentSearches).toHaveBeenCalledTimes(1);
-        });
+        expect(actions.clearRecentSearches).toHaveBeenCalledTimes(1);
       });
     });
   });
@@ -388,7 +384,7 @@ describe('ErrorTrackingList', () => {
 
     describe('and the user is not on the first page', () => {
       describe('and the previous button is clicked', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           store.state.list.loading = false;
           mountComponent({
             stubs: {
@@ -399,7 +395,7 @@ describe('ErrorTrackingList', () => {
           // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
           // eslint-disable-next-line no-restricted-syntax
           wrapper.setData({ pageValue: 2 });
-          return wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         it('fetches the previous page of results', () => {
@@ -451,7 +447,7 @@ describe('ErrorTrackingList', () => {
       expect(Tracking.event).toHaveBeenCalledWith(category, action);
     });
 
-    it('should track status updates', () => {
+    it('should track status updates', async () => {
       Tracking.event.mockClear();
       const status = 'ignored';
       findErrorActions().vm.$emit('update-issue-status', {
@@ -459,10 +455,10 @@ describe('ErrorTrackingList', () => {
         status,
       });
 
-      setImmediate(() => {
-        const { category, action } = trackErrorStatusUpdateOptions(status);
-        expect(Tracking.event).toHaveBeenCalledWith(category, action);
-      });
+      await nextTick();
+
+      const { category, action } = trackErrorStatusUpdateOptions(status);
+      expect(Tracking.event).toHaveBeenCalledWith(category, action);
     });
   });
 });