diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-20 15:26:25 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-20 15:26:25 +0300 |
commit | a09983ae35713f5a2bbb100981116d31ce99826e (patch) | |
tree | 2ee2af7bd104d57086db360a7e6d8c9d5d43667a /spec/frontend/emoji | |
parent | 18c5ab32b738c0b6ecb4d0df3994000482f34bd8 (diff) |
Add latest changes from gitlab-org/gitlab@13-2-stable-ee
Diffstat (limited to 'spec/frontend/emoji')
-rw-r--r-- | spec/frontend/emoji/emoji_spec.js | 382 | ||||
-rw-r--r-- | spec/frontend/emoji/support/unicode_support_map_spec.js | 52 |
2 files changed, 434 insertions, 0 deletions
diff --git a/spec/frontend/emoji/emoji_spec.js b/spec/frontend/emoji/emoji_spec.js new file mode 100644 index 00000000000..c6a15d5976a --- /dev/null +++ b/spec/frontend/emoji/emoji_spec.js @@ -0,0 +1,382 @@ +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import { initEmojiMap, glEmojiTag, EMOJI_VERSION } from '~/emoji'; +import isEmojiUnicodeSupported, { + isFlagEmoji, + isRainbowFlagEmoji, + isKeycapEmoji, + isSkinToneComboEmoji, + isHorceRacingSkinToneComboEmoji, + isPersonZwjEmoji, +} from '~/emoji/support/is_emoji_unicode_supported'; +import { trimText } from 'helpers/text_helper'; + +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', + }, + grey_question: { + name: 'grey_question', + moji: 'β', + unicodeVersion: '6.0', + }, +}; + +describe('gl_emoji', () => { + let mock; + const emojiData = getJSONFixture('emojis/emojis.json'); + + beforeEach(() => { + mock = new MockAdapter(axios); + mock.onGet(`/-/emojis/${EMOJI_VERSION}/emojis.json`).reply(200, emojiData); + + return initEmojiMap().catch(() => {}); + }); + + afterEach(() => { + mock.restore(); + }); + + describe('glEmojiTag', () => { + it('bomb emoji', () => { + const emojiKey = 'bomb'; + const markup = glEmojiTag(emojiFixtureMap[emojiKey].name); + + expect(trimText(markup)).toMatchInlineSnapshot( + `"<gl-emoji data-name=\\"bomb\\"></gl-emoji>"`, + ); + }); + + it('bomb emoji with sprite fallback readiness', () => { + const emojiKey = 'bomb'; + const markup = glEmojiTag(emojiFixtureMap[emojiKey].name, { + sprite: true, + }); + expect(trimText(markup)).toMatchInlineSnapshot( + `"<gl-emoji data-fallback-sprite-class=\\"emoji-bomb\\" data-name=\\"bomb\\"></gl-emoji>"`, + ); + }); + }); + + describe('isFlagEmoji', () => { + it('should gracefully handle empty string', () => { + expect(isFlagEmoji('')).toBeFalsy(); + }); + + 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('isRainbowFlagEmoji', () => { + it('should gracefully handle empty string', () => { + expect(isRainbowFlagEmoji('')).toBeFalsy(); + }); + + it('should detect rainbow_flag', () => { + expect(isRainbowFlagEmoji('π³π')).toBeTruthy(); + }); + + it("should not detect flag_white on its' own", () => { + expect(isRainbowFlagEmoji('π³')).toBeFalsy(); + }); + + it("should not detect rainbow on its' own", () => { + expect(isRainbowFlagEmoji('π')).toBeFalsy(); + }); + + it('should not detect flag_white with something else', () => { + expect(isRainbowFlagEmoji('π³π΅')).toBeFalsy(); + }); + }); + + describe('isKeycapEmoji', () => { + it('should gracefully handle empty string', () => { + expect(isKeycapEmoji('')).toBeFalsy(); + }); + + 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 gracefully handle empty string', () => { + expect(isSkinToneComboEmoji('')).toBeFalsy(); + }); + + 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 gracefully handle empty string', () => { + expect(isHorceRacingSkinToneComboEmoji('')).toBeFalsy(); + }); + + it('should detect horse_racing_tone2', () => { + expect(isHorceRacingSkinToneComboEmoji('ππΌ')).toBeTruthy(); + }); + + it('should not detect horse_racing', () => { + expect(isHorceRacingSkinToneComboEmoji('π')).toBeFalsy(); + }); + }); + + describe('isPersonZwjEmoji', () => { + it('should gracefully handle empty string', () => { + expect(isPersonZwjEmoji('')).toBeFalsy(); + }); + + 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('should gracefully handle empty string with unicode support', () => { + const isSupported = isEmojiUnicodeSupported({ '1.0': true }, '', '1.0'); + + expect(isSupported).toBeTruthy(); + }); + + it('should gracefully handle empty string without unicode support', () => { + const isSupported = isEmojiUnicodeSupported({}, '', '1.0'); + + expect(isSupported).toBeFalsy(); + }); + + it('bomb(6.0) with 6.0 support', () => { + const emojiKey = 'bomb'; + const unicodeSupportMap = { ...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 = { ...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 = { + ...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 = { + ...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 = { + ...emptySupportMap, + '3.0': true, + meta: { + isChrome: true, + chromeVersion: 50, + }, + }; + const isSupported = isEmojiUnicodeSupported( + unicodeSupportMap, + emojiFixtureMap[emojiKey].moji, + emojiFixtureMap[emojiKey].unicodeVersion, + ); + + expect(isSupported).toBeFalsy(); + }); + }); +}); diff --git a/spec/frontend/emoji/support/unicode_support_map_spec.js b/spec/frontend/emoji/support/unicode_support_map_spec.js new file mode 100644 index 00000000000..aaee9c30cac --- /dev/null +++ b/spec/frontend/emoji/support/unicode_support_map_spec.js @@ -0,0 +1,52 @@ +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(); + }); + }); + }); +}); |