Unverified Commit e2c39864 authored by Ryan Lieu's avatar Ryan Lieu Committed by GitHub

Fixed empty search bar to go back to home (#211)

* fixed empty search bar issue

* fixed whitespace bugs + handle 400s better

* fixed test issue

* fixed issue with reducer, cleaned up formValid

* updated tests

* removed fixes
parent d5a98bba
...@@ -58,16 +58,18 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> { ...@@ -58,16 +58,18 @@ export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
}; };
handleValueSubmit = (event: React.FormEvent<HTMLFormElement>) : void => { handleValueSubmit = (event: React.FormEvent<HTMLFormElement>) : void => {
const searchTerm = this.state.searchTerm.trim();
event.preventDefault(); event.preventDefault();
if (this.isFormValid()) { if (this.isFormValid(searchTerm)) {
const pathName = `/search?searchTerm=${this.state.searchTerm}&selectedTab=table&pageIndex=0`; let pathName = '/';
if (searchTerm !== '') {
pathName = `/search?searchTerm=${searchTerm}`;
}
this.props.history.push(pathName); this.props.history.push(pathName);
} }
}; };
isFormValid = () : boolean => { isFormValid = (searchTerm: string) : boolean => {
const searchTerm = this.state.searchTerm;
const hasAtMostOneCategory = searchTerm.split(':').length <= 2; const hasAtMostOneCategory = searchTerm.split(':').length <= 2;
if (!hasAtMostOneCategory) { if (!hasAtMostOneCategory) {
this.setState({ this.setState({
......
...@@ -100,10 +100,17 @@ describe('SearchBar', () => { ...@@ -100,10 +100,17 @@ describe('SearchBar', () => {
expect(submitMockEvent.preventDefault).toHaveBeenCalled(); expect(submitMockEvent.preventDefault).toHaveBeenCalled();
}); });
it('redirects back to home if searchTerm is empty', () => {
// @ts-ignore: mocked events throw type errors
wrapper.instance().handleValueSubmit(submitMockEvent);
expect(props.history.push).toHaveBeenCalledWith('/');
});
it('submits with correct props if isFormValid()', () => { it('submits with correct props if isFormValid()', () => {
const { props, wrapper } = setup({ searchTerm: 'testTerm' });
// @ts-ignore: mocked events throw type errors // @ts-ignore: mocked events throw type errors
wrapper.instance().handleValueSubmit(submitMockEvent); wrapper.instance().handleValueSubmit(submitMockEvent);
expect(props.history.push).toHaveBeenCalledWith(`/search?searchTerm=${wrapper.state().searchTerm}&selectedTab=table&pageIndex=0`); expect(props.history.push).toHaveBeenCalledWith(`/search?searchTerm=${wrapper.state().searchTerm}`);
}); });
it('does not submit if !isFormValid()', () => { it('does not submit if !isFormValid()', () => {
...@@ -118,11 +125,11 @@ describe('SearchBar', () => { ...@@ -118,11 +125,11 @@ describe('SearchBar', () => {
describe('if searchTerm has more than one category', () => { describe('if searchTerm has more than one category', () => {
let wrapper; let wrapper;
beforeAll(() => { beforeAll(() => {
wrapper = setup({ searchTerm: 'tag:tag1 tag:tag2' }).wrapper; wrapper = setup().wrapper;
}) })
it('returns false', () => { it('returns false', () => {
expect(wrapper.instance().isFormValid()).toEqual(false); expect(wrapper.instance().isFormValid('tag:tag1 tag:tag2')).toEqual(false);
}); });
it('sets state.subText correctly', () => { it('sets state.subText correctly', () => {
...@@ -141,7 +148,7 @@ describe('SearchBar', () => { ...@@ -141,7 +148,7 @@ describe('SearchBar', () => {
}) })
it('returns false', () => { it('returns false', () => {
expect(wrapper.instance().isFormValid()).toEqual(false); expect(wrapper.instance().isFormValid('tag : tag1')).toEqual(false);
}); });
it('sets state.subText correctly', () => { it('sets state.subText correctly', () => {
...@@ -156,11 +163,11 @@ describe('SearchBar', () => { ...@@ -156,11 +163,11 @@ describe('SearchBar', () => {
describe('if searchTerm has correct syntax', () => { describe('if searchTerm has correct syntax', () => {
let wrapper; let wrapper;
beforeAll(() => { beforeAll(() => {
wrapper = setup({ searchTerm: 'tag:tag1' }).wrapper; wrapper = setup().wrapper;
}) })
it('returns true', () => { it('returns true', () => {
expect(wrapper.instance().isFormValid()).toEqual(true); expect(wrapper.instance().isFormValid('tag:tag1')).toEqual(true);
}); });
it('sets state.subText correctly', () => { it('sets state.subText correctly', () => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment