Merge branch...

Merge branch '202533-dashboard-specs-should-remove-done-in-favor-of-returning-promises' into 'master'

Remove `done()` from dashboard specs and return promises

Closes #202726 and #202533

See merge request gitlab-org/gitlab!24730

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', () => {

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);
+      });
     });
   });
 });

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();
         });
       });
     });

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();
     });