Minor improvements to emoji tests

This splits the emoji tests into tests for the `gl_emoji` webcomponent
and the general emoji helpers.

app/assets/javascripts/behaviors/gl_emoji.js

@@ -13,7 +13,7 @@ class GlEmoji extends HTMLElement {
     const { fallbackSpriteClass, fallbackSrc, forceFallback } = this.dataset;
     let { name, unicodeVersion } = this.dataset;
 
-    initEmojiMap()
+    return initEmojiMap()
       .then(() => {
         if (!unicodeVersion) {
           const emojiInfo = getEmojiInfo(name);

app/assets/javascripts/emoji/index.js

@@ -126,10 +126,8 @@ export function glEmojiTag(inputName, options) {
   return `
     <gl-emoji
       ${classAttribute}
-      data-name="${name}"
       ${fallbackSpriteAttribute}
       ${forceFallbackAttribute}
-    >
-    </gl-emoji>
+      data-name="${name}"></gl-emoji>
   `;
 }

spec/frontend/__mocks__/document-register-element/index.js

+export default () => {};

spec/frontend/behaviors/gl_emoji_spec.js

+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import { initEmojiMap, glEmojiTag, EMOJI_VERSION } from '~/emoji';
+import installGlEmojiElement from '~/behaviors/gl_emoji';
+
+describe('gl_emoji', () => {
+  let mock;
+  const emojiData = getJSONFixture('emojis/emojis.json');
+
+  const emojiFixtureBomb = {
+    name: 'bomb',
+    moji: '💣',
+    unicodeVersion: '6.0',
+  };
+
+  const emojiFixtureGreyQuestion = {
+    name: 'grey_question',
+    moji: '❔',
+    unicodeVersion: '6.0',
+  };
+
+  beforeAll(() => {
+    installGlEmojiElement();
+  });
+
+  async function markupToDomElement(markup) {
+    const div = document.createElement('div');
+    div.innerHTML = markup;
+    document.body.appendChild(div);
+
+    return div.firstElementChild;
+  }
+
+  function testGlEmojiImageFallback(element, name) {
+    expect(element.tagName.toLowerCase()).toBe('img');
+    expect(element.getAttribute('src')).toBe(`/-/emojis/${EMOJI_VERSION}/${name}.png`);
+    expect(element.getAttribute('title')).toBe(`:${name}:`);
+    expect(element.getAttribute('alt')).toBe(`:${name}:`);
+  }
+
+  const defaults = {
+    forceFallback: false,
+    sprite: false,
+  };
+
+  function testGlEmojiElement(element, name, unicodeVersion, unicodeMoji, options = {}) {
+    const opts = { ...defaults, ...options };
+    expect(element.tagName.toLowerCase()).toBe('gl-emoji');
+    expect(element.dataset.name).toBe(name);
+    expect(element.dataset.uni).toBe(unicodeVersion);
+
+    const fallbackSpriteClass = `emoji-${name}`;
+    if (opts.sprite) {
+      expect(element.dataset.fallbackSpriteClass).toBe(fallbackSpriteClass);
+    }
+
+    if (opts.forceFallback && opts.sprite) {
+      expect(element.getAttribute('class')).toBe(`emoji-icon ${fallbackSpriteClass}`);
+    }
+
+    if (opts.forceFallback && !opts.sprite) {
+      // Check for image fallback
+      testGlEmojiImageFallback(element.firstElementChild, name);
+    } else {
+      // Otherwise make sure things are still unicode text
+      expect(element.textContent.trim()).toBe(unicodeMoji);
+    }
+  }
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+    mock.onGet(`/-/emojis/${EMOJI_VERSION}/emojis.json`).reply(200, emojiData);
+
+    return initEmojiMap().catch(() => {});
+  });
+
+  afterEach(() => {
+    mock.restore();
+
+    document.body.innerHTML = '';
+  });
+
+  it('bomb emoji', async () => {
+    const markup = glEmojiTag(emojiFixtureBomb.name);
+
+    const glEmojiElement = await markupToDomElement(markup);
+    testGlEmojiElement(
+      glEmojiElement,
+      emojiFixtureBomb.name,
+      emojiFixtureBomb.unicodeVersion,
+      emojiFixtureBomb.moji,
+    );
+  });
+
+  it('bomb emoji with image fallback', async () => {
+    const markup = glEmojiTag(emojiFixtureBomb.name, {
+      forceFallback: true,
+    });
+
+    const glEmojiElement = await markupToDomElement(markup);
+    testGlEmojiElement(
+      glEmojiElement,
+      emojiFixtureBomb.name,
+      emojiFixtureBomb.unicodeVersion,
+      emojiFixtureBomb.moji,
+      {
+        forceFallback: true,
+      },
+    );
+  });
+
+  it('bomb emoji with sprite fallback readiness', async () => {
+    const markup = glEmojiTag(emojiFixtureBomb.name, {
+      sprite: true,
+    });
+
+    const glEmojiElement = await markupToDomElement(markup);
+    testGlEmojiElement(
+      glEmojiElement,
+      emojiFixtureBomb.name,
+      emojiFixtureBomb.unicodeVersion,
+      emojiFixtureBomb.moji,
+      {
+        sprite: true,
+      },
+    );
+  });
+
+  it('bomb emoji with sprite fallback', async () => {
+    const markup = glEmojiTag(emojiFixtureBomb.name, {
+      forceFallback: true,
+      sprite: true,
+    });
+
+    const glEmojiElement = await markupToDomElement(markup);
+    testGlEmojiElement(
+      glEmojiElement,
+      emojiFixtureBomb.name,
+      emojiFixtureBomb.unicodeVersion,
+      emojiFixtureBomb.moji,
+      {
+        forceFallback: true,
+        sprite: true,
+      },
+    );
+  });
+
+  it('question mark when invalid emoji name given', async () => {
+    const name = 'invalid_emoji';
+    const markup = glEmojiTag(name);
+
+    const glEmojiElement = await markupToDomElement(markup, true);
+    testGlEmojiElement(
+      glEmojiElement,
+      emojiFixtureGreyQuestion.name,
+      emojiFixtureGreyQuestion.unicodeVersion,
+      emojiFixtureGreyQuestion.moji,
+    );
+  });
+
+  it('question mark with image fallback when invalid emoji name given', async () => {
+    const name = 'invalid_emoji';
+    const markup = glEmojiTag(name, {
+      forceFallback: true,
+    });
+
+    const glEmojiElement = await markupToDomElement(markup);
+    testGlEmojiElement(
+      glEmojiElement,
+      emojiFixtureGreyQuestion.name,
+      emojiFixtureGreyQuestion.unicodeVersion,
+      emojiFixtureGreyQuestion.moji,
+      {
+        forceFallback: true,
+      },
+    );
+  });
+});

spec/frontend/emoji_spec.js → spec/frontend/emoji/emoji_spec.js

@@ -9,7 +9,7 @@ import isEmojiUnicodeSupported, {
   isHorceRacingSkinToneComboEmoji,
   isPersonZwjEmoji,
 } from '~/emoji/support/is_emoji_unicode_supported';
-import installGlEmojiElement from '~/behaviors/gl_emoji';
+import { trimText } from 'helpers/text_helper';
 
 const emptySupportMap = {
   personZwj: false,
@@ -53,183 +53,60 @@ const emojiFixtureMap = {
   },
 };
 
-async function markupToDomElement(markup, enforceUnicodeRedering) {
-  const div = document.createElement('div');
-  div.innerHTML = markup;
-  document.body.appendChild(div);
-
-  const glEmojiElementFromMarkup = div.firstElementChild;
-
-  const glEmojiElement = document.createElement('gl-emoji');
-  glEmojiElementFromMarkup.getAttributeNames().forEach(name => {
-    glEmojiElement.setAttribute(name, glEmojiElementFromMarkup.getAttribute(name));
-  });
-  // We need to call the function directly as the normal setup in Jest doesn't work
-  glEmojiElement.initialize(enforceUnicodeRedering);
-  await glEmojiElement.updateComplete;
-
-  return glEmojiElement;
-}
-
-function testGlEmojiImageFallback(element, name) {
-  expect(element.tagName.toLowerCase()).toBe('img');
-  expect(element.getAttribute('src')).toBe(`/-/emojis/${EMOJI_VERSION}/${name}.png`);
-  expect(element.getAttribute('title')).toBe(`:${name}:`);
-  expect(element.getAttribute('alt')).toBe(`:${name}:`);
-}
-
-const defaults = {
-  forceFallback: false,
-  sprite: false,
-};
-
-function testGlEmojiElement(element, name, unicodeVersion, unicodeMoji, options = {}) {
-  const opts = { ...defaults, ...options };
-  expect(element.tagName.toLowerCase()).toBe('gl-emoji');
-  expect(element.dataset.name).toBe(name);
-  expect(element.dataset.uni).toBe(unicodeVersion);
-
-  const fallbackSpriteClass = `emoji-${name}`;
-  if (opts.sprite) {
-    expect(element.dataset.fallbackSpriteClass).toBe(fallbackSpriteClass);
-  }
-
-  if (opts.forceFallback && opts.sprite) {
-    expect(element.getAttribute('class')).toBe(`emoji-icon ${fallbackSpriteClass}`);
-  }
-
-  if (opts.forceFallback && !opts.sprite) {
-    // Check for image fallback
-    testGlEmojiImageFallback(element.firstElementChild, name);
-  } else {
-    // Otherwise make sure things are still unicode text
-    expect(element.textContent.trim()).toBe(unicodeMoji);
-  }
-}
-
 describe('gl_emoji', () => {
-  beforeAll(() => {
-    installGlEmojiElement();
-  });
-
   let mock;
   const emojiData = getJSONFixture('emojis/emojis.json');
 
-  beforeEach(done => {
+  beforeEach(() => {
     mock = new MockAdapter(axios);
     mock.onGet(`/-/emojis/${EMOJI_VERSION}/emojis.json`).reply(200, emojiData);
 
-    initEmojiMap()
-      .then(() => {
-        done();
-      })
-      .catch(e => {
-        done();
-      });
+    return initEmojiMap().catch(() => {});
   });
 
   afterEach(() => {
     mock.restore();
-
-    document.body.innerHTML = '';
   });
 
   describe('glEmojiTag', () => {
-    it('bomb emoji', async () => {
+    it('bomb emoji', () => {
       const emojiKey = 'bomb';
       const markup = glEmojiTag(emojiFixtureMap[emojiKey].name);
-      const glEmojiElement = await markupToDomElement(markup, true);
 
-      testGlEmojiElement(
-        glEmojiElement,
-        emojiFixtureMap[emojiKey].name,
-        emojiFixtureMap[emojiKey].unicodeVersion,
-        emojiFixtureMap[emojiKey].moji,
+      expect(trimText(markup)).toMatchInlineSnapshot(
+        `"<gl-emoji data-name=\\"bomb\\"></gl-emoji>"`,
       );
     });
 
-    it('bomb emoji with image fallback', async () => {
+    it('bomb emoji with image fallback', () => {
       const emojiKey = 'bomb';
       const markup = glEmojiTag(emojiFixtureMap[emojiKey].name, {
         forceFallback: true,
       });
-      const glEmojiElement = await markupToDomElement(markup);
-      testGlEmojiElement(
-        glEmojiElement,
-        emojiFixtureMap[emojiKey].name,
-        emojiFixtureMap[emojiKey].unicodeVersion,
-        emojiFixtureMap[emojiKey].moji,
-        {
-          forceFallback: true,
-        },
+
+      expect(trimText(markup)).toMatchInlineSnapshot(
+        `"<gl-emoji data-force-fallback=\\"true\\" data-name=\\"bomb\\"></gl-emoji>"`,
       );
     });
 
-    it('bomb emoji with sprite fallback readiness', async () => {
+    it('bomb emoji with sprite fallback readiness', () => {
       const emojiKey = 'bomb';
       const markup = glEmojiTag(emojiFixtureMap[emojiKey].name, {
         sprite: true,
       });
-      const glEmojiElement = await markupToDomElement(markup);
-      testGlEmojiElement(
-        glEmojiElement,
-        emojiFixtureMap[emojiKey].name,
-        emojiFixtureMap[emojiKey].unicodeVersion,
-        emojiFixtureMap[emojiKey].moji,
-        {
-          sprite: true,
-        },
+      expect(trimText(markup)).toMatchInlineSnapshot(
+        `"<gl-emoji data-fallback-sprite-class=\\"emoji-bomb\\" data-name=\\"bomb\\"></gl-emoji>"`,
       );
     });
 
-    it('bomb emoji with sprite fallback', async () => {
+    it('bomb emoji with sprite fallback', () => {
       const emojiKey = 'bomb';
       const markup = glEmojiTag(emojiFixtureMap[emojiKey].name, {
         forceFallback: true,
         sprite: true,
       });
-      const glEmojiElement = await markupToDomElement(markup);
-      testGlEmojiElement(
-        glEmojiElement,
-        emojiFixtureMap[emojiKey].name,
-        emojiFixtureMap[emojiKey].unicodeVersion,
-        emojiFixtureMap[emojiKey].moji,
-        {
-          forceFallback: true,
-          sprite: true,
-        },
-      );
-    });
-
-    it('question mark when invalid emoji name given', async () => {
-      const name = 'invalid_emoji';
-      const emojiKey = 'grey_question';
-      const markup = glEmojiTag(name);
-      const glEmojiElement = await markupToDomElement(markup, true);
-
-      testGlEmojiElement(
-        glEmojiElement,
-        emojiFixtureMap[emojiKey].name,
-        emojiFixtureMap[emojiKey].unicodeVersion,
-        emojiFixtureMap[emojiKey].moji,
-      );
-    });
-
-    it('question mark with image fallback when invalid emoji name given', async () => {
-      const name = 'invalid_emoji';
-      const emojiKey = 'grey_question';
-      const markup = glEmojiTag(name, {
-        forceFallback: true,
-      });
-      const glEmojiElement = await markupToDomElement(markup);
-      testGlEmojiElement(
-        glEmojiElement,
-        emojiFixtureMap[emojiKey].name,
-        emojiFixtureMap[emojiKey].unicodeVersion,
-        emojiFixtureMap[emojiKey].moji,
-        {
-          forceFallback: true,
-        },
+      expect(trimText(markup)).toMatchInlineSnapshot(
+        `"<gl-emoji class=\\"emoji-icon emoji-bomb\\" data-fallback-sprite-class=\\"emoji-bomb\\" data-force-fallback=\\"true\\" data-name=\\"bomb\\"></gl-emoji>"`,
       );
     });
   });

spec/frontend/vue_shared/components/__snapshots__/awards_list_spec.js.snap

@@ -19,10 +19,7 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
     
       <gl-emoji
         data-name="thumbsup"
-      >
-        
-    
-      </gl-emoji>
+      />
       
   
     </span>
@@ -48,10 +45,7 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
     
       <gl-emoji
         data-name="thumbsdown"
-      >
-        
-    
-      </gl-emoji>
+      />
       
   
     </span>
@@ -77,10 +71,7 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
     
       <gl-emoji
         data-name="smile"
-      >
-        
-    
-      </gl-emoji>
+      />
       
   
     </span>
@@ -106,10 +97,7 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
     
       <gl-emoji
         data-name="ok_hand"
-      >
-        
-    
-      </gl-emoji>
+      />
       
   
     </span>
@@ -135,10 +123,7 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
     
       <gl-emoji
         data-name="cactus"
-      >
-        
-    
-      </gl-emoji>
+      />
       
   
     </span>
@@ -164,10 +149,7 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
     
       <gl-emoji
         data-name="a"
-      >
-        
-    
-      </gl-emoji>
+      />
       
   
     </span>
@@ -193,10 +175,7 @@ exports[`vue_shared/components/awards_list default matches snapshot 1`] = `
     
       <gl-emoji
         data-name="b"
-      >
-        
-    
-      </gl-emoji>
+      />
       
   
     </span>