Test FrontLinesLayer.

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);
+  });
+});

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>