Skip to content

Commit 1b19aac

Browse files
adhamuadhamu
committed
Tests
1 parent 025c2f7 commit 1b19aac

File tree

5 files changed

+108
-61
lines changed

5 files changed

+108
-61
lines changed

‎README.md

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -119,16 +119,17 @@ export default MyComponent
119119

120120
## Props
121121

122-
| Prop | Description | Type | Default | Required? |
123-
| ------------- | ----------------------------------------------------------------------------- | ----------------- | ----------- | --------- |
124-
| `suggestions` | A collection of HTML elements or React components used for search suggestions | React.ReactNode[] | | Y |
125-
| `id` | ID for entire component | string | `undefined` | N |
126-
| `className` | Optional class name to style component | string | `''` | N |
127-
| `name` | Input name | string | `'q'` | N |
128-
| `placeholder` | Input placeholder | string | `'Search'` | N |
129-
| `autoFocus` | Input autoFocus | boolean | `false` | N |
130-
| `onChange` | Input onChange handler | function | `undefined` | N |
131-
| `withStyles` | Basic styling for the component | boolean | `false` | N |
122+
| Prop | Description | Type | Default | Required? |
123+
| ------------------- | -------------------------------------------------------------------------------------- | ----------------- | ----------- | --------- |
124+
| `suggestions` | A collection of HTML elements or React components used for search suggestions | React.ReactNode[] | | Y |
125+
| `id` | ID for entire component | string | `undefined` | N |
126+
| `className` | Optional class name to style component | string | `''` | N |
127+
| `name` | Input name | string | `'q'` | N |
128+
| `placeholder` | Input placeholder | string | `'Search'` | N |
129+
| `autoFocus` | Input autoFocus | boolean | `false` | N |
130+
| `onChange` | Input onChange handler | function | `undefined` | N |
131+
| `withStyles` | Basic styling for the component | boolean | `false` | N |
132+
| `highlightKeywords` | Highlight letters that match search term by wrapping a `<mark>` tag around suggestions | boolean | `false` | N |
132133

133134
## Styling
134135

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@adhamu/react-search-suggestions",
3-
"version": "2.1.3",
3+
"version": "2.2.0",
44
"description": "A React input component with pluggable search suggestions.",
55
"keywords": [
66
"react",

‎src/__tests__/SearchSuggestions.test.tsx

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react'
44
import userEvent from '@testing-library/user-event'
55

66
import SearchSuggestions from '../SearchSuggestions'
7-
import * as getElementText from '../elementText'
7+
import * as elementText from '../elementText'
88

99
const suggestions = ['reddit', 'facebook', 'twitter'].map(word => (
1010
<a key={word} href={`https://${word}.com`}>
@@ -13,7 +13,8 @@ const suggestions = ['reddit', 'facebook', 'twitter'].map(word => (
1313
))
1414

1515
describe('SearchSuggestions', () => {
16-
const mockGetElementText = jest.spyOn(getElementText, 'getElementText')
16+
const mockGetElementText = jest.spyOn(elementText, 'getElementText')
17+
const mockWrapElementText = jest.spyOn(elementText, 'wrapElementText')
1718

1819
beforeEach(jest.clearAllMocks)
1920

@@ -65,6 +66,12 @@ describe('SearchSuggestions', () => {
6566
it('does not show suggestions if no input has been entered', () => {
6667
expect(screen.queryByRole('list')).not.toBeInTheDocument()
6768
})
69+
70+
it('does not wrap search suggestions', () => {
71+
userEvent.type(screen.getByRole('searchbox'), 't')
72+
73+
expect(mockWrapElementText).not.toHaveBeenCalled()
74+
})
6875
})
6976

7077
describe('renders correctly with custom options', () => {
@@ -111,6 +118,14 @@ describe('SearchSuggestions', () => {
111118
// eslint-disable-next-line testing-library/no-node-access
112119
expect(container.firstChild).toHaveClass('react-search')
113120
})
121+
122+
it('calls wrapElementText when highlightKeywords provided', () => {
123+
render(<SearchSuggestions suggestions={suggestions} highlightKeywords />)
124+
125+
userEvent.type(screen.getByRole('searchbox'), 't')
126+
127+
expect(mockWrapElementText).toHaveBeenCalledTimes(2)
128+
})
114129
})
115130

116131
it('fires an onChange event if provided', () => {

‎src/__tests__/elementText.test.tsx

Lines changed: 77 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,89 @@
11
import React from 'react'
22

3-
import { getElementText } from '../elementText'
3+
import { render } from '@testing-library/react'
44

5-
describe('getElementText', () => {
6-
const Test = ({ children }: { children?: React.ReactNode }) => (
7-
<div>{children}</div>
8-
)
5+
import { getElementText, wrapElementText } from '../elementText'
96

10-
it('handles strings', () => {
11-
expect(getElementText('This is a test')).toBe('This is a test')
12-
})
7+
describe('elementText', () => {
8+
describe('getElementText', () => {
9+
const Test = ({ children }: { children?: React.ReactNode }) => (
10+
<div>{children}</div>
11+
)
1312

14-
it('handles numbers', () => {
15-
expect(getElementText(100)).toBe(100)
16-
})
13+
it('handles strings', () => {
14+
expect(getElementText('This is a test')).toBe('This is a test')
15+
})
1716

18-
it('handles nested markup', () => {
19-
expect(
20-
getElementText(
21-
<ul>
22-
<li>Option 1</li>
23-
<li>Option 2</li>
24-
<li>Option 3</li>
25-
<li>Option 4</li>
26-
</ul>
27-
)
28-
).toBe('Option 1 Option 2 Option 3 Option 4')
17+
it('handles numbers', () => {
18+
expect(getElementText(100)).toBe(100)
19+
})
20+
21+
it('handles nested markup', () => {
22+
expect(
23+
getElementText(
24+
<ul>
25+
<li>Option 1</li>
26+
<li>Option 2</li>
27+
<li>Option 3</li>
28+
<li>Option 4</li>
29+
</ul>
30+
)
31+
).toBe('Option 1 Option 2 Option 3 Option 4')
32+
})
33+
34+
it('handles React elements', () => {
35+
expect(
36+
getElementText(
37+
<Test>
38+
<span>Level 1</span>
39+
<span>Level 2</span>
40+
<span>Level 3</span>
41+
</Test>
42+
)
43+
).toBe('Level 1 Level 2 Level 3')
44+
})
45+
46+
it('returns undefined if no text found', () => {
47+
expect(getElementText(<Test />)).toBeUndefined()
48+
})
2949
})
3050

31-
it('handles React elements', () => {
32-
expect(
33-
getElementText(
34-
<Test>
35-
<span>Level 1</span>
36-
<span>Level 2</span>
37-
<span>Level 3</span>
38-
</Test>
51+
describe('wrapElementText', () => {
52+
it('can handle strings', () => {
53+
const Result = () => <>{wrapElementText(<div>Level One</div>, 'one')}</>
54+
55+
const { container } = render(<Result />)
56+
57+
expect(container.innerHTML).toBe('<div>Level <mark>One</mark></div>')
58+
})
59+
60+
it('can handle elements with children', () => {
61+
const Result = () => (
62+
<>
63+
{wrapElementText(
64+
<div>
65+
<ul>
66+
<li>
67+
<a href="https://twitter.com">Twitter</a>
68+
</li>
69+
<li>
70+
<a href="https://facebook.com">Facebook</a>
71+
</li>
72+
<li>
73+
<a href="https://reddit.com">Reddit</a>
74+
</li>
75+
</ul>
76+
</div>,
77+
'twit'
78+
)}
79+
</>
3980
)
40-
).toBe('Level 1 Level 2 Level 3')
41-
})
4281

43-
it('returns undefined if no text found', () => {
44-
expect(getElementText(<Test />)).toBeUndefined()
82+
const { container } = render(<Result />)
83+
84+
expect(container.innerHTML).toBe(
85+
'<div><ul><li><a href="https://twitter.com"><mark>Twit</mark>ter</a></li><li><a href="https://facebook.com">Facebook</a></li><li><a href="https://reddit.com">Reddit</a></li></ul></div>'
86+
)
87+
})
4588
})
4689
})

‎src/example/App.tsx

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -54,20 +54,8 @@ const suggestions = [
5454
'pressure',
5555
'cooperate',
5656
].map(word => (
57-
<a
58-
key={word}
59-
onKeyDown={e => {
60-
if (e.key === 'Enter') {
61-
console.log(word)
62-
}
63-
}}
64-
onClick={() => {
65-
console.log(word)
66-
}}
67-
>
68-
<div>
69-
<div>{word}</div>
70-
</div>
57+
<a key={word} href={`https://www.google.co.uk/search?q=${word}`}>
58+
{word}
7159
</a>
7260
))
7361

0 commit comments

Comments
 (0)