From 42a0545630f00fd8d1a5805bb7b38d659719e7fc Mon Sep 17 00:00:00 2001
From: Dan Albert <dan@gingerhq.net>
Date: Fri, 16 Jun 2023 21:55:05 -0700
Subject: [PATCH] Test FrontLinesLayer.

---
 .../frontlineslayer/FrontLinesLayer.test.tsx  | 56 +++++++++++++++++++
 .../frontlineslayer/FrontLinesLayer.tsx       |  2 +-
 2 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/frontlineslayer/FrontLinesLayer.test.tsx

diff --git a/client/src/components/frontlineslayer/FrontLinesLayer.test.tsx b/client/src/components/frontlineslayer/FrontLinesLayer.test.tsx
new file mode 100644
index 00000000..d8a27d4c
--- /dev/null
+++ b/client/src/components/frontlineslayer/FrontLinesLayer.test.tsx
@@ -0,0 +1,56 @@
+import { renderWithProviders } from "../../testutils";
+import FrontLinesLayer from "./FrontLinesLayer";
+import { PropsWithChildren } from "react";
+
+const mockPolyline = jest.fn();
+const mockLayerGroup = jest.fn();
+jest.mock("react-leaflet", () => ({
+  LayerGroup: (props: PropsWithChildren<any>) => {
+    mockLayerGroup(props);
+    return <>{props.children}</>;
+  },
+  Polyline: (props: any) => {
+    mockPolyline(props);
+  },
+}));
+
+// The waypoints in test data below should all use `should_make: false`. Markers
+// need useMap() to check the zoom level to decide if they should be drawn or
+// not, and we don't have good options here for mocking that behavior.
+describe("FrontLinesLayer", () => {
+  it("draws nothing when there are no front lines", () => {
+    renderWithProviders(<FrontLinesLayer />);
+    expect(mockPolyline).not.toHaveBeenCalled();
+    expect(mockLayerGroup).toHaveBeenCalledTimes(1);
+  });
+
+  it("draws front lines", () => {
+    const extents = [
+      { lat: 0, lng: 0 },
+      { lat: 1, lng: 1 },
+    ];
+    renderWithProviders(<FrontLinesLayer />, {
+      preloadedState: {
+        frontLines: {
+          fronts: {
+            foo: {
+              id: "foo",
+              extents: extents,
+            },
+            bar: {
+              id: "bar",
+              extents: extents,
+            },
+          },
+        },
+      },
+    });
+    expect(mockPolyline).toHaveBeenCalledTimes(2);
+    expect(mockPolyline).toHaveBeenCalledWith(
+      expect.objectContaining({
+        positions: extents,
+      })
+    );
+    expect(mockLayerGroup).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/client/src/components/frontlineslayer/FrontLinesLayer.tsx b/client/src/components/frontlineslayer/FrontLinesLayer.tsx
index 999c61ab..70b11405 100644
--- a/client/src/components/frontlineslayer/FrontLinesLayer.tsx
+++ b/client/src/components/frontlineslayer/FrontLinesLayer.tsx
@@ -3,7 +3,7 @@ import { useAppSelector } from "../../app/hooks";
 import FrontLine from "../frontline";
 import { LayerGroup } from "react-leaflet";
 
-export default function SupplyRoutesLayer() {
+export default function FrontLinesLayer() {
   const fronts = useAppSelector(selectFrontLines).fronts;
   return (
     <LayerGroup>