Add latest changes from gitlab-org/gitlab@13-4-stable-ee

9 files changed, 100 insertions, 9 deletions

diff --git a/spec/frontend/helpers/dom_events_helper.js b/spec/frontend/helpers/dom_events_helper.js
index 139e0813397..423e5c58bb4 100644
--- a/spec/frontend/helpers/dom_events_helper.js
+++ b/spec/frontend/helpers/dom_events_helper.js
@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export const triggerDOMEvent = type => {
   window.document.dispatchEvent(
     new Event(type, {
diff --git a/spec/frontend/helpers/fake_request_animation_frame.js b/spec/frontend/helpers/fake_request_animation_frame.js
index b01ae5b7c5f..f6fc29df4dc 100644
--- a/spec/frontend/helpers/fake_request_animation_frame.js
+++ b/spec/frontend/helpers/fake_request_animation_frame.js
@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export const useFakeRequestAnimationFrame = () => {
   let orig;
 
diff --git a/spec/frontend/helpers/jest_helpers.js b/spec/frontend/helpers/jest_helpers.js
index 4a150be9935..0b623e0a59b 100644
--- a/spec/frontend/helpers/jest_helpers.js
+++ b/spec/frontend/helpers/jest_helpers.js
@@ -1,5 +1,3 @@
-/* eslint-disable import/prefer-default-export */
-
 /*
 @module
 
diff --git a/spec/frontend/helpers/local_storage_helper.js b/spec/frontend/helpers/local_storage_helper.js
index a66c31d1353..cd39b660bfd 100644
--- a/spec/frontend/helpers/local_storage_helper.js
+++ b/spec/frontend/helpers/local_storage_helper.js
@@ -10,7 +10,7 @@
  */
 const useLocalStorage = fn => {
   const origLocalStorage = window.localStorage;
-  let currentLocalStorage;
+  let currentLocalStorage = origLocalStorage;
 
   Object.defineProperty(window, 'localStorage', {
     get: () => currentLocalStorage,
diff --git a/spec/frontend/helpers/local_storage_helper_spec.js b/spec/frontend/helpers/local_storage_helper_spec.js
index 18aec0f329a..6b44ea3a4c3 100644
--- a/spec/frontend/helpers/local_storage_helper_spec.js
+++ b/spec/frontend/helpers/local_storage_helper_spec.js
@@ -1,8 +1,15 @@
 import { useLocalStorageSpy } from './local_storage_helper';
 
-useLocalStorageSpy();
+describe('block before helper is installed', () => {
+  it('should leave original localStorage intact', () => {
+    expect(localStorage.getItem).toEqual(expect.any(Function));
+    expect(jest.isMockFunction(localStorage.getItem)).toBe(false);
+  });
+});
 
 describe('localStorage helper', () => {
+  useLocalStorageSpy();
+
   it('mocks localStorage but works exactly like original localStorage', () => {
     localStorage.setItem('test', 'testing');
     localStorage.setItem('test2', 'testing');
diff --git a/spec/frontend/helpers/locale_helper.js b/spec/frontend/helpers/locale_helper.js
index 80047b06003..283d9bc14c9 100644
--- a/spec/frontend/helpers/locale_helper.js
+++ b/spec/frontend/helpers/locale_helper.js
@@ -1,5 +1,3 @@
-/* eslint-disable import/prefer-default-export */
-
 export const setLanguage = languageCode => {
   const htmlElement = document.querySelector('html');
 
diff --git a/spec/frontend/helpers/mock_apollo_helper.js b/spec/frontend/helpers/mock_apollo_helper.js
new file mode 100644
index 00000000000..8a5a160231c
--- /dev/null
+++ b/spec/frontend/helpers/mock_apollo_helper.js
@@ -0,0 +1,23 @@
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import { createMockClient } from 'mock-apollo-client';
+import VueApollo from 'vue-apollo';
+
+export default (handlers = []) => {
+  const fragmentMatcher = { match: () => true };
+  const cache = new InMemoryCache({
+    fragmentMatcher,
+    addTypename: false,
+  });
+
+  const mockClient = createMockClient({ cache });
+
+  if (Array.isArray(handlers)) {
+    handlers.forEach(([query, value]) => mockClient.setRequestHandler(query, value));
+  } else {
+    throw new Error('You should pass an array of handlers to mock Apollo client');
+  }
+
+  const apolloProvider = new VueApollo({ defaultClient: mockClient });
+
+  return apolloProvider;
+};
diff --git a/spec/frontend/helpers/mock_dom_observer.js b/spec/frontend/helpers/mock_dom_observer.js
index 7aac51f6264..1b93b81535d 100644
--- a/spec/frontend/helpers/mock_dom_observer.js
+++ b/spec/frontend/helpers/mock_dom_observer.js
@@ -84,7 +84,9 @@ const useMockObserver = (key, createMock) => {
     mockObserver.$_triggerObserve(...args);
   };
 
-  return { trigger };
+  const observersCount = () => mockObserver.$_observers.length;
+
+  return { trigger, observersCount };
 };
 
 export const useMockIntersectionObserver = () =>
diff --git a/spec/frontend/helpers/startup_css_helper_spec.js b/spec/frontend/helpers/startup_css_helper_spec.js
new file mode 100644
index 00000000000..7b83f0aefca
--- /dev/null
+++ b/spec/frontend/helpers/startup_css_helper_spec.js
@@ -0,0 +1,65 @@
+import { waitForCSSLoaded } from '../../../app/assets/javascripts/helpers/startup_css_helper';
+
+describe('waitForCSSLoaded', () => {
+  let mockedCallback;
+
+  beforeEach(() => {
+    mockedCallback = jest.fn();
+  });
+
+  describe('Promise-like api', () => {
+    it('can be used with a callback', async () => {
+      await waitForCSSLoaded(mockedCallback);
+      expect(mockedCallback).toHaveBeenCalledTimes(1);
+    });
+
+    it('can be used as a promise', async () => {
+      await waitForCSSLoaded().then(mockedCallback);
+      expect(mockedCallback).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('with startup css disabled', () => {
+    gon.features = {
+      startupCss: false,
+    };
+
+    it('should invoke the action right away', async () => {
+      const events = waitForCSSLoaded(mockedCallback);
+      await events;
+
+      expect(mockedCallback).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('with startup css enabled', () => {
+    gon.features = {
+      startupCss: true,
+    };
+
+    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">
+      `);
+      await waitForCSSLoaded(mockedCallback);
+
+      expect(mockedCallback).toHaveBeenCalledTimes(1);
+    });
+
+    it('should wait to call CssLoaded until the assets are loaded', async () => {
+      setFixtures(`
+        <link href="one.css" data-startupcss="loading">
+        <link href="two.css" data-startupcss="loading">
+      `);
+      const events = waitForCSSLoaded(mockedCallback);
+      document
+        .querySelectorAll('[data-startupcss="loading"]')
+        .forEach(elem => elem.setAttribute('data-startupcss', 'loaded'));
+      document.dispatchEvent(new CustomEvent('CSSStartupLinkLoaded'));
+      await events;
+
+      expect(mockedCallback).toHaveBeenCalledTimes(1);
+    });
+  });
+});