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); + }); +});