test: add some tests

src/picker/categories.js

@@ -1,5 +1,6 @@
 // via https://unpkg.com/browse/emojibase-data@5.0.1/meta/groups.json
-export const categories = [
+const allCategories = [
+  [-1, '✨', 'custom'],
   [0, '😀', 'smileys-emotion'],
   [1, '👋', 'people-body'],
   [3, '🐱', 'animals-nature'],
@@ -10,3 +11,6 @@ export const categories = [
   [8, '⛔️', 'symbols'],
   [9, '🏁', 'flags']
 ].map(([group, emoji, name]) => ({ group, emoji, name }))
+
+export const categories = allCategories.slice(1)
+export const customCategory = allCategories[0]

src/picker/components/Picker/Picker.js

@@ -2,7 +2,7 @@
 
 import Database from '../../ImportedDatabase'
 import enI18n from '../../i18n/en'
-import { categories as defaultCategories } from '../../categories'
+import { categories as defaultCategories, customCategory } from '../../categories'
 import { DEFAULT_LOCALE, DEFAULT_DATA_SOURCE } from '../../../database/constants'
 import { MIN_SEARCH_TEXT_LENGTH, NUM_SKIN_TONES } from '../../../shared/constants'
 import { requestIdleCallback } from '../../utils/requestIdleCallback'
@@ -124,7 +124,7 @@ $: skinTones = Array(NUM_SKIN_TONES).fill().map((_, i) => skinToneTextForSkinTon
 
 $: {
   if (customEmoji && customEmoji.length) {
-    categories = [{ name: i18n.categories.custom, group: -1, emoji: '✨' }, ...defaultCategories]
+    categories = [customCategory, ...defaultCategories]
   } else if (categories !== defaultCategories) {
     categories = defaultCategories
   }

test/spec/picker/Picker.test.js

@@ -2,6 +2,7 @@ import { basicBeforeEach, basicAfterEach, ALL_EMOJI, truncatedEmoji, tick } from
 import * as testingLibrary from '@testing-library/dom'
 import Picker from '../../../src/picker/PickerElement.js'
 import userEvent from '@testing-library/user-event'
+import { categories } from '../../../src/picker/categories'
 
 const { waitFor, fireEvent } = testingLibrary
 const { type } = userEvent
@@ -43,7 +44,7 @@ describe('Picker tests', () => {
 
   test('basic picker test', async () => {
     await waitFor(() => expect(getByRole('button', { name: 'Choose a skin tone (currently Default)' })).toBeVisible())
-    expect(getAllByRole('tab')).toHaveLength(9)
+    expect(getAllByRole('tab')).toHaveLength(categories.length)
 
     expect(getByRole('tab', { name: 'Smileys and emoticons', selected: true })).toBeVisible()
     await waitFor(() => expect(

test/spec/picker/favorites.test.js

@@ -1,15 +1,20 @@
-import { waitFor, getByTestId, getAllByRole, getByRole, fireEvent } from '@testing-library/dom'
+import {
+  waitFor, getByTestId, getAllByRole,
+  getByRole, fireEvent, queryAllByRole
+} from '@testing-library/dom'
 import { basicAfterEach, basicBeforeEach, tick, truncatedEmoji } from '../shared'
 import Picker from '../../../src/picker/PickerElement'
 import allData from 'emojibase-data/en/data.json'
 import { MOST_COMMONLY_USED_EMOJI } from '../../../src/picker/constants'
 import { uniqBy } from '../../../src/shared/uniqBy'
+import { categories } from '../../../src/picker/categories'
 
 describe('Favorites UI', () => {
-  beforeEach(basicBeforeEach)
-  afterEach(basicAfterEach)
+  let picker
+  let container
 
-  test('Favorites UI basic test', async () => {
+  beforeEach(async () => {
+    basicBeforeEach()
     const dataSource = 'with-favs.json'
 
     const dataWithFavorites = uniqBy([
@@ -20,12 +25,20 @@ describe('Favorites UI', () => {
     fetch.get(dataSource, () => new Response(JSON.stringify(dataWithFavorites), { headers: { ETag: 'W/favs' } }))
     fetch.head(dataSource, () => new Response(null, { headers: { ETag: 'W/favs' } }))
 
-    const picker = new Picker({ dataSource, locale: 'en' })
+    picker = new Picker({ dataSource, locale: 'en' })
     document.body.appendChild(picker)
-    const container = picker.shadowRoot.querySelector('.picker')
+    container = picker.shadowRoot.querySelector('.picker')
 
     await tick(20)
+  })
+  afterEach(async () => {
+    basicAfterEach()
+    await tick(20)
+    await picker.database.delete()
+    document.body.removeChild(picker)
+  })
 
+  test('Favorites UI basic test', async () => {
     // using a testId because testing-library seems to think role=menu has no aria-label
     const favoritesBar = getByTestId(container, 'favorites')
     expect(favoritesBar).toBeVisible()
@@ -40,9 +53,57 @@ describe('Favorites UI', () => {
       ...MOST_COMMONLY_USED_EMOJI.slice(0, 7)
     ]
     ))
+  })
 
-    await tick(20)
-    await picker.database.delete()
-    document.body.removeChild(picker)
+  test('Favorites with custom emoji', async () => {
+    const transparent = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+    const black = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs='
+
+    const customEmoji = [
+      {
+        name: 'transparent',
+        shortcodes: ['transparent'],
+        url: transparent
+      },
+      {
+        name: 'black',
+        shortcodes: ['black'],
+        url: black
+      }
+    ]
+
+    await waitFor(() => expect(getAllByRole(container, 'tab')).toHaveLength(categories.length))
+
+    // when setting custom emoji, they can appear in the favorites
+
+    picker.customEmoji = customEmoji
+
+    await waitFor(() => expect(getAllByRole(container, 'tab')).toHaveLength(categories.length + 1))
+
+    expect(getByRole(container, 'tab', { name: 'Custom', selected: true })).toBeVisible()
+    await waitFor(() => expect(getByRole(container, 'menuitem', { name: /transparent/i })).toBeVisible())
+
+    fireEvent.click(getByRole(container, 'menuitem', { name: /transparent/i }))
+    fireEvent.click(getByRole(container, 'menuitem', { name: /black/i }))
+
+    await waitFor(
+      () => expect(getByRole(getByTestId(container, 'favorites'), 'menuitem', { name: /transparent/i })).toBeVisible
+    )
+
+    await waitFor(
+      () => expect(getByRole(getByTestId(container, 'favorites'), 'menuitem', { name: /black/i })).toBeVisible
+    )
+
+    // when setting custom emoji back to [], the favorites bar removes the custom emoji
+    picker.customEmoji = []
+
+    await waitFor(() => expect(getAllByRole(container, 'tab')).toHaveLength(categories.length))
+
+    await waitFor(
+      () => expect(queryAllByRole(getByTestId(container, 'favorites'), 'menuitem', { name: /transparent/i })).toHaveLength(0)
+    )
+    await waitFor(
+      () => expect(queryAllByRole(getByTestId(container, 'favorites'), 'menuitem', { name: /black/i })).toHaveLength(0)
+    )
   })
 })