3 files changed, 26 insertions, 12 deletions

diff --git a/spec/frontend/behaviors/autosize_spec.js b/spec/frontend/behaviors/autosize_spec.js
index 352bd8a0ed0..a9dbee7fd08 100644
--- a/spec/frontend/behaviors/autosize_spec.js
+++ b/spec/frontend/behaviors/autosize_spec.js
@@ -1,12 +1,20 @@
 import '~/behaviors/autosize';
 
-function load() {
-  document.dispatchEvent(new Event('DOMContentLoaded'));
-}
-
 jest.mock('~/helpers/startup_css_helper', () => {
   return {
-    waitForCSSLoaded: jest.fn().mockImplementation((cb) => cb.apply()),
+    waitForCSSLoaded: jest.fn().mockImplementation((cb) => {
+      // This is a hack:
+      // autosize.js will execute and modify the DOM
+      // whenever waitForCSSLoaded calls its callback function.
+      // This setTimeout is here because everything within setTimeout will be queued
+      // as async code until the current call stack is executed.
+      // If we would not do this, the mock for waitForCSSLoaded would call its callback
+      // before the fixture in the beforeEach is set and the Test would fail.
+      // more on this here: https://johnresig.com/blog/how-javascript-timers-work/
+      setTimeout(() => {
+        cb.apply();
+      }, 0);
+    }),
   };
 });
 
@@ -16,9 +24,15 @@ describe('Autosize behavior', () => {
   });
 
   it('is applied to the textarea', () => {
-    load();
-
-    const textarea = document.querySelector('textarea');
-    expect(textarea.classList).toContain('js-autosize-initialized');
+    // This is the second part of the Hack:
+    // Because we are forcing the mock for WaitForCSSLoaded and the very end of our callstack
+    // to call its callback. This querySelector needs to go to the very end of our callstack
+    // as well, if we would not have this setTimeout Function here, the querySelector
+    // would run before the mockImplementation called its callBack Function
+    // the DOM Manipulation didn't happen yet and the test would fail.
+    setTimeout(() => {
+      const textarea = document.querySelector('textarea');
+      expect(textarea.classList).toContain('js-autosize-initialized');
+    }, 0);
   });
 });
diff --git a/spec/frontend/behaviors/copy_as_gfm_spec.js b/spec/frontend/behaviors/copy_as_gfm_spec.js
index 16ea4ba8624..acff990e84a 100644
--- a/spec/frontend/behaviors/copy_as_gfm_spec.js
+++ b/spec/frontend/behaviors/copy_as_gfm_spec.js
@@ -1,5 +1,5 @@
-import * as commonUtils from '~/lib/utils/common_utils';
 import initCopyAsGFM, { CopyAsGFM } from '~/behaviors/markdown/copy_as_gfm';
+import * as commonUtils from '~/lib/utils/common_utils';
 
 describe('CopyAsGFM', () => {
   describe('CopyAsGFM.pasteGFM', () => {
diff --git a/spec/frontend/behaviors/gl_emoji_spec.js b/spec/frontend/behaviors/gl_emoji_spec.js
index 6e476d84501..286ed269421 100644
--- a/spec/frontend/behaviors/gl_emoji_spec.js
+++ b/spec/frontend/behaviors/gl_emoji_spec.js
@@ -1,10 +1,10 @@
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
-import axios from '~/lib/utils/axios_utils';
-import { initEmojiMap, EMOJI_VERSION } from '~/emoji';
 import installGlEmojiElement from '~/behaviors/gl_emoji';
+import { initEmojiMap, EMOJI_VERSION } from '~/emoji';
 
 import * as EmojiUnicodeSupport from '~/emoji/support';
+import axios from '~/lib/utils/axios_utils';
 
 jest.mock('~/emoji/support');