diff --git a/package-lock.json b/package-lock.json
index 39fa8220..32b2104f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2592,6 +2592,21 @@
"integrity": "sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==",
"dev": true
},
+ "@types/lodash": {
+ "version": "4.14.149",
+ "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.149.tgz",
+ "integrity": "sha512-ijGqzZt/b7BfzcK9vTrS6MFljQRPn5BFWOx8oE0GYxribu6uV+aA9zZuXI1zc/etK9E8nrgdoF2+LgUw7+9tJQ==",
+ "dev": true
+ },
+ "@types/lodash.debounce": {
+ "version": "4.0.6",
+ "resolved": "https://registry.npmjs.org/@types/lodash.debounce/-/lodash.debounce-4.0.6.tgz",
+ "integrity": "sha512-4WTmnnhCfDvvuLMaF3KV4Qfki93KebocUF45msxhYyjMttZDQYzHkO639ohhk8+oco2cluAFL3t5+Jn4mleylQ==",
+ "dev": true,
+ "requires": {
+ "@types/lodash": "*"
+ }
+ },
"@types/minimatch": {
"version": "3.0.3",
"resolved": "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz",
diff --git a/package.json b/package.json
index cefa47f4..7fbd0962 100755
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
"@types/enzyme-adapter-react-16": "^1.0.5",
"@types/history": "^4.7.0",
"@types/jest": "^23.3.14",
+ "@types/lodash.debounce": "^4.0.6",
"@types/node": "^11.9.3",
"@types/react-dom": "^16.0.7",
"@types/react-router": "^4.0.30",
diff --git a/src/components/search_bar/__tests__/__snapshots__/search_bar.spec.tsx.snap b/src/components/search_bar/__tests__/__snapshots__/search_bar.spec.tsx.snap
new file mode 100644
index 00000000..f0bc24d1
--- /dev/null
+++ b/src/components/search_bar/__tests__/__snapshots__/search_bar.spec.tsx.snap
@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`search_bar.tsx snapshot and instance 1`] = `
+
+
+
+`;
diff --git a/src/components/search_bar/__tests__/search_bar.spec.tsx b/src/components/search_bar/__tests__/search_bar.spec.tsx
new file mode 100644
index 00000000..9d98cf9c
--- /dev/null
+++ b/src/components/search_bar/__tests__/search_bar.spec.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { mount, ReactWrapper } from 'enzyme';
+import { SearchBar } from '..';
+
+// Use real timers for this one because https://github.com/facebook/jest/issues/3465
+
+describe('search_bar.tsx', () => {
+ let wrapper: ReactWrapper;
+ let emitDelay: number;
+ const query = 'hello world';
+ const placeholder = 'For example…';
+ const onChange: jest.Mock = jest.fn();
+
+ afterEach(() => {
+ onChange.mockReset();
+ wrapper.unmount();
+ });
+
+ test('snapshot and instance', () => {
+ wrapper = mount();
+ expect(wrapper.instance()).toBeInstanceOf(SearchBar);
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ test('with "query" prop', (done) => {
+ wrapper = mount(
+ ,
+ );
+ expect(onChange).not.toHaveBeenCalled();
+ setTimeout(() => {
+ expect(onChange).toHaveBeenCalledTimes(1);
+ expect(onChange).toHaveBeenCalledWith(query);
+ done();
+ }, 0);
+ });
+
+ test('with "emitDelay" prop', (done) => {
+ emitDelay = 500;
+ wrapper = mount(
+ ,
+ );
+ expect(onChange).not.toHaveBeenCalled();
+ setTimeout(() => {
+ expect(onChange).toHaveBeenCalledTimes(1);
+ expect(onChange).toHaveBeenCalledWith(query);
+ done();
+ }, emitDelay);
+ });
+});
diff --git a/src/components/search_bar/index.ts b/src/components/search_bar/index.ts
new file mode 100644
index 00000000..01276108
--- /dev/null
+++ b/src/components/search_bar/index.ts
@@ -0,0 +1 @@
+export { SearchBar } from './search_bar';
diff --git a/src/components/search_bar.tsx b/src/components/search_bar/search_bar.tsx
similarity index 73%
rename from src/components/search_bar.tsx
rename to src/components/search_bar/search_bar.tsx
index 49bbee60..8c95eff0 100644
--- a/src/components/search_bar.tsx
+++ b/src/components/search_bar/search_bar.tsx
@@ -1,12 +1,13 @@
import React from 'react';
import debounce from 'lodash.debounce';
-import * as Input from './input';
-import * as Icon from './icons';
+import * as Input from '../input';
+import * as Icon from '../icons';
interface SearchBarProps {
query?: string;
emitDelay?: number;
- onChangeHandler: (value: string) => void;
+ onChange: (value: string) => void;
+ placeholder?: string;
}
interface SearchBarState {
@@ -18,8 +19,8 @@ class SearchBar extends React.Component {
emitDelay: 0,
}
- debouncedEmit = (({ onChangeHandler, emitDelay }) => debounce(
- onChangeHandler, emitDelay,
+ debouncedEmit = (({ onChange, emitDelay }) => debounce(
+ onChange, emitDelay,
))(this.props);
constructor(props: Readonly) {
@@ -55,12 +56,18 @@ class SearchBar extends React.Component {
render() {
const { query } = this.state;
const { onChange } = this;
+ const { placeholder } = this.props;
return (
-
+
);
}
diff --git a/src/stories/search_bar.stories.tsx b/src/stories/search_bar.stories.tsx
index 7b4f824c..d2613132 100644
--- a/src/stories/search_bar.stories.tsx
+++ b/src/stories/search_bar.stories.tsx
@@ -21,7 +21,8 @@ stories.addDecorator(withKnobs)
stories.add('SearchBar', () => (
));