From 4f8c7afc76972345eb799ac0d83934b58b3d6e75 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 12 Jan 2019 23:47:41 +0100 Subject: [PATCH] Created SortableBarGraph test --- src/common/ScrollToTop.js | 4 +- src/container/index.js | 3 +- src/servers/helpers/ImportServersBtn.js | 15 +++-- src/servers/reducers/server.js | 3 + test/visits/SortableBarGraph.test.js | 78 +++++++++++++++++++++++++ 5 files changed, 95 insertions(+), 8 deletions(-) create mode 100644 test/visits/SortableBarGraph.test.js diff --git a/src/common/ScrollToTop.js b/src/common/ScrollToTop.js index 19a34dfb..67ccb7d8 100644 --- a/src/common/ScrollToTop.js +++ b/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); } } diff --git a/src/container/index.js b/src/container/index.js index ffe5de5d..3450796a 100644 --- a/src/container/index.js +++ b/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( diff --git a/src/servers/helpers/ImportServersBtn.js b/src/servers/helpers/ImportServersBtn.js index 29fb88d8..4d687976 100644 --- a/src/servers/helpers/ImportServersBtn.js +++ b/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) => - importServersFromFile(e.target.files[0]) - .then((servers) => servers.map((server) => assoc('id', uuid(), server))) + const assocId = (server) => assoc('id', uuid(), server); + const onChange = ({ target }) => + importServersFromFile(target.files[0]) + .then(map(assocId)) .then(createServers) - .then(onImport); + .then(onImport) + .then(() => { + // Reset input after processing file + target.value = null; + }); return ( diff --git a/src/servers/reducers/server.js b/src/servers/reducers/server.js index 503b303e..06bdc482 100644 --- a/src/servers/reducers/server.js +++ b/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); diff --git a/test/visits/SortableBarGraph.test.js b/test/visits/SortableBarGraph.test.js new file mode 100644 index 00000000..3dbcc337 --- /dev/null +++ b/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('', () => { + let wrapper; + const sortingItems = { + name: 'Name', + amount: 'Amount', + }; + const stats = { + Foo: 100, + Bar: 50, + }; + const createWrapper = (extraHeaderContent = []) => { + wrapper = shallow( + + ); + + 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([ + () => Foo, + () => Bar, + ]); + + expect(wrapper.find('.foo-span')).toHaveLength(1); + expect(wrapper.find('.bar-span')).toHaveLength(1); + }); +});