Add latest changes from gitlab-org/gitlab@master

6 files changed, 297 insertions, 198 deletions

diff --git a/spec/frontend/environments/environments_app_spec.js b/spec/frontend/environments/environments_app_spec.js
new file mode 100644
index 00000000000..f3d2bd2462e
--- /dev/null
+++ b/spec/frontend/environments/environments_app_spec.js
@@ -0,0 +1,168 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import axios from '~/lib/utils/axios_utils';
+import MockAdapter from 'axios-mock-adapter';
+import Container from '~/environments/components/container.vue';
+import EmptyState from '~/environments/components/empty_state.vue';
+import EnvironmentsApp from '~/environments/components/environments_app.vue';
+import { environment, folder } from './mock_data';
+
+describe('Environment', () => {
+  let mock;
+  let wrapper;
+
+  const mockData = {
+    endpoint: 'environments.json',
+    canCreateEnvironment: true,
+    canReadEnvironment: true,
+    newEnvironmentPath: 'environments/new',
+    helpPagePath: 'help',
+    canaryDeploymentFeatureId: 'canary_deployment',
+    showCanaryDeploymentCallout: true,
+    userCalloutsPath: '/callouts',
+    lockPromotionSvgPath: '/assets/illustrations/lock-promotion.svg',
+    helpCanaryDeploymentsPath: 'help/canary-deployments',
+  };
+
+  const mockRequest = (response, body) => {
+    mock.onGet(mockData.endpoint).reply(response, body, {
+      'X-nExt-pAge': '2',
+      'x-page': '1',
+      'X-Per-Page': '1',
+      'X-Prev-Page': '',
+      'X-TOTAL': '37',
+      'X-Total-Pages': '2',
+    });
+  };
+
+  const createWrapper = (shallow = false) => {
+    const fn = shallow ? shallowMount : mount;
+    wrapper = fn(EnvironmentsApp, { propsData: mockData });
+    return axios.waitForAll();
+  };
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    mock.restore();
+  });
+
+  describe('successful request', () => {
+    describe('without environments', () => {
+      beforeEach(() => {
+        mockRequest(200, { environments: [] });
+        return createWrapper(true);
+      });
+
+      it('should render the empty state', () => {
+        expect(wrapper.find(EmptyState).exists()).toBe(true);
+      });
+
+      describe('when it is possible to enable a review app', () => {
+        beforeEach(() => {
+          mockRequest(200, { environments: [], review_app: { can_setup_review_app: true } });
+          return createWrapper();
+        });
+
+        it('should render the enable review app button', () => {
+          expect(wrapper.find('.js-enable-review-app-button').text()).toContain(
+            'Enable review app',
+          );
+        });
+      });
+    });
+
+    describe('with paginated environments', () => {
+      const environmentList = [environment];
+
+      beforeEach(() => {
+        mockRequest(200, {
+          environments: environmentList,
+          stopped_count: 1,
+          available_count: 0,
+        });
+        return createWrapper();
+      });
+
+      it('should render a conatiner table with environments', () => {
+        const containerTable = wrapper.find(Container);
+
+        expect(containerTable.exists()).toBe(true);
+        expect(containerTable.props('environments').length).toEqual(environmentList.length);
+        expect(containerTable.find('.environment-name').text()).toEqual(environmentList[0].name);
+      });
+
+      describe('pagination', () => {
+        it('should render pagination', () => {
+          expect(wrapper.findAll('.gl-pagination li').length).toEqual(9);
+        });
+
+        it('should make an API request when page is clicked', () => {
+          jest.spyOn(wrapper.vm, 'updateContent').mockImplementation(() => {});
+
+          wrapper.find('.gl-pagination li:nth-child(3) .page-link').trigger('click');
+          expect(wrapper.vm.updateContent).toHaveBeenCalledWith({ scope: 'available', page: '2' });
+        });
+
+        it('should make an API request when using tabs', () => {
+          jest.spyOn(wrapper.vm, 'updateContent').mockImplementation(() => {});
+          wrapper.find('.js-environments-tab-stopped').trigger('click');
+          expect(wrapper.vm.updateContent).toHaveBeenCalledWith({ scope: 'stopped', page: '1' });
+        });
+      });
+    });
+  });
+
+  describe('unsuccessful request', () => {
+    beforeEach(() => {
+      mockRequest(500, {});
+      return createWrapper(true);
+    });
+
+    it('should render empty state', () => {
+      expect(wrapper.find(EmptyState).exists()).toBe(true);
+    });
+  });
+
+  describe('expandable folders', () => {
+    beforeEach(() => {
+      mockRequest(200, {
+        environments: [folder],
+        stopped_count: 1,
+        available_count: 0,
+      });
+
+      mock.onGet(environment.folder_path).reply(200, { environments: [environment] });
+
+      return createWrapper().then(() => {
+        // open folder
+        wrapper.find('.folder-name').trigger('click');
+        return axios.waitForAll();
+      });
+    });
+
+    it('should open a closed folder', () => {
+      expect(wrapper.find('.folder-icon.ic-chevron-right').exists()).toBe(false);
+    });
+
+    it('should close an opened folder', () => {
+      expect(wrapper.find('.folder-icon.ic-chevron-down').exists()).toBe(true);
+
+      // close folder
+      wrapper.find('.folder-name').trigger('click');
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.find('.folder-icon.ic-chevron-down').exists()).toBe(false);
+      });
+    });
+
+    it('should show children environments', () => {
+      expect(wrapper.findAll('.js-child-row').length).toEqual(1);
+    });
+
+    it('should show a button to show all environments', () => {
+      expect(wrapper.find('.text-center > a.btn').text()).toContain('Show all');
+    });
+  });
+});
diff --git a/spec/frontend/monitoring/components/dashboard_spec.js b/spec/frontend/monitoring/components/dashboard_spec.js
index 7a039d46d39..15c82242262 100644
--- a/spec/frontend/monitoring/components/dashboard_spec.js
+++ b/spec/frontend/monitoring/components/dashboard_spec.js
@@ -91,10 +91,10 @@ describe('Dashboard', () => {
   });
 
   describe('no data found', () => {
-    beforeEach(done => {
+    beforeEach(() => {
       createShallowWrapper();
 
-      wrapper.vm.$nextTick(done);
+      return wrapper.vm.$nextTick();
     });
 
     it('shows the environment selector dropdown', () => {
@@ -118,20 +118,15 @@ describe('Dashboard', () => {
       });
     });
 
-    it('shows up a loading state', done => {
+    it('shows up a loading state', () => {
       createShallowWrapper({ hasMetrics: true }, { methods: {} });
 
-      wrapper.vm
-        .$nextTick()
-        .then(() => {
-          expect(wrapper.vm.emptyState).toEqual('loading');
-
-          done();
-        })
-        .catch(done.fail);
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.vm.emptyState).toEqual('loading');
+      });
     });
 
-    it('hides the group panels when showPanels is false', done => {
+    it('hides the group panels when showPanels is false', () => {
       createMountedWrapper(
         { hasMetrics: true, showPanels: false },
         { stubs: ['graph-group', 'panel-type'] },
@@ -139,15 +134,10 @@ describe('Dashboard', () => {
 
       setupComponentStore(wrapper);
 
-      wrapper.vm
-        .$nextTick()
-        .then(() => {
-          expect(wrapper.vm.showEmptyState).toEqual(false);
-          expect(wrapper.findAll('.prometheus-panel')).toHaveLength(0);
-
-          done();
-        })
-        .catch(done.fail);
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.vm.showEmptyState).toEqual(false);
+        expect(wrapper.findAll('.prometheus-panel')).toHaveLength(0);
+      });
     });
 
     it('fetches the metrics data with proper time window', () => {
@@ -171,43 +161,32 @@ describe('Dashboard', () => {
       createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] });
 
       setupComponentStore(wrapper);
+
+      return wrapper.vm.$nextTick();
     });
 
-    it('renders the environments dropdown with a number of environments', done => {
-      wrapper.vm
-        .$nextTick()
-        .then(() => {
-          expect(findAllEnvironmentsDropdownItems().length).toEqual(environmentData.length);
-
-          findAllEnvironmentsDropdownItems().wrappers.forEach((itemWrapper, index) => {
-            const anchorEl = itemWrapper.find('a');
-            if (anchorEl.exists() && environmentData[index].metrics_path) {
-              const href = anchorEl.attributes('href');
-              expect(href).toBe(environmentData[index].metrics_path);
-            }
-          });
+    it('renders the environments dropdown with a number of environments', () => {
+      expect(findAllEnvironmentsDropdownItems().length).toEqual(environmentData.length);
 
-          done();
-        })
-        .catch(done.fail);
+      findAllEnvironmentsDropdownItems().wrappers.forEach((itemWrapper, index) => {
+        const anchorEl = itemWrapper.find('a');
+        if (anchorEl.exists() && environmentData[index].metrics_path) {
+          const href = anchorEl.attributes('href');
+          expect(href).toBe(environmentData[index].metrics_path);
+        }
+      });
     });
 
-    it('renders the environments dropdown with a single active element', done => {
-      wrapper.vm
-        .$nextTick()
-        .then(() => {
-          const activeItem = findAllEnvironmentsDropdownItems().wrappers.filter(itemWrapper =>
-            itemWrapper.find('.active').exists(),
-          );
+    it('renders the environments dropdown with a single active element', () => {
+      const activeItem = findAllEnvironmentsDropdownItems().wrappers.filter(itemWrapper =>
+        itemWrapper.find('.active').exists(),
+      );
 
-          expect(activeItem.length).toBe(1);
-          done();
-        })
-        .catch(done.fail);
+      expect(activeItem.length).toBe(1);
     });
   });
 
-  it('hides the environments dropdown list when there is no environments', done => {
+  it('hides the environments dropdown list when there is no environments', () => {
     createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] });
 
     wrapper.vm.$store.commit(
@@ -219,35 +198,27 @@ describe('Dashboard', () => {
       mockedQueryResultPayload,
     );
 
-    wrapper.vm
-      .$nextTick()
-      .then(() => {
-        expect(findAllEnvironmentsDropdownItems()).toHaveLength(0);
-        done();
-      })
-      .catch(done.fail);
+    return wrapper.vm.$nextTick().then(() => {
+      expect(findAllEnvironmentsDropdownItems()).toHaveLength(0);
+    });
   });
 
-  it('renders the datetimepicker dropdown', done => {
+  it('renders the datetimepicker dropdown', () => {
     createMountedWrapper({ hasMetrics: true }, { stubs: ['graph-group', 'panel-type'] });
 
     setupComponentStore(wrapper);
 
-    wrapper.vm
-      .$nextTick()
-      .then(() => {
-        expect(wrapper.find(DateTimePicker).exists()).toBe(true);
-        done();
-      })
-      .catch(done.fail);
+    return wrapper.vm.$nextTick().then(() => {
+      expect(wrapper.find(DateTimePicker).exists()).toBe(true);
+    });
   });
 
   describe('when one of the metrics is missing', () => {
-    beforeEach(done => {
+    beforeEach(() => {
       createShallowWrapper({ hasMetrics: true });
       setupComponentStore(wrapper);
 
-      wrapper.vm.$nextTick(done);
+      return wrapper.vm.$nextTick();
     });
 
     it('shows a group empty area', () => {
@@ -300,7 +271,7 @@ describe('Dashboard', () => {
       const resultEnvs = environmentData.filter(({ name }) => name.indexOf(searchTerm) !== -1);
       setSearchTerm(searchTerm);
 
-      return wrapper.vm.$nextTick(() => {
+      return wrapper.vm.$nextTick().then(() => {
         expect(findAllEnvironmentsDropdownItems().length).toEqual(resultEnvs.length);
       });
     });
@@ -349,12 +320,12 @@ describe('Dashboard', () => {
     const findDraggablePanels = () => wrapper.findAll('.js-draggable-panel');
     const findRearrangeButton = () => wrapper.find('.js-rearrange-button');
 
-    beforeEach(done => {
+    beforeEach(() => {
       createShallowWrapper({ hasMetrics: true });
 
       setupComponentStore(wrapper);
 
-      wrapper.vm.$nextTick(done);
+      return wrapper.vm.$nextTick();
     });
 
     it('wraps vuedraggable', () => {
@@ -368,9 +339,9 @@ describe('Dashboard', () => {
     });
 
     describe('when rearrange is enabled', () => {
-      beforeEach(done => {
+      beforeEach(() => {
         wrapper.setProps({ rearrangePanelsAvailable: true });
-        wrapper.vm.$nextTick(done);
+        return wrapper.vm.$nextTick();
       });
 
       it('displays rearrange button', () => {
@@ -383,9 +354,9 @@ describe('Dashboard', () => {
             .at(0)
             .find('.js-draggable-remove');
 
-        beforeEach(done => {
+        beforeEach(() => {
           findRearrangeButton().vm.$emit('click');
-          wrapper.vm.$nextTick(done);
+          return wrapper.vm.$nextTick();
         });
 
         it('it enables draggables', () => {
@@ -393,7 +364,7 @@ describe('Dashboard', () => {
           expect(findEnabledDraggables()).toEqual(findDraggables());
         });
 
-        it('metrics can be swapped', done => {
+        it('metrics can be swapped', () => {
           const firstDraggable = findDraggables().at(0);
           const mockMetrics = [...metricsDashboardPayload.panel_groups[1].panels];
 
@@ -404,33 +375,30 @@ describe('Dashboard', () => {
           [mockMetrics[0], mockMetrics[1]] = [mockMetrics[1], mockMetrics[0]];
           firstDraggable.vm.$emit('input', mockMetrics);
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             const { panels } = wrapper.vm.dashboard.panel_groups[1];
 
             expect(panels[1].title).toEqual(firstTitle);
             expect(panels[0].title).toEqual(secondTitle);
-            done();
           });
         });
 
-        it('shows a remove button, which removes a panel', done => {
+        it('shows a remove button, which removes a panel', () => {
           expect(findFirstDraggableRemoveButton().isEmpty()).toBe(false);
 
           expect(findDraggablePanels().length).toEqual(expectedPanelCount);
           findFirstDraggableRemoveButton().trigger('click');
 
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(findDraggablePanels().length).toEqual(expectedPanelCount - 1);
-            done();
           });
         });
 
-        it('it disables draggables when clicked again', done => {
+        it('it disables draggables when clicked again', () => {
           findRearrangeButton().vm.$emit('click');
-          wrapper.vm.$nextTick(() => {
+          return wrapper.vm.$nextTick(() => {
             expect(findRearrangeButton().attributes('pressed')).toBeFalsy();
             expect(findEnabledDraggables().length).toBe(0);
-            done();
           });
         });
       });
@@ -438,13 +406,13 @@ describe('Dashboard', () => {
   });
 
   describe('cluster health', () => {
-    beforeEach(done => {
+    beforeEach(() => {
       mock.onGet(propsData.metricsEndpoint).reply(statusCodes.OK, JSON.stringify({}));
       createShallowWrapper({ hasMetrics: true, showHeader: false });
 
       // all_dashboards is not defined in health dashboards
       wrapper.vm.$store.commit(`monitoringDashboard/${types.SET_ALL_DASHBOARDS}`, undefined);
-      wrapper.vm.$nextTick(done);
+      return wrapper.vm.$nextTick();
     });
 
     it('hides dashboard header by default', () => {
@@ -460,33 +428,29 @@ describe('Dashboard', () => {
   describe('dashboard edit link', () => {
     const findEditLink = () => wrapper.find('.js-edit-link');
 
-    beforeEach(done => {
+    beforeEach(() => {
       createShallowWrapper({ hasMetrics: true });
 
       wrapper.vm.$store.commit(
         `monitoringDashboard/${types.SET_ALL_DASHBOARDS}`,
         dashboardGitResponse,
       );
-      wrapper.vm.$nextTick(done);
+      return wrapper.vm.$nextTick();
     });
 
     it('is not present for the default dashboard', () => {
       expect(findEditLink().exists()).toBe(false);
     });
 
-    it('is present for a custom dashboard, and links to its edit_path', done => {
+    it('is present for a custom dashboard, and links to its edit_path', () => {
       const dashboard = dashboardGitResponse[1]; // non-default dashboard
       const currentDashboard = dashboard.path;
 
       wrapper.setProps({ currentDashboard });
-      wrapper.vm
-        .$nextTick()
-        .then(() => {
-          expect(findEditLink().exists()).toBe(true);
-          expect(findEditLink().attributes('href')).toBe(dashboard.project_blob_path);
-          done();
-        })
-        .catch(done.fail);
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findEditLink().exists()).toBe(true);
+        expect(findEditLink().attributes('href')).toBe(dashboard.project_blob_path);
+      });
     });
   });
 
@@ -498,18 +462,14 @@ describe('Dashboard', () => {
         `monitoringDashboard/${types.SET_ALL_DASHBOARDS}`,
         dashboardGitResponse,
       );
+
+      return wrapper.vm.$nextTick();
     });
 
-    it('shows the dashboard dropdown', done => {
-      wrapper.vm
-        .$nextTick()
-        .then(() => {
-          const dashboardDropdown = wrapper.find(DashboardsDropdown);
+    it('shows the dashboard dropdown', () => {
+      const dashboardDropdown = wrapper.find(DashboardsDropdown);
 
-          expect(dashboardDropdown.exists()).toBe(true);
-          done();
-        })
-        .catch(done.fail);
+      expect(dashboardDropdown.exists()).toBe(true);
     });
   });
 
@@ -524,20 +484,16 @@ describe('Dashboard', () => {
         },
         { stubs: ['graph-group', 'panel-type'] },
       );
+
+      return wrapper.vm.$nextTick();
     });
 
-    it('shows the link', done => {
-      wrapper.vm
-        .$nextTick()
-        .then(() => {
-          const externalDashboardButton = wrapper.find('.js-external-dashboard-link');
+    it('shows the link', () => {
+      const externalDashboardButton = wrapper.find('.js-external-dashboard-link');
 
-          expect(externalDashboardButton.exists()).toBe(true);
-          expect(externalDashboardButton.is(GlButton)).toBe(true);
-          expect(externalDashboardButton.text()).toContain('View full dashboard');
-          done();
-        })
-        .catch(done.fail);
+      expect(externalDashboardButton.exists()).toBe(true);
+      expect(externalDashboardButton.is(GlButton)).toBe(true);
+      expect(externalDashboardButton.text()).toContain('View full dashboard');
     });
   });
 
@@ -550,12 +506,12 @@ describe('Dashboard', () => {
         .at(i)
         .props('clipboardText');
 
-    beforeEach(done => {
+    beforeEach(() => {
       createShallowWrapper({ hasMetrics: true, currentDashboard });
 
       setupComponentStore(wrapper);
 
-      wrapper.vm.$nextTick(done);
+      return wrapper.vm.$nextTick();
     });
 
     it('contains a link to the dashboard', () => {
@@ -565,23 +521,21 @@ describe('Dashboard', () => {
       expect(getClipboardTextAt(0)).toContain(`y_label=`);
     });
 
-    it('strips the undefined parameter', done => {
+    it('strips the undefined parameter', () => {
       wrapper.setProps({ currentDashboard: undefined });
 
-      wrapper.vm.$nextTick(() => {
+      return wrapper.vm.$nextTick(() => {
         expect(getClipboardTextAt(0)).not.toContain(`dashboard=`);
         expect(getClipboardTextAt(0)).toContain(`y_label=`);
-        done();
       });
     });
 
-    it('null parameter is stripped', done => {
+    it('null parameter is stripped', () => {
       wrapper.setProps({ currentDashboard: null });
 
-      wrapper.vm.$nextTick(() => {
+      return wrapper.vm.$nextTick(() => {
         expect(getClipboardTextAt(0)).not.toContain(`dashboard=`);
         expect(getClipboardTextAt(0)).toContain(`y_label=`);
-        done();
       });
     });
   });
diff --git a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
index 51c7b22f242..0bcfabe6415 100644
--- a/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
+++ b/spec/frontend/monitoring/components/dashboards_dropdown_spec.js
@@ -131,20 +131,17 @@ describe('DashboardsDropdown', () => {
         expect(findModal().contains(DuplicateDashboardForm)).toBe(true);
       });
 
-      it('saves a new dashboard', done => {
+      it('saves a new dashboard', () => {
         findModal().vm.$emit('ok', okEvent);
 
-        waitForPromises()
-          .then(() => {
-            expect(okEvent.preventDefault).toHaveBeenCalled();
-
-            expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-            expect(wrapper.vm.$refs.duplicateDashboardModal.hide).toHaveBeenCalled();
-            expect(wrapper.emitted().selectDashboard).toBeTruthy();
-            expect(findAlert().exists()).toBe(false);
-            done();
-          })
-          .catch(done.fail);
+        return waitForPromises().then(() => {
+          expect(okEvent.preventDefault).toHaveBeenCalled();
+
+          expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+          expect(wrapper.vm.$refs.duplicateDashboardModal.hide).toHaveBeenCalled();
+          expect(wrapper.emitted().selectDashboard).toBeTruthy();
+          expect(findAlert().exists()).toBe(false);
+        });
       });
 
       describe('when a new dashboard is saved succesfully', () => {
@@ -167,52 +164,42 @@ describe('DashboardsDropdown', () => {
           findModal().vm.$emit('ok', okEvent);
         };
 
-        it('to the default branch, redirects to the new dashboard', done => {
+        it('to the default branch, redirects to the new dashboard', () => {
           submitForm({
             branch: defaultBranch,
           });
 
-          waitForPromises()
-            .then(() => {
-              expect(wrapper.emitted().selectDashboard[0][0]).toEqual(newDashboard);
-              done();
-            })
-            .catch(done.fail);
+          return waitForPromises().then(() => {
+            expect(wrapper.emitted().selectDashboard[0][0]).toEqual(newDashboard);
+          });
         });
 
-        it('to a new branch refreshes in the current dashboard', done => {
+        it('to a new branch refreshes in the current dashboard', () => {
           submitForm({
             branch: 'another-branch',
           });
 
-          waitForPromises()
-            .then(() => {
-              expect(wrapper.emitted().selectDashboard[0][0]).toEqual(dashboardGitResponse[0]);
-              done();
-            })
-            .catch(done.fail);
+          return waitForPromises().then(() => {
+            expect(wrapper.emitted().selectDashboard[0][0]).toEqual(dashboardGitResponse[0]);
+          });
         });
       });
 
-      it('handles error when a new dashboard is not saved', done => {
+      it('handles error when a new dashboard is not saved', () => {
         const errMsg = 'An error occurred';
 
         duplicateDashboardAction.mockRejectedValueOnce(errMsg);
         findModal().vm.$emit('ok', okEvent);
 
-        waitForPromises()
-          .then(() => {
-            expect(okEvent.preventDefault).toHaveBeenCalled();
-
-            expect(findAlert().exists()).toBe(true);
-            expect(findAlert().text()).toBe(errMsg);
+        return waitForPromises().then(() => {
+          expect(okEvent.preventDefault).toHaveBeenCalled();
 
-            expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
-            expect(wrapper.vm.$refs.duplicateDashboardModal.hide).not.toHaveBeenCalled();
+          expect(findAlert().exists()).toBe(true);
+          expect(findAlert().text()).toBe(errMsg);
 
-            done();
-          })
-          .catch(done.fail);
+          expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+          expect(wrapper.vm.$refs.duplicateDashboardModal.hide).not.toHaveBeenCalled();
+        });
       });
 
       it('id is correct, as the value of modal directive binding matches modal id', () => {
diff --git a/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js
index 75a488b5c7b..10fd58f749d 100644
--- a/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js
+++ b/spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js
@@ -44,30 +44,27 @@ describe('DuplicateDashboardForm', () => {
   describe('validates the file name', () => {
     const findInvalidFeedback = () => findByRef('fileNameFormGroup').find('.invalid-feedback');
 
-    it('when is empty', done => {
+    it('when is empty', () => {
       setValue('fileName', '');
-      wrapper.vm.$nextTick(() => {
+      return wrapper.vm.$nextTick(() => {
         expect(findByRef('fileNameFormGroup').is('.is-valid')).toBe(true);
         expect(findInvalidFeedback().exists()).toBe(false);
-        done();
       });
     });
 
-    it('when is valid', done => {
+    it('when is valid', () => {
       setValue('fileName', 'my_dashboard.yml');
-      wrapper.vm.$nextTick(() => {
+      return wrapper.vm.$nextTick(() => {
         expect(findByRef('fileNameFormGroup').is('.is-valid')).toBe(true);
         expect(findInvalidFeedback().exists()).toBe(false);
-        done();
       });
     });
 
-    it('when is not valid', done => {
+    it('when is not valid', () => {
       setValue('fileName', 'my_dashboard.exe');
-      wrapper.vm.$nextTick(() => {
+      return wrapper.vm.$nextTick(() => {
         expect(findByRef('fileNameFormGroup').is('.is-invalid')).toBe(true);
         expect(findInvalidFeedback().text()).toBeTruthy();
-        done();
       });
     });
   });
@@ -124,30 +121,26 @@ describe('DuplicateDashboardForm', () => {
       });
     });
 
-    it('when a `default` branch option is set, branch input is invisible and ignored', done => {
+    it('when a `default` branch option is set, branch input is invisible and ignored', () => {
       setChecked(wrapper.vm.$options.radioVals.DEFAULT);
       setValue('branchName', 'a-new-branch');
 
       expect(lastChange()).resolves.toMatchObject({
         branch: defaultBranch,
       });
-      wrapper.vm.$nextTick(() => {
+
+      return wrapper.vm.$nextTick(() => {
         expect(findByRef('branchName').isVisible()).toBe(false);
-        done();
       });
     });
 
-    it('when `new` branch option is chosen, focuses on the branch name input', done => {
+    it('when `new` branch option is chosen, focuses on the branch name input', () => {
       setChecked(wrapper.vm.$options.radioVals.NEW);
 
-      wrapper.vm
-        .$nextTick()
-        .then(() => {
-          wrapper.find('form').trigger('change');
-          expect(findByRef('branchName').is(':focus')).toBe(true);
-        })
-        .then(done)
-        .catch(done.fail);
+      return wrapper.vm.$nextTick().then(() => {
+        wrapper.find('form').trigger('change');
+        expect(findByRef('branchName').is(':focus')).toBe(true);
+      });
     });
   });
 });
diff --git a/spec/frontend/monitoring/components/graph_group_spec.js b/spec/frontend/monitoring/components/graph_group_spec.js
index 983785d0ecc..28a6af64394 100644
--- a/spec/frontend/monitoring/components/graph_group_spec.js
+++ b/spec/frontend/monitoring/components/graph_group_spec.js
@@ -32,25 +32,23 @@ describe('Graph group component', () => {
       expect(findCaretIcon().props('name')).toBe('angle-down');
     });
 
-    it('should show the angle-right caret icon when the user collapses the group', done => {
+    it('should show the angle-right caret icon when the user collapses the group', () => {
       wrapper.vm.collapse();
 
-      wrapper.vm.$nextTick(() => {
+      return wrapper.vm.$nextTick(() => {
         expect(findContent().isVisible()).toBe(false);
         expect(findCaretIcon().props('name')).toBe('angle-right');
-        done();
       });
     });
 
-    it('should show the open the group when collapseGroup is set to true', done => {
+    it('should show the open the group when collapseGroup is set to true', () => {
       wrapper.setProps({
         collapseGroup: true,
       });
 
-      wrapper.vm.$nextTick(() => {
+      return wrapper.vm.$nextTick(() => {
         expect(findContent().isVisible()).toBe(true);
         expect(findCaretIcon().props('name')).toBe('angle-down');
-        done();
       });
     });
 
@@ -102,13 +100,12 @@ describe('Graph group component', () => {
         expect(findCaretIcon().exists()).toBe(false);
       });
 
-      it('should show the panel content when clicked', done => {
+      it('should show the panel content when clicked', () => {
         wrapper.vm.collapse();
 
-        wrapper.vm.$nextTick(() => {
+        return wrapper.vm.$nextTick(() => {
           expect(findContent().isVisible()).toBe(true);
           expect(findCaretIcon().exists()).toBe(false);
-          done();
         });
       });
     });
diff --git a/spec/frontend/monitoring/components/panel_type_spec.js b/spec/frontend/monitoring/components/panel_type_spec.js
index 6d8bd1d3a30..0d79babf386 100644
--- a/spec/frontend/monitoring/components/panel_type_spec.js
+++ b/spec/frontend/monitoring/components/panel_type_spec.js
@@ -28,6 +28,8 @@ describe('Panel Type component', () => {
 
   const exampleText = 'example_text';
 
+  const findCopyLink = () => wrapper.find({ ref: 'copyChartLink' });
+
   const createWrapper = props => {
     wrapper = shallowMount(PanelType, {
       propsData: {
@@ -96,8 +98,7 @@ describe('Panel Type component', () => {
     });
 
     it('sets no clipboard copy link on dropdown by default', () => {
-      const link = () => wrapper.find({ ref: 'copyChartLink' });
-      expect(link().exists()).toBe(false);
+      expect(findCopyLink().exists()).toBe(false);
     });
 
     describe('Time Series Chart panel type', () => {
@@ -204,7 +205,6 @@ describe('Panel Type component', () => {
   });
 
   describe('when cliboard data is available', () => {
-    const link = () => wrapper.find({ ref: 'copyChartLink' });
     const clipboardText = 'A value to copy.';
 
     beforeEach(() => {
@@ -219,16 +219,16 @@ describe('Panel Type component', () => {
     });
 
     it('sets clipboard text on the dropdown', () => {
-      expect(link().exists()).toBe(true);
-      expect(link().element.dataset.clipboardText).toBe(clipboardText);
+      expect(findCopyLink().exists()).toBe(true);
+      expect(findCopyLink().element.dataset.clipboardText).toBe(clipboardText);
     });
 
     it('adds a copy button to the dropdown', () => {
-      expect(link().text()).toContain('Generate link to chart');
+      expect(findCopyLink().text()).toContain('Generate link to chart');
     });
 
     it('opens a toast on click', () => {
-      link().vm.$emit('click');
+      findCopyLink().vm.$emit('click');
 
       expect(wrapper.vm.$toast.show).toHaveBeenCalled();
     });