Extracted sorting dropdown to its own component

test/common/AsideMenu.test.js

@@ -9,9 +9,7 @@ describe('<AsideMenu />', () => {
   beforeEach(() => {
     wrapped = shallow(<AsideMenu selectedServer={{ id: 'abc123' }} />);
   });
-  afterEach(() => {
-    wrapped.unmount();
-  });
+  afterEach(() => wrapped.unmount());
 
   it('contains links to different sections', () => {
     const links = wrapped.find(NavLink);

test/short-urls/Paginator.test.js

@@ -6,11 +6,7 @@ import Paginator from '../../src/short-urls/Paginator';
 describe('<Paginator />', () => {
   let wrapper;
 
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-  });
+  afterEach(() => wrapper && wrapper.unmount());
 
   it('renders nothing if the number of pages is below 2', () => {
     wrapper = shallow(<Paginator serverId="abc123" />);

test/utils/SortingDropdown.test.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { DropdownItem } from 'reactstrap';
+import { values } from 'ramda';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import caretDownIcon from '@fortawesome/fontawesome-free-solid/faCaretDown';
+import * as sinon from 'sinon';
+import SortingDropdown from '../../src/utils/SortingDropdown';
+
+describe('<SortingDropdown />', () => {
+  let wrapper;
+  const items = {
+    foo: 'Foo',
+    bar: 'Bar',
+    baz: 'Hello World',
+  };
+  const createWrapper = (props) => {
+    wrapper = shallow(<SortingDropdown items={items} {...props} />);
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper && wrapper.unmount());
+
+  it('properly renders provided list of items', () => {
+    const wrapper = createWrapper();
+    const dropdownItems = wrapper.find(DropdownItem);
+    const secondIndex = 2;
+
+    expect(dropdownItems).toHaveLength(values(items).length);
+    expect(dropdownItems.at(0).html()).toContain('Foo');
+    expect(dropdownItems.at(1).html()).toContain('Bar');
+    expect(dropdownItems.at(secondIndex).html()).toContain('Hello World');
+  });
+
+  it('properly marks selected field as active with proper icon', () => {
+    const wrapper = createWrapper({ orderField: 'bar', orderDir: 'DESC' });
+    const activeItem = wrapper.find('DropdownItem[active=true]');
+    const activeItemIcon = activeItem.first().find(FontAwesomeIcon);
+
+    expect(activeItem).toHaveLength(1);
+    expect(activeItemIcon.prop('icon')).toEqual(caretDownIcon);
+  });
+
+  it('triggers change function when item is clicked and no order field was provided', () => {
+    const onChange = sinon.spy();
+    const wrapper = createWrapper({ onChange });
+    const firstItem = wrapper.find(DropdownItem).first();
+
+    firstItem.simulate('click');
+
+    expect(onChange.callCount).toEqual(1);
+    expect(onChange.calledWith('foo', 'ASC')).toEqual(true);
+  });
+
+  it('triggers change function when item is clicked and an order field was provided', () => {
+    const onChange = sinon.spy();
+    const wrapper = createWrapper({ onChange, orderField: 'baz', orderDir: 'ASC' });
+    const firstItem = wrapper.find(DropdownItem).first();
+
+    firstItem.simulate('click');
+
+    expect(onChange.callCount).toEqual(1);
+    expect(onChange.calledWith('foo', 'ASC')).toEqual(true);
+  });
+
+  it('updates order dir when already selected item is clicked', () => {
+    const onChange = sinon.spy();
+    const wrapper = createWrapper({ onChange, orderField: 'foo', orderDir: 'ASC' });
+    const firstItem = wrapper.find(DropdownItem).first();
+
+    firstItem.simulate('click');
+
+    expect(onChange.callCount).toEqual(1);
+    expect(onChange.calledWith('foo', 'DESC')).toEqual(true);
+  });
+});

test/visits/GraphCard.test.js

@@ -12,11 +12,7 @@ describe('<GraphCard />', () => {
   };
   const matchMedia = () => ({ matches: false });
 
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-  });
+  afterEach(() => wrapper && wrapper.unmount());
 
   it('renders Doughnut when is not a bar chart', () => {
     wrapper = shallow(<GraphCard matchMedia={matchMedia} title="The chart" stats={stats} />);