Migrated first visits helper components to TS

test/visits/helpers/OpenMapModalBtn.test.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Dropdown, DropdownItem, UncontrolledTooltip } from 'reactstrap';
+import { Mock } from 'ts-mockery';
+import OpenMapModalBtn from '../../../src/visits/helpers/OpenMapModalBtn';
+import MapModal from '../../../src/visits/helpers/MapModal';
+import { CityStats } from '../../../src/visits/types';
+
+describe('<OpenMapModalBtn />', () => {
+  let wrapper: ShallowWrapper;
+  const title = 'Foo';
+  const locations = [
+    Mock.of<CityStats>({ cityName: 'foo', count: 30 }),
+    Mock.of<CityStats>({ cityName: 'bar', count: 45 }),
+  ];
+  const createWrapper = (activeCities: string[] = []) => {
+    wrapper = shallow(<OpenMapModalBtn modalTitle={title} locations={locations} activeCities={activeCities} />);
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper?.unmount());
+
+  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('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();
+      });
+    });
+  });
+});