[#49] Create basic test: MapCluster

src/components/__tests__/MapCluster.test.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import MapCluster from '../MapCluster';
+
+describe('MapCluster chart', () => {
+  test('renders MapCluster correctly', async () => {
+    const props = {
+      tile: {
+        url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+        maxZoom: 19,
+        attribution: '© OpenStreetMap'
+      },
+      data: [
+        {
+          point: [39.61, -105.02],
+          name: 'Basic',
+          label: 'This is Littleton, CO.',
+          color: 'blue'
+        },
+        {
+          point: [39.73, -104.8],
+          name: 'Limited',
+          label: 'This is Aurora, CO.',
+          color: 'yellow'
+        }
+      ],
+      config: {
+        center: [39.73, -104.99],
+        zoom: 10,
+        height: '100vh',
+        width: '100%'
+      }
+    };
+    let instance = null;
+    render(
+      <MapCluster
+        {...props}
+        ref={(el) => {
+          instance = el;
+        }}
+      />
+    );
+
+    await waitFor(() => {
+      const mapContainer = screen.getByTestId('map-view');
+      expect(mapContainer).toBeInTheDocument();
+
+      expect(instance.getMap().getPixelOrigin()).toEqual({
+        x: 54621,
+        y: 99498
+      });
+      expect(instance.getMap().getMaxZoom()).toEqual(19);
+    });
+  });
+
+  test('matches MapCluster snapshot', async () => {
+    const props = {
+      tile: {
+        url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+        maxZoom: 19,
+        attribution: '© OpenStreetMap'
+      },
+      layer: {
+        source: 'window.topoData'
+      },
+      data: [
+        {
+          point: [39.61, -105.02],
+          name: 'Basic',
+          label: 'This is Littleton, CO.',
+          color: 'blue'
+        },
+        {
+          point: [39.73, -104.8],
+          name: 'Limited',
+          label: 'This is Aurora, CO.',
+          color: 'yellow'
+        }
+      ],
+      config: {
+        center: [39.73, -104.99],
+        zoom: 10,
+        height: '100vh',
+        width: '100%'
+      }
+    };
+
+    let instance = null;
+    const { container } = render(
+      <MapCluster
+        {...props}
+        ref={(el) => {
+          instance = el;
+        }}
+      />
+    );
+    await waitFor(() => {
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

src/components/__tests__/__snapshots__/MapCluster.test.js.snap

@@ -0,0 +1,136 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MapCluster chart matches MapCluster snapshot 1`] = `
+<div>
+  <div
+    class="leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+    data-testid="map-view"
+    style="height: 100vh; width: 100%; 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: 19; left: 0px; top: 0px;"
+          >
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="https://tile.openstreetmap.org/10/213/388.png"
+              style="width: 256px; height: 256px; left: -93px; top: -170px;"
+            />
+          </div>
+        </div>
+        <div
+          class="leaflet-layer "
+          style="z-index: 1;"
+        >
+          <div
+            class="leaflet-tile-container leaflet-zoom-animated"
+            style="z-index: 19; left: 0px; top: 0px;"
+          >
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="https://tile.openstreetmap.org/10/213/388.png"
+              style="width: 256px; height: 256px; left: -93px; top: -170px;"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="leaflet-pane leaflet-overlay-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-shadow-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-marker-pane"
+      />
+      <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>
+           © OpenStreetMap
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;