diff --git a/app/assets/javascripts/behaviors/autosize.js b/app/assets/javascripts/behaviors/autosize.js index a5404539c17a76420da907473688ab885822f58e..181d841a068f8742345cf12e29e4d2239be31642 100644 --- a/app/assets/javascripts/behaviors/autosize.js +++ b/app/assets/javascripts/behaviors/autosize.js @@ -1,13 +1,11 @@ import Autosize from 'autosize'; import { waitForCSSLoaded } from '~/helpers/startup_css_helper'; -document.addEventListener('DOMContentLoaded', () => { - waitForCSSLoaded(() => { - const autosizeEls = document.querySelectorAll('.js-autosize'); +waitForCSSLoaded(() => { + const autosizeEls = document.querySelectorAll('.js-autosize'); - Autosize(autosizeEls); - Autosize.update(autosizeEls); + Autosize(autosizeEls); + Autosize.update(autosizeEls); - autosizeEls.forEach((el) => el.classList.add('js-autosize-initialized')); - }); + autosizeEls.forEach((el) => el.classList.add('js-autosize-initialized')); }); diff --git a/spec/frontend/behaviors/autosize_spec.js b/spec/frontend/behaviors/autosize_spec.js index 352bd8a0ed08fbd3d385f64a3cd504cab0902520..a9dbee7fd08d5e1b3371e085e57074efd20eef08 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); }); });