diff options
author | Tim Zallmann <tzallmann@gitlab.com> | 2019-03-07 12:33:03 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2019-03-07 12:33:03 +0300 |
commit | d07919de90e8212673adb47a4e60514c2573f2ce (patch) | |
tree | a45262773f31061182db9fe39700fea726b6cfc2 /spec/javascripts/emoji_spec.js | |
parent | b7998f60f63a4b85db7b835ef152a9042db5e791 (diff) |
Moved all emojis to the public folder
Created new emojis map in public folder
Renamed folder to emojis
Loading now the emojis from Localstorage or from Server
Moved all emojis to the public folder
Loading the emojis.json file now through AJAX
Loads now the map in the web element instead when building the emoji tag
Updated the custom Element Setup to modern method
Fixed Emoji Karma Specs for async loading
Loading now the emojis from Localstorage or from Server
Loads now the map in the web element instead when building the emoji tag
Fixed problem with FIXTURE_PATH for emojis fixtures
Fixes Linting Error in gemojione.rake
Fixed Emoji Karma Specs
Fix static type check in gemojione and check if already registered
Testing if the Emoji Support Check is failing Rspec
Change of CLass Name, returning true on check to test
Fixes failing Emoji RSpec Tests
Moved Emojis into public/-/emojis/1/
Fixed Linting Errors in gl_emoji
Fix to fixtures creation for emojis
Fixed path spec for new subdirectory -/emojis
Optimized emojis.json output
Fix for Emoji Spec failure due to unicode dataset
Better catch handling for emojis
Diffstat (limited to 'spec/javascripts/emoji_spec.js')
-rw-r--r-- | spec/javascripts/emoji_spec.js | 189 |
1 files changed, 117 insertions, 72 deletions
diff --git a/spec/javascripts/emoji_spec.js b/spec/javascripts/emoji_spec.js index 3db4d9800f1..0ac375145be 100644 --- a/spec/javascripts/emoji_spec.js +++ b/spec/javascripts/emoji_spec.js @@ -1,4 +1,6 @@ -import { glEmojiTag } from '~/emoji'; +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import { initEmojiMap, glEmojiTag, EMOJI_VERSION } from '~/emoji'; import isEmojiUnicodeSupported, { isFlagEmoji, isRainbowFlagEmoji, @@ -7,6 +9,7 @@ import isEmojiUnicodeSupported, { isHorceRacingSkinToneComboEmoji, isPersonZwjEmoji, } from '~/emoji/support/is_emoji_unicode_supported'; +import installGlEmojiElement from '~/behaviors/gl_emoji'; const emptySupportMap = { personZwj: false, @@ -31,34 +34,35 @@ const emojiFixtureMap = { bomb: { name: 'bomb', moji: '💣', - unicodeVersion: '6.0', + uni: '6.0', }, construction_worker_tone5: { name: 'construction_worker_tone5', moji: '👷🏿', - unicodeVersion: '8.0', + uni: '8.0', }, five: { name: 'five', moji: '5️⃣', - unicodeVersion: '3.0', + uni: '3.0', }, grey_question: { name: 'grey_question', moji: '❔', - unicodeVersion: '6.0', + uni: '6.0', }, }; function markupToDomElement(markup) { const div = document.createElement('div'); div.innerHTML = markup; + document.body.appendChild(div); return div.firstElementChild; } -function testGlEmojiImageFallback(element, name, src) { +function testGlEmojiImageFallback(element, name) { expect(element.tagName.toLowerCase()).toBe('img'); - expect(element.getAttribute('src')).toBe(src); + expect(element.getAttribute('src')).toBe(`/-/emojis/${EMOJI_VERSION}/${name}.png`); expect(element.getAttribute('title')).toBe(`:${name}:`); expect(element.getAttribute('alt')).toBe(`:${name}:`); } @@ -68,12 +72,11 @@ const defaults = { sprite: false, }; -function testGlEmojiElement(element, name, unicodeVersion, unicodeMoji, options = {}) { +function testGlEmojiElement(element, name, uni, unicodeMoji, options = {}) { const opts = Object.assign({}, defaults, options); expect(element.tagName.toLowerCase()).toBe('gl-emoji'); expect(element.dataset.name).toBe(name); - expect(element.dataset.fallbackSrc.length).toBeGreaterThan(0); - expect(element.dataset.unicodeVersion).toBe(unicodeVersion); + expect(element.dataset.uni).toBe(uni); const fallbackSpriteClass = `emoji-${name}`; if (opts.sprite) { @@ -86,7 +89,7 @@ function testGlEmojiElement(element, name, unicodeVersion, unicodeMoji, options if (opts.forceFallback && !opts.sprite) { // Check for image fallback - testGlEmojiImageFallback(element.firstElementChild, name, element.dataset.fallbackSrc); + testGlEmojiImageFallback(element.firstElementChild, name); } else { // Otherwise make sure things are still unicode text expect(element.textContent.trim()).toBe(unicodeMoji); @@ -94,101 +97,143 @@ function testGlEmojiElement(element, name, unicodeVersion, unicodeMoji, options } describe('gl_emoji', () => { + beforeAll(() => { + installGlEmojiElement(); + }); + + let mock; + const emojiData = getJSONFixture('emojis/emojis.json'); + + beforeEach(function(done) { + mock = new MockAdapter(axios); + mock.onGet(`/-/emojis/${EMOJI_VERSION}/emojis.json`).reply(200, emojiData); + + initEmojiMap() + .then(() => { + done(); + }) + .catch(() => { + done(); + }); + }); + + afterEach(function() { + mock.restore(); + }); + describe('glEmojiTag', () => { - it('bomb emoji', () => { + it('bomb emoji', done => { const emojiKey = 'bomb'; const markup = glEmojiTag(emojiFixtureMap[emojiKey].name); const glEmojiElement = markupToDomElement(markup); - testGlEmojiElement( - glEmojiElement, - emojiFixtureMap[emojiKey].name, - emojiFixtureMap[emojiKey].unicodeVersion, - emojiFixtureMap[emojiKey].moji, - ); + setTimeout(() => { + testGlEmojiElement( + glEmojiElement, + emojiFixtureMap[emojiKey].name, + emojiFixtureMap[emojiKey].uni, + emojiFixtureMap[emojiKey].moji, + ); + done(); + }); }); - it('bomb emoji with image fallback', () => { + it('bomb emoji with image fallback', done => { const emojiKey = 'bomb'; const markup = glEmojiTag(emojiFixtureMap[emojiKey].name, { forceFallback: true, }); const glEmojiElement = markupToDomElement(markup); - testGlEmojiElement( - glEmojiElement, - emojiFixtureMap[emojiKey].name, - emojiFixtureMap[emojiKey].unicodeVersion, - emojiFixtureMap[emojiKey].moji, - { - forceFallback: true, - }, - ); + setTimeout(() => { + testGlEmojiElement( + glEmojiElement, + emojiFixtureMap[emojiKey].name, + emojiFixtureMap[emojiKey].uni, + emojiFixtureMap[emojiKey].moji, + { + forceFallback: true, + }, + ); + done(); + }); }); - it('bomb emoji with sprite fallback readiness', () => { + it('bomb emoji with sprite fallback readiness', done => { const emojiKey = 'bomb'; const markup = glEmojiTag(emojiFixtureMap[emojiKey].name, { sprite: true, }); const glEmojiElement = markupToDomElement(markup); - testGlEmojiElement( - glEmojiElement, - emojiFixtureMap[emojiKey].name, - emojiFixtureMap[emojiKey].unicodeVersion, - emojiFixtureMap[emojiKey].moji, - { - sprite: true, - }, - ); + setTimeout(() => { + testGlEmojiElement( + glEmojiElement, + emojiFixtureMap[emojiKey].name, + emojiFixtureMap[emojiKey].uni, + emojiFixtureMap[emojiKey].moji, + { + sprite: true, + }, + ); + done(); + }); }); - it('bomb emoji with sprite fallback', () => { + it('bomb emoji with sprite fallback', done => { const emojiKey = 'bomb'; const markup = glEmojiTag(emojiFixtureMap[emojiKey].name, { forceFallback: true, sprite: true, }); const glEmojiElement = markupToDomElement(markup); - testGlEmojiElement( - glEmojiElement, - emojiFixtureMap[emojiKey].name, - emojiFixtureMap[emojiKey].unicodeVersion, - emojiFixtureMap[emojiKey].moji, - { - forceFallback: true, - sprite: true, - }, - ); + setTimeout(() => { + testGlEmojiElement( + glEmojiElement, + emojiFixtureMap[emojiKey].name, + emojiFixtureMap[emojiKey].uni, + emojiFixtureMap[emojiKey].moji, + { + forceFallback: true, + sprite: true, + }, + ); + done(); + }); }); - it('question mark when invalid emoji name given', () => { + it('question mark when invalid emoji name given', done => { const name = 'invalid_emoji'; const emojiKey = 'grey_question'; const markup = glEmojiTag(name); const glEmojiElement = markupToDomElement(markup); - testGlEmojiElement( - glEmojiElement, - emojiFixtureMap[emojiKey].name, - emojiFixtureMap[emojiKey].unicodeVersion, - emojiFixtureMap[emojiKey].moji, - ); + setTimeout(() => { + testGlEmojiElement( + glEmojiElement, + emojiFixtureMap[emojiKey].name, + emojiFixtureMap[emojiKey].uni, + emojiFixtureMap[emojiKey].moji, + ); + done(); + }); }); - it('question mark with image fallback when invalid emoji name given', () => { + it('question mark with image fallback when invalid emoji name given', done => { const name = 'invalid_emoji'; const emojiKey = 'grey_question'; const markup = glEmojiTag(name, { forceFallback: true, }); const glEmojiElement = markupToDomElement(markup); - testGlEmojiElement( - glEmojiElement, - emojiFixtureMap[emojiKey].name, - emojiFixtureMap[emojiKey].unicodeVersion, - emojiFixtureMap[emojiKey].moji, - { - forceFallback: true, - }, - ); + setTimeout(() => { + testGlEmojiElement( + glEmojiElement, + emojiFixtureMap[emojiKey].name, + emojiFixtureMap[emojiKey].uni, + emojiFixtureMap[emojiKey].moji, + { + forceFallback: true, + }, + ); + done(); + }); }); }); @@ -389,7 +434,7 @@ describe('gl_emoji', () => { const isSupported = isEmojiUnicodeSupported( unicodeSupportMap, emojiFixtureMap[emojiKey].moji, - emojiFixtureMap[emojiKey].unicodeVersion, + emojiFixtureMap[emojiKey].uni, ); expect(isSupported).toBeTruthy(); @@ -401,7 +446,7 @@ describe('gl_emoji', () => { const isSupported = isEmojiUnicodeSupported( unicodeSupportMap, emojiFixtureMap[emojiKey].moji, - emojiFixtureMap[emojiKey].unicodeVersion, + emojiFixtureMap[emojiKey].uni, ); expect(isSupported).toBeFalsy(); @@ -415,7 +460,7 @@ describe('gl_emoji', () => { const isSupported = isEmojiUnicodeSupported( unicodeSupportMap, emojiFixtureMap[emojiKey].moji, - emojiFixtureMap[emojiKey].unicodeVersion, + emojiFixtureMap[emojiKey].uni, ); expect(isSupported).toBeFalsy(); @@ -441,7 +486,7 @@ describe('gl_emoji', () => { const isSupported = isEmojiUnicodeSupported( unicodeSupportMap, emojiFixtureMap[emojiKey].moji, - emojiFixtureMap[emojiKey].unicodeVersion, + emojiFixtureMap[emojiKey].uni, ); expect(isSupported).toBeFalsy(); @@ -459,7 +504,7 @@ describe('gl_emoji', () => { const isSupported = isEmojiUnicodeSupported( unicodeSupportMap, emojiFixtureMap[emojiKey].moji, - emojiFixtureMap[emojiKey].unicodeVersion, + emojiFixtureMap[emojiKey].uni, ); expect(isSupported).toBeTruthy(); @@ -477,7 +522,7 @@ describe('gl_emoji', () => { const isSupported = isEmojiUnicodeSupported( unicodeSupportMap, emojiFixtureMap[emojiKey].moji, - emojiFixtureMap[emojiKey].unicodeVersion, + emojiFixtureMap[emojiKey].uni, ); expect(isSupported).toBeFalsy(); |