Fixed and improved OpenMapModalBtn and ShortUrlVisit components tests

src/visits/ShortUrlVisits.js

@@ -12,9 +12,11 @@ import VisitsHeader from './VisitsHeader';
 import GraphCard from './GraphCard';
 import { shortUrlDetailType } from './reducers/shortUrlDetail';
 import './ShortUrlVisits.scss';
-import OpenMapModalBtn from './helpers/OpenMapModalBtn';
 
-const ShortUrlVisits = ({ processStatsFromVisits }) => class ShortUrlVisits extends React.PureComponent {
+const ShortUrlVisits = (
+  { processStatsFromVisits },
+  OpenMapModalBtn
+) => class ShortUrlVisits extends React.PureComponent {
   static propTypes = {
     match: PropTypes.shape({
       params: PropTypes.object,

src/visits/helpers/OpenMapModalBtn.js

@@ -3,7 +3,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMapMarkedAlt as mapIcon } from '@fortawesome/free-solid-svg-icons';
 import { Dropdown, DropdownItem, DropdownMenu, UncontrolledTooltip } from 'reactstrap';
 import * as PropTypes from 'prop-types';
-import MapModal from './MapModal';
 import './OpenMapModalBtn.scss';
 
 const propTypes = {
@@ -12,7 +11,8 @@ const propTypes = {
   activeCities: PropTypes.arrayOf(PropTypes.string),
 };
 
-const OpenMapModalBtn = ({ modalTitle, locations = [], activeCities }) => {
+const OpenMapModalBtn = (MapModal) => {
+  const OpenMapModalBtn = ({ modalTitle, locations = [], activeCities }) => {
     const [ mapIsOpened, setMapIsOpened ] = useState(false);
     const [ dropdownIsOpened, setDropdownIsOpened ] = useState(false);
     const [ locationsToShow, setLocationsToShow ] = useState([]);
@@ -21,12 +21,6 @@ const OpenMapModalBtn = ({ modalTitle, locations = [], activeCities }) => {
     const filterLocations = (locations) => locations.filter(({ cityName }) => activeCities.includes(cityName));
     const toggleMap = () => setMapIsOpened(!mapIsOpened);
     const onClick = () => {
-    if (mapIsOpened) {
-      setMapIsOpened(false);
-
-      return;
-    }
-
       if (!activeCities) {
         setLocationsToShow(locations);
         setMapIsOpened(true);
@@ -56,8 +50,11 @@ const OpenMapModalBtn = ({ modalTitle, locations = [], activeCities }) => {
         <MapModal toggle={toggleMap} isOpen={mapIsOpened} title={modalTitle} locations={locationsToShow} />
       </React.Fragment>
     );
+  };
+
+  OpenMapModalBtn.propTypes = propTypes;
+
+  return OpenMapModalBtn;
 };
 
-OpenMapModalBtn.propTypes = propTypes;
-
 export default OpenMapModalBtn;

src/visits/services/provideServices.js

@@ -1,11 +1,15 @@
 import ShortUrlVisits from '../ShortUrlVisits';
 import { cancelGetShortUrlVisits, getShortUrlVisits } from '../reducers/shortUrlVisits';
 import { getShortUrlDetail } from '../reducers/shortUrlDetail';
+import OpenMapModalBtn from '../helpers/OpenMapModalBtn';
+import MapModal from '../helpers/MapModal';
 import * as visitsParser from './VisitsParser';
 
 const provideServices = (bottle, connect) => {
   // Components
-  bottle.serviceFactory('ShortUrlVisits', ShortUrlVisits, 'VisitsParser');
+  bottle.serviceFactory('OpenMapModalBtn', OpenMapModalBtn, 'MapModal');
+  bottle.serviceFactory('MapModal', () => MapModal);
+  bottle.serviceFactory('ShortUrlVisits', ShortUrlVisits, 'VisitsParser', 'OpenMapModalBtn');
   bottle.decorator('ShortUrlVisits', connect(
     [ 'shortUrlVisits', 'shortUrlDetail' ],
     [ 'getShortUrlVisits', 'getShortUrlDetail', 'cancelGetShortUrlVisits' ]

test/visits/ShortUrlVisits.test.js

@@ -104,6 +104,6 @@ describe('<ShortUrlVisits />', () => {
     const extraHeaderContent = citiesGraph.prop('extraHeaderContent');
 
     expect(extraHeaderContent).toHaveLength(1);
-    expect(typeof extraHeaderContent[0]).toEqual('function');
+    expect(typeof extraHeaderContent).toEqual('function');
   });
 });

test/visits/helpers/OpenMapModalBtn.test.js

@@ -1,42 +1,97 @@
 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';
+import { mount } from 'enzyme';
+import { Dropdown, DropdownItem, UncontrolledTooltip } from 'reactstrap';
+import createOpenMapModalBtn from '../../../src/visits/helpers/OpenMapModalBtn';
 
 describe('<OpenMapModalBtn />', () => {
   let wrapper;
   const title = 'Foo';
-  const locations = [];
+  const locations = [
+    {
+      cityName: 'foo',
+      count: 30,
+    },
+    {
+      cityName: 'bar',
+      count: 45,
+    },
+  ];
+  const MapModal = () => '';
+  const OpenMapModalBtn = createOpenMapModalBtn(MapModal);
+  const createWrapper = (activeCities) => {
+    wrapper = mount(<OpenMapModalBtn modalTitle={title} locations={locations} activeCities={activeCities} />);
 
-  beforeEach(() => {
-    wrapper = shallow(<OpenMapModalBtn modalTitle={title} locations={locations} />);
-  });
+    return wrapper;
+  };
 
-  afterEach(() => wrapper.unmount());
+  afterEach(() => wrapper && wrapper.unmount());
 
-  it('Renders expected content', () => {
+  it('renders expected content', () => {
+    const wrapper = createWrapper();
     const button = wrapper.find('.open-map-modal-btn__btn');
     const tooltip = wrapper.find(UncontrolledTooltip);
+    const dropdown = wrapper.find(Dropdown);
     const modal = wrapper.find(MapModal);
 
     expect(button).toHaveLength(1);
     expect(tooltip).toHaveLength(1);
+    expect(dropdown).toHaveLength(1);
     expect(modal).toHaveLength(1);
   });
 
-  it('changes modal visibility when toggled', () => {
-    const modal = wrapper.find(MapModal);
+  it('sets provided props to the map', (done) => {
+    const wrapper = createWrapper();
+    const button = wrapper.find('.open-map-modal-btn__btn');
 
-    expect(wrapper.state('mapIsOpened')).toEqual(false);
-    modal.prop('toggle')();
-    expect(wrapper.state('mapIsOpened')).toEqual(true);
-  });
-
-  it('sets provided props to the map', () => {
+    button.simulate('click');
+    setImmediate(() => {
       const modal = wrapper.find(MapModal);
 
       expect(modal.prop('title')).toEqual(title);
       expect(modal.prop('locations')).toEqual(locations);
+      expect(modal.prop('isOpen')).toEqual(true);
+      done();
+    });
+  });
+
+  it('opens dropdown instead of modal when a list of active cities has been provided', (done) => {
+    const wrapper = createWrapper([ 'bar' ]);
+    const button = wrapper.find('.open-map-modal-btn__btn');
+
+    button.simulate('click');
+
+    setImmediate(() => {
+      const dropdown = wrapper.find(Dropdown);
+      const modal = wrapper.find(MapModal);
+
+      expect(dropdown.prop('isOpen')).toEqual(true);
+      expect(modal.prop('isOpen')).toEqual(false);
+      done();
+    });
+  });
+
+  it('filters out non-active cities from list of locations', (done) => {
+    const wrapper = createWrapper([ 'bar' ]);
+    const button = wrapper.find('.open-map-modal-btn__btn');
+
+    button.simulate('click');
+    setImmediate(() => {
+      const dropdown = wrapper.find(Dropdown);
+      const item = dropdown.find(DropdownItem).at(1);
+
+      item.simulate('click');
+      setImmediate(() => {
+        const modal = wrapper.find(MapModal);
+
+        expect(modal.prop('title')).toEqual(title);
+        expect(modal.prop('locations')).toEqual([
+          {
+            cityName: 'bar',
+            count: 45,
+          },
+        ]);
+        done();
+      });
+    });
   });
 });