test: add docs and test for customCategory

release
Nolan Lawson 2019-12-21 10:17:34 -08:00
parent 1a9d5f97b6
commit 7a025243b4
3 changed files with 50 additions and 2 deletions

View File

@ -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.

View File

@ -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')
})

View File

@ -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}