diff --git a/src/__tests__/__snapshots__/pages.spec.js.snap b/src/__tests__/__snapshots__/pages.spec.js.snap
index 74b52f5..663cd13 100644
--- a/src/__tests__/__snapshots__/pages.spec.js.snap
+++ b/src/__tests__/__snapshots__/pages.spec.js.snap
@@ -473,7 +473,7 @@ exports[`Pages Index should render the page 1`] = `
className="searchInput"
name="searchInput"
onChange={[Function]}
- placeholder="Search a Gitmoji by :code:"
+ placeholder="Search your gitmoji..."
type="text"
value={null}
/>
diff --git a/src/components/GitmojiList/Toolbar/index.js b/src/components/GitmojiList/Toolbar/index.js
index bb3c638..b234d1c 100644
--- a/src/components/GitmojiList/Toolbar/index.js
+++ b/src/components/GitmojiList/Toolbar/index.js
@@ -14,7 +14,7 @@ const Toolbar = (props: Props): Element<'div'> => (
className={styles.searchInput}
name="searchInput"
onChange={(event) => props.setSearchInput(event.target.value)}
- placeholder="Search a Gitmoji by :code:"
+ placeholder="Search your gitmoji..."
type="text"
value={props.searchInput}
/>
diff --git a/src/components/GitmojiList/__tests__/__snapshots__/gitmojiList.spec.js.snap b/src/components/GitmojiList/__tests__/__snapshots__/gitmojiList.spec.js.snap
index 3d61f32..dc7ec75 100644
--- a/src/components/GitmojiList/__tests__/__snapshots__/gitmojiList.spec.js.snap
+++ b/src/components/GitmojiList/__tests__/__snapshots__/gitmojiList.spec.js.snap
@@ -18,7 +18,7 @@ exports[`GitmojiList should render the component 1`] = `
className="searchInput"
name="searchInput"
onChange={[Function]}
- placeholder="Search a Gitmoji by :code:"
+ placeholder="Search your gitmoji..."
type="text"
value={null}
/>
diff --git a/src/components/GitmojiList/__tests__/gitmojiList.spec.js b/src/components/GitmojiList/__tests__/gitmojiList.spec.js
index ad937e2..43e001c 100644
--- a/src/components/GitmojiList/__tests__/gitmojiList.spec.js
+++ b/src/components/GitmojiList/__tests__/gitmojiList.spec.js
@@ -9,15 +9,28 @@ describe('GitmojiList', () => {
expect(wrapper).toMatchSnapshot()
})
- describe('when user search the bug gitmoji', () => {
- it('should filter the GitmojiList and find the bug gitmoji', () => {
+ describe('when user search the fire gitmoji', () => {
+ it('should filter the GitmojiList and find the fire gitmoji by code', () => {
const wrapper = renderer.create()
const instance = wrapper.root
renderer.act(() => {
instance
.findByType('input')
- .props.onChange({ target: { value: 'Bug' } })
+ .props.onChange({ target: { value: 'Fire' } })
+ })
+
+ expect(instance.findAllByType('article').length).toEqual(1)
+ })
+
+ it('should filter the GitmojiList and find the fire gitmoji by description', () => {
+ const wrapper = renderer.create()
+ const instance = wrapper.root
+
+ renderer.act(() => {
+ instance
+ .findByType('input')
+ .props.onChange({ target: { value: 'remove' } })
})
expect(instance.findAllByType('article').length).toEqual(1)
diff --git a/src/components/GitmojiList/index.js b/src/components/GitmojiList/index.js
index 6d21aee..0d46f15 100644
--- a/src/components/GitmojiList/index.js
+++ b/src/components/GitmojiList/index.js
@@ -18,9 +18,14 @@ type Props = {
const GitmojiList = (props: Props): Element<'div'> => {
const [searchInput, setSearchInput] = React.useState(null)
const gitmojis = searchInput
- ? props.gitmojis.filter((gitmoji) =>
- gitmoji.code.includes(searchInput.toLowerCase())
- )
+ ? props.gitmojis.filter(({ code, description }) => {
+ const lowerCasedSearch = searchInput.toLowerCase()
+
+ return (
+ code.includes(lowerCasedSearch) ||
+ description.toLowerCase().includes(lowerCasedSearch)
+ )
+ })
: props.gitmojis
React.useEffect(() => {