fix: render custom category if only one exists (#173)

* fix: render custom category if only one exists

Fixes #172

* fix: simplify code

* fix: add comment

src/picker/components/Picker/Picker.html

@@ -121,16 +121,23 @@
       {#each currentEmojisWithCategories as emojiWithCategory, i (emojiWithCategory.category)}
         <div
           id="menu-label-{i}"
-          class="category {currentEmojisWithCategories.length > 1 ? '' : 'gone'}"
+          class="category {currentEmojisWithCategories.length === 1 && currentEmojisWithCategories[0].category === '' ? 'gone' : ''}"
           aria-hidden="true">
           <!-- This logic is a bit complicated in order to avoid a flash of the word "Custom" while switching
                from a tabpanel with custom emoji to a regular group. I.e. we don't want it to suddenly flash
-               from "Custom" to "Smileys and emoticons" when you click the second nav button. -->
-          {searchMode ? i18n.searchResultsLabel : (
-            emojiWithCategory.category ? emojiWithCategory.category : (
-              currentEmojisWithCategories.length > 1 ? i18n.categories.custom : i18n.categories[currentGroup.name]
+               from "Custom" to "Smileys and emoticons" when you click the second nav button. The easiest
+               way to repro this is to add an artificial delay to the IndexedDB operations. -->
+          {
+            searchMode ?
+            i18n.searchResultsLabel : (
+              emojiWithCategory.category ?
+              emojiWithCategory.category : (
+                currentEmojisWithCategories.length > 1 ?
+                  i18n.categories.custom :
+                  i18n.categories[currentGroup.name]
+              )
             )
-          )}
+          }
         </div>
         <div class="emoji-menu"
              role={searchMode ? 'listbox' : 'menu'}

test/spec/picker/Picker.test.js

@@ -469,4 +469,56 @@ describe('Picker tests', () => {
       ])
     ))
   })
+
+  test('Custom emoji with all the same category', async () => {
+    picker.customEmoji = [
+      {
+        name: 'sheep',
+        url: 'sheep.png',
+        category: 'Ungulates'
+      },
+      {
+        name: 'deer',
+        url: 'deer.png',
+        category: 'Ungulates'
+      },
+      {
+        name: 'pig',
+        url: 'pig.png',
+        category: 'Ungulates'
+      },
+      {
+        name: 'horse',
+        url: 'horse.png',
+        category: 'Ungulates'
+      },
+      {
+        name: 'donkey',
+        url: 'donkey.png',
+        category: 'Ungulates'
+      },
+      {
+        name: 'rhinoceros',
+        url: 'rhinoceros.png',
+        category: 'Ungulates'
+      }
+    ]
+
+    await waitFor(() => expect(getAllByRole('tab')).toHaveLength(groups.length + 1))
+    await waitFor(() => expect(getAllByRole('menu')).toHaveLength(2)) // favorites + 1 custom categories
+
+    await waitFor(async () => (
+      expect(
+        await Promise.all(getAllByRole('menu').map(node => getAccessibleName(container, node)))
+      ).toStrictEqual([
+        'Ungulates',
+        'Favorites'
+      ])
+    ))
+
+    // Visibility test, has nothing to do with accessibility. We visually show the label if there's a single category
+    // and it's not the default "Custom" one.
+    expect(container.querySelector('.category').textContent).toEqual('Ungulates')
+    expect(container.querySelector('.category')).not.toHaveClass('gone')
+  })
 })

test/spec/picker/custom.test.js

@@ -2,6 +2,7 @@ import { ALL_EMOJI, basicAfterEach, basicBeforeEach, tick } from '../shared'
 import { groups } from '../../../src/picker/groups'
 import Picker from '../../../src/picker/PickerElement'
 import { getAllByRole, getByRole, waitFor } from '@testing-library/dom'
+import { getAccessibleName } from '../utils'
 
 describe('Custom emojis tests', () => {
   beforeEach(basicBeforeEach)
@@ -32,6 +33,20 @@ describe('Custom emojis tests', () => {
 
     await waitFor(() => expect(getByRole(container, 'menuitem', { name: 'monkey' })).toBeVisible())
 
+    await waitFor(async () => (
+      expect(
+        await Promise.all(getAllByRole(container, 'menu').map(node => getAccessibleName(container, node)))
+      ).toStrictEqual([
+        'Custom',
+        'Favorites'
+      ])
+    ))
+
+    // Visibility test, has nothing to do with accessibility. We don't visually show the label if there's
+    // just one category and it's the default "Custom" one.
+    expect(container.querySelector('.category').textContent).toEqual('Custom')
+    expect(container.querySelector('.category')).toHaveClass('gone')
+
     document.body.removeChild(picker)
     await tick(20)
   })