e2e(geospatial): support api key assets, implement geospatial fixtures and test example

replace silos protocol to support geospatial interface key

Author: buckhalt

lib/interviewer/Interfaces/Geospatial/Geospatial.tsx

@@ -2,9 +2,9 @@ import {
   entityPrimaryKeyProperty,
   type VariableValue,
 } from '@codaco/shared-consts';
-import { type ExtendedMapOptions } from '~/lib/interviewer/Interfaces/Geospatial/useMapbox';
 import { type Action } from '@reduxjs/toolkit';
 import { LocateFixed, ZoomIn, ZoomOut } from 'lucide-react';
+import { type ExtendedMapOptions } from '~/lib/interviewer/Interfaces/Geospatial/useMapbox';
 // import 'mapbox-gl/dist/mapbox-gl.css';
 import { AnimatePresence, motion, type Variants } from 'motion/react';
 import dynamic from 'next/dynamic';
@@ -20,8 +20,8 @@ import { updateNode as updateNodeAction } from '~/lib/interviewer/ducks/modules/
 import useBeforeNext from '~/lib/interviewer/hooks/useBeforeNext';
 import usePropSelector from '~/lib/interviewer/hooks/usePropSelector';
 import useReadyForNextStage from '~/lib/interviewer/hooks/useReadyForNextStage';
-import CollapsablePrompts from '~/lib/interviewer/Interfaces/Sociogram/CollapsablePrompts';
 import { useMapbox } from '~/lib/interviewer/Interfaces/Geospatial/useMapbox';
+import CollapsablePrompts from '~/lib/interviewer/Interfaces/Sociogram/CollapsablePrompts';
 import { getNetworkNodesForType } from '~/lib/interviewer/selectors/session';
 import { type RootState } from '~/lib/interviewer/store';
 import { type Direction, type StageProps } from '~/lib/interviewer/types';
@@ -130,6 +130,8 @@ export default function GeospatialInterface({
     mapContainerRef,
     mapRef,
     accessToken,
+    isMapLoaded,
+    zoomLevel,
     handleResetMapZoom,
     handleZoomIn,
     handleZoomOut,
@@ -230,14 +232,19 @@ export default function GeospatialInterface({
   return (
     <div className="relative flex size-full flex-col" ref={dragSafeRef}>
       <motion.div
-        id="map-container"
         className="size-full"
         ref={mapContainerRef}
         variants={fadeVariants}
+        data-testid="map-container"
+        data-map-loaded={isMapLoaded}
+        data-zoom-level={zoomLevel}
       >
         {/* if outside-selectable-areas, add an overlay */}
         {initialSelectionValue === 'outside-selectable-areas' && (
-          <div className="absolute inset-0 z-10 flex flex-col items-center justify-center">
+          <div
+            className="absolute inset-0 z-10 flex flex-col items-center justify-center"
+            data-testid="outside-selectable-overlay"
+          >
             <div className="bg-background absolute inset-0 opacity-75" />
             <div className="relative z-20 flex w-1/3 flex-col items-center gap-6 text-center">
               <h2>
@@ -250,6 +257,7 @@ export default function GeospatialInterface({
                   setLocationValue(null);
                 }}
                 color="primary"
+                data-testid="deselect-outside-area-button"
               >
                 Deselect
               </Button>
@@ -274,6 +282,7 @@ export default function GeospatialInterface({
           spacing="none"
           elevation="none"
           className="bg-surface/60 absolute right-4 bottom-4 z-5 flex flex-col gap-2 rounded-xl p-2 shadow-2xl backdrop-blur-md"
+          data-testid="map-toolbar"
           variants={{
             initial: {
               opacity: 0,
@@ -291,20 +300,23 @@ export default function GeospatialInterface({
             icon={<ZoomIn />}
             aria-label="Zoom In"
             color="dynamic"
+            data-testid="map-zoom-in"
           />
           <IconButton
             size="lg"
             onClick={handleZoomOut}
             icon={<ZoomOut />}
             aria-label="Zoom Out"
             color="dynamic"
+            data-testid="map-zoom-out"
           />
           <IconButton
             size="lg"
             onClick={handleResetMapZoom}
             icon={<LocateFixed />}
             aria-label="Recenter Map"
             color="dynamic"
+            data-testid="map-recenter"
           />
         </MotionSurface>
 
@@ -333,6 +345,7 @@ export default function GeospatialInterface({
             color="primary"
             onClick={handleOutsideSelectableAreas}
             disabled={initialSelectionValue === 'outside-selectable-areas'}
+            data-testid="outside-selectable-areas-button"
           >
             Outside Selectable Areas
           </Button>

lib/interviewer/Interfaces/Geospatial/GeospatialSearch.tsx

@@ -244,6 +244,7 @@ export default function GeospatialSearch({
                 value={query}
                 onChange={handleQueryChange}
                 onKeyDown={handleInputKeyDown}
+                data-testid="geospatial-search-input"
                 // ARIA combobox attributes
                 role="combobox"
                 aria-expanded={showSuggestions}
@@ -258,6 +259,7 @@ export default function GeospatialSearch({
                       size="sm"
                       onClick={handleClear}
                       aria-label="Clear search"
+                      data-testid="geospatial-search-clear"
                       tabIndex={-1}
                     />
                   ) : undefined

lib/interviewer/Interfaces/Geospatial/useMapbox.ts

@@ -102,10 +102,6 @@ export const useMapbox = ({
   initialSelectionValue,
   onSelectionChange,
 }: UseMapboxProps) => {
-  const mapContainerRef = useRef<HTMLDivElement>(null);
-  const mapRef = useRef<mapboxgl.Map | null>(null);
-  const [isMapLoaded, setIsMapLoaded] = useState(false);
-
   const {
     center,
     initialZoom,
@@ -117,6 +113,11 @@ export const useMapbox = ({
     showTransit,
   } = mapOptions;
 
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+  const mapRef = useRef<mapboxgl.Map | null>(null);
+  const [isMapLoaded, setIsMapLoaded] = useState(false);
+  const [zoomLevel, setZoomLevel] = useState<number>(initialZoom);
+
   // get token value from asset manifest, using id
   const getApiAssetKeyValue = useSelector(makeGetApiKeyAssetValue);
   const accessToken = useMemo(
@@ -309,6 +310,14 @@ export const useMapbox = ({
 
     mapRef.current.on('load', handleMapStyleLoad);
 
+    // Track zoom level changes for testing
+    mapRef.current.on('zoomend', () => {
+      const zoom = mapRef.current?.getZoom();
+      if (zoom !== undefined) {
+        setZoomLevel(zoom);
+      }
+    });
+
     return () => {
       mapRef.current?.remove();
     };
@@ -436,6 +445,8 @@ export const useMapbox = ({
     mapContainerRef,
     mapRef,
     accessToken,
+    isMapLoaded,
+    zoomLevel,
     handleResetMapZoom,
     handleZoomIn,
     handleZoomOut,

tests/e2e/data/silos.netcanvas

@@ -176,7 +176,25 @@ export class ProtocolFixture {
 
     if (protocol.assetManifest) {
       for (const [assetId, asset] of Object.entries(protocol.assetManifest)) {
-        if (asset.type === 'apikey') continue;
+        // Handle API key assets (e.g., Mapbox token)
+        if (asset.type === 'apikey') {
+          if ('value' in asset && asset.value) {
+            await this.prisma.asset.create({
+              data: {
+                key: createId(),
+                assetId,
+                name: asset.name,
+                type: asset.type,
+                url: '', // API keys don't have URLs
+                size: 0,
+                value: asset.value,
+                protocols: { connect: { id: protocolId } },
+              },
+            });
+          }
+          continue;
+        }
+
         if (!('source' in asset)) continue;
 
         await this.prisma.asset.create({