Improved SearchBar test

test/short-urls/SearchBar.test.tsx

@@ -1,69 +1,75 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
-import searchBarCreator from '../../src/short-urls/SearchBar';
+import { History, Location } from 'history';
+import { match } from 'react-router';
+import searchBarCreator, { SearchBarProps } from '../../src/short-urls/SearchBar';
 import SearchField from '../../src/utils/SearchField';
 import Tag from '../../src/tags/helpers/Tag';
 import { DateRangeSelector } from '../../src/utils/dates/DateRangeSelector';
 import ColorGenerator from '../../src/utils/services/ColorGenerator';
+import { ShortUrlListRouteParams } from '../../src/short-urls/helpers/hooks';
 
 describe('<SearchBar />', () => {
   let wrapper: ShallowWrapper;
   const listShortUrlsMock = jest.fn();
   const SearchBar = searchBarCreator(Mock.all<ColorGenerator>());
+  const push = jest.fn();
+  const createWrapper = (props: Partial<SearchBarProps> = {}) => {
+    wrapper = shallow(
+      <SearchBar
+        listShortUrls={listShortUrlsMock}
+        shortUrlsListParams={{}}
+        history={Mock.of<History>({ push })}
+        location={Mock.of<Location>({ search: '' })}
+        match={Mock.of<match<ShortUrlListRouteParams>>({ params: { serverId: '1' } })}
+        {...props}
+      />,
+    );
+
+    return wrapper;
+  };
 
   afterEach(jest.clearAllMocks);
   afterEach(() => wrapper?.unmount());
 
-  it('renders a SearchField', () => {
-    wrapper = shallow(<SearchBar shortUrlsListParams={{}} listShortUrls={listShortUrlsMock} />);
+  it('renders some children components SearchField', () => {
+    const wrapper = createWrapper();
 
     expect(wrapper.find(SearchField)).toHaveLength(1);
-  });
-
-  it('renders a DateRangeSelector', () => {
-    wrapper = shallow(<SearchBar shortUrlsListParams={{}} listShortUrls={listShortUrlsMock} />);
-
     expect(wrapper.find(DateRangeSelector)).toHaveLength(1);
   });
 
-  it('renders no tags when the list of tags is empty', () => {
-    wrapper = shallow(<SearchBar shortUrlsListParams={{}} listShortUrls={listShortUrlsMock} />);
+  it.each([
+    [ 'tags=foo,bar,baz', 3 ],
+    [ 'tags=foo,baz', 2 ],
+    [ '', 0 ],
+    [ 'foo=bar', 0 ],
+  ])('renders the proper amount of tags', (search, expectedTagComps) => {
+    const wrapper = createWrapper({ location: Mock.of<Location>({ search }) });
 
-    expect(wrapper.find(Tag)).toHaveLength(0);
-  });
-
-  it('renders the proper amount of tags', () => {
-    const tags = [ 'foo', 'bar', 'baz' ];
-
-    wrapper = shallow(<SearchBar shortUrlsListParams={{ tags }} listShortUrls={listShortUrlsMock} />);
-
-    expect(wrapper.find(Tag)).toHaveLength(tags.length);
+    expect(wrapper.find(Tag)).toHaveLength(expectedTagComps);
   });
 
   it('updates short URLs list when search field changes', () => {
-    wrapper = shallow(<SearchBar shortUrlsListParams={{}} listShortUrls={listShortUrlsMock} />);
+    const wrapper = createWrapper();
     const searchField = wrapper.find(SearchField);
 
-    expect(listShortUrlsMock).not.toHaveBeenCalled();
-    searchField.simulate('change');
-    expect(listShortUrlsMock).toHaveBeenCalledTimes(1);
+    expect(push).not.toHaveBeenCalled();
+    searchField.simulate('change', 'search-term');
+    expect(push).toHaveBeenCalledWith('/server/1/list-short-urls/1?search=search-term');
   });
 
   it('updates short URLs list when a tag is removed', () => {
-    wrapper = shallow(
-      <SearchBar shortUrlsListParams={{ tags: [ 'foo' ] }} listShortUrls={listShortUrlsMock} />,
-    );
+    const wrapper = createWrapper({ location: Mock.of<Location>({ search: 'tags=foo,bar' }) });
     const tag = wrapper.find(Tag).first();
 
-    expect(listShortUrlsMock).not.toHaveBeenCalled();
+    expect(push).not.toHaveBeenCalled();
     tag.simulate('close');
-    expect(listShortUrlsMock).toHaveBeenCalledTimes(1);
+    expect(push).toHaveBeenCalledWith('/server/1/list-short-urls/1?tags=bar');
   });
 
   it('updates short URLs list when date range changes', () => {
-    wrapper = shallow(
-      <SearchBar shortUrlsListParams={{}} listShortUrls={listShortUrlsMock} />,
-    );
+    const wrapper = createWrapper();
     const dateRange = wrapper.find(DateRangeSelector);
 
     expect(listShortUrlsMock).not.toHaveBeenCalled();

test/utils/helpers/query.test.ts

@@ -1,4 +1,4 @@
-import { evolveStringifiedQuery, parseQuery, stringifyQuery } from '../../../src/utils/helpers/query';
+import { parseQuery, stringifyQuery } from '../../../src/utils/helpers/query';
 
 describe('query', () => {
   describe('parseQuery', () => {
@@ -22,15 +22,4 @@ describe('query', () => {
       expect(stringifyQuery(queryObj)).toEqual(expectedResult);
     });
   });
-
-  describe('evolveStringifiedQuery', () => {
-    it.each([
-      [ '?foo=bar', { baz: 123 }, 'foo=bar&baz=123' ],
-      [ 'foo=bar', { baz: 123 }, 'foo=bar&baz=123' ],
-      [ 'foo=bar&baz=hello', { baz: 'world' }, 'foo=bar&baz=world' ],
-      [ '?', { foo: 'some', bar: 'thing' }, 'foo=some&bar=thing' ],
-    ])('adds and overwrites params on provided query string', (query, extra, expected) => {
-      expect(evolveStringifiedQuery(query, extra)).toEqual(expected);
-    });
-  });
 });