From 08018ce791a33a771bc62b9301d1c12ff4937218 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sat, 7 Dec 2024 11:28:32 -0800 Subject: [PATCH] feat: emoji v16.0 (#479) --- README.md | 2 +- bin/versionsAndTestEmoji.js | 1 + package.json | 2 +- pnpm-lock.yaml | 10 ++--- test/spec/database/Database.test.js | 5 ++- test/spec/database/custom.test.js | 3 +- .../database/getEmojiBySearchQuery.test.js | 12 +++-- test/spec/picker/Picker.test.js | 44 ++++++++++++++++--- test/spec/picker/favorites.test.js | 2 +- test/spec/picker/scrolling.test.js | 2 +- 10 files changed, 60 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 633248de..dfda43a5 100644 --- a/README.md +++ b/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 diff --git a/bin/versionsAndTestEmoji.js b/bin/versionsAndTestEmoji.js index 91c9c7b4..a29ceb0b 100644 --- a/bin/versionsAndTestEmoji.js +++ b/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 diff --git a/package.json b/package.json index b7158372..5bd982ba 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 87771072..7f118729 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -60,8 +60,8 @@ importers: specifier: ^5.0.5 version: 5.0.5 emoji-picker-element-data: - specifier: ^1.6.1 - version: 1.6.1 + specifier: ^1.7.0 + version: 1.7.0 emojibase-data: specifier: ^5.1.1 version: 5.1.1(emojibase@15.3.0) @@ -1589,8 +1589,8 @@ packages: electron-to-chromium@1.5.36: resolution: {integrity: sha512-HYTX8tKge/VNp6FGO+f/uVDmUkq+cEfcxYhKf15Akc4M5yxt5YmorwlAitKWjWhWQnKcDRBAQKXkhqqXMqcrjw==} - emoji-picker-element-data@1.6.1: - resolution: {integrity: sha512-VYXjjqWYy12/uUA3q5X6Di0zROXp8TGwPiikXkhs97n3d3q3OaRV2sxGtUUColoSMPp5lfASZB9E4W+yN40qUg==} + emoji-picker-element-data@1.7.0: + resolution: {integrity: sha512-xHdElfOSsXrj3p6+4q9n1h+EQwWvtKZmGl19stQuyGY1tVAbk7W9J6INAUSB467jaw3BFkQ4Yj/TVHCO35SlnQ==} 'emoji-picker-element@file:': resolution: {directory: '', type: directory} @@ -5706,7 +5706,7 @@ snapshots: electron-to-chromium@1.5.36: {} - emoji-picker-element-data@1.6.1: {} + emoji-picker-element-data@1.7.0: {} 'emoji-picker-element@file:': {} diff --git a/test/spec/database/Database.test.js b/test/spec/database/Database.test.js index 69e3d009..7358497a 100644 --- a/test/spec/database/Database.test.js +++ b/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() }) diff --git a/test/spec/database/custom.test.js b/test/spec/database/custom.test.js index 0e5adcf8..ced065fa 100644 --- a/test/spec/database/custom.test.js +++ b/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([ diff --git a/test/spec/database/getEmojiBySearchQuery.test.js b/test/spec/database/getEmojiBySearchQuery.test.js index d4713ac1..1b3b396d 100644 --- a/test/spec/database/getEmojiBySearchQuery.test.js +++ b/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([ diff --git a/test/spec/picker/Picker.test.js b/test/spec/picker/Picker.test.js index e971ca6b..ca900f37 100644 --- a/test/spec/picker/Picker.test.js +++ b/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 }, diff --git a/test/spec/picker/favorites.test.js b/test/spec/picker/favorites.test.js index 579c7ea0..edf6514d 100644 --- a/test/spec/picker/favorites.test.js +++ b/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 diff --git a/test/spec/picker/scrolling.test.js b/test/spec/picker/scrolling.test.js index 02fffc82..d19ea138 100644 --- a/test/spec/picker/scrolling.test.js +++ b/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)