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

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