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

4 files changed, 114 insertions, 55 deletions

diff --git a/spec/frontend/behaviors/copy_as_gfm_spec.js b/spec/frontend/behaviors/copy_as_gfm_spec.js
index cf96ac488a8..33af9bc135e 100644
--- a/spec/frontend/behaviors/copy_as_gfm_spec.js
+++ b/spec/frontend/behaviors/copy_as_gfm_spec.js
@@ -1,3 +1,4 @@
+import * as commonUtils from '~/lib/utils/common_utils';
 import initCopyAsGFM, { CopyAsGFM } from '~/behaviors/markdown/copy_as_gfm';
 
 describe('CopyAsGFM', () => {
@@ -27,7 +28,7 @@ describe('CopyAsGFM', () => {
     }
 
     it('wraps pasted code when not already in code tags', () => {
-      jest.spyOn(window.gl.utils, 'insertText').mockImplementation((el, textFunc) => {
+      jest.spyOn(commonUtils, 'insertText').mockImplementation((el, textFunc) => {
         const insertedText = textFunc('This is code: ', '');
 
         expect(insertedText).toEqual('`code`');
@@ -37,7 +38,7 @@ describe('CopyAsGFM', () => {
     });
 
     it('does not wrap pasted code when already in code tags', () => {
-      jest.spyOn(window.gl.utils, 'insertText').mockImplementation((el, textFunc) => {
+      jest.spyOn(commonUtils, 'insertText').mockImplementation((el, textFunc) => {
         const insertedText = textFunc('This is code: `', '`');
 
         expect(insertedText).toEqual('code');
diff --git a/spec/frontend/behaviors/gl_emoji/unicode_support_map_spec.js b/spec/frontend/behaviors/gl_emoji/unicode_support_map_spec.js
deleted file mode 100644
index aaee9c30cac..00000000000
--- a/spec/frontend/behaviors/gl_emoji/unicode_support_map_spec.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import getUnicodeSupportMap from '~/emoji/support/unicode_support_map';
-import AccessorUtilities from '~/lib/utils/accessor';
-import { useLocalStorageSpy } from 'helpers/local_storage_helper';
-
-describe('Unicode Support Map', () => {
-  useLocalStorageSpy();
-  describe('getUnicodeSupportMap', () => {
-    const stringSupportMap = 'stringSupportMap';
-
-    beforeEach(() => {
-      jest.spyOn(AccessorUtilities, 'isLocalStorageAccessSafe').mockImplementation(() => {});
-      jest.spyOn(JSON, 'parse').mockImplementation(() => {});
-      jest.spyOn(JSON, 'stringify').mockReturnValue(stringSupportMap);
-    });
-
-    describe('if isLocalStorageAvailable is `true`', () => {
-      beforeEach(() => {
-        jest.spyOn(AccessorUtilities, 'isLocalStorageAccessSafe').mockReturnValue(true);
-
-        getUnicodeSupportMap();
-      });
-
-      it('should call .getItem and .setItem', () => {
-        const getArgs = window.localStorage.getItem.mock.calls;
-        const setArgs = window.localStorage.setItem.mock.calls;
-
-        expect(getArgs[0][0]).toBe('gl-emoji-version');
-        expect(getArgs[1][0]).toBe('gl-emoji-user-agent');
-
-        expect(setArgs[0][0]).toBe('gl-emoji-version');
-        expect(setArgs[0][1]).toBe('0.2.0');
-        expect(setArgs[1][0]).toBe('gl-emoji-user-agent');
-        expect(setArgs[1][1]).toBe(navigator.userAgent);
-        expect(setArgs[2][0]).toBe('gl-emoji-unicode-support-map');
-        expect(setArgs[2][1]).toBe(stringSupportMap);
-      });
-    });
-
-    describe('if isLocalStorageAvailable is `false`', () => {
-      beforeEach(() => {
-        jest.spyOn(AccessorUtilities, 'isLocalStorageAccessSafe').mockReturnValue(false);
-
-        getUnicodeSupportMap();
-      });
-
-      it('should not call .getItem or .setItem', () => {
-        expect(window.localStorage.getItem.mock.calls.length).toBe(1);
-        expect(window.localStorage.setItem).not.toHaveBeenCalled();
-      });
-    });
-  });
-});
diff --git a/spec/frontend/behaviors/gl_emoji_spec.js b/spec/frontend/behaviors/gl_emoji_spec.js
new file mode 100644
index 00000000000..7ea0bafc328
--- /dev/null
+++ b/spec/frontend/behaviors/gl_emoji_spec.js
@@ -0,0 +1,110 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import { initEmojiMap, EMOJI_VERSION } from '~/emoji';
+import installGlEmojiElement from '~/behaviors/gl_emoji';
+
+import * as EmojiUnicodeSupport from '~/emoji/support';
+import waitForPromises from 'jest/helpers/wait_for_promises';
+
+jest.mock('~/emoji/support');
+
+describe('gl_emoji', () => {
+  let mock;
+  const emojiData = getJSONFixture('emojis/emojis.json');
+
+  beforeAll(() => {
+    jest.spyOn(EmojiUnicodeSupport, 'default').mockReturnValue(true);
+    installGlEmojiElement();
+  });
+
+  function markupToDomElement(markup) {
+    const div = document.createElement('div');
+    div.innerHTML = markup;
+    document.body.appendChild(div);
+
+    return div.firstElementChild;
+  }
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+    mock.onGet(`/-/emojis/${EMOJI_VERSION}/emojis.json`).reply(200, emojiData);
+
+    return initEmojiMap().catch(() => {});
+  });
+
+  afterEach(() => {
+    mock.restore();
+
+    document.body.innerHTML = '';
+  });
+
+  describe.each([
+    [
+      'bomb emoji just with name attribute',
+      '<gl-emoji data-name="bomb"></gl-emoji>',
+      '<gl-emoji data-name="bomb" data-unicode-version="6.0" title="bomb">💣</gl-emoji>',
+      '<gl-emoji data-name="bomb" data-unicode-version="6.0" title="bomb"><img class="emoji" title=":bomb:" alt=":bomb:" src="/-/emojis/1/bomb.png" width="20" height="20" align="absmiddle"></gl-emoji>',
+    ],
+    [
+      'bomb emoji with name attribute and unicode version',
+      '<gl-emoji data-name="bomb" data-unicode-version="6.0">💣</gl-emoji>',
+      '<gl-emoji data-name="bomb" data-unicode-version="6.0">💣</gl-emoji>',
+      '<gl-emoji data-name="bomb" data-unicode-version="6.0"><img class="emoji" title=":bomb:" alt=":bomb:" src="/-/emojis/1/bomb.png" width="20" height="20" align="absmiddle"></gl-emoji>',
+    ],
+    [
+      'bomb emoji with sprite fallback',
+      '<gl-emoji data-fallback-sprite-class="emoji-bomb" data-name="bomb"></gl-emoji>',
+      '<gl-emoji data-fallback-sprite-class="emoji-bomb" data-name="bomb" data-unicode-version="6.0" title="bomb">💣</gl-emoji>',
+      '<gl-emoji data-fallback-sprite-class="emoji-bomb" data-name="bomb" data-unicode-version="6.0" title="bomb" class="emoji-icon emoji-bomb">💣</gl-emoji>',
+    ],
+    [
+      'bomb emoji with image fallback',
+      '<gl-emoji data-fallback-src="/bomb.png" data-name="bomb"></gl-emoji>',
+      '<gl-emoji data-fallback-src="/bomb.png" data-name="bomb" data-unicode-version="6.0" title="bomb">💣</gl-emoji>',
+      '<gl-emoji data-fallback-src="/bomb.png" data-name="bomb" data-unicode-version="6.0" title="bomb"><img class="emoji" title=":bomb:" alt=":bomb:" src="/bomb.png" width="20" height="20" align="absmiddle"></gl-emoji>',
+    ],
+    [
+      'invalid emoji',
+      '<gl-emoji data-name="invalid_emoji"></gl-emoji>',
+      '<gl-emoji data-name="grey_question" data-unicode-version="6.0" title="white question mark ornament">❔</gl-emoji>',
+      '<gl-emoji data-name="grey_question" data-unicode-version="6.0" title="white question mark ornament"><img class="emoji" title=":grey_question:" alt=":grey_question:" src="/-/emojis/1/grey_question.png" width="20" height="20" align="absmiddle"></gl-emoji>',
+    ],
+  ])('%s', (name, markup, withEmojiSupport, withoutEmojiSupport) => {
+    it(`renders correctly with emoji support`, async () => {
+      jest.spyOn(EmojiUnicodeSupport, 'default').mockReturnValue(true);
+      const glEmojiElement = markupToDomElement(markup);
+
+      await waitForPromises();
+
+      expect(glEmojiElement.outerHTML).toBe(withEmojiSupport);
+    });
+
+    it(`renders correctly without emoji support`, async () => {
+      jest.spyOn(EmojiUnicodeSupport, 'default').mockReturnValue(false);
+      const glEmojiElement = markupToDomElement(markup);
+
+      await waitForPromises();
+
+      expect(glEmojiElement.outerHTML).toBe(withoutEmojiSupport);
+    });
+  });
+
+  it('Adds sprite CSS if emojis are not supported', async () => {
+    const testPath = '/test-path.css';
+    jest.spyOn(EmojiUnicodeSupport, 'default').mockReturnValue(false);
+    window.gon.emoji_sprites_css_path = testPath;
+
+    expect(document.head.querySelector(`link[href="${testPath}"]`)).toBe(null);
+    expect(window.gon.emoji_sprites_css_added).toBeFalsy();
+
+    markupToDomElement(
+      '<gl-emoji data-fallback-sprite-class="emoji-bomb" data-name="bomb"></gl-emoji>',
+    );
+    await waitForPromises();
+
+    expect(document.head.querySelector(`link[href="${testPath}"]`).outerHTML).toBe(
+      '<link rel="stylesheet" href="/test-path.css">',
+    );
+    expect(window.gon.emoji_sprites_css_added).toBe(true);
+  });
+});
diff --git a/spec/frontend/behaviors/shortcuts/shortcuts_issuable_spec.js b/spec/frontend/behaviors/shortcuts/shortcuts_issuable_spec.js
index 6391a544985..baedbf5771a 100644
--- a/spec/frontend/behaviors/shortcuts/shortcuts_issuable_spec.js
+++ b/spec/frontend/behaviors/shortcuts/shortcuts_issuable_spec.js
@@ -46,7 +46,7 @@ describe('ShortcutsIssuable', () => {
   });
 
   describe('replyWithSelectedText', () => {
-    // Stub window.gl.utils.getSelectedFragment to return a node with the provided HTML.
+    // Stub getSelectedFragment to return a node with the provided HTML.
     const stubSelection = (html, invalidNode) => {
       getSelectedFragment.mockImplementation(() => {
         const documentFragment = document.createDocumentFragment();