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,52 +11,50 @@ const propTypes = {
   activeCities: PropTypes.arrayOf(PropTypes.string),
 };
 
-const OpenMapModalBtn = ({ modalTitle, locations = [], activeCities }) => {
+const OpenMapModalBtn = (MapModal) => {
-  const [ mapIsOpened, setMapIsOpened ] = useState(false);
+  const OpenMapModalBtn = ({ modalTitle, locations = [], activeCities }) => {
-  const [ dropdownIsOpened, setDropdownIsOpened ] = useState(false);
+    const [ mapIsOpened, setMapIsOpened ] = useState(false);
-  const [ locationsToShow, setLocationsToShow ] = useState([]);
+    const [ dropdownIsOpened, setDropdownIsOpened ] = useState(false);
+    const [ locationsToShow, setLocationsToShow ] = useState([]);
 
-  const buttonRef = React.createRef();
+    const buttonRef = React.createRef();
-  const filterLocations = (locations) => locations.filter(({ cityName }) => activeCities.includes(cityName));
+    const filterLocations = (locations) => locations.filter(({ cityName }) => activeCities.includes(cityName));
-  const toggleMap = () => setMapIsOpened(!mapIsOpened);
+    const toggleMap = () => setMapIsOpened(!mapIsOpened);
-  const onClick = () => {
+    const onClick = () => {
-    if (mapIsOpened) {
+      if (!activeCities) {
-      setMapIsOpened(false);
+        setLocationsToShow(locations);
+        setMapIsOpened(true);
 
-      return;
+        return;
-    }
+      }
 
-    if (!activeCities) {
+      setDropdownIsOpened(true);
-      setLocationsToShow(locations);
+    };
+    const openMapWithLocations = (filtered) => () => {
+      setLocationsToShow(filtered ? filterLocations(locations) : locations);
       setMapIsOpened(true);
+    };
 
-      return;
+    return (
-    }
+      <React.Fragment>
-
+        <button className="btn btn-link open-map-modal-btn__btn" ref={buttonRef} onClick={onClick}>
-    setDropdownIsOpened(true);
+          <FontAwesomeIcon icon={mapIcon} />
-  };
+        </button>
-  const openMapWithLocations = (filtered) => () => {
+        <UncontrolledTooltip placement="left" target={() => buttonRef.current}>Show in map</UncontrolledTooltip>
-    setLocationsToShow(filtered ? filterLocations(locations) : locations);
+        <Dropdown isOpen={dropdownIsOpened} toggle={() => setDropdownIsOpened(!dropdownIsOpened)} inNavbar>
-    setMapIsOpened(true);
+          <DropdownMenu right>
+            <DropdownItem onClick={openMapWithLocations(false)}>Show all locations</DropdownItem>
+            <DropdownItem onClick={openMapWithLocations(true)}>Show locations in current page</DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+        <MapModal toggle={toggleMap} isOpen={mapIsOpened} title={modalTitle} locations={locationsToShow} />
+      </React.Fragment>
+    );
   };
 
-  return (
+  OpenMapModalBtn.propTypes = propTypes;
-    <React.Fragment>
+
-      <button className="btn btn-link open-map-modal-btn__btn" ref={buttonRef} onClick={onClick}>
+  return OpenMapModalBtn;
-        <FontAwesomeIcon icon={mapIcon} />
-      </button>
-      <UncontrolledTooltip placement="left" target={() => buttonRef.current}>Show in map</UncontrolledTooltip>
-      <Dropdown isOpen={dropdownIsOpened} toggle={() => setDropdownIsOpened(!dropdownIsOpened)} inNavbar>
-        <DropdownMenu right>
-          <DropdownItem onClick={openMapWithLocations(false)}>Show all locations</DropdownItem>
-          <DropdownItem onClick={openMapWithLocations(true)}>Show locations in current page</DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
-      <MapModal toggle={toggleMap} isOpen={mapIsOpened} title={modalTitle} locations={locationsToShow} />
-    </React.Fragment>
-  );
 };
 
-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 { mount } from 'enzyme';
-import { UncontrolledTooltip } from 'reactstrap';
+import { Dropdown, DropdownItem, UncontrolledTooltip } from 'reactstrap';
-import OpenMapModalBtn from '../../../src/visits/helpers/OpenMapModalBtn';
+import createOpenMapModalBtn from '../../../src/visits/helpers/OpenMapModalBtn';
-import MapModal from '../../../src/visits/helpers/MapModal';
 
 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(() => {
+    return wrapper;
-    wrapper = shallow(<OpenMapModalBtn modalTitle={title} locations={locations} />);
+  };
-  });
 
-  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', () => {
+  it('sets provided props to the map', (done) => {
-    const modal = wrapper.find(MapModal);
+    const wrapper = createWrapper();
+    const button = wrapper.find('.open-map-modal-btn__btn');
 
-    expect(wrapper.state('mapIsOpened')).toEqual(false);
+    button.simulate('click');
-    modal.prop('toggle')();
+    setImmediate(() => {
-    expect(wrapper.state('mapIsOpened')).toEqual(true);
+      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('sets provided props to the map', () => {
+  it('opens dropdown instead of modal when a list of active cities has been provided', (done) => {
-    const modal = wrapper.find(MapModal);
+    const wrapper = createWrapper([ 'bar' ]);
+    const button = wrapper.find('.open-map-modal-btn__btn');
 
-    expect(modal.prop('title')).toEqual(title);
+    button.simulate('click');
-    expect(modal.prop('locations')).toEqual(locations);
+
+    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();
+      });
+    });
   });
 });