Created tests for Paginator and SearchBar

src/short-urls/Paginator.js

@@ -20,13 +20,13 @@ export default function Paginator({ paginator = {}, serverId }) {
   }
 
   const renderPages = () =>
-    range(1, pagesCount + 1).map((i) => (
-      <PaginationItem key={i} active={currentPage === i}>
+    range(1, pagesCount + 1).map((pageNumber) => (
+      <PaginationItem key={pageNumber} active={currentPage === pageNumber}>
         <PaginationLink
           tag={Link}
-          to={`/server/${serverId}/list-short-urls/${i}`}
+          to={`/server/${serverId}/list-short-urls/${pageNumber}`}
         >
-          {i}
+          {pageNumber}
         </PaginationLink>
       </PaginationItem>
     ));

test/short-urls/Paginator.test.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { PaginationItem } from 'reactstrap';
+import Paginator from '../../src/short-urls/Paginator';
+
+describe('<Paginator />', () => {
+  let wrapper;
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount();
+    }
+  });
+
+  it('renders nothing if the number of pages is below 2', () => {
+    wrapper = shallow(<Paginator serverId="abc123" />);
+    expect(wrapper.text()).toEqual('');
+  });
+
+  it('renders previous, next and the list of pages', () => {
+    const paginator = {
+      currentPage: 1,
+      pagesCount: 5,
+    };
+    const extraPagesPrevNext = 2;
+    const expectedItems = paginator.pagesCount + extraPagesPrevNext;
+
+    wrapper = shallow(<Paginator serverId="abc123" paginator={paginator} />);
+
+    expect(wrapper.find(PaginationItem)).toHaveLength(expectedItems);
+  });
+});

test/short-urls/SearchBar.test.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+import { SearchBarComponent } from '../../src/short-urls/SearchBar';
+import SearchField from '../../src/utils/SearchField';
+import Tag from '../../src/tags/helpers/Tag';
+
+describe('<SearchBar />', () => {
+  let wrapper;
+  const listShortUrlsMock = sinon.spy();
+
+  afterEach(() => {
+    listShortUrlsMock.resetHistory();
+
+    if (wrapper) {
+      wrapper.unmount();
+    }
+  });
+
+  it('renders a SearchField', () => {
+    wrapper = shallow(<SearchBarComponent shortUrlsListParams={{}} />);
+
+    expect(wrapper.find(SearchField)).toHaveLength(1);
+  });
+
+  it('renders no tags when the list of tags is empty', () => {
+    wrapper = shallow(<SearchBarComponent shortUrlsListParams={{}} />);
+
+    expect(wrapper.find(Tag)).toHaveLength(0);
+  });
+
+  it('renders the proper amount of tags', () => {
+    const tags = [ 'foo', 'bar', 'baz' ];
+
+    wrapper = shallow(<SearchBarComponent shortUrlsListParams={{ tags }} />);
+
+    expect(wrapper.find(Tag)).toHaveLength(tags.length);
+  });
+
+  it('updates short URLs list when search field changes', () => {
+    wrapper = shallow(<SearchBarComponent shortUrlsListParams={{}} listShortUrls={listShortUrlsMock} />);
+    const searchField = wrapper.find(SearchField);
+
+    expect(listShortUrlsMock.callCount).toEqual(0);
+    searchField.simulate('change');
+    expect(listShortUrlsMock.callCount).toEqual(1);
+  });
+
+  it('updates short URLs list when a tag is removed', () => {
+    wrapper = shallow(
+      <SearchBarComponent shortUrlsListParams={{ tags: [ 'foo' ] }} listShortUrls={listShortUrlsMock} />
+    );
+    const tag = wrapper.find(Tag).first();
+
+    expect(listShortUrlsMock.callCount).toEqual(0);
+    tag.simulate('close');
+    expect(listShortUrlsMock.callCount).toEqual(1);
+  });
+});