Merge branch '344247-replace-setimmediate-in-tests-2' into 'master'

Remove setImmediate usage in specs

See merge request gitlab-org/gitlab!80368

spec/frontend/pages/dashboard/todos/index/todos_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import $ from 'jquery';
+import waitForPromises from 'helpers/wait_for_promises';
 import '~/lib/utils/common_utils';
 import axios from '~/lib/utils/axios_utils';
 import { addDelimiter } from '~/lib/utils/text_utility';
@@ -71,7 +72,7 @@ describe('Todos', () => {
     describe('on done todo click', () => {
       let onToggleSpy;
 
-      beforeEach((done) => {
+      beforeEach(() => {
         const el = document.querySelector('.js-done-todo');
         const path = el.dataset.href;
 
@@ -86,7 +87,7 @@ describe('Todos', () => {
         el.click();
 
         // Wait for axios and HTML to udpate
-        setImmediate(done);
+        return waitForPromises();
       });
 
       it('dispatches todo:toggle', () => {

spec/frontend/projects/project_find_file_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import $ from 'jquery';
 import { TEST_HOST } from 'helpers/test_constants';
+import waitForPromises from 'helpers/wait_for_promises';
 import { sanitize } from '~/lib/dompurify';
 import axios from '~/lib/utils/axios_utils';
 import ProjectFindFile from '~/projects/project_find_file';
@@ -53,7 +54,7 @@ describe('ProjectFindFile', () => {
     { path: 'folde?rC/fil#F.txt', escaped: 'folde%3FrC/fil%23F.txt' },
   ];
 
-  beforeEach((done) => {
+  beforeEach(() => {
     // Create a mock adapter for stubbing axios API requests
     mock = new MockAdapter(axios);
 
@@ -64,7 +65,7 @@ describe('ProjectFindFile', () => {
     );
     getProjectFindFileInstance(); // This triggers a load / axios call + subsequent render in the constructor
 
-    setImmediate(done);
+    return waitForPromises();
   });
 
   afterEach(() => {

spec/frontend/prometheus_metrics/prometheus_metrics_spec.js

 import MockAdapter from 'axios-mock-adapter';
+import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
 import PANEL_STATE from '~/prometheus_metrics/constants';
 import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics';
@@ -132,7 +133,7 @@ describe('PrometheusMetrics', () => {
       mock.restore();
     });
 
-    it('should show loader animation while response is being loaded and hide it when request is complete', (done) => {
+    it('should show loader animation while response is being loaded and hide it when request is complete', async () => {
       mockSuccess();
 
       prometheusMetrics.loadActiveMetrics();
@@ -140,34 +141,31 @@ describe('PrometheusMetrics', () => {
       expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeFalsy();
       expect(axios.get).toHaveBeenCalledWith(prometheusMetrics.activeMetricsEndpoint);
 
-      setImmediate(() => {
-        expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeTruthy();
-        done();
-      });
+      await waitForPromises();
+
+      expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeTruthy();
     });
 
-    it('should show empty state if response failed to load', (done) => {
+    it('should show empty state if response failed to load', async () => {
       mockError();
 
       prometheusMetrics.loadActiveMetrics();
 
-      setImmediate(() => {
-        expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeTruthy();
-        expect(prometheusMetrics.$monitoredMetricsEmpty.hasClass('hidden')).toBeFalsy();
-        done();
-      });
+      await waitForPromises();
+
+      expect(prometheusMetrics.$monitoredMetricsLoading.hasClass('hidden')).toBeTruthy();
+      expect(prometheusMetrics.$monitoredMetricsEmpty.hasClass('hidden')).toBeFalsy();
     });
 
-    it('should populate metrics list once response is loaded', (done) => {
+    it('should populate metrics list once response is loaded', async () => {
       jest.spyOn(prometheusMetrics, 'populateActiveMetrics').mockImplementation();
       mockSuccess();
 
       prometheusMetrics.loadActiveMetrics();
 
-      setImmediate(() => {
-        expect(prometheusMetrics.populateActiveMetrics).toHaveBeenCalledWith(metrics);
-        done();
-      });
+      await waitForPromises();
+
+      expect(prometheusMetrics.populateActiveMetrics).toHaveBeenCalledWith(metrics);
     });
   });
 });

spec/frontend/sidebar/components/severity/sidebar_severity_spec.js

@@ -97,14 +97,14 @@ describe('SidebarSeverity', () => {
       });
     });
 
-    it('shows error alert when severity update fails ', () => {
+    it('shows error alert when severity update fails ', async () => {
       const errorMsg = 'Something went wrong';
       jest.spyOn(wrapper.vm.$apollo, 'mutate').mockRejectedValueOnce(errorMsg);
       findCriticalSeverityDropdownItem().vm.$emit('click');
 
-      setImmediate(() => {
-        expect(createFlash).toHaveBeenCalled();
-      });
+      await waitForPromises();
+
+      expect(createFlash).toHaveBeenCalled();
     });
 
     it('shows loading icon while updating', async () => {

spec/frontend/sidebar/sidebar_move_issue_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import $ from 'jquery';
+import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import SidebarMoveIssue from '~/sidebar/lib/sidebar_move_issue';
@@ -77,15 +78,14 @@ describe('SidebarMoveIssue', () => {
       expect(test.sidebarMoveIssue.$dropdownToggle.data('deprecatedJQueryDropdown')).toBeTruthy();
     });
 
-    it('escapes html from project name', (done) => {
+    it('escapes html from project name', async () => {
       test.$toggleButton.dropdown('toggle');
 
-      setImmediate(() => {
-        expect(test.$content.find('.js-move-issue-dropdown-item')[1].innerHTML.trim()).toEqual(
-          '<img src=x onerror=alert(document.domain)> foo / bar',
-        );
-        done();
-      });
+      await waitForPromises();
+
+      expect(test.$content.find('.js-move-issue-dropdown-item')[1].innerHTML.trim()).toEqual(
+        '<img src=x onerror=alert(document.domain)> foo / bar',
+      );
     });
   });
 
@@ -101,20 +101,20 @@ describe('SidebarMoveIssue', () => {
       expect(test.$confirmButton.hasClass('is-loading')).toBe(true);
     });
 
-    it('should remove loading state from confirm button on failure', (done) => {
+    it('should remove loading state from confirm button on failure', async () => {
       jest.spyOn(test.mediator, 'moveIssue').mockReturnValue(Promise.reject());
       test.mediator.setMoveToProjectId(7);
 
       test.sidebarMoveIssue.onConfirmClicked();
 
       expect(test.mediator.moveIssue).toHaveBeenCalled();
+
       // Wait for the move issue request to fail
-      setImmediate(() => {
-        expect(createFlash).toHaveBeenCalled();
-        expect(test.$confirmButton.prop('disabled')).toBeFalsy();
-        expect(test.$confirmButton.hasClass('is-loading')).toBe(false);
-        done();
-      });
+      await waitForPromises();
+
+      expect(createFlash).toHaveBeenCalled();
+      expect(test.$confirmButton.prop('disabled')).toBeFalsy();
+      expect(test.$confirmButton.hasClass('is-loading')).toBe(false);
     });
 
     it('should not move the issue with id=0', () => {
@@ -127,35 +127,33 @@ describe('SidebarMoveIssue', () => {
     });
   });
 
-  it('should set moveToProjectId on dropdown item "No project" click', (done) => {
+  it('should set moveToProjectId on dropdown item "No project" click', async () => {
     jest.spyOn(test.mediator, 'setMoveToProjectId').mockImplementation(() => {});
 
     // Open the dropdown
     test.$toggleButton.dropdown('toggle');
 
     // Wait for the autocomplete request to finish
-    setImmediate(() => {
-      test.$content.find('.js-move-issue-dropdown-item').eq(0).trigger('click');
+    await waitForPromises();
 
-      expect(test.mediator.setMoveToProjectId).toHaveBeenCalledWith(0);
-      expect(test.$confirmButton.prop('disabled')).toBeTruthy();
-      done();
-    });
+    test.$content.find('.js-move-issue-dropdown-item').eq(0).trigger('click');
+
+    expect(test.mediator.setMoveToProjectId).toHaveBeenCalledWith(0);
+    expect(test.$confirmButton.prop('disabled')).toBeTruthy();
   });
 
-  it('should set moveToProjectId on dropdown item click', (done) => {
+  it('should set moveToProjectId on dropdown item click', async () => {
     jest.spyOn(test.mediator, 'setMoveToProjectId').mockImplementation(() => {});
 
     // Open the dropdown
     test.$toggleButton.dropdown('toggle');
 
     // Wait for the autocomplete request to finish
-    setImmediate(() => {
-      test.$content.find('.js-move-issue-dropdown-item').eq(1).trigger('click');
+    await waitForPromises();
 
-      expect(test.mediator.setMoveToProjectId).toHaveBeenCalledWith(20);
-      expect(test.$confirmButton.attr('disabled')).toBe(undefined);
-      done();
-    });
+    test.$content.find('.js-move-issue-dropdown-item').eq(1).trigger('click');
+
+    expect(test.mediator.setMoveToProjectId).toHaveBeenCalledWith(20);
+    expect(test.$confirmButton.attr('disabled')).toBe(undefined);
   });
 });

spec/frontend/vue_mr_widget/components/mr_widget_memory_usage_spec.js

 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import Vue, { nextTick } from 'vue';
+import waitForPromises from 'helpers/wait_for_promises';
 import MemoryUsage from '~/vue_merge_request_widget/components/deployment/memory_usage.vue';
 import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
 
@@ -152,23 +153,18 @@ describe('MemoryUsage', () => {
     });
 
     describe('loadMetrics', () => {
-      const returnServicePromise = () =>
-        new Promise((resolve) => {
-          resolve({
-            data: metricsMockData,
-          });
+      it('should load metrics data using MRWidgetService', async () => {
+        jest.spyOn(MRWidgetService, 'fetchMetrics').mockResolvedValue({
+          data: metricsMockData,
         });
-
-      it('should load metrics data using MRWidgetService', (done) => {
-        jest.spyOn(MRWidgetService, 'fetchMetrics').mockReturnValue(returnServicePromise(true));
         jest.spyOn(vm, 'computeGraphData').mockImplementation(() => {});
 
         vm.loadMetrics();
-        setImmediate(() => {
-          expect(MRWidgetService.fetchMetrics).toHaveBeenCalledWith(url);
-          expect(vm.computeGraphData).toHaveBeenCalledWith(metrics, deployment_time);
-          done();
-        });
+
+        await waitForPromises();
+
+        expect(MRWidgetService.fetchMetrics).toHaveBeenCalledWith(url);
+        expect(vm.computeGraphData).toHaveBeenCalledWith(metrics, deployment_time);
       });
     });
   });

spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js

@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { trimText } from 'helpers/text_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import autoMergeEnabledComponent from '~/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue';
 import { MWPS_MERGE_STRATEGY } from '~/vue_merge_request_widget/constants';
 import eventHub from '~/vue_merge_request_widget/event_hub';
@@ -185,7 +186,7 @@ describe('MRWidgetAutoMergeEnabled', () => {
 
       describe('methods', () => {
         describe('cancelAutomaticMerge', () => {
-          it('should set flag and call service then tell main component to update the widget with data', (done) => {
+          it('should set flag and call service then tell main component to update the widget with data', async () => {
             factory({
               ...defaultMrProps(),
             });
@@ -201,20 +202,20 @@ describe('MRWidgetAutoMergeEnabled', () => {
             );
 
             wrapper.vm.cancelAutomaticMerge();
-            setImmediate(() => {
-              expect(wrapper.vm.isCancellingAutoMerge).toBeTruthy();
-              if (mergeRequestWidgetGraphql) {
-                expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested');
-              } else {
-                expect(eventHub.$emit).toHaveBeenCalledWith('UpdateWidgetData', mrObj);
-              }
-              done();
-            });
+
+            await waitForPromises();
+
+            expect(wrapper.vm.isCancellingAutoMerge).toBeTruthy();
+            if (mergeRequestWidgetGraphql) {
+              expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested');
+            } else {
+              expect(eventHub.$emit).toHaveBeenCalledWith('UpdateWidgetData', mrObj);
+            }
           });
         });
 
         describe('removeSourceBranch', () => {
-          it('should set flag and call service then request main component to update the widget', (done) => {
+          it('should set flag and call service then request main component to update the widget', async () => {
             factory({
               ...defaultMrProps(),
             });
@@ -227,14 +228,14 @@ describe('MRWidgetAutoMergeEnabled', () => {
             );
 
             wrapper.vm.removeSourceBranch();
-            setImmediate(() => {
-              expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested');
-              expect(wrapper.vm.service.merge).toHaveBeenCalledWith({
-                sha,
-                auto_merge_strategy: MWPS_MERGE_STRATEGY,
-                should_remove_source_branch: true,
-              });
-              done();
+
+            await waitForPromises();
+
+            expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested');
+            expect(wrapper.vm.service.merge).toHaveBeenCalledWith({
+              sha,
+              auto_merge_strategy: MWPS_MERGE_STRATEGY,
+              should_remove_source_branch: true,
             });
           });
         });