diff --git a/test/visits/ShortUrlVisits.test.js b/test/visits/ShortUrlVisits.test.js
index 152b4c71..843bc68a 100644
--- a/test/visits/ShortUrlVisits.test.js
+++ b/test/visits/ShortUrlVisits.test.js
@@ -24,6 +24,7 @@ describe('', () => {
processOsStats: statsProcessor,
processReferrersStats: statsProcessor,
processCitiesStats: statsProcessor,
+ processCitiesStatsForMap: statsProcessor,
});
wrapper = shallow(
@@ -92,4 +93,13 @@ describe('', () => {
expect(getShortUrlVisitsMock.callCount).toEqual(expectedGetShortUrlVisitsCalls);
expect(wrapper.state('startDate')).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[0]).toEqual('function');
+ });
});
diff --git a/test/visits/helpers/MapModal.test.js b/test/visits/helpers/MapModal.test.js
new file mode 100644
index 00000000..050a4f02
--- /dev/null
+++ b/test/visits/helpers/MapModal.test.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Modal, ModalHeader } from 'reactstrap';
+import { Marker, Popup } from 'react-leaflet';
+import MapModal from '../../../src/visits/helpers/MapModal';
+
+describe('', () => {
+ let wrapper;
+ const toggle = () => '';
+ const isOpen = true;
+ const title = 'Foobar';
+ const zaragozaLat = 41.6563497;
+ const zaragozaLong = -0.876566;
+ const newYorkLat = 40.730610;
+ const newYorkLong = -73.935242;
+ const locations = [
+ {
+ cityName: 'Zaragoza',
+ count: 54,
+ latLong: [ zaragozaLat, zaragozaLong ],
+ },
+ {
+ cityName: 'New York',
+ count: 7,
+ latLong: [ newYorkLat, newYorkLong ],
+ },
+ ];
+
+ beforeEach(() => {
+ wrapper = shallow();
+ });
+
+ afterEach(() => wrapper.unmount());
+
+ it('renders modal with provided props', () => {
+ const modal = wrapper.find(Modal);
+ const headerheader = wrapper.find(ModalHeader);
+
+ expect(modal.prop('toggle')).toEqual(toggle);
+ expect(modal.prop('isOpen')).toEqual(isOpen);
+ expect(headerheader.prop('toggle')).toEqual(toggle);
+ expect(headerheader.prop('children')).toEqual(title);
+ });
+
+ it('renders open street map tile', () => {
+ expect(wrapper.find('OpenStreetMapTile')).toHaveLength(1);
+ });
+
+ it('renders proper amount of markers', () => {
+ const markers = wrapper.find(Marker);
+
+ expect(markers).toHaveLength(locations.length);
+ locations.forEach(({ latLong, count, cityName }, index) => {
+ const marker = markers.at(index);
+ const popup = marker.find(Popup);
+
+ expect(marker.prop('position')).toEqual(latLong);
+ expect(popup.text()).toEqual(`${count} visits from ${cityName}`);
+ });
+ });
+});
diff --git a/test/visits/helpers/OpenMapModalBtn.test.js b/test/visits/helpers/OpenMapModalBtn.test.js
new file mode 100644
index 00000000..3548992b
--- /dev/null
+++ b/test/visits/helpers/OpenMapModalBtn.test.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { UncontrolledTooltip } from 'reactstrap';
+import OpenMapModalBtn from '../../../src/visits/helpers/OpenMapModalBtn';
+import MapModal from '../../../src/visits/helpers/MapModal';
+
+describe('', () => {
+ let wrapper;
+ const title = 'Foo';
+ const locations = [];
+
+ beforeEach(() => {
+ wrapper = shallow();
+ });
+
+ afterEach(() => wrapper.unmount());
+
+ it('Renders expected content', () => {
+ const button = wrapper.find('.open-map-modal-btn__btn');
+ const tooltip = wrapper.find(UncontrolledTooltip);
+ const modal = wrapper.find(MapModal);
+
+ expect(button).toHaveLength(1);
+ expect(tooltip).toHaveLength(1);
+ expect(modal).toHaveLength(1);
+ });
+
+ it('changes modal visibility when toggled', () => {
+ const modal = wrapper.find(MapModal);
+
+ expect(wrapper.state('mapIsOpened')).toEqual(false);
+ modal.prop('toggle')();
+ expect(wrapper.state('mapIsOpened')).toEqual(true);
+ });
+
+ it('sets provided props to the map', () => {
+ const modal = wrapper.find(MapModal);
+
+ expect(modal.prop('title')).toEqual(title);
+ expect(modal.prop('locations')).toEqual(locations);
+ });
+});