Add latest changes from gitlab-org/gitlab@master

2 files changed, 110 insertions, 52 deletions

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);
+  });
+});