From e6fc0207cb37666cdf606c03641f2afbb5646213 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Mon, 27 Feb 2017 22:44:34 -0600 Subject: Use native unicode emojis - gl_emoji for falling back to image/css-sprite when the browser doesn't support an emoji - Markdown rendering (Banzai filter) - Autocomplete - Award emoji menu - Perceived perf - Immediate response because we now build client-side - Update `digests.json` generation in gemojione rake task to be more useful and include `unicodeVersion` MR: !9437 See issues - #26371 - #27250 - #22474 --- spec/javascripts/awards_handler_spec.js | 153 +++++++------ spec/javascripts/fixtures/emoji_menu.js | 4 - spec/javascripts/gl_emoji_spec.js | 367 ++++++++++++++++++++++++++++++++ 3 files changed, 456 insertions(+), 68 deletions(-) delete mode 100644 spec/javascripts/fixtures/emoji_menu.js create mode 100644 spec/javascripts/gl_emoji_spec.js (limited to 'spec/javascripts') diff --git a/spec/javascripts/awards_handler_spec.js b/spec/javascripts/awards_handler_spec.js index e5826f9c29f..8b35cd8e5be 100644 --- a/spec/javascripts/awards_handler_spec.js +++ b/spec/javascripts/awards_handler_spec.js @@ -1,11 +1,11 @@ /* eslint-disable space-before-function-paren, no-var, one-var, one-var-declaration-per-line, no-unused-expressions, comma-dangle, new-parens, no-unused-vars, quotes, jasmine/no-spec-dupes, prefer-template, max-len */ -/* global AwardsHandler */ -require('~/awards_handler'); -require('./fixtures/emoji_menu'); +require('es6-promise').polyfill(); + +const AwardsHandler = require('~/awards_handler'); (function() { - var awardsHandler, lazyAssert, urlRoot; + var awardsHandler, lazyAssert, urlRoot, openAndWaitForEmojiMenu; awardsHandler = null; @@ -13,14 +13,6 @@ require('./fixtures/emoji_menu'); window.gon || (window.gon = {}); - gl.emojiAliases = function() { - return { - '+1': 'thumbsup', - '-1': 'thumbsdown' - }; - }; - - gon.award_menu_url = '/emojis'; urlRoot = gon.relative_url_root; lazyAssert = function(done, assertFn) { @@ -32,22 +24,40 @@ require('./fixtures/emoji_menu'); }; describe('AwardsHandler', function() { - preloadFixtures('issues/open-issue.html.raw'); + preloadFixtures('issues/issue_with_comment.html.raw'); beforeEach(function() { - loadFixtures('issues/open-issue.html.raw'); + loadFixtures('issues/issue_with_comment.html.raw'); awardsHandler = new AwardsHandler; spyOn(awardsHandler, 'postEmoji').and.callFake((function(_this) { return function(url, emoji, cb) { return cb(); }; })(this)); - spyOn(jQuery, 'get').and.callFake(function(req, cb) { - return cb(window.emojiMenu); - }); + + let isEmojiMenuBuilt = false; + openAndWaitForEmojiMenu = function() { + return new Promise((resolve, reject) => { + if (isEmojiMenuBuilt) { + resolve(); + } else { + $('.js-add-award').eq(0).click(); + const $menu = $('.emoji-menu'); + $menu.one('build-emoji-menu-finish', () => { + isEmojiMenuBuilt = true; + resolve(); + }); + + // Fail after 1 second + setTimeout(reject, 1000); + } + }); + }; }); afterEach(function() { // restore original url root value gon.relative_url_root = urlRoot; + + awardsHandler.destroy(); }); describe('::showEmojiMenu', function() { it('should show emoji menu when Add emoji button clicked', function(done) { @@ -62,10 +72,9 @@ require('./fixtures/emoji_menu'); }); }); it('should also show emoji menu for the smiley icon in notes', function(done) { - $('.note-action-button').click(); + $('.js-add-award.note-action-button').click(); return lazyAssert(done, function() { - var $emojiMenu; - $emojiMenu = $('.emoji-menu'); + var $emojiMenu = $('.emoji-menu'); return expect($emojiMenu.length).toBe(1); }); }); @@ -86,7 +95,7 @@ require('./fixtures/emoji_menu'); var $emojiButton, $votesBlock; $votesBlock = $('.js-awards-block').eq(0); awardsHandler.addAwardToEmojiBar($votesBlock, 'heart', false); - $emojiButton = $votesBlock.find('[data-emoji=heart]'); + $emojiButton = $votesBlock.find('[data-name=heart]'); expect($emojiButton.length).toBe(1); expect($emojiButton.next('.js-counter').text()).toBe('1'); return expect($votesBlock.hasClass('hidden')).toBe(false); @@ -96,14 +105,14 @@ require('./fixtures/emoji_menu'); $votesBlock = $('.js-awards-block').eq(0); awardsHandler.addAwardToEmojiBar($votesBlock, 'heart', false); awardsHandler.addAwardToEmojiBar($votesBlock, 'heart', false); - $emojiButton = $votesBlock.find('[data-emoji=heart]'); + $emojiButton = $votesBlock.find('[data-name=heart]'); return expect($emojiButton.length).toBe(0); }); return it('should decrement the emoji counter', function() { var $emojiButton, $votesBlock; $votesBlock = $('.js-awards-block').eq(0); awardsHandler.addAwardToEmojiBar($votesBlock, 'heart', false); - $emojiButton = $votesBlock.find('[data-emoji=heart]'); + $emojiButton = $votesBlock.find('[data-name=heart]'); $emojiButton.next('.js-counter').text(5); awardsHandler.addAwardToEmojiBar($votesBlock, 'heart', false); expect($emojiButton.length).toBe(1); @@ -120,8 +129,8 @@ require('./fixtures/emoji_menu'); var $thumbsDownEmoji, $thumbsUpEmoji, $votesBlock, awardUrl; awardUrl = awardsHandler.getAwardUrl(); $votesBlock = $('.js-awards-block').eq(0); - $thumbsUpEmoji = $votesBlock.find('[data-emoji=thumbsup]').parent(); - $thumbsDownEmoji = $votesBlock.find('[data-emoji=thumbsdown]').parent(); + $thumbsUpEmoji = $votesBlock.find('[data-name=thumbsup]').parent(); + $thumbsDownEmoji = $votesBlock.find('[data-name=thumbsdown]').parent(); awardsHandler.addAward($votesBlock, awardUrl, 'thumbsup', false); expect($thumbsUpEmoji.hasClass('active')).toBe(true); expect($thumbsDownEmoji.hasClass('active')).toBe(false); @@ -138,9 +147,9 @@ require('./fixtures/emoji_menu'); awardUrl = awardsHandler.getAwardUrl(); $votesBlock = $('.js-awards-block').eq(0); awardsHandler.addAward($votesBlock, awardUrl, 'fire', false); - expect($votesBlock.find('[data-emoji=fire]').length).toBe(1); - awardsHandler.removeEmoji($votesBlock.find('[data-emoji=fire]').closest('button')); - return expect($votesBlock.find('[data-emoji=fire]').length).toBe(0); + expect($votesBlock.find('[data-name=fire]').length).toBe(1); + awardsHandler.removeEmoji($votesBlock.find('[data-name=fire]').closest('button')); + return expect($votesBlock.find('[data-name=fire]').length).toBe(0); }); }); describe('::addYouToUserList', function() { @@ -148,7 +157,7 @@ require('./fixtures/emoji_menu'); var $thumbsUpEmoji, $votesBlock, awardUrl; awardUrl = awardsHandler.getAwardUrl(); $votesBlock = $('.js-awards-block').eq(0); - $thumbsUpEmoji = $votesBlock.find('[data-emoji=thumbsup]').parent(); + $thumbsUpEmoji = $votesBlock.find('[data-name=thumbsup]').parent(); $thumbsUpEmoji.attr('data-title', 'sam, jerry, max, and andy'); awardsHandler.addAward($votesBlock, awardUrl, 'thumbsup', false); $thumbsUpEmoji.tooltip(); @@ -158,7 +167,7 @@ require('./fixtures/emoji_menu'); var $thumbsUpEmoji, $votesBlock, awardUrl; awardUrl = awardsHandler.getAwardUrl(); $votesBlock = $('.js-awards-block').eq(0); - $thumbsUpEmoji = $votesBlock.find('[data-emoji=thumbsup]').parent(); + $thumbsUpEmoji = $votesBlock.find('[data-name=thumbsup]').parent(); $thumbsUpEmoji.attr('data-title', 'sam'); awardsHandler.addAward($votesBlock, awardUrl, 'thumbsup', false); $thumbsUpEmoji.tooltip(); @@ -170,7 +179,7 @@ require('./fixtures/emoji_menu'); var $thumbsUpEmoji, $votesBlock, awardUrl; awardUrl = awardsHandler.getAwardUrl(); $votesBlock = $('.js-awards-block').eq(0); - $thumbsUpEmoji = $votesBlock.find('[data-emoji=thumbsup]').parent(); + $thumbsUpEmoji = $votesBlock.find('[data-name=thumbsup]').parent(); $thumbsUpEmoji.attr('data-title', 'You, sam, jerry, max, and andy'); $thumbsUpEmoji.addClass('active'); awardsHandler.addAward($votesBlock, awardUrl, 'thumbsup', false); @@ -181,7 +190,7 @@ require('./fixtures/emoji_menu'); var $thumbsUpEmoji, $votesBlock, awardUrl; awardUrl = awardsHandler.getAwardUrl(); $votesBlock = $('.js-awards-block').eq(0); - $thumbsUpEmoji = $votesBlock.find('[data-emoji=thumbsup]').parent(); + $thumbsUpEmoji = $votesBlock.find('[data-name=thumbsup]').parent(); $thumbsUpEmoji.attr('data-title', 'You and sam'); $thumbsUpEmoji.addClass('active'); awardsHandler.addAward($votesBlock, awardUrl, 'thumbsup', false); @@ -190,42 +199,58 @@ require('./fixtures/emoji_menu'); }); }); describe('search', function() { - return it('should filter the emoji', function() { - $('.js-add-award').eq(0).click(); - expect($('[data-emoji=angel]').is(':visible')).toBe(true); - expect($('[data-emoji=anger]').is(':visible')).toBe(true); - $('#emoji_search').val('ali').trigger('keyup'); - expect($('[data-emoji=angel]').is(':visible')).toBe(false); - expect($('[data-emoji=anger]').is(':visible')).toBe(false); - return expect($('[data-emoji=alien]').is(':visible')).toBe(true); + return it('should filter the emoji', function(done) { + return openAndWaitForEmojiMenu() + .then(() => { + expect($('[data-name=angel]').is(':visible')).toBe(true); + expect($('[data-name=anger]').is(':visible')).toBe(true); + $('#emoji_search').val('ali').trigger('input'); + expect($('[data-name=angel]').is(':visible')).toBe(false); + expect($('[data-name=anger]').is(':visible')).toBe(false); + expect($('[data-name=alien]').is(':visible')).toBe(true); + }) + .then(done) + .catch(() => { + done.fail('Failed to open and build emoji menu'); + }); }); }); - return describe('emoji menu', function() { - var openEmojiMenuAndAddEmoji, selector; - selector = '[data-emoji=sunglasses]'; - openEmojiMenuAndAddEmoji = function() { - var $block, $emoji, $menu; - $('.js-add-award').eq(0).click(); - $menu = $('.emoji-menu'); - $block = $('.js-awards-block'); - $emoji = $menu.find('.emoji-menu-list:not(.frequent-emojis) ' + selector); - expect($emoji.length).toBe(1); - expect($block.find(selector).length).toBe(0); - $emoji.click(); - expect($menu.hasClass('.is-visible')).toBe(false); - return expect($block.find(selector).length).toBe(1); + describe('emoji menu', function() { + const emojiSelector = '[data-name=sunglasses]'; + const openEmojiMenuAndAddEmoji = function() { + return openAndWaitForEmojiMenu() + .then(() => { + const $menu = $('.emoji-menu'); + const $block = $('.js-awards-block'); + const $emoji = $menu.find('.emoji-menu-list:not(.frequent-emojis) ' + emojiSelector); + + expect($emoji.length).toBe(1); + expect($block.find(emojiSelector).length).toBe(0); + $emoji.click(); + expect($menu.hasClass('.is-visible')).toBe(false); + expect($block.find(emojiSelector).length).toBe(1); + }); }; - it('should add selected emoji to awards block', function() { - return openEmojiMenuAndAddEmoji(); + it('should add selected emoji to awards block', function(done) { + return openEmojiMenuAndAddEmoji() + .then(done) + .catch(() => { + done.fail('Failed to open and build emoji menu'); + }); }); - return it('should remove already selected emoji', function() { - var $block, $emoji; - openEmojiMenuAndAddEmoji(); - $('.js-add-award').eq(0).click(); - $block = $('.js-awards-block'); - $emoji = $('.emoji-menu').find(".emoji-menu-list:not(.frequent-emojis) " + selector); - $emoji.click(); - return expect($block.find(selector).length).toBe(0); + it('should remove already selected emoji', function(done) { + return openEmojiMenuAndAddEmoji() + .then(() => { + $('.js-add-award').eq(0).click(); + const $block = $('.js-awards-block'); + const $emoji = $('.emoji-menu').find(`.emoji-menu-list:not(.frequent-emojis) ${emojiSelector}`); + $emoji.click(); + expect($block.find(emojiSelector).length).toBe(0); + }) + .then(done) + .catch((err) => { + done.fail('Failed to open and build emoji menu'); + }); }); }); }); diff --git a/spec/javascripts/fixtures/emoji_menu.js b/spec/javascripts/fixtures/emoji_menu.js deleted file mode 100644 index a50812d9517..00000000000 --- a/spec/javascripts/fixtures/emoji_menu.js +++ /dev/null @@ -1,4 +0,0 @@ -/* eslint-disable space-before-function-paren */ -(function() { - window.emojiMenu = "
\n \n
\n
\n Emoticons\n
\n
    \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n \n
    • \n
\n
\n
"; -}).call(window); diff --git a/spec/javascripts/gl_emoji_spec.js b/spec/javascripts/gl_emoji_spec.js new file mode 100644 index 00000000000..e94e220b19f --- /dev/null +++ b/spec/javascripts/gl_emoji_spec.js @@ -0,0 +1,367 @@ + +require('~/extensions/string'); +require('~/extensions/array'); + +const glEmoji = require('~/behaviors/gl_emoji'); + +const glEmojiTag = glEmoji.glEmojiTag; +const isEmojiUnicodeSupported = glEmoji.isEmojiUnicodeSupported; +const isFlagEmoji = glEmoji.isFlagEmoji; +const isKeycapEmoji = glEmoji.isKeycapEmoji; +const isSkinToneComboEmoji = glEmoji.isSkinToneComboEmoji; +const isHorceRacingSkinToneComboEmoji = glEmoji.isHorceRacingSkinToneComboEmoji; +const isPersonZwjEmoji = glEmoji.isPersonZwjEmoji; + +const emptySupportMap = { + personZwj: false, + horseRacing: false, + flag: false, + skinToneModifier: false, + '9.0': false, + '8.0': false, + '7.0': false, + 6.1: false, + '6.0': false, + 5.2: false, + 5.1: false, + 4.1: false, + '4.0': false, + 3.2: false, + '3.0': false, + 1.1: false, +}; + +const emojiFixtureMap = { + bomb: { + name: 'bomb', + moji: 'πŸ’£', + unicodeVersion: '6.0', + }, + construction_worker_tone5: { + name: 'construction_worker_tone5', + moji: 'πŸ‘·πŸΏ', + unicodeVersion: '8.0', + }, + five: { + name: 'five', + moji: '5️⃣', + unicodeVersion: '3.0', + }, +}; + +function markupToDomElement(markup) { + const div = document.createElement('div'); + div.innerHTML = markup; + return div.firstElementChild; +} + +function testGlEmojiImageFallback(element, name, src) { + expect(element.tagName.toLowerCase()).toBe('img'); + expect(element.getAttribute('src')).toBe(src); + 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 = 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); + + 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, element.dataset.fallbackSrc); + } else { + // Otherwise make sure things are still unicode text + expect(element.textContent.trim()).toBe(unicodeMoji); + } +} + +describe('gl_emoji', () => { + describe('glEmojiTag', () => { + it('bomb emoji', () => { + const emojiKey = 'bomb'; + const markup = glEmojiTag(emojiFixtureMap[emojiKey].name); + const glEmojiElement = markupToDomElement(markup); + testGlEmojiElement( + glEmojiElement, + emojiFixtureMap[emojiKey].name, + emojiFixtureMap[emojiKey].unicodeVersion, + emojiFixtureMap[emojiKey].moji, + ); + }); + + it('bomb emoji with image fallback', () => { + 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, + }, + ); + }); + + it('bomb emoji with sprite fallback readiness', () => { + 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, + }, + ); + }); + it('bomb emoji with sprite fallback', () => { + 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, + }, + ); + }); + }); + + describe('isFlagEmoji', () => { + it('should detect flag_ac', () => { + expect(isFlagEmoji('πŸ‡¦πŸ‡¨')).toBeTruthy(); + }); + it('should detect flag_us', () => { + expect(isFlagEmoji('πŸ‡ΊπŸ‡Έ')).toBeTruthy(); + }); + it('should detect flag_zw', () => { + expect(isFlagEmoji('πŸ‡ΏπŸ‡Ό')).toBeTruthy(); + }); + it('should not detect flags', () => { + expect(isFlagEmoji('🎏')).toBeFalsy(); + }); + it('should not detect triangular_flag_on_post', () => { + expect(isFlagEmoji('🚩')).toBeFalsy(); + }); + it('should not detect single letter', () => { + expect(isFlagEmoji('πŸ‡¦')).toBeFalsy(); + }); + it('should not detect >2 letters', () => { + expect(isFlagEmoji('πŸ‡¦πŸ‡§πŸ‡¨')).toBeFalsy(); + }); + }); + + describe('isKeycapEmoji', () => { + it('should detect one(keycap)', () => { + expect(isKeycapEmoji('1️⃣')).toBeTruthy(); + }); + it('should detect nine(keycap)', () => { + expect(isKeycapEmoji('9️⃣')).toBeTruthy(); + }); + it('should not detect ten(keycap)', () => { + expect(isKeycapEmoji('πŸ”Ÿ')).toBeFalsy(); + }); + it('should not detect hash(keycap)', () => { + expect(isKeycapEmoji('#⃣')).toBeFalsy(); + }); + }); + + describe('isSkinToneComboEmoji', () => { + it('should detect hand_splayed_tone5', () => { + expect(isSkinToneComboEmoji('πŸ–πŸΏ')).toBeTruthy(); + }); + it('should not detect hand_splayed', () => { + expect(isSkinToneComboEmoji('πŸ–')).toBeFalsy(); + }); + it('should detect lifter_tone1', () => { + expect(isSkinToneComboEmoji('πŸ‹πŸ»')).toBeTruthy(); + }); + it('should not detect lifter', () => { + expect(isSkinToneComboEmoji('πŸ‹')).toBeFalsy(); + }); + it('should detect rowboat_tone4', () => { + expect(isSkinToneComboEmoji('🚣🏾')).toBeTruthy(); + }); + it('should not detect rowboat', () => { + expect(isSkinToneComboEmoji('🚣')).toBeFalsy(); + }); + it('should not detect individual tone emoji', () => { + expect(isSkinToneComboEmoji('🏻')).toBeFalsy(); + }); + }); + + describe('isHorceRacingSkinToneComboEmoji', () => { + it('should detect horse_racing_tone2', () => { + expect(isHorceRacingSkinToneComboEmoji('πŸ‡πŸΌ')).toBeTruthy(); + }); + it('should not detect horse_racing', () => { + expect(isHorceRacingSkinToneComboEmoji('πŸ‡')).toBeFalsy(); + }); + }); + + describe('isPersonZwjEmoji', () => { + it('should detect couple_mm', () => { + expect(isPersonZwjEmoji('πŸ‘¨β€β€οΈβ€πŸ‘¨')).toBeTruthy(); + }); + it('should not detect couple_with_heart', () => { + expect(isPersonZwjEmoji('πŸ’‘')).toBeFalsy(); + }); + it('should not detect couplekiss', () => { + expect(isPersonZwjEmoji('πŸ’')).toBeFalsy(); + }); + it('should detect family_mmb', () => { + expect(isPersonZwjEmoji('πŸ‘¨β€πŸ‘¨β€πŸ‘¦')).toBeTruthy(); + }); + it('should detect family_mwgb', () => { + expect(isPersonZwjEmoji('πŸ‘¨β€πŸ‘©β€πŸ‘§β€πŸ‘¦')).toBeTruthy(); + }); + it('should not detect family', () => { + expect(isPersonZwjEmoji('πŸ‘ͺ')).toBeFalsy(); + }); + it('should detect kiss_ww', () => { + expect(isPersonZwjEmoji('πŸ‘©β€β€οΈβ€πŸ’‹β€πŸ‘©')).toBeTruthy(); + }); + it('should not detect girl', () => { + expect(isPersonZwjEmoji('πŸ‘§')).toBeFalsy(); + }); + it('should not detect girl_tone5', () => { + expect(isPersonZwjEmoji('πŸ‘§πŸΏ')).toBeFalsy(); + }); + it('should not detect man', () => { + expect(isPersonZwjEmoji('πŸ‘¨')).toBeFalsy(); + }); + it('should not detect woman', () => { + expect(isPersonZwjEmoji('πŸ‘©')).toBeFalsy(); + }); + }); + + describe('isEmojiUnicodeSupported', () => { + it('bomb(6.0) with 6.0 support', () => { + const emojiKey = 'bomb'; + const unicodeSupportMap = Object.assign({}, emptySupportMap, { + '6.0': true, + }); + const isSupported = isEmojiUnicodeSupported( + unicodeSupportMap, + emojiFixtureMap[emojiKey].moji, + emojiFixtureMap[emojiKey].unicodeVersion, + ); + expect(isSupported).toBeTruthy(); + }); + + it('bomb(6.0) without 6.0 support', () => { + const emojiKey = 'bomb'; + const unicodeSupportMap = emptySupportMap; + const isSupported = isEmojiUnicodeSupported( + unicodeSupportMap, + emojiFixtureMap[emojiKey].moji, + emojiFixtureMap[emojiKey].unicodeVersion, + ); + expect(isSupported).toBeFalsy(); + }); + + it('bomb(6.0) without 6.0 but with 9.0 support', () => { + const emojiKey = 'bomb'; + const unicodeSupportMap = Object.assign({}, emptySupportMap, { + '9.0': true, + }); + const isSupported = isEmojiUnicodeSupported( + unicodeSupportMap, + emojiFixtureMap[emojiKey].moji, + emojiFixtureMap[emojiKey].unicodeVersion, + ); + expect(isSupported).toBeFalsy(); + }); + + it('construction_worker_tone5(8.0) without skin tone modifier support', () => { + const emojiKey = 'construction_worker_tone5'; + const unicodeSupportMap = Object.assign({}, emptySupportMap, { + skinToneModifier: false, + '9.0': true, + '8.0': true, + '7.0': true, + 6.1: true, + '6.0': true, + 5.2: true, + 5.1: true, + 4.1: true, + '4.0': true, + 3.2: true, + '3.0': true, + 1.1: true, + }); + const isSupported = isEmojiUnicodeSupported( + unicodeSupportMap, + emojiFixtureMap[emojiKey].moji, + emojiFixtureMap[emojiKey].unicodeVersion, + ); + expect(isSupported).toBeFalsy(); + }); + + it('use native keycap on >=57 chrome', () => { + const emojiKey = 'five'; + const unicodeSupportMap = Object.assign({}, emptySupportMap, { + '3.0': true, + meta: { + isChrome: true, + chromeVersion: 57, + }, + }); + const isSupported = isEmojiUnicodeSupported( + unicodeSupportMap, + emojiFixtureMap[emojiKey].moji, + emojiFixtureMap[emojiKey].unicodeVersion, + ); + expect(isSupported).toBeTruthy(); + }); + + it('fallback keycap on <57 chrome', () => { + const emojiKey = 'five'; + const unicodeSupportMap = Object.assign({}, emptySupportMap, { + '3.0': true, + meta: { + isChrome: true, + chromeVersion: 50, + }, + }); + const isSupported = isEmojiUnicodeSupported( + unicodeSupportMap, + emojiFixtureMap[emojiKey].moji, + emojiFixtureMap[emojiKey].unicodeVersion, + ); + expect(isSupported).toBeFalsy(); + }); + }); +}); -- cgit v1.2.1