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(() => {