Migrated OpenMapModalBtn test to react testing library

src/visits/VisitsStats.tsx

@@ -235,7 +235,7 @@ export const VisitsStats: FC<VisitsStatsProps> = ({
                       stats={cities}
                       highlightedStats={highlightedVisitsToStats(highlightedVisits, 'city')}
                       highlightedLabel={highlightedLabel}
-                      extraHeaderContent={(activeCities: string[]) => mapLocations.length > 0 && (
+                      extraHeaderContent={(activeCities) => mapLocations.length > 0 && (
                         <OpenMapModalBtn modalTitle="Cities" locations={mapLocations} activeCities={activeCities} />
                       )}
                       sortingItems={{

src/visits/charts/SortableBarChartCard.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { FC, ReactNode, useState } from 'react';
 import { fromPairs, pipe, reverse, sortBy, splitEvery, toLower, toPairs, type, zipObj } from 'ramda';
 import { rangeOf } from '../../utils/utils';
 import { Order } from '../../utils/helpers/ordering';
@@ -14,7 +14,7 @@ interface SortableBarChartCardProps extends Omit<HorizontalBarChartProps, 'max'>
   title: Function | string;
   sortingItems: Record<string, string>;
   withPagination?: boolean;
-  extraHeaderContent?: Function;
+  extraHeaderContent?: (activeCities?: string[]) => ReactNode;
 }
 
 const toLowerIfString = (value: any) => (type(value) === 'String' ? toLower(value) : value);

src/visits/helpers/MapModal.tsx

@@ -40,7 +40,7 @@ export const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProp
     <ModalBody className="map-modal__modal-body">
       <h3 className="map-modal__modal-title">
         {title}
-        <button type="button" className="btn-close float-end" onClick={toggle} />
+        <button type="button" className="btn-close float-end" aria-label="Close" onClick={toggle} />
       </h3>
       <MapContainer {...calculateMapProps(locations)}>
         <OpenStreetMapTile />

src/visits/helpers/OpenMapModalBtn.tsx

@@ -9,7 +9,7 @@ import './OpenMapModalBtn.scss';
 
 interface OpenMapModalBtnProps {
   modalTitle: string;
-  activeCities: string[];
+  activeCities?: string[];
   locations?: CityStats[];
 }
 
@@ -19,7 +19,9 @@ export const OpenMapModalBtn = ({ modalTitle, activeCities, locations = [] }: Op
   const [locationsToShow, setLocationsToShow] = useState<CityStats[]>([]);
   const id = useDomId();
 
-  const filterLocations = (cities: CityStats[]) => cities.filter(({ cityName }) => activeCities.includes(cityName));
+  const filterLocations = (cities: CityStats[]) => (
+    !activeCities ? cities : cities.filter(({ cityName }) => activeCities?.includes(cityName))
+  );
   const onClick = () => {
     if (!activeCities) {
       setLocationsToShow(locations);

test/visits/helpers/OpenMapModalBtn.test.tsx

@@ -1,61 +1,54 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen, waitFor } from '@testing-library/react';
-import { Dropdown, DropdownItem, UncontrolledTooltip } from 'reactstrap';
+import userEvent from '@testing-library/user-event';
 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: 'foo', count: 30, latLong: [5, 5] }),
-    Mock.of<CityStats>({ cityName: 'bar', count: 45 }),
+    Mock.of<CityStats>({ cityName: 'bar', count: 45, latLong: [88, 88] }),
   ];
-  const createWrapper = (activeCities: string[] = []) => {
+  const setUp = (activeCities?: string[]) => ({
-    wrapper = shallow(<OpenMapModalBtn modalTitle={title} locations={locations} activeCities={activeCities} />);
+    user: userEvent.setup(),
-
+    ...render(<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', () => {
+  it('renders tooltip on button hover and opens modal on click', async () => {
-    const wrapper = createWrapper(['bar']);
+    const { user } = setUp();
 
-    wrapper.find('.open-map-modal-btn__btn').simulate('click');
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
 
-    expect(wrapper.find(Dropdown).prop('isOpen')).toEqual(true);
+    await user.click(screen.getByRole('button'));
-    expect(wrapper.find(MapModal).prop('isOpen')).toEqual(false);
+    await waitFor(() => expect(screen.getByRole('tooltip')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByRole('dialog')).toBeInTheDocument());
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
   });
 
-  it('filters out non-active cities from list of locations', () => {
+  it('opens dropdown instead of modal when a list of active cities has been provided', async () => {
-    const wrapper = createWrapper(['bar']);
+    const { user } = setUp(['bar']);
 
-    wrapper.find('.open-map-modal-btn__btn').simulate('click');
+    expect(screen.queryByRole('menu')).not.toBeInTheDocument();
-    wrapper.find(Dropdown).find(DropdownItem).at(1).simulate('click');
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 
-    const modal = wrapper.find(MapModal);
+    await user.click(screen.getByRole('button'));
 
-    expect(modal.prop('title')).toEqual(title);
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument());
-    expect(modal.prop('locations')).toEqual([
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-      {
+  });
-        cityName: 'bar',
+
-        count: 45,
+  it.each([
-      },
+    ['Show all locations'],
-    ]);
+    ['Show locations in current page'],
+  ])('filters out non-active cities from list of locations', async (name) => {
+    const { user } = setUp(['bar']);
+
+    await user.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('menuitem', { name }));
+
+    expect(await screen.findByRole('dialog')).toMatchSnapshot();
   });
 });

test/visits/helpers/__snapshots__/OpenMapModalBtn.test.tsx.snap

@@ -0,0 +1,353 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<OpenMapModalBtn /> filters out non-active cities from list of locations 1`] = `
+<div
+  class="modal fade"
+  role="dialog"
+  style="display: block;"
+  tabindex="-1"
+>
+  <div
+    class="modal-dialog map-modal__modal"
+    role="document"
+  >
+    <div
+      class="modal-content map-modal__modal-content"
+    >
+      <div
+        class="map-modal__modal-body modal-body"
+      >
+        <h3
+          class="map-modal__modal-title"
+        >
+          Foo
+          <button
+            aria-label="Close"
+            class="btn-close float-end"
+            type="button"
+          />
+        </h3>
+        <div
+          class="leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+          style="position: relative;"
+          tabindex="0"
+        >
+          <div
+            class="leaflet-pane leaflet-map-pane"
+            style="left: 0px; top: 0px;"
+          >
+            <div
+              class="leaflet-pane leaflet-tile-pane"
+            >
+              <div
+                class="leaflet-layer "
+                style="z-index: 1;"
+              >
+                <div
+                  class="leaflet-tile-container leaflet-zoom-animated"
+                  style="z-index: 18; left: 0px; top: 0px;"
+                >
+                  <img
+                    alt=""
+                    class="leaflet-tile"
+                    role="presentation"
+                    src="https://a.tile.openstreetmap.org/0/0/0.png"
+                    style="width: 256px; height: 256px; left: -161px; top: -62px;"
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              class="leaflet-pane leaflet-overlay-pane"
+            />
+            <div
+              class="leaflet-pane leaflet-shadow-pane"
+            >
+              <img
+                alt=""
+                class="leaflet-marker-shadow leaflet-zoom-hide"
+                src="marker-shadow.png"
+                style="margin-left: -12px; margin-top: -41px; width: 41px; height: 41px; left: -29px; top: 62px;"
+              />
+              <img
+                alt=""
+                class="leaflet-marker-shadow leaflet-zoom-hide"
+                src="marker-shadow.png"
+                style="margin-left: -12px; margin-top: -41px; width: 41px; height: 41px; left: 30px; top: -62px;"
+              />
+            </div>
+            <div
+              class="leaflet-pane leaflet-marker-pane"
+            >
+              <img
+                alt="Marker"
+                class="leaflet-marker-icon leaflet-zoom-hide leaflet-interactive"
+                role="button"
+                src="marker-icon.png"
+                style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; left: -29px; top: 62px; z-index: 62;"
+                tabindex="0"
+              />
+              <img
+                alt="Marker"
+                class="leaflet-marker-icon leaflet-zoom-hide leaflet-interactive"
+                role="button"
+                src="marker-icon.png"
+                style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; left: 30px; top: -62px; z-index: -62;"
+                tabindex="0"
+              />
+            </div>
+            <div
+              class="leaflet-pane leaflet-tooltip-pane"
+            />
+            <div
+              class="leaflet-pane leaflet-popup-pane"
+            />
+          </div>
+          <div
+            class="leaflet-control-container"
+          >
+            <div
+              class="leaflet-top leaflet-left"
+            >
+              <div
+                class="leaflet-control-zoom leaflet-bar leaflet-control"
+              >
+                <a
+                  aria-disabled="false"
+                  aria-label="Zoom in"
+                  class="leaflet-control-zoom-in"
+                  href="#"
+                  role="button"
+                  title="Zoom in"
+                >
+                  <span
+                    aria-hidden="true"
+                  >
+                    +
+                  </span>
+                </a>
+                <a
+                  aria-disabled="true"
+                  aria-label="Zoom out"
+                  class="leaflet-control-zoom-out leaflet-disabled"
+                  href="#"
+                  role="button"
+                  title="Zoom out"
+                >
+                  <span
+                    aria-hidden="true"
+                  >
+                    −
+                  </span>
+                </a>
+              </div>
+            </div>
+            <div
+              class="leaflet-top leaflet-right"
+            />
+            <div
+              class="leaflet-bottom leaflet-left"
+            />
+            <div
+              class="leaflet-bottom leaflet-right"
+            >
+              <div
+                class="leaflet-control-attribution leaflet-control"
+              >
+                <a
+                  href="https://leafletjs.com"
+                  title="A JavaScript library for interactive maps"
+                >
+                  Leaflet
+                </a>
+                 
+                <span
+                  aria-hidden="true"
+                >
+                  |
+                </span>
+                 © 
+                <a
+                  href="http://osm.org/copyright"
+                >
+                  OpenStreetMap
+                </a>
+                 contributors
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<OpenMapModalBtn /> filters out non-active cities from list of locations 2`] = `
+<div
+  class="modal fade"
+  role="dialog"
+  style="display: block;"
+  tabindex="-1"
+>
+  <div
+    class="modal-dialog map-modal__modal"
+    role="document"
+  >
+    <div
+      class="modal-content map-modal__modal-content"
+    >
+      <div
+        class="map-modal__modal-body modal-body"
+      >
+        <h3
+          class="map-modal__modal-title"
+        >
+          Foo
+          <button
+            aria-label="Close"
+            class="btn-close float-end"
+            type="button"
+          />
+        </h3>
+        <div
+          class="leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+          style="position: relative;"
+          tabindex="0"
+        >
+          <div
+            class="leaflet-pane leaflet-map-pane"
+            style="left: 0px; top: 0px;"
+          >
+            <div
+              class="leaflet-pane leaflet-tile-pane"
+            >
+              <div
+                class="leaflet-layer "
+                style="z-index: 1;"
+              >
+                <div
+                  class="leaflet-tile-container leaflet-zoom-animated"
+                  style="z-index: 18; left: 0px; top: 0px;"
+                >
+                  <img
+                    alt=""
+                    class="leaflet-tile"
+                    role="presentation"
+                    src="https://a.tile.openstreetmap.org/10/762/0.png"
+                    style="width: 256px; height: 256px; left: -80px; top: 0px;"
+                  />
+                </div>
+              </div>
+            </div>
+            <div
+              class="leaflet-pane leaflet-overlay-pane"
+            />
+            <div
+              class="leaflet-pane leaflet-shadow-pane"
+            >
+              <img
+                alt=""
+                class="leaflet-marker-shadow leaflet-zoom-hide"
+                src="marker-shadow.png"
+                style="margin-left: -12px; margin-top: -41px; width: 41px; height: 41px; left: 0px; top: 0px;"
+              />
+            </div>
+            <div
+              class="leaflet-pane leaflet-marker-pane"
+            >
+              <img
+                alt="Marker"
+                class="leaflet-marker-icon leaflet-zoom-hide leaflet-interactive"
+                role="button"
+                src="marker-icon.png"
+                style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; left: 0px; top: 0px; z-index: 0;"
+                tabindex="0"
+              />
+            </div>
+            <div
+              class="leaflet-pane leaflet-tooltip-pane"
+            />
+            <div
+              class="leaflet-pane leaflet-popup-pane"
+            />
+          </div>
+          <div
+            class="leaflet-control-container"
+          >
+            <div
+              class="leaflet-top leaflet-left"
+            >
+              <div
+                class="leaflet-control-zoom leaflet-bar leaflet-control"
+              >
+                <a
+                  aria-disabled="false"
+                  aria-label="Zoom in"
+                  class="leaflet-control-zoom-in"
+                  href="#"
+                  role="button"
+                  title="Zoom in"
+                >
+                  <span
+                    aria-hidden="true"
+                  >
+                    +
+                  </span>
+                </a>
+                <a
+                  aria-disabled="false"
+                  aria-label="Zoom out"
+                  class="leaflet-control-zoom-out"
+                  href="#"
+                  role="button"
+                  title="Zoom out"
+                >
+                  <span
+                    aria-hidden="true"
+                  >
+                    −
+                  </span>
+                </a>
+              </div>
+            </div>
+            <div
+              class="leaflet-top leaflet-right"
+            />
+            <div
+              class="leaflet-bottom leaflet-left"
+            />
+            <div
+              class="leaflet-bottom leaflet-right"
+            >
+              <div
+                class="leaflet-control-attribution leaflet-control"
+              >
+                <a
+                  href="https://leafletjs.com"
+                  title="A JavaScript library for interactive maps"
+                >
+                  Leaflet
+                </a>
+                 
+                <span
+                  aria-hidden="true"
+                >
+                  |
+                </span>
+                 © 
+                <a
+                  href="http://osm.org/copyright"
+                >
+                  OpenStreetMap
+                </a>
+                 contributors
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;