Add latest changes from gitlab-org/gitlab@master

2 files changed, 43 insertions, 97 deletions

diff --git a/spec/frontend/behaviors/autosize_spec.js b/spec/frontend/behaviors/autosize_spec.js
index 59abae479d4..3444c7b4075 100644
--- a/spec/frontend/behaviors/autosize_spec.js
+++ b/spec/frontend/behaviors/autosize_spec.js
@@ -1,20 +1,24 @@
-import $ from 'jquery';
 import '~/behaviors/autosize';
 
 function load() {
-  $(document).trigger('load');
+  document.dispatchEvent(new Event('DOMContentLoaded'));
 }
 
+jest.mock('~/helpers/startup_css_helper', () => {
+  return {
+    waitForCSSLoaded: jest.fn().mockImplementation(cb => cb.apply()),
+  };
+});
+
 describe('Autosize behavior', () => {
   beforeEach(() => {
-    setFixtures('<textarea class="js-autosize" style="resize: vertical"></textarea>');
+    setFixtures('<textarea class="js-autosize"></textarea>');
   });
 
-  it('does not overwrite the resize property', () => {
+  it('is applied to the textarea', () => {
     load();
 
-    expect($('textarea')).toHaveCss({
-      resize: 'vertical',
-    });
+    const textarea = document.querySelector('textarea');
+    expect(textarea.classList).toContain('js-autosize-initialized');
   });
 });
diff --git a/spec/frontend/helpers/startup_css_helper_spec.js b/spec/frontend/helpers/startup_css_helper_spec.js
index 9eff6efd21a..7b83f0aefca 100644
--- a/spec/frontend/helpers/startup_css_helper_spec.js
+++ b/spec/frontend/helpers/startup_css_helper_spec.js
@@ -1,123 +1,65 @@
-import {
-  handleLoadedEvents,
-  waitForCSSLoaded,
-} from '../../../app/assets/javascripts/helpers/startup_css_helper';
-
-describe('handleLoadedEvents', () => {
-  let mock;
-  beforeEach(() => {
-    mock = jest.fn();
-  });
-
-  it('should not call the callback on wrong conditions', () => {
-    const resolverToCall = handleLoadedEvents(mock);
-    resolverToCall({ type: 'UnrelatedEvent' });
-    resolverToCall({ type: 'UnrelatedEvent' });
-    resolverToCall({ type: 'UnrelatedEvent' });
-    resolverToCall({ type: 'UnrelatedEvent' });
-    resolverToCall({ type: 'CSSLoaded' });
-    resolverToCall();
-    expect(mock).not.toHaveBeenCalled();
-  });
-
-  it('should call the callback when all the events have been triggered', () => {
-    const resolverToCall = handleLoadedEvents(mock);
-    resolverToCall();
-    resolverToCall({ type: 'DOMContentLoaded' });
-    resolverToCall({ type: 'CSSLoaded' });
-    resolverToCall();
-    expect(mock).toHaveBeenCalledTimes(1);
-  });
-});
+import { waitForCSSLoaded } from '../../../app/assets/javascripts/helpers/startup_css_helper';
 
 describe('waitForCSSLoaded', () => {
-  let mock;
+  let mockedCallback;
+
   beforeEach(() => {
-    mock = jest.fn();
+    mockedCallback = jest.fn();
   });
 
-  describe('with startup css disabled', () => {
-    beforeEach(() => {
-      gon.features = {
-        startupCss: false,
-      };
+  describe('Promise-like api', () => {
+    it('can be used with a callback', async () => {
+      await waitForCSSLoaded(mockedCallback);
+      expect(mockedCallback).toHaveBeenCalledTimes(1);
     });
 
-    it('should call CssLoaded when the conditions are met', async () => {
-      const docAddListener = jest.spyOn(document, 'addEventListener');
-      const docRemoveListener = jest.spyOn(document, 'removeEventListener');
-      const docDispatch = jest.spyOn(document, 'dispatchEvent');
-      const events = waitForCSSLoaded(mock);
+    it('can be used as a promise', async () => {
+      await waitForCSSLoaded().then(mockedCallback);
+      expect(mockedCallback).toHaveBeenCalledTimes(1);
+    });
+  });
 
-      expect(docAddListener).toHaveBeenCalledTimes(3);
-      expect(docDispatch.mock.calls[0][0].type).toBe('CSSStartupLinkLoaded');
+  describe('with startup css disabled', () => {
+    gon.features = {
+      startupCss: false,
+    };
 
-      document.dispatchEvent(new CustomEvent('DOMContentLoaded'));
+    it('should invoke the action right away', async () => {
+      const events = waitForCSSLoaded(mockedCallback);
       await events;
 
-      expect(docDispatch).toHaveBeenCalledTimes(3);
-      expect(docDispatch.mock.calls[2][0].type).toBe('CSSLoaded');
-      expect(docRemoveListener).toHaveBeenCalledTimes(1);
-      expect(mock).toHaveBeenCalledTimes(1);
+      expect(mockedCallback).toHaveBeenCalledTimes(1);
     });
   });
 
   describe('with startup css enabled', () => {
-    let docAddListener;
-    let docRemoveListener;
-    let docDispatch;
-
-    beforeEach(() => {
-      docAddListener = jest.spyOn(document, 'addEventListener');
-      docRemoveListener = jest.spyOn(document, 'removeEventListener');
-      docDispatch = jest.spyOn(document, 'dispatchEvent');
-      gon.features = {
-        startupCss: true,
-      };
-    });
+    gon.features = {
+      startupCss: true,
+    };
 
-    it('should call CssLoaded if the assets are cached', async () => {
-      const events = waitForCSSLoaded(mock);
-      const fixtures = `
+    it('should dispatch CSSLoaded when the assets are cached or already loaded', async () => {
+      setFixtures(`
         <link href="one.css" data-startupcss="loaded">
         <link href="two.css" data-startupcss="loaded">
-      `;
-      setFixtures(fixtures);
+      `);
+      await waitForCSSLoaded(mockedCallback);
 
-      expect(docAddListener).toHaveBeenCalledTimes(3);
-      expect(docDispatch.mock.calls[0][0].type).toBe('CSSStartupLinkLoaded');
-
-      document.dispatchEvent(new CustomEvent('DOMContentLoaded'));
-      await events;
-
-      expect(docDispatch).toHaveBeenCalledTimes(3);
-      expect(docDispatch.mock.calls[2][0].type).toBe('CSSLoaded');
-      expect(docRemoveListener).toHaveBeenCalledTimes(1);
-      expect(mock).toHaveBeenCalledTimes(1);
+      expect(mockedCallback).toHaveBeenCalledTimes(1);
     });
 
     it('should wait to call CssLoaded until the assets are loaded', async () => {
-      const events = waitForCSSLoaded(mock);
-      const fixtures = `
+      setFixtures(`
         <link href="one.css" data-startupcss="loading">
         <link href="two.css" data-startupcss="loading">
-      `;
-      setFixtures(fixtures);
-
-      expect(docAddListener).toHaveBeenCalledTimes(3);
-      expect(docDispatch.mock.calls[0][0].type).toBe('CSSStartupLinkLoaded');
-
+      `);
+      const events = waitForCSSLoaded(mockedCallback);
       document
         .querySelectorAll('[data-startupcss="loading"]')
         .forEach(elem => elem.setAttribute('data-startupcss', 'loaded'));
-      document.dispatchEvent(new CustomEvent('DOMContentLoaded'));
       document.dispatchEvent(new CustomEvent('CSSStartupLinkLoaded'));
       await events;
 
-      expect(docDispatch).toHaveBeenCalledTimes(4);
-      expect(docDispatch.mock.calls[3][0].type).toBe('CSSLoaded');
-      expect(docRemoveListener).toHaveBeenCalledTimes(1);
-      expect(mock).toHaveBeenCalledTimes(1);
+      expect(mockedCallback).toHaveBeenCalledTimes(1);
     });
   });
 });