From 7a025243b464e58d8fc3ad93564a940ec0e16b89 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 21 Dec 2019 10:17:34 -0800
Subject: [PATCH] test: add docs and test for customCategory

---
 README.md                                     |  6 +++-
 .../picker/__tests__/nimble-picker.test.js    | 33 +++++++++++++++++++
 stories/index.js                              | 13 +++++++-
 3 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index b795e8e..267e399 100644
--- a/README.md
+++ b/README.md
@@ -246,7 +246,8 @@ const customEmojis = [
     text: '',
     emoticons: [],
     keywords: ['github'],
-    imageUrl: 'https://github.githubassets.com/images/icons/emoji/octocat.png'
+    imageUrl: 'https://github.githubassets.com/images/icons/emoji/octocat.png',
+    customCategory: 'GitHub'
   },
   {
     name: 'Test Flag',
@@ -266,6 +267,9 @@ const customEmojis = [
 <Picker custom={customEmojis} />
 ```
 
+The `customCategory` string is optional. If you include it, then the custom emoji will be shown in whatever
+categories you define. If you don't include it, then there will just be one category called "Custom."
+
 ## Not Found
 You can provide a custom Not Found object which will allow the appearance of the not found search results to change. In this case, we change the default 'sleuth_or_spy' emoji to Octocat when our search finds no results.
 
diff --git a/src/components/picker/__tests__/nimble-picker.test.js b/src/components/picker/__tests__/nimble-picker.test.js
index 484ddfb..ac861ea 100644
--- a/src/components/picker/__tests__/nimble-picker.test.js
+++ b/src/components/picker/__tests__/nimble-picker.test.js
@@ -57,7 +57,40 @@ test('with custom emoji and tooltip', () => {
     autoFocus: true,
     custom,
   })
+  expect(subject.categories.length).toEqual(11)
+  expect(subject.categories[10].name).toEqual('Custom')
   subject.handleSearch(
     new NimbleEmojiIndex(subject.data).search('custom_', { custom }),
   )
 })
+
+test('with custom categories', () => {
+  const custom = [
+    {
+      id: 'custom_name',
+      name: 'custom_name',
+      short_names: ['custom_name'],
+      text: '',
+      emoticons: [],
+      keywords: ['custom_name'],
+      imageUrl: 'https://example.com/emoji',
+      custom: true,
+      customCategory: 'Category 1',
+    },
+    {
+      id: 'custom_name2',
+      name: 'custom_name2',
+      short_names: ['custom_name2'],
+      text: '',
+      emoticons: [],
+      keywords: ['custom_name2'],
+      imageUrl: 'https://example.com/emoji',
+      custom: true,
+      customCategory: 'Category 2',
+    },
+  ]
+  const subject = render({ custom })
+  expect(subject.categories.length).toEqual(12)
+  expect(subject.categories[10].name).toEqual('Category 1')
+  expect(subject.categories[11].name).toEqual('Category 2')
+})
diff --git a/stories/index.js b/stories/index.js
index 09fbc88..18c9f26 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -22,7 +22,6 @@ const CUSTOM_EMOJIS = [
     short_names: ['octocat'],
     keywords: ['github'],
     imageUrl: 'https://github.githubassets.com/images/icons/emoji/octocat.png',
-    customCategory: 'GitHub',
   },
   {
     name: 'Squirrel',
@@ -32,6 +31,12 @@ const CUSTOM_EMOJIS = [
   },
 ]
 
+const CUSTOM_EMOJIS_WITH_CATEGORIES = CUSTOM_EMOJIS.map(emoji => {
+  return Object.assign({}, emoji, {
+    customCategory: emoji.name === 'Squirrel' ? 'Mammals' : 'Mollusks'
+  })
+})
+
 storiesOf('Picker', module)
   .addDecorator(withKnobs)
   .add('Default', () => (
@@ -63,6 +68,12 @@ storiesOf('Picker', module)
     />
   ))
 
+  .add('Custom categories', () => (
+    <Picker
+      custom={CUSTOM_EMOJIS_WITH_CATEGORIES}
+    />
+  ))
+
   .add('Custom category icons', () => (
     <Picker
       custom={CUSTOM_EMOJIS}