Created tests for new map-related components

test/visits/ShortUrlVisits.test.js

@@ -24,6 +24,7 @@ describe('<ShortUrlVisits />', () => {
       processOsStats: statsProcessor,
       processReferrersStats: statsProcessor,
       processCitiesStats: statsProcessor,
+      processCitiesStatsForMap: statsProcessor,
     });
 
     wrapper = shallow(
@@ -92,4 +93,13 @@ describe('<ShortUrlVisits />', () => {
     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');
+  });
 });

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('<MapModal />', () => {
+  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(<MapModal toggle={toggle} isOpen={isOpen} title={title} locations={locations} />);
+  });
+
+  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}`);
+    });
+  });
+});

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('<OpenMapModalBtn />', () => {
+  let wrapper;
+  const title = 'Foo';
+  const locations = [];
+
+  beforeEach(() => {
+    wrapper = shallow(<OpenMapModalBtn modalTitle={title} locations={locations} />);
+  });
+
+  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);
+  });
+});