From 18e18f533babaca82fb8875e92a3ca0b5e59c727 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sun, 10 May 2020 17:49:55 +0200 Subject: [PATCH] Extracted visits charts elements into reusable component --- src/common/MenuLayout.js | 1 + src/tags/TagCard.js | 2 +- src/visits/ShortUrlVisits.js | 207 +---------------------- src/visits/VisitsStats.js | 224 +++++++++++++++++++++++++ src/visits/reducers/shortUrlVisits.js | 21 +-- src/visits/services/provideServices.js | 4 +- src/visits/types/index.js | 23 +++ test/tags/TagCard.test.js | 2 +- test/visits/ShortUrlVisits.test.js | 84 ++-------- test/visits/VisitsStats.test.js | 95 +++++++++++ 10 files changed, 368 insertions(+), 295 deletions(-) create mode 100644 src/visits/VisitsStats.js create mode 100644 src/visits/types/index.js create mode 100644 test/visits/VisitsStats.test.js diff --git a/src/common/MenuLayout.js b/src/common/MenuLayout.js index 15682458..5d42fda4 100644 --- a/src/common/MenuLayout.js +++ b/src/common/MenuLayout.js @@ -61,6 +61,7 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi + {/* */} List short URLs} diff --git a/src/tags/TagCard.js b/src/tags/TagCard.js index 3f66bf5b..9ec68982 100644 --- a/src/tags/TagCard.js +++ b/src/tags/TagCard.js @@ -60,7 +60,7 @@ const TagCard = (DeleteTagConfirmModal, EditTagModal, ForServerVersion, colorGen {prettify(tagStats.shortUrlsCount)} Visits diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js index 12f5deb3..35fb4728 100644 --- a/src/visits/ShortUrlVisits.js +++ b/src/visits/ShortUrlVisits.js @@ -1,24 +1,12 @@ -import { isEmpty, propEq, values } from 'ramda'; -import React, { useState, useEffect, useMemo } from 'react'; -import { Button, Card, Collapse } from 'reactstrap'; +import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; import qs from 'qs'; -import classNames from 'classnames'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faChevronDown as chevronDown } from '@fortawesome/free-solid-svg-icons'; -import DateRangeRow from '../utils/DateRangeRow'; -import Message from '../utils/Message'; -import { formatDate } from '../utils/helpers/date'; -import { useToggle } from '../utils/helpers/hooks'; import { MercureInfoType } from '../mercure/reducers/mercureInfo'; import { bindToMercureTopic } from '../mercure/helpers'; import { SettingsType } from '../settings/reducers/settings'; -import SortableBarGraph from './SortableBarGraph'; import { shortUrlVisitsType } from './reducers/shortUrlVisits'; import VisitsHeader from './VisitsHeader'; -import GraphCard from './GraphCard'; import { shortUrlDetailType } from './reducers/shortUrlDetail'; -import VisitsTable from './VisitsTable'; const propTypes = { history: PropTypes.shape({ @@ -35,26 +23,13 @@ const propTypes = { getShortUrlDetail: PropTypes.func, shortUrlDetail: shortUrlDetailType, cancelGetShortUrlVisits: PropTypes.func, - matchMedia: PropTypes.func, createNewVisit: PropTypes.func, loadMercureInfo: PropTypes.func, mercureInfo: MercureInfoType, settings: SettingsType, }; -const highlightedVisitsToStats = (highlightedVisits, prop) => highlightedVisits.reduce((acc, highlightedVisit) => { - if (!acc[highlightedVisit[prop]]) { - acc[highlightedVisit[prop]] = 0; - } - - acc[highlightedVisit[prop]] += 1; - - return acc; -}, {}); -const format = formatDate(); -let selectedBar; - -const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModalBtn) => { +const ShortUrlVisits = (VisitsStats) => { const ShortUrlVisitsComp = ({ history, match, @@ -64,65 +39,21 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa getShortUrlVisits, getShortUrlDetail, cancelGetShortUrlVisits, - matchMedia = window.matchMedia, createNewVisit, loadMercureInfo, mercureInfo, settings: { realTimeUpdates }, }) => { - const [ startDate, setStartDate ] = useState(undefined); - const [ endDate, setEndDate ] = useState(undefined); - const [ showTable, toggleTable ] = useToggle(); - const [ tableIsSticky, , setSticky, unsetSticky ] = useToggle(); - const [ highlightedVisits, setHighlightedVisits ] = useState([]); - const [ isMobileDevice, setIsMobileDevice ] = useState(false); - const determineIsMobileDevice = () => setIsMobileDevice(matchMedia('(max-width: 991px)').matches); - const setSelectedVisits = (selectedVisits) => { - selectedBar = undefined; - setHighlightedVisits(selectedVisits); - }; - const highlightVisitsForProp = (prop) => (value) => { - const newSelectedBar = `${prop}_${value}`; - - if (selectedBar === newSelectedBar) { - setHighlightedVisits([]); - selectedBar = undefined; - } else { - setHighlightedVisits(normalizedVisits.filter(propEq(prop, value))); - selectedBar = newSelectedBar; - } - }; - const { params } = match; const { shortCode } = params; const { search } = location; const { domain } = qs.parse(search, { ignoreQueryPrefix: true }); - const { visits, loading, loadingLarge, error } = shortUrlVisits; - const showTableControls = !loading && visits.length > 0; - const normalizedVisits = useMemo(() => normalizeVisits(visits), [ visits ]); - const { os, browsers, referrers, countries, cities, citiesForMap } = useMemo( - () => processStatsFromVisits(normalizedVisits), - [ normalizedVisits ] - ); - const mapLocations = values(citiesForMap); - - const loadVisits = () => - getShortUrlVisits(shortCode, { startDate: format(startDate), endDate: format(endDate), domain }); + const loadVisits = (dates) => getShortUrlVisits(shortCode, { ...dates, domain }); useEffect(() => { getShortUrlDetail(shortCode, domain); - determineIsMobileDevice(); - window.addEventListener('resize', determineIsMobileDevice); - - return () => { - cancelGetShortUrlVisits(); - window.removeEventListener('resize', determineIsMobileDevice); - }; }, []); - useEffect(() => { - loadVisits(); - }, [ startDate, endDate ]); useEffect( bindToMercureTopic( mercureInfo, @@ -134,138 +65,10 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa [ mercureInfo ], ); - const renderVisitsContent = () => { - if (loading) { - const message = loadingLarge ? 'This is going to take a while... :S' : 'Loading...'; - - return {message}; - } - - if (error) { - return ( - - An error occurred while loading visits :( - - ); - } - - if (isEmpty(visits)) { - return There are no visits matching current filter :(; - } - - return ( -
-
- -
-
- -
-
- -
-
- -
-
- - mapLocations.length > 0 && - - } - sortingItems={{ - name: 'City name', - amount: 'Visits amount', - }} - onClick={highlightVisitsForProp('city')} - /> -
-
- ); - }; - return ( - + - -
-
-
- -
-
- {showTableControls && ( - - - - - - - - - )} -
-
-
- - {showTableControls && ( - - - - )} - -
- {renderVisitsContent()} -
- + ); }; diff --git a/src/visits/VisitsStats.js b/src/visits/VisitsStats.js new file mode 100644 index 00000000..50cd2d2c --- /dev/null +++ b/src/visits/VisitsStats.js @@ -0,0 +1,224 @@ +import { isEmpty, propEq, values } from 'ramda'; +import React, { useState, useEffect, useMemo } from 'react'; +import { Button, Card, Collapse } from 'reactstrap'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faChevronDown as chevronDown } from '@fortawesome/free-solid-svg-icons'; +import DateRangeRow from '../utils/DateRangeRow'; +import Message from '../utils/Message'; +import { formatDate } from '../utils/helpers/date'; +import { useToggle } from '../utils/helpers/hooks'; +import SortableBarGraph from './SortableBarGraph'; +import GraphCard from './GraphCard'; +import VisitsTable from './VisitsTable'; +import { VisitsInfoType } from './types'; + +const propTypes = { + children: PropTypes.node, + getVisits: PropTypes.func, + visitsInfo: VisitsInfoType, // TODO VisitsInfo type + cancelGetVisits: PropTypes.func, + matchMedia: PropTypes.func, +}; + +const highlightedVisitsToStats = (highlightedVisits, prop) => highlightedVisits.reduce((acc, highlightedVisit) => { + if (!acc[highlightedVisit[prop]]) { + acc[highlightedVisit[prop]] = 0; + } + + acc[highlightedVisit[prop]] += 1; + + return acc; +}, {}); +const format = formatDate(); +let selectedBar; + +const VisitsStats = ({ processStatsFromVisits, normalizeVisits }, OpenMapModalBtn) => { + const VisitsStatsComp = ({ children, visitsInfo, getVisits, cancelGetVisits, matchMedia = window.matchMedia }) => { + const [ startDate, setStartDate ] = useState(undefined); + const [ endDate, setEndDate ] = useState(undefined); + const [ showTable, toggleTable ] = useToggle(); + const [ tableIsSticky, , setSticky, unsetSticky ] = useToggle(); + const [ highlightedVisits, setHighlightedVisits ] = useState([]); + const [ isMobileDevice, setIsMobileDevice ] = useState(false); + const determineIsMobileDevice = () => setIsMobileDevice(matchMedia('(max-width: 991px)').matches); + const setSelectedVisits = (selectedVisits) => { + selectedBar = undefined; + setHighlightedVisits(selectedVisits); + }; + const highlightVisitsForProp = (prop) => (value) => { + const newSelectedBar = `${prop}_${value}`; + + if (selectedBar === newSelectedBar) { + setHighlightedVisits([]); + selectedBar = undefined; + } else { + setHighlightedVisits(normalizedVisits.filter(propEq(prop, value))); + selectedBar = newSelectedBar; + } + }; + + const { visits, loading, loadingLarge, error } = visitsInfo; + const showTableControls = !loading && visits.length > 0; + const normalizedVisits = useMemo(() => normalizeVisits(visits), [ visits ]); + const { os, browsers, referrers, countries, cities, citiesForMap } = useMemo( + () => processStatsFromVisits(normalizedVisits), + [ normalizedVisits ] + ); + const mapLocations = values(citiesForMap); + + useEffect(() => { + determineIsMobileDevice(); + window.addEventListener('resize', determineIsMobileDevice); + + return () => { + cancelGetVisits(); + window.removeEventListener('resize', determineIsMobileDevice); + }; + }, []); + useEffect(() => { + getVisits({ startDate: format(startDate), endDate: format(endDate) }); + }, [ startDate, endDate ]); + + const renderVisitsContent = () => { + if (loading) { + const message = loadingLarge ? 'This is going to take a while... :S' : 'Loading...'; + + return {message}; + } + + if (error) { + return ( + + An error occurred while loading visits :( + + ); + } + + if (isEmpty(visits)) { + return There are no visits matching current filter :(; + } + + return ( +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + mapLocations.length > 0 && + + } + sortingItems={{ + name: 'City name', + amount: 'Visits amount', + }} + onClick={highlightVisitsForProp('city')} + /> +
+
+ ); + }; + + return ( + + {children} + +
+
+
+ +
+
+ {showTableControls && ( + + + + + + + + + )} +
+
+
+ + {showTableControls && ( + + + + )} + +
+ {renderVisitsContent()} +
+ + ); + }; + + VisitsStatsComp.propTypes = propTypes; + + return VisitsStatsComp; +}; + +export default VisitsStats; diff --git a/src/visits/reducers/shortUrlVisits.js b/src/visits/reducers/shortUrlVisits.js index f3be7e33..a52a4587 100644 --- a/src/visits/reducers/shortUrlVisits.js +++ b/src/visits/reducers/shortUrlVisits.js @@ -2,6 +2,7 @@ import { createAction, handleActions } from 'redux-actions'; import PropTypes from 'prop-types'; import { flatten, prop, range, splitEvery } from 'ramda'; import { shortUrlMatches } from '../../short-urls/helpers'; +import { VisitType } from '../types'; /* eslint-disable padding-line-between-statements */ export const GET_SHORT_URL_VISITS_START = 'shlink/shortUrlVisits/GET_SHORT_URL_VISITS_START'; @@ -12,24 +13,8 @@ export const GET_SHORT_URL_VISITS_CANCEL = 'shlink/shortUrlVisits/GET_SHORT_URL_ export const CREATE_SHORT_URL_VISIT = 'shlink/shortUrlVisits/CREATE_SHORT_URL_VISIT'; /* eslint-enable padding-line-between-statements */ -export const visitType = PropTypes.shape({ - referer: PropTypes.string, - date: PropTypes.string, - userAgent: PropTypes.string, - visitLocations: PropTypes.shape({ - countryCode: PropTypes.string, - countryName: PropTypes.string, - regionName: PropTypes.string, - cityName: PropTypes.string, - latitude: PropTypes.number, - longitude: PropTypes.number, - timezone: PropTypes.string, - isEmpty: PropTypes.bool, - }), -}); - -export const shortUrlVisitsType = PropTypes.shape({ - visits: PropTypes.arrayOf(visitType), +export const shortUrlVisitsType = PropTypes.shape({ // TODO Should extend from VisitInfoType + visits: PropTypes.arrayOf(VisitType), shortCode: PropTypes.string, domain: PropTypes.string, loading: PropTypes.bool, diff --git a/src/visits/services/provideServices.js b/src/visits/services/provideServices.js index 404bc4a1..9522f6e7 100644 --- a/src/visits/services/provideServices.js +++ b/src/visits/services/provideServices.js @@ -3,13 +3,15 @@ import { cancelGetShortUrlVisits, createNewVisit, getShortUrlVisits } from '../r import { getShortUrlDetail } from '../reducers/shortUrlDetail'; import OpenMapModalBtn from '../helpers/OpenMapModalBtn'; import MapModal from '../helpers/MapModal'; +import VisitsStats from '../VisitsStats'; import * as visitsParser from './VisitsParser'; const provideServices = (bottle, connect) => { // Components bottle.serviceFactory('OpenMapModalBtn', OpenMapModalBtn, 'MapModal'); bottle.serviceFactory('MapModal', () => MapModal); - bottle.serviceFactory('ShortUrlVisits', ShortUrlVisits, 'VisitsParser', 'OpenMapModalBtn'); + bottle.serviceFactory('VisitsStats', VisitsStats, 'VisitsParser', 'OpenMapModalBtn'); + bottle.serviceFactory('ShortUrlVisits', ShortUrlVisits, 'VisitsStats'); bottle.decorator('ShortUrlVisits', connect( [ 'shortUrlVisits', 'shortUrlDetail', 'mercureInfo', 'settings' ], [ 'getShortUrlVisits', 'getShortUrlDetail', 'cancelGetShortUrlVisits', 'createNewVisit', 'loadMercureInfo' ] diff --git a/src/visits/types/index.js b/src/visits/types/index.js new file mode 100644 index 00000000..941b4d61 --- /dev/null +++ b/src/visits/types/index.js @@ -0,0 +1,23 @@ +import PropTypes from 'prop-types'; + +export const VisitType = PropTypes.shape({ + referer: PropTypes.string, + date: PropTypes.string, + userAgent: PropTypes.string, + visitLocations: PropTypes.shape({ + countryCode: PropTypes.string, + countryName: PropTypes.string, + regionName: PropTypes.string, + cityName: PropTypes.string, + latitude: PropTypes.number, + longitude: PropTypes.number, + timezone: PropTypes.string, + isEmpty: PropTypes.bool, + }), +}); + +export const VisitsInfoType = PropTypes.shape({ + visits: PropTypes.arrayOf(VisitType), + loading: PropTypes.bool, + error: PropTypes.bool, +}); diff --git a/test/tags/TagCard.test.js b/test/tags/TagCard.test.js index 49fee1c8..6d806752 100644 --- a/test/tags/TagCard.test.js +++ b/test/tags/TagCard.test.js @@ -51,7 +51,7 @@ describe('', () => { expect(links.at(1).prop('to')).toEqual('/server/1/list-short-urls/1?tag=ssr'); expect(links.at(1).text()).toContain('48'); - expect(links.at(2).prop('to')).toEqual('/server/1/tags/ssr/visits'); + expect(links.at(2).prop('to')).toEqual('/server/1/tag/ssr/visits'); expect(links.at(2).text()).toContain('23,257'); }); }); diff --git a/test/visits/ShortUrlVisits.test.js b/test/visits/ShortUrlVisits.test.js index 76cf0b28..72d2c06b 100644 --- a/test/visits/ShortUrlVisits.test.js +++ b/test/visits/ShortUrlVisits.test.js @@ -1,18 +1,11 @@ import React from 'react'; import { shallow } from 'enzyme'; import { identity } from 'ramda'; -import { Card } from 'reactstrap'; import createShortUrlVisits from '../../src/visits/ShortUrlVisits'; -import Message from '../../src/utils/Message'; -import GraphCard from '../../src/visits/GraphCard'; -import SortableBarGraph from '../../src/visits/SortableBarGraph'; -import DateRangeRow from '../../src/utils/DateRangeRow'; +import VisitsHeader from '../../src/visits/VisitsHeader'; describe('', () => { let wrapper; - const processStatsFromVisits = () => ( - { os: {}, browsers: {}, referrers: {}, countries: {}, cities: {}, citiesForMap: {} } - ); const getShortUrlVisitsMock = jest.fn(); const match = { params: { shortCode: 'abc123' }, @@ -22,9 +15,10 @@ describe('', () => { goBack: jest.fn(), }; const realTimeUpdates = { enabled: true }; + const VisitsStats = jest.fn(); - const createComponent = (shortUrlVisits) => { - const ShortUrlVisits = createShortUrlVisits({ processStatsFromVisits, normalizeVisits: identity }, () => ''); + beforeEach(() => { + const ShortUrlVisits = createShortUrlVisits(VisitsStats); wrapper = shallow( ', () => { match={match} location={location} history={history} - shortUrlVisits={shortUrlVisits} + shortUrlVisits={{ loading: true, visits: [] }} shortUrlDetail={{}} cancelGetShortUrlVisits={identity} matchMedia={() => ({ matches: false })} settings={{ realTimeUpdates }} /> ); - - return wrapper; - }; - - afterEach(() => wrapper && wrapper.unmount()); - - it('renders a preloader when visits are loading', () => { - const wrapper = createComponent({ loading: true, visits: [] }); - const loadingMessage = wrapper.find(Message); - - expect(loadingMessage).toHaveLength(1); - expect(loadingMessage.html()).toContain('Loading...'); }); - it('renders a warning when loading large amounts of visits', () => { - const wrapper = createComponent({ loading: true, loadingLarge: true, visits: [] }); - const loadingMessage = wrapper.find(Message); + afterEach(() => wrapper.unmount()); + afterEach(jest.resetAllMocks); - expect(loadingMessage).toHaveLength(1); - expect(loadingMessage.html()).toContain('This is going to take a while... :S'); - }); + it('renders visit stats and visits header', () => { + const visitStats = wrapper.find(VisitsStats); + const visitHeader = wrapper.find(VisitsHeader); - it('renders an error message when visits could not be loaded', () => { - const wrapper = createComponent({ loading: false, error: true, visits: [] }); - const errorMessage = wrapper.find(Card); - - expect(errorMessage).toHaveLength(1); - expect(errorMessage.html()).toContain('An error occurred while loading visits :('); - }); - - it('renders a message when visits are loaded but the list is empty', () => { - const wrapper = createComponent({ loading: false, error: false, visits: [] }); - const message = wrapper.find(Message); - - expect(message).toHaveLength(1); - expect(message.html()).toContain('There are no visits matching current filter :('); - }); - - it('renders all graphics when visits are properly loaded', () => { - const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] }); - const graphs = wrapper.find(GraphCard); - const sortableBarGraphs = wrapper.find(SortableBarGraph); - - expect(graphs.length + sortableBarGraphs.length).toEqual(5); - }); - - it('reloads visits when selected dates change', () => { - const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] }); - const dateRange = wrapper.find(DateRangeRow); - - dateRange.simulate('startDateChange', '2016-01-01T00:00:00+01:00'); - dateRange.simulate('endDateChange', '2016-01-02T00:00:00+01:00'); - dateRange.simulate('endDateChange', '2016-01-03T00:00:00+01:00'); - - expect(wrapper.find(DateRangeRow).prop('startDate')).toEqual('2016-01-01T00:00:00+01:00'); - expect(wrapper.find(DateRangeRow).prop('endDate')).toEqual('2016-01-03T00:00:00+01:00'); - }); - - it('holds the map button content generator on cities graph extraHeaderContent', () => { - const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] }); - const citiesGraph = wrapper.find(SortableBarGraph).find('[title="Cities"]'); - const extraHeaderContent = citiesGraph.prop('extraHeaderContent'); - - expect(extraHeaderContent).toHaveLength(1); - expect(typeof extraHeaderContent).toEqual('function'); + expect(visitStats).toHaveLength(1); + expect(visitHeader).toHaveLength(1); }); }); diff --git a/test/visits/VisitsStats.test.js b/test/visits/VisitsStats.test.js new file mode 100644 index 00000000..225317cd --- /dev/null +++ b/test/visits/VisitsStats.test.js @@ -0,0 +1,95 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { identity } from 'ramda'; +import { Card } from 'reactstrap'; +import createVisitStats from '../../src/visits/VisitsStats'; +import Message from '../../src/utils/Message'; +import GraphCard from '../../src/visits/GraphCard'; +import SortableBarGraph from '../../src/visits/SortableBarGraph'; +import DateRangeRow from '../../src/utils/DateRangeRow'; + +describe('', () => { + let wrapper; + const processStatsFromVisits = () => ( + { os: {}, browsers: {}, referrers: {}, countries: {}, cities: {}, citiesForMap: {} } + ); + const getVisitsMock = jest.fn(); + + const createComponent = (visitsInfo) => { + const VisitStats = createVisitStats({ processStatsFromVisits, normalizeVisits: identity }, () => ''); + + wrapper = shallow( + ({ matches: false })} + /> + ); + + return wrapper; + }; + + afterEach(() => wrapper && wrapper.unmount()); + + it('renders a preloader when visits are loading', () => { + const wrapper = createComponent({ loading: true, visits: [] }); + const loadingMessage = wrapper.find(Message); + + expect(loadingMessage).toHaveLength(1); + expect(loadingMessage.html()).toContain('Loading...'); + }); + + it('renders a warning when loading large amounts of visits', () => { + const wrapper = createComponent({ loading: true, loadingLarge: true, visits: [] }); + const loadingMessage = wrapper.find(Message); + + expect(loadingMessage).toHaveLength(1); + expect(loadingMessage.html()).toContain('This is going to take a while... :S'); + }); + + it('renders an error message when visits could not be loaded', () => { + const wrapper = createComponent({ loading: false, error: true, visits: [] }); + const errorMessage = wrapper.find(Card); + + expect(errorMessage).toHaveLength(1); + expect(errorMessage.html()).toContain('An error occurred while loading visits :('); + }); + + it('renders a message when visits are loaded but the list is empty', () => { + const wrapper = createComponent({ loading: false, error: false, visits: [] }); + const message = wrapper.find(Message); + + expect(message).toHaveLength(1); + expect(message.html()).toContain('There are no visits matching current filter :('); + }); + + it('renders all graphics when visits are properly loaded', () => { + const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] }); + const graphs = wrapper.find(GraphCard); + const sortableBarGraphs = wrapper.find(SortableBarGraph); + + expect(graphs.length + sortableBarGraphs.length).toEqual(5); + }); + + it('reloads visits when selected dates change', () => { + const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] }); + const dateRange = wrapper.find(DateRangeRow); + + dateRange.simulate('startDateChange', '2016-01-01T00:00:00+01:00'); + dateRange.simulate('endDateChange', '2016-01-02T00:00:00+01:00'); + dateRange.simulate('endDateChange', '2016-01-03T00:00:00+01:00'); + + expect(wrapper.find(DateRangeRow).prop('startDate')).toEqual('2016-01-01T00:00:00+01:00'); + expect(wrapper.find(DateRangeRow).prop('endDate')).toEqual('2016-01-03T00:00:00+01:00'); + }); + + it('holds the map button content generator on cities graph extraHeaderContent', () => { + const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] }); + const citiesGraph = wrapper.find(SortableBarGraph).find('[title="Cities"]'); + const extraHeaderContent = citiesGraph.prop('extraHeaderContent'); + + expect(extraHeaderContent).toHaveLength(1); + expect(typeof extraHeaderContent).toEqual('function'); + }); +});