From b75fd2e03af71fc47c093789534f6464507de7dd Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 11 Jun 2022 17:38:12 +0200
Subject: [PATCH] Migrated MapModal test to react testing library

---
 test/visits/helpers/MapModal.test.tsx         |  43 +---
 .../__snapshots__/MapModal.test.tsx.snap      | 183 ++++++++++++++++++
 2 files changed, 188 insertions(+), 38 deletions(-)
 create mode 100644 test/visits/helpers/__snapshots__/MapModal.test.tsx.snap

diff --git a/test/visits/helpers/MapModal.test.tsx b/test/visits/helpers/MapModal.test.tsx
index f582a582..2b053896 100644
--- a/test/visits/helpers/MapModal.test.tsx
+++ b/test/visits/helpers/MapModal.test.tsx
@@ -1,14 +1,9 @@
-import { shallow, ShallowWrapper } from 'enzyme';
-import { Marker, Popup } from 'react-leaflet';
-import { Modal } from 'reactstrap';
+import { render, screen } from '@testing-library/react';
 import { MapModal } from '../../../src/visits/helpers/MapModal';
 import { CityStats } from '../../../src/visits/types';
 
 describe('<MapModal />', () => {
-  let wrapper: ShallowWrapper;
-  const toggle = () => '';
-  const isOpen = true;
-  const title = 'Foobar';
+  const toggle = jest.fn();
   const zaragozaLat = 41.6563497;
   const zaragozaLong = -0.876566;
   const newYorkLat = 40.730610;
@@ -26,36 +21,8 @@ describe('<MapModal />', () => {
     },
   ];
 
-  beforeEach(() => {
-    wrapper = shallow(<MapModal toggle={toggle} isOpen={isOpen} title={title} locations={locations} />);
-  });
-
-  afterEach(() => wrapper.unmount());
-
-  it('renders modal with provided props', () => {
-    const modal = wrapper.find(Modal);
-    const header = wrapper.find('.map-modal__modal-title');
-
-    expect(modal.prop('toggle')).toEqual(toggle);
-    expect(modal.prop('isOpen')).toEqual(isOpen);
-    expect(header.find('.btn-close').prop('onClick')).toEqual(toggle);
-    expect(header.text()).toContain(title);
-  });
-
-  it('renders open street map tile', () => {
-    expect(wrapper.find('OpenStreetMapTile')).toHaveLength(1);
-  });
-
-  it('renders proper amount of markers', () => {
-    const markers = wrapper.find(Marker);
-
-    expect(markers).toHaveLength(locations.length);
-    locations.forEach(({ latLong, count, cityName }, index) => {
-      const marker = markers.at(index);
-      const popup = marker.find(Popup);
-
-      expect(marker.prop('position')).toEqual(latLong);
-      expect(popup.text()).toEqual(`${count} visits from ${cityName}`);
-    });
+  it('renders expected map', () => {
+    render(<MapModal toggle={toggle} isOpen title="Foobar" locations={locations} />);
+    expect(screen.getByRole('dialog')).toMatchSnapshot();
   });
 });
diff --git a/test/visits/helpers/__snapshots__/MapModal.test.tsx.snap b/test/visits/helpers/__snapshots__/MapModal.test.tsx.snap
new file mode 100644
index 00000000..efe77267
--- /dev/null
+++ b/test/visits/helpers/__snapshots__/MapModal.test.tsx.snap
@@ -0,0 +1,183 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<MapModal /> renders expected map 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"
+        >
+          Foobar
+          <button
+            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: -101px; top: -96px;"
+                  />
+                </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: 26px; top: -1px;"
+              />
+              <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: -26px; 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: 26px; top: -1px; z-index: -1;"
+                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: -26px; 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="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>
+`;