feat: support emoji 13.1 (#114)

* feat: support emoji 13.1 * docs: update readme * chore: update emoji-picker-element-data * test: fix tests
2021-01-18 15:07:41 -08:00 · 2021-01-18 15:07:41 -08:00 · 4b5d4e39df
parent 5965d3c549
commit 4b5d4e39df
8 changed files with 88 additions and 66 deletions
--- a/README.md
+++ b/README.md
@ -11,7 +11,7 @@ A lightweight emoji picker, distributed as a web component.

 **Features:**

- Supports [Emoji v13](https://emojipedia.org/emoji-13.0/) (depending on OS) and custom emoji
+- Supports [Emoji v13.1](https://emojipedia.org/emoji-13.1/) (depending on OS) and custom emoji
 - Uses IndexedDB, so it consumes [far less memory](https://nolanlawson.com/2020/06/28/introducing-emoji-picker-element-a-memory-efficient-emoji-picker-for-the-web/) than other emoji pickers
 - [Small bundle size](https://bundlephobia.com/result?p=emoji-picker-element) (41kB minified, ~14.4kB gzipped)
 - Renders native emoji only, no spritesheets
--- a/bin/versionsAndTestEmoji.js
+++ b/bin/versionsAndTestEmoji.js
@ -11,5 +11,6 @@ export const versionsAndTestEmoji = {
  '🥰': 11, // smiling face with hearts
  '🥻': 12, // sari
  '🧑‍🦰': 12.1, // person: red hair
-  '🥲': 13 // smiling face with tear
+  '🥲': 13, // smiling face with tear
+  '😵‍💫': 13.1 // face with spiral eyes
 }
--- a/package.json
+++ b/package.json
@ -82,7 +82,7 @@
    "conventional-changelog-cli": "^2.1.1",
    "cssnano": "^4.1.10",
    "d2l-resize-aware": "BrightspaceUI/resize-aware#semver:^1.2.2",
-    "emoji-picker-element-data": "^1.0.0",
+    "emoji-picker-element-data": "^1.1.0",
    "emojibase-data": "^5.1.1",
    "express": "^4.17.1",
    "fake-indexeddb": "^3.1.2",
--- a/test/spec/database/Database.test.js
+++ b/test/spec/database/Database.test.js
@ -196,7 +196,7 @@ describe('database tests', () => {
    expect(thumbsUp[0].skins[0].tone).toBeTruthy()
    expect(thumbsUp[0].skins[0].unicode).toBeTruthy()
    expect(thumbsUp[0].skins[0].version).toBeTruthy()
-    expect(thumbsUp[0].shortcodes[0]).toEqual('thumbsup')
+    expect(thumbsUp[0].shortcodes).toContain('thumbsup')
    const grinningFace = await db.getEmojiBySearchQuery('grinning_face')
    expect(grinningFace[0].emoticon).toEqual(':D')
    await db.delete()
--- a/test/spec/database/getEmojiBySearchQuery.test.js
+++ b/test/spec/database/getEmojiBySearchQuery.test.js
@ -1,8 +1,14 @@
 import allEmoji from 'emoji-picker-element-data/en/emojibase/data.json'
 import Database from '../../../src/database/Database'
-import { pick } from 'lodash-es'
+import { pick, omit } from 'lodash-es'
 import { basicAfterEach, basicBeforeEach, ALL_EMOJI, truncatedEmoji } from '../shared'

+// order can change from version to version
+const expectToBeSorted = results => {
+  const orders = results.map(_ => _.order)
+  expect(orders.sort()).toStrictEqual(orders)
+}
+
 describe('getEmojiBySearchQuery', () => {
  beforeEach(basicBeforeEach)
  afterEach(basicAfterEach)
@ -10,57 +16,69 @@ describe('getEmojiBySearchQuery', () => {
    const db = new Database({ dataSource: ALL_EMOJI })
    await db.ready()
    const search = async query => (await db.getEmojiBySearchQuery(query)).map(_ => pick(_, ['annotation', 'order']))
-    expect(await search('face')).toStrictEqual([
-      { annotation: 'grinning face', order: 1 },
-      { annotation: 'grinning face with big eyes', order: 2 },
-      { annotation: 'grinning face with smiling eyes', order: 3 },
-      { annotation: 'beaming face with smiling eyes', order: 4 },
-      { annotation: 'grinning squinting face', order: 5 },
-      { annotation: 'grinning face with sweat', order: 6 },
-      { annotation: 'rolling on the floor laughing', order: 7 },
-      { annotation: 'face with tears of joy', order: 8 },
-      { annotation: 'slightly smiling face', order: 9 },
-      { annotation: 'upside-down face', order: 10 },
-      { annotation: 'winking face', order: 11 },
-      { annotation: 'smiling face with smiling eyes', order: 12 },
-      { annotation: 'smiling face with halo', order: 13 },
-      { annotation: 'smiling face with hearts', order: 14 },
-      { annotation: 'smiling face with heart-eyes', order: 15 },
-      { annotation: 'star-struck', order: 16 },
-      { annotation: 'face blowing a kiss', order: 17 },
-      { annotation: 'kissing face', order: 18 },
-      { annotation: 'smiling face', order: 20 },
-      { annotation: 'kissing face with closed eyes', order: 21 },
-      { annotation: 'monkey face', order: 2657 },
-      { annotation: 'dog face', order: 2661 },
-      { annotation: 'wolf', order: 2666 },
-      { annotation: 'fox', order: 2667 },
-      { annotation: 'cat face', order: 2669 },
-      { annotation: 'lion', order: 2672 },
-      { annotation: 'tiger face', order: 2673 },
-      { annotation: 'horse face', order: 2676 }
+    let results = await search('face')
+    expectToBeSorted(results)
+    expect(results.map(_ => omit(_, ['order']))).toStrictEqual([
+      { annotation: 'grinning face' },
+      { annotation: 'grinning face with big eyes' },
+      { annotation: 'grinning face with smiling eyes' },
+      { annotation: 'beaming face with smiling eyes' },
+      { annotation: 'grinning squinting face' },
+      { annotation: 'grinning face with sweat' },
+      { annotation: 'rolling on the floor laughing' },
+      { annotation: 'face with tears of joy' },
+      { annotation: 'slightly smiling face' },
+      { annotation: 'upside-down face' },
+      { annotation: 'winking face' },
+      { annotation: 'smiling face with smiling eyes' },
+      { annotation: 'smiling face with halo' },
+      { annotation: 'smiling face with hearts' },
+      { annotation: 'smiling face with heart-eyes' },
+      { annotation: 'star-struck' },
+      { annotation: 'face blowing a kiss' },
+      { annotation: 'kissing face' },
+      { annotation: 'smiling face' },
+      { annotation: 'kissing face with closed eyes' },
+      { annotation: 'monkey face' },
+      { annotation: 'dog face' },
+      { annotation: 'wolf' },
+      { annotation: 'fox' },
+      { annotation: 'cat face' },
+      { annotation: 'lion' },
+      { annotation: 'tiger face' },
+      { annotation: 'horse face' }
    ])
-    expect(await search('monk')).toStrictEqual([
-      { annotation: 'monkey face', order: 2657 },
-      { annotation: 'monkey', order: 2658 }
+    results = await search('monk')
+    expectToBeSorted(results)
+    expect(results.map(_ => omit(_, ['order']))).toStrictEqual([
+      { annotation: 'monkey face' },
+      { annotation: 'monkey' }
    ])
-    expect(await search('monkey')).toStrictEqual([
-      { annotation: 'monkey face', order: 2657 },
-      { annotation: 'monkey', order: 2658 }
+    results = await search('monkey')
+    expectToBeSorted(results)
+    expect(results.map(_ => omit(_, ['order']))).toStrictEqual([
+      { annotation: 'monkey face' },
+      { annotation: 'monkey' }
    ])
-    expect(await search('monkey')).toStrictEqual([
-      { annotation: 'monkey face', order: 2657 },
-      { annotation: 'monkey', order: 2658 }
+    results = await search('monkey')
+    expectToBeSorted(results)
+    expect(results.map(_ => omit(_, ['order']))).toStrictEqual([
+      { annotation: 'monkey face' },
+      { annotation: 'monkey' }
    ])
-    expect(await search('MoNkEy')).toStrictEqual([
-      { annotation: 'monkey face', order: 2657 },
-      { annotation: 'monkey', order: 2658 }
+    results = await search('MoNkEy')
+    expectToBeSorted(results)
+    expect(results.map(_ => omit(_, ['order']))).toStrictEqual([
+      { annotation: 'monkey face' },
+      { annotation: 'monkey' }
    ])
-    expect(await search('monkey fac')).toStrictEqual([
-      { annotation: 'monkey face', order: 2657 }
+    results = await search('monkey fac')
+    expect(results.map(_ => omit(_, ['order']))).toStrictEqual([
+      { annotation: 'monkey face' }
    ])
-    expect(await search('face monk')).toStrictEqual([
-      { annotation: 'monkey face', order: 2657 }
+    results = await search('face monk')
+    expect(results.map(_ => omit(_, ['order']))).toStrictEqual([
+      { annotation: 'monkey face' }
    ])
    expect((await search('face monk'))[0].tokens).toBeFalsy()
    expect(await search('monkey facee')).toStrictEqual([])
--- a/test/spec/picker/Picker.test.js
+++ b/test/spec/picker/Picker.test.js
@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event'
 import { groups } from '../../../src/picker/groups'
 import Database from '../../../src/database/Database'
 import { getAccessibleName } from '../utils'
-import { openSkintoneListbox } from './shared'
+import { checkEmojiEquals, openSkintoneListbox } from './shared'

 const { waitFor, fireEvent } = testingLibrary
 const { type } = userEvent
@ -212,12 +212,11 @@ describe('Picker tests', () => {
    })

    getByRole('menuitem', { name: /😀/ }).click()
-    await waitFor(() => expect(emoji).toStrictEqual({
+    await waitFor(() => checkEmojiEquals(emoji, {
      emoji: {
        annotation: 'grinning face',
        group: 0,
-        order: 1,
-        shortcodes: ['grinning_face', 'grinning'],
+        shortcodes: ['grinning', 'grinning_face'],
        tags: ['face', 'grin'],
        unicode: '😀',
        version: 1,
@ -237,12 +236,11 @@ describe('Picker tests', () => {
    getByRole('tab', { name: /People/ }).click()
    await waitFor(() => expect(getByRole('menuitem', { name: /👍/ })).toBeVisible())
    getByRole('menuitem', { name: /👍/ }).click()
-    await waitFor(() => expect(emoji).toStrictEqual({
+    await waitFor(() => checkEmojiEquals(emoji, {
      emoji: {
        annotation: 'thumbs up',
        group: 1,
-        order: 280,
-        shortcodes: ['thumbsup', 'yes', '+1'],
+        shortcodes: ['+1', 'thumbsup', 'yes'],
        tags: ['+1', 'hand', 'thumb', 'up'],
        unicode: '👍️',
        version: 0.6,
@ -262,12 +260,11 @@ describe('Picker tests', () => {
    getByRole('tab', { name: /Smileys/ }).click()
    await waitFor(() => expect(getByRole('menuitem', { name: /😀/ })).toBeVisible())
    getByRole('menuitem', { name: /😀/ }).click()
-    await waitFor(() => expect(emoji).toStrictEqual({
+    await waitFor(() => checkEmojiEquals(emoji, {
      emoji: {
        annotation: 'grinning face',
        group: 0,
-        order: 1,
-        shortcodes: ['grinning_face', 'grinning'],
+        shortcodes: ['grinning', 'grinning_face'],
        tags: ['face', 'grin'],
        unicode: '😀',
        version: 1,
@ -302,11 +299,10 @@ describe('Picker tests', () => {
    })

    fireEvent.keyDown(activeElement(), { key: 'Enter', code: 'Enter' })
-    await waitFor(() => expect(emoji).toStrictEqual({
+    await waitFor(() => checkEmojiEquals(emoji, {
      emoji: {
        annotation: 'monkey',
        group: 3,
-        order: 2658,
        shortcodes: ['monkey'],
        tags: ['monkey'],
        unicode: '🐒',
--- a/test/spec/picker/shared.js
+++ b/test/spec/picker/shared.js
@ -17,3 +17,10 @@ export async function openSkintoneListbox (container) {
  // https://github.com/jsdom/jsdom/issues/1781#issuecomment-467935000
  fireEvent(getByRole(container, 'listbox', { name: 'Skin tones' }), new Event('transitionend'))
 }
+
+export function checkEmojiEquals (actual, expected) {
+  actual = JSON.parse(JSON.stringify(actual))
+  expect(actual.emoji.order).toBeGreaterThan(0)
+  delete actual.emoji.order // could change from version to version
+  expect(actual).toStrictEqual(expected)
+}
--- a/yarn.lock
+++ b/yarn.lock
@ -3747,10 +3747,10 @@ emittery@^0.7.1:
  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.1.tgz#c02375a927a40948c0345cc903072597f5270451"
  integrity sha512-d34LN4L6h18Bzz9xpoku2nPwKxCPlPMr3EEKTkoEBi+1/+b0lcRkRJ1UVyyZaKNeqGR3swcGl6s390DNO4YVgQ==

-emoji-picker-element-data@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/emoji-picker-element-data/-/emoji-picker-element-data-1.0.0.tgz#1e9c4b399ce6e1858514df4c25b65284d981f92f"
-  integrity sha512-Ch6Ibuc2DJAh9MMyaH0hxsfkCoGAkYVWf9i1JC30PsaC4L9rmS7LMvu1iR396NHecdMYToJEQEOneatPVGe/IQ==
+emoji-picker-element-data@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/emoji-picker-element-data/-/emoji-picker-element-data-1.1.0.tgz#d4a7ffdab958dda5b97aa44c7dcf1dbb82281c05"
+  integrity sha512-DUyy243WcRpdRAfzJIkpdhHtT3bUQ0GC3tro0c6xRPQb82NSmZTCFyP6OtYR6MBCUu67O2Sr6xpnY3GtJA1Q8Q==

 emoji-regex@^7.0.1:
  version "7.0.3"