feat: emoji v16.0

README.md

@@ -11,7 +11,7 @@ A lightweight emoji picker, distributed as a web component.
 
 **Features:**
 
-- Supports [Emoji v15.1](https://emojipedia.org/emoji-15.1/) (depending on OS) and custom emoji
+- Supports [Emoji v16.0](https://emojipedia.org/emoji-16.0) (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) (~12.5kB min+gz)
 - Renders native emoji by default, with support for custom fonts

bin/versionsAndTestEmoji.js

@@ -8,6 +8,7 @@
 // "face without mouth" plus "fog".) These emoji can only be filtered using the width test,
 // which happens in checkZwjSupport.js.
 export const versionsAndTestEmoji = {
+  '🫩': 16, // face with bags under eyes
   '🫨': 15.1, // shaking head, technically from v15 but see note above
   '🫠': 14,
   '🥲': 13.1, // smiling face with tear, technically from v13 but see note above

package.json

@@ -94,7 +94,7 @@
     "conventional-changelog-cli": "^5.0.0",
     "cross-env": "^7.0.3",
     "csso": "^5.0.5",
-    "emoji-picker-element-data": "^1.6.1",
+    "emoji-picker-element-data": "^1.7.0",
     "emojibase-data": "^5.1.1",
     "express": "^4.21.1",
     "fake-indexeddb": "^6.0.0",

test/spec/database/Database.test.js

@@ -218,8 +218,9 @@ describe('database tests', () => {
     expect(thumbsUp[0].skins[0].unicode).toBeTruthy()
     expect(thumbsUp[0].skins[0].version).toBeTruthy()
     expect(thumbsUp[0].shortcodes).toContain('thumbsup')
-    const grinningFace = await db.getEmojiBySearchQuery('grinning face with smiling eyes')
-    expect(grinningFace[0].emoticon).toEqual(':D')
+    const grinningFace = (await db.getEmojiBySearchQuery('grinning face with smiling eyes'))
+      .find(_ => _.unicode === '😄')
+    expect(grinningFace.emoticon).toEqual(':D')
     await db.delete()
   })
 

test/spec/database/custom.test.js

@@ -108,7 +108,8 @@ describe('custom emoji', () => {
     expect((await db.getEmojiBySearchQuery('monkey')).map(summarize)).toStrictEqual([
       { name: 'monkey', shortcodes: ['monkey'], url: 'monkey.png' },
       summaryByUnicode('🐵'),
-      summaryByUnicode('🐒')
+      summaryByUnicode('🐒'),
+      summaryByUnicode('🦧')
     ])
 
     expect((await db.getEmojiBySearchQuery('undersc'))).toStrictEqual([

test/spec/database/getEmojiBySearchQuery.test.js

@@ -53,25 +53,29 @@ describe('getEmojiBySearchQuery', () => {
     expectToBeSorted(results)
     expect(results.map(_ => omit(_, ['order']))).toStrictEqual([
       { annotation: 'monkey face' },
-      { annotation: 'monkey' }
+      { annotation: 'monkey' },
+      { annotation: 'orangutan' }
     ])
     results = await search('monkey')
     expectToBeSorted(results)
     expect(results.map(_ => omit(_, ['order']))).toStrictEqual([
       { annotation: 'monkey face' },
-      { annotation: 'monkey' }
+      { annotation: 'monkey' },
+      { annotation: 'orangutan' }
     ])
     results = await search('monkey')
     expectToBeSorted(results)
     expect(results.map(_ => omit(_, ['order']))).toStrictEqual([
       { annotation: 'monkey face' },
-      { annotation: 'monkey' }
+      { annotation: 'monkey' },
+      { annotation: 'orangutan' }
     ])
     results = await search('MoNkEy')
     expectToBeSorted(results)
     expect(results.map(_ => omit(_, ['order']))).toStrictEqual([
       { annotation: 'monkey face' },
-      { annotation: 'monkey' }
+      { annotation: 'monkey' },
+      { annotation: 'orangutan' }
     ])
     results = await search('monkey fac')
     expect(results.map(_ => omit(_, ['order']))).toStrictEqual([

test/spec/picker/Picker.test.js

@@ -71,10 +71,11 @@ describe('Picker tests', () => {
     expect(queryAllByRole('tab', { selected: true })).toHaveLength(1) // one tab selected at first
     await type(getByRole('combobox'), 'monk')
 
-    await waitFor(() => expect(getAllByRole('option')).toHaveLength(2))
+    await waitFor(() => expect(getAllByRole('option')).toHaveLength(3))
 
     expect(getByRole('option', { name: /🐵/ })).toBeVisible()
     expect(getByRole('option', { name: /🐒/ })).toBeVisible()
+    expect(getByRole('option', { name: /🦧/ })).toBeVisible()
     expect(queryAllByRole('tab', { selected: true })).toHaveLength(0) // no tabs selected when searching
   })
 
@@ -242,7 +243,20 @@ describe('Picker tests', () => {
         annotation: 'grinning face',
         group: 0,
         shortcodes: ['grinning', 'grinning_face'],
-        tags: ['face', 'grin'],
+        tags: [
+          'cheerful',
+          'cheery',
+          'face',
+          'grin',
+          'grinning',
+          'happy',
+          'laugh',
+          'nice',
+          'smile',
+          'smiling',
+          'teeth'
+
+        ],
         unicode: '😀',
         version: 1
       },
@@ -265,7 +279,7 @@ describe('Picker tests', () => {
         annotation: 'thumbs up',
         group: 1,
         shortcodes: ['+1', 'thumbsup', 'yes'],
-        tags: ['+1', 'hand', 'thumb', 'up'],
+        tags: ['+1', 'good', 'hand', 'like', 'thumb', 'up', 'yes'],
         unicode: '👍️',
         version: 0.6,
         skins: [
@@ -289,7 +303,19 @@ describe('Picker tests', () => {
         annotation: 'grinning face',
         group: 0,
         shortcodes: ['grinning', 'grinning_face'],
-        tags: ['face', 'grin'],
+        tags: [
+          'cheerful',
+          'cheery',
+          'face',
+          'grin',
+          'grinning',
+          'happy',
+          'laugh',
+          'nice',
+          'smile',
+          'smiling',
+          'teeth'
+        ],
         unicode: '😀',
         version: 1
       },
@@ -300,7 +326,7 @@ describe('Picker tests', () => {
 
   test('press up/down on search input', async () => {
     type(getByRole('combobox'), 'monk')
-    await waitFor(() => expect(getAllByRole('option')).toHaveLength(2))
+    await waitFor(() => expect(getAllByRole('option')).toHaveLength(3))
 
     const pressKeyAndExpectAriaDescendant = async (key, emoji) => {
       await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve))) // delay
@@ -313,8 +339,12 @@ describe('Picker tests', () => {
 
     await pressKeyAndExpectAriaDescendant('ArrowDown', '🐵')
     await pressKeyAndExpectAriaDescendant('ArrowDown', '🐒')
-    await pressKeyAndExpectAriaDescendant('ArrowUp', '🐵')
+    await pressKeyAndExpectAriaDescendant('ArrowDown', '🦧')
+    await pressKeyAndExpectAriaDescendant('ArrowDown', '🐵')
+    await pressKeyAndExpectAriaDescendant('ArrowUp', '🦧')
     await pressKeyAndExpectAriaDescendant('ArrowUp', '🐒')
+    await pressKeyAndExpectAriaDescendant('ArrowUp', '🐵')
+    await pressKeyAndExpectAriaDescendant('ArrowDown', '🐒')
 
     let emoji
     picker.addEventListener('emoji-click', event => {
@@ -327,7 +357,7 @@ describe('Picker tests', () => {
         annotation: 'monkey',
         group: 3,
         shortcodes: ['monkey'],
-        tags: ['monkey'],
+        tags: ['animal', 'banana'],
         unicode: '🐒',
         version: 0.6
       },

test/spec/picker/favorites.test.js

@@ -136,7 +136,7 @@ describe('Favorites UI', () => {
 
   test('press down on search input - does not affect favorites', async () => {
     type(getByRole(container, 'combobox'), 'monk')
-    await waitFor(() => expect(getAllByRole(container, 'option')).toHaveLength(2))
+    await waitFor(() => expect(getAllByRole(container, 'option')).toHaveLength(3))
 
     const pressKeyAndExpectAriaDescendant = async (key, emoji) => {
       await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve))) // delay

test/spec/picker/scrolling.test.js

@@ -69,7 +69,7 @@ describe('scrolling', () => {
 
     await userEvent.type(getByRole(container, 'combobox'), 'monkey')
 
-    await waitFor(() => expect(getAllByRole(container, 'option')).toHaveLength(2))
+    await waitFor(() => expect(getAllByRole(container, 'option')).toHaveLength(3))
     expect(getByRole(container, 'option', { name: /🐵/ })).toBeVisible()
 
     await tick(100)