Keep route drawings in sync

apps/web/tests/map-view.test.tsx

@@ -28,6 +28,7 @@ vi.mock("maplibre-gl", () => {
     layerDefinitions = new globalThis.Map<string, any>();
     renderedFeatures: any[] = [];
     zoom = 13;
+    styleLoaded = true;
     container: HTMLElement;
     fitBounds = vi.fn(() => this);
     easeTo = vi.fn(() => this);
@@ -110,7 +111,7 @@ vi.mock("maplibre-gl", () => {
     }
 
     isStyleLoaded() {
-      return true;
+      return this.styleLoaded;
     }
 
     getZoom() {
@@ -553,6 +554,128 @@ describe("MapView marine feature information", () => {
     );
   });
 
+  it("atomically replaces and clears route drawings while other map data is loading", async () => {
+    const stableOnPickCoordinate = vi.fn();
+    const stableOnMapReady = vi.fn();
+    const firstRoute: RouteResult = {
+      id: "first",
+      name: "Hauptroute",
+      geometry: {
+        type: "LineString",
+        coordinates: [
+          [7.1, 53.1],
+          [7.2, 53.2],
+          [7.3, 53.3]
+        ]
+      },
+      distanceNm: 10,
+      eta: null,
+      warnings: [],
+      dataSources: [],
+      routingMode: "fairway"
+    };
+    const secondRoute: RouteResult = {
+      ...firstRoute,
+      id: "second",
+      name: "Alternative 1",
+      geometry: {
+        type: "LineString",
+        coordinates: [
+          [8.1, 54.1],
+          [8.2, 54.2],
+          [8.3, 54.3],
+          [8.4, 54.4]
+        ]
+      }
+    };
+    const view = render(
+      <MapView
+        config={config}
+        position={{ lat: 53.1, lon: 7.1 }}
+        accuracyM={5}
+        startPoint={{ lat: 53.1, lon: 7.1 }}
+        destination={{ lat: 53.3, lon: 7.3 }}
+        waypoints={[{ lat: 53.2, lon: 7.2 }]}
+        pickMode={null}
+        route={firstRoute}
+        guidanceActive
+        guidanceTarget={{ lat: 53.2, lon: 7.2 }}
+        onPickCoordinate={stableOnPickCoordinate}
+        onMapReady={stableOnMapReady}
+      />
+    );
+    await act(async () => maplibreState.current.emit("load"));
+
+    const routeSource = maplibreState.current.sources.get("route");
+    const guidanceSource = maplibreState.current.sources.get("route-guidance");
+    const startSource = maplibreState.current.sources.get("start-point");
+    const destinationSource = maplibreState.current.sources.get("destination");
+    const waypointSource = maplibreState.current.sources.get("waypoints");
+    maplibreState.current.styleLoaded = false;
+
+    view.rerender(
+      <MapView
+        config={config}
+        position={{ lat: 54.1, lon: 8.1 }}
+        accuracyM={5}
+        startPoint={{ lat: 54.1, lon: 8.1 }}
+        destination={{ lat: 54.4, lon: 8.4 }}
+        waypoints={[{ lat: 54.3, lon: 8.3 }]}
+        pickMode={null}
+        route={secondRoute}
+        guidanceActive
+        guidanceTarget={{ lat: 54.2, lon: 8.2 }}
+        onPickCoordinate={stableOnPickCoordinate}
+        onMapReady={stableOnMapReady}
+      />
+    );
+
+    expect(routeSource.setData).toHaveBeenLastCalledWith({
+      type: "Feature",
+      properties: {},
+      geometry: secondRoute.geometry
+    });
+
+    view.rerender(
+      <MapView
+        config={config}
+        position={{ lat: 54.1, lon: 8.1 }}
+        accuracyM={5}
+        startPoint={null}
+        destination={null}
+        waypoints={[]}
+        pickMode={null}
+        route={null}
+        guidanceActive={false}
+        guidanceTarget={null}
+        onPickCoordinate={stableOnPickCoordinate}
+        onMapReady={stableOnMapReady}
+      />
+    );
+
+    expect(routeSource.setData).toHaveBeenLastCalledWith({
+      type: "Feature",
+      properties: {},
+      geometry: { type: "LineString", coordinates: [] }
+    });
+    expect(guidanceSource.setData).toHaveBeenLastCalledWith({
+      type: "FeatureCollection",
+      features: []
+    });
+    expect(startSource.setData).toHaveBeenLastCalledWith({
+      type: "FeatureCollection",
+      features: []
+    });
+    expect(destinationSource.setData).toHaveBeenLastCalledWith({
+      type: "FeatureCollection",
+      features: []
+    });
+    expect(waypointSource.setData).toHaveBeenLastCalledWith({
+      type: "FeatureCollection",
+      features: []
+    });
+  });
+
   it("focuses a route event requested by the shared navigation workspace", async () => {
     const stableOnMapReady = vi.fn();
     const view = render(
@@ -636,7 +759,14 @@ describe("MapView marine feature information", () => {
         startPoint={{ lat: 52, lon: 7 }}
         destination={{ lat: 52, lon: 7.1 }}
         pickMode={null}
-        route={null}
+        route={{
+          geometry: { type: "LineString", coordinates: [[7, 52], [7.1, 52]] },
+          distanceNm: 4,
+          eta: null,
+          warnings: [],
+          dataSources: [],
+          routingMode: "fairway"
+        }}
         guidanceActive
         guidanceTarget={{ lat: 52.001, lon: 7.01 }}
         onPickCoordinate={vi.fn()}