Created SortableBarGraph test

src/common/ScrollToTop.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const ScrollToTop = (window) => class ScrollToTop extends React.Component {
+const ScrollToTop = ({ scrollTo }) => class ScrollToTop extends React.Component {
   static propTypes = {
     location: PropTypes.object,
     children: PropTypes.node,
@@ -11,7 +11,7 @@ const ScrollToTop = (window) => class ScrollToTop extends React.Component {
     const { location } = this.props;
 
     if (location !== prevProps.location) {
-      window.scrollTo(0, 0);
+      scrollTo(0, 0);
     }
   }
 

src/container/index.js

@@ -13,11 +13,12 @@ import provideUtilsServices from '../utils/services/provideServices';
 const bottle = new Bottle();
 const { container } = bottle;
 
+const lazyService = (container, serviceName) => (...args) => container[serviceName](...args);
 const mapActionService = (map, actionName) => ({
   ...map,
 
   // Wrap actual action service in a function so that it is lazily created the first time it is called
-  [actionName]: (...args) => container[actionName](...args),
+  [actionName]: lazyService(container, actionName),
 });
 const connect = (propsFromState, actionServiceNames) =>
   reduxConnect(

src/servers/helpers/ImportServersBtn.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { UncontrolledTooltip } from 'reactstrap';
-import { assoc } from 'ramda';
+import { assoc, map } from 'ramda';
 import { v4 as uuid } from 'uuid';
 import PropTypes from 'prop-types';
 
@@ -22,11 +22,16 @@ const ImportServersBtn = (serversImporter) => class ImportServersBtn extends Rea
   render() {
     const { importServersFromFile } = serversImporter;
     const { onImport, createServers } = this.props;
-    const onChange = (e) =>
+    const assocId = (server) => assoc('id', uuid(), server);
-      importServersFromFile(e.target.files[0])
+    const onChange = ({ target }) =>
-        .then((servers) => servers.map((server) => assoc('id', uuid(), server)))
+      importServersFromFile(target.files[0])
+        .then(map(assocId))
         .then(createServers)
-        .then(onImport);
+        .then(onImport)
+        .then(() => {
+          // Reset input after processing file
+          target.value = null;
+        });
 
     return (
       <React.Fragment>

src/servers/reducers/server.js

@@ -14,18 +14,21 @@ export const listServers = (serversService) => () => ({
   servers: serversService.listServers(),
 });
 
+// FIXME listServers action should be injected and not directly invoked
 export const createServer = (serversService) => (server) => {
   serversService.createServer(server);
 
   return listServers(serversService)();
 };
 
+// FIXME listServers action should be injected and not directly invoked
 export const deleteServer = (serversService) => (server) => {
   serversService.deleteServer(server);
 
   return listServers(serversService)();
 };
 
+// FIXME listServers action should be injected and not directly invoked
 export const createServers = (serversService) => (servers) => {
   serversService.createServers(servers);
 

test/visits/SortableBarGraph.test.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { keys, values } from 'ramda';
+import SortableBarGraph from '../../src/visits/SortableBarGraph';
+import GraphCard from '../../src/visits/GraphCard';
+import SortingDropdown from '../../src/utils/SortingDropdown';
+
+describe('<SortableBarGraph />', () => {
+  let wrapper;
+  const sortingItems = {
+    name: 'Name',
+    amount: 'Amount',
+  };
+  const stats = {
+    Foo: 100,
+    Bar: 50,
+  };
+  const createWrapper = (extraHeaderContent = []) => {
+    wrapper = shallow(
+      <SortableBarGraph title="Foo" stats={stats} sortingItems={sortingItems} extraHeaderContent={extraHeaderContent} />
+    );
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper && wrapper.unmount());
+
+  it('renders stats unchanged when no ordering is set', () => {
+    const wrapper = createWrapper();
+    const graphCard = wrapper.find(GraphCard);
+
+    expect(graphCard.prop('stats')).toEqual(stats);
+  });
+
+  describe('renders properly ordered stats when ordering is set', () => {
+    let assert;
+
+    beforeEach(() => {
+      const wrapper = createWrapper();
+      const dropdown = wrapper.find(SortingDropdown);
+
+      assert = (sortName, sortDir, expectedKeys, expectedValues, done) => {
+        dropdown.prop('onChange')(sortName, sortDir);
+        setImmediate(() => {
+          const graphCard = wrapper.find(GraphCard);
+          const statsKeys = keys(graphCard.prop('stats'));
+          const statsValues = values(graphCard.prop('stats'));
+
+          expect(statsKeys).toEqual(expectedKeys);
+          expect(statsValues).toEqual(expectedValues);
+          done();
+        });
+      };
+    });
+
+    // eslint-disable-next-line no-magic-numbers
+    it('name - ASC', (done) => assert('name', 'ASC', [ 'Bar', 'Foo' ], [ 50, 100 ], done));
+
+    // eslint-disable-next-line no-magic-numbers
+    it('name - DESC', (done) => assert('name', 'DESC', [ 'Foo', 'Bar' ], [ 100, 50 ], done));
+
+    // eslint-disable-next-line no-magic-numbers
+    it('value - ASC', (done) => assert('value', 'ASC', [ 'Bar', 'Foo' ], [ 50, 100 ], done));
+
+    // eslint-disable-next-line no-magic-numbers
+    it('value - DESC', (done) => assert('value', 'DESC', [ 'Foo', 'Bar' ], [ 100, 50 ], done));
+  });
+
+  it('renders extra header functions', () => {
+    const wrapper = createWrapper([
+      () => <span className="foo-span">Foo</span>,
+      () => <span className="bar-span">Bar</span>,
+    ]);
+
+    expect(wrapper.find('.foo-span')).toHaveLength(1);
+    expect(wrapper.find('.bar-span')).toHaveLength(1);
+  });
+});