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

Remove setImmediate usage in specs

See merge request gitlab-org/gitlab!80370

spec/frontend/ide/components/new_dropdown/index_spec.js

-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import newDropdown from '~/ide/components/new_dropdown/index.vue';
 import { createStore } from '~/ide/stores';
@@ -57,17 +57,15 @@ describe('new dropdown component', () => {
   });
 
   describe('isOpen', () => {
-    it('scrolls dropdown into view', (done) => {
+    it('scrolls dropdown into view', async () => {
       jest.spyOn(vm.$refs.dropdownMenu, 'scrollIntoView').mockImplementation(() => {});
 
       vm.isOpen = true;
 
-      setImmediate(() => {
-        expect(vm.$refs.dropdownMenu.scrollIntoView).toHaveBeenCalledWith({
-          block: 'nearest',
-        });
+      await nextTick();
 
-        done();
+      expect(vm.$refs.dropdownMenu.scrollIntoView).toHaveBeenCalledWith({
+        block: 'nearest',
       });
     });
   });

spec/frontend/ide/components/preview/clientside_spec.js

@@ -4,6 +4,7 @@ import Vue, { nextTick } from 'vue';
 import { dispatch } from 'codesandbox-api';
 import smooshpack from 'smooshpack';
 import Vuex from 'vuex';
+import waitForPromises from 'helpers/wait_for_promises';
 import Clientside from '~/ide/components/preview/clientside.vue';
 import { PING_USAGE_PREVIEW_KEY, PING_USAGE_PREVIEW_SUCCESS_KEY } from '~/ide/constants';
 import eventHub from '~/ide/eventhub';
@@ -43,8 +44,6 @@ describe('IDE clientside preview', () => {
   };
   const dispatchCodesandboxReady = () => dispatch({ type: 'done' });
 
-  const waitForCalls = () => new Promise(setImmediate);
-
   const createComponent = ({ state, getters } = {}) => {
     store = new Vuex.Store({
       state: {
@@ -100,7 +99,7 @@ describe('IDE clientside preview', () => {
     beforeEach(() => {
       createComponent({ getters: { packageJson: dummyPackageJson } });
 
-      return waitForCalls();
+      return waitForPromises();
     });
 
     it('creates sandpack manager', () => {
@@ -139,7 +138,7 @@ describe('IDE clientside preview', () => {
         state: { codesandboxBundlerUrl: TEST_BUNDLER_URL },
       });
 
-      return waitForCalls();
+      return waitForPromises();
     });
 
     it('creates sandpack manager with bundlerURL', () => {
@@ -154,7 +153,7 @@ describe('IDE clientside preview', () => {
     beforeEach(() => {
       createComponent({ getters: { packageJson: dummyPackageJson } });
 
-      return waitForCalls();
+      return waitForPromises();
     });
 
     it('creates sandpack manager', () => {
@@ -340,7 +339,7 @@ describe('IDE clientside preview', () => {
         wrapper.setData({ sandpackReady: true });
         wrapper.vm.update();
 
-        return waitForCalls().then(() => {
+        return waitForPromises().then(() => {
           expect(smooshpack.Manager).toHaveBeenCalled();
         });
       });

spec/frontend/ide/lib/common/model_spec.js

@@ -81,16 +81,13 @@ describe('Multi-file editor library model', () => {
   });
 
   describe('onChange', () => {
-    it('calls callback on change', (done) => {
+    it('calls callback on change', () => {
       const spy = jest.fn();
       model.onChange(spy);
 
       model.getModel().setValue('123');
 
-      setImmediate(() => {
-        expect(spy).toHaveBeenCalledWith(model, expect.anything());
-        done();
-      });
+      expect(spy).toHaveBeenCalledWith(model, expect.anything());
     });
   });
 

spec/frontend/ide/stores/actions_spec.js

@@ -274,24 +274,17 @@ describe('Multi-file store actions', () => {
   });
 
   describe('scrollToTab', () => {
-    it('focuses the current active element', (done) => {
+    it('focuses the current active element', () => {
       document.body.innerHTML +=
         '<div id="tabs"><div class="active"><div class="repo-tab"></div></div></div>';
       const el = document.querySelector('.repo-tab');
       jest.spyOn(el, 'focus').mockImplementation();
 
-      store
-        .dispatch('scrollToTab')
-        .then(() => {
-          setImmediate(() => {
-            expect(el.focus).toHaveBeenCalled();
+      return store.dispatch('scrollToTab').then(() => {
+        expect(el.focus).toHaveBeenCalled();
 
-            document.getElementById('tabs').remove();
-
-            done();
-          });
-        })
-        .catch(done.fail);
+        document.getElementById('tabs').remove();
+      });
     });
   });
 

spec/frontend/issues/related_merge_requests/components/related_merge_requests_spec.js

@@ -12,7 +12,7 @@ describe('RelatedMergeRequests', () => {
   let wrapper;
   let mock;
 
-  beforeEach((done) => {
+  beforeEach(() => {
     // put the fixture in DOM as the component expects
     document.body.innerHTML = `<div id="js-issuable-app"></div>`;
     document.getElementById('js-issuable-app').dataset.initial = JSON.stringify(mockData);
@@ -29,7 +29,7 @@ describe('RelatedMergeRequests', () => {
       },
     });
 
-    setImmediate(done);
+    return axios.waitForAll();
   });
 
   afterEach(() => {

spec/frontend/lib/utils/common_utils_spec.js

@@ -394,8 +394,7 @@ describe('common_utils', () => {
 
   describe('backOff', () => {
     beforeEach(() => {
-      // shortcut our timeouts otherwise these tests will take a long time to finish
-      jest.spyOn(window, 'setTimeout').mockImplementation((cb) => setImmediate(cb, 0));
+      jest.spyOn(window, 'setTimeout');
     });
 
     it('solves the promise from the callback', (done) => {
@@ -446,6 +445,7 @@ describe('common_utils', () => {
               if (numberOfCalls < 3) {
                 numberOfCalls += 1;
                 next();
+                jest.runOnlyPendingTimers();
               } else {
                 stop(resp);
               }
@@ -464,7 +464,10 @@ describe('common_utils', () => {
 
     it('rejects the backOff promise after timing out', (done) => {
       commonUtils
-        .backOff((next) => next(), 64000)
+        .backOff((next) => {
+          next();
+          jest.runOnlyPendingTimers();
+        }, 64000)
         .catch((errBackoffResp) => {
           const timeouts = window.setTimeout.mock.calls.map(([, timeout]) => timeout);
 

spec/frontend/merge_request_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import $ from 'jquery';
 import { TEST_HOST } from 'spec/test_constants';
+import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
 import MergeRequest from '~/merge_request';
 
@@ -27,31 +28,31 @@ describe('MergeRequest', () => {
       mock.restore();
     });
 
-    it('modifies the Markdown field', (done) => {
+    it('modifies the Markdown field', async () => {
       jest.spyOn($, 'ajax').mockImplementation();
       const changeEvent = document.createEvent('HTMLEvents');
       changeEvent.initEvent('change', true, true);
       $('input[type=checkbox]').first().attr('checked', true)[0].dispatchEvent(changeEvent);
-      setImmediate(() => {
-        expect($('.js-task-list-field').val()).toBe(
-          '- [x] Task List Item\n- [ ]\n- [ ] Task List Item 2\n',
-        );
-        done();
-      });
+
+      await waitForPromises();
+
+      expect($('.js-task-list-field').val()).toBe(
+        '- [x] Task List Item\n- [ ]\n- [ ] Task List Item 2\n',
+      );
     });
 
-    it('ensure that task with only spaces does not get checked incorrectly', (done) => {
+    it('ensure that task with only spaces does not get checked incorrectly', async () => {
       // fixed in 'deckar01-task_list', '2.2.1' gem
       jest.spyOn($, 'ajax').mockImplementation();
       const changeEvent = document.createEvent('HTMLEvents');
       changeEvent.initEvent('change', true, true);
       $('input[type=checkbox]').last().attr('checked', true)[0].dispatchEvent(changeEvent);
-      setImmediate(() => {
-        expect($('.js-task-list-field').val()).toBe(
-          '- [ ] Task List Item\n- [ ]\n- [x] Task List Item 2\n',
-        );
-        done();
-      });
+
+      await waitForPromises();
+
+      expect($('.js-task-list-field').val()).toBe(
+        '- [ ] Task List Item\n- [ ]\n- [x] Task List Item 2\n',
+      );
     });
 
     describe('tasklist', () => {
@@ -60,29 +61,27 @@ describe('MergeRequest', () => {
       const index = 3;
       const checked = true;
 
-      it('submits an ajax request on tasklist:changed', (done) => {
+      it('submits an ajax request on tasklist:changed', async () => {
         $('.js-task-list-field').trigger({
           type: 'tasklist:changed',
           detail: { lineNumber, lineSource, index, checked },
         });
 
-        setImmediate(() => {
-          expect(axios.patch).toHaveBeenCalledWith(
-            `${TEST_HOST}/frontend-fixtures/merge-requests-project/-/merge_requests/1.json`,
-            {
-              merge_request: {
-                description: '- [ ] Task List Item\n- [ ]\n- [ ] Task List Item 2\n',
-                lock_version: 0,
-                update_task: { line_number: lineNumber, line_source: lineSource, index, checked },
-              },
-            },
-          );
+        await waitForPromises();
 
-          done();
-        });
+        expect(axios.patch).toHaveBeenCalledWith(
+          `${TEST_HOST}/frontend-fixtures/merge-requests-project/-/merge_requests/1.json`,
+          {
+            merge_request: {
+              description: '- [ ] Task List Item\n- [ ]\n- [ ] Task List Item 2\n',
+              lock_version: 0,
+              update_task: { line_number: lineNumber, line_source: lineSource, index, checked },
+            },
+          },
+        );
       });
 
-      it('shows an error notification when tasklist update failed', (done) => {
+      it('shows an error notification when tasklist update failed', async () => {
         mock
           .onPatch(`${TEST_HOST}/frontend-fixtures/merge-requests-project/-/merge_requests/1.json`)
           .reply(409, {});
@@ -92,13 +91,11 @@ describe('MergeRequest', () => {
           detail: { lineNumber, lineSource, index, checked },
         });
 
-        setImmediate(() => {
-          expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
-            'Someone edited this merge request at the same time you did. Please refresh the page to see changes.',
-          );
+        await waitForPromises();
 
-          done();
-        });
+        expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(
+          'Someone edited this merge request at the same time you did. Please refresh the page to see changes.',
+        );
       });
     });
   });