Fixed and improved OpenMapModalBtn and ShortUrlVisit components tests

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);
+    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('sets provided props to the map', () => {
-    const modal = wrapper.find(MapModal);
+  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');
 
-    expect(modal.prop('title')).toEqual(title);
-    expect(modal.prop('locations')).toEqual(locations);
+    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();
+      });
+    });
   });
 });