diff --git a/client/src/components/supplyroute/SupplyRoute.test.tsx b/client/src/components/supplyroute/SupplyRoute.test.tsx
new file mode 100644
index 00000000..b4192aca
--- /dev/null
+++ b/client/src/components/supplyroute/SupplyRoute.test.tsx
@@ -0,0 +1,159 @@
+import { renderWithProviders } from "../../testutils";
+import SupplyRoute, { RouteColor } from "./SupplyRoute";
+import { screen } from "@testing-library/react";
+import { PropsWithChildren } from "react";
+
+const mockPolyline = jest.fn();
+jest.mock("react-leaflet", () => ({
+  Polyline: (props: PropsWithChildren<any>) => {
+    mockPolyline(props);
+    return <>{props.children}</>;
+  },
+  Tooltip: (props: PropsWithChildren<any>) => {
+    return <p data-testid="tooltip">{props.children}</p>;
+  },
+}));
+
+describe("SupplyRoute", () => {
+  it("is red when inactive and owned by opfor", () => {
+    renderWithProviders(
+      <SupplyRoute
+        route={{
+          id: "",
+          points: [],
+          front_active: false,
+          is_sea: false,
+          blue: false,
+          active_transports: [],
+        }}
+      />
+    );
+    expect(mockPolyline).toHaveBeenCalledWith(
+      expect.objectContaining({
+        color: RouteColor.Red,
+      })
+    );
+  });
+
+  it("is blue when inactive and owned by bluefor", () => {
+    renderWithProviders(
+      <SupplyRoute
+        route={{
+          id: "",
+          points: [],
+          front_active: false,
+          is_sea: false,
+          blue: true,
+          active_transports: [],
+        }}
+      />
+    );
+    expect(mockPolyline).toHaveBeenCalledWith(
+      expect.objectContaining({
+        color: RouteColor.Blue,
+      })
+    );
+  });
+
+  it("is orange when contested", () => {
+    renderWithProviders(
+      <SupplyRoute
+        route={{
+          id: "",
+          points: [],
+          front_active: true,
+          is_sea: false,
+          blue: false,
+          active_transports: [],
+        }}
+      />
+    );
+    expect(mockPolyline).toHaveBeenCalledWith(
+      expect.objectContaining({
+        color: RouteColor.Contested,
+      })
+    );
+  });
+
+  it("is highlighted when the route has active transports", () => {
+    renderWithProviders(
+      <SupplyRoute
+        route={{
+          id: "",
+          points: [],
+          front_active: false,
+          is_sea: false,
+          blue: false,
+          active_transports: ["foo"],
+        }}
+      />
+    );
+    expect(mockPolyline).toHaveBeenCalledTimes(2);
+    expect(mockPolyline).toHaveBeenCalledWith(
+      expect.objectContaining({
+        color: RouteColor.Highlight,
+      })
+    );
+  });
+
+  it("is drawn in the right place", () => {
+    const points = [
+      { lat: 0, lng: 0 },
+      { lat: 1, lng: 1 },
+    ];
+    renderWithProviders(
+      <SupplyRoute
+        route={{
+          id: "",
+          points: points,
+          front_active: false,
+          is_sea: false,
+          blue: false,
+          active_transports: ["foo"],
+        }}
+      />
+    );
+    expect(mockPolyline).toHaveBeenCalledTimes(2);
+    expect(mockPolyline).toHaveBeenCalledWith(
+      expect.objectContaining({
+        positions: points,
+      })
+    );
+  });
+
+  it("has a tooltip describing an inactive supply route", () => {
+    renderWithProviders(
+      <SupplyRoute
+        route={{
+          id: "",
+          points: [],
+          front_active: false,
+          is_sea: false,
+          blue: false,
+          active_transports: [],
+        }}
+      />
+    );
+
+    const tooltip = screen.getByTestId("tooltip");
+    expect(tooltip).toHaveTextContent("This supply route is inactive.");
+  });
+
+  it("has a tooltip describing active supply routes", () => {
+    renderWithProviders(
+      <SupplyRoute
+        route={{
+          id: "",
+          points: [],
+          front_active: false,
+          is_sea: false,
+          blue: false,
+          active_transports: ["foo", "bar"],
+        }}
+      />
+    );
+
+    const tooltip = screen.getByTestId("tooltip");
+    expect(tooltip).toContainHTML("foo<br />bar");
+  });
+});
diff --git a/client/src/components/supplyroute/SupplyRoute.tsx b/client/src/components/supplyroute/SupplyRoute.tsx
index c2605928..422700ea 100644
--- a/client/src/components/supplyroute/SupplyRoute.tsx
+++ b/client/src/components/supplyroute/SupplyRoute.tsx
@@ -4,6 +4,13 @@ import { Polyline as LPolyline } from "leaflet";
 import { useEffect, useRef } from "react";
 import { Polyline, Tooltip } from "react-leaflet";
 
+export enum RouteColor {
+  Blue = "#2d3e50",
+  Contested = "#c85050",
+  Highlight = "#ffffff",
+  Red = "#8c1414",
+}
+
 interface SupplyRouteProps {
   route: SupplyRouteModel;
 }
@@ -26,18 +33,22 @@ function ActiveSupplyRouteHighlight(props: SupplyRouteProps) {
   }
 
   return (
-    <Polyline positions={props.route.points} color={"#ffffff"} weight={2} />
+    <Polyline
+      positions={props.route.points}
+      color={RouteColor.Highlight}
+      weight={2}
+    />
   );
 }
 
 function colorFor(route: SupplyRouteModel) {
   if (route.front_active) {
-    return "#c85050";
+    return RouteColor.Contested;
   }
   if (route.blue) {
-    return "#2d3e50";
+    return RouteColor.Blue;
   }
-  return "#8c1414";
+  return RouteColor.Red;
 }
 
 export default function SupplyRoute(props: SupplyRouteProps) {