Add workbench interaction smoke anchors

frontend/src/components/map/MapWorkspace.tsx

@@ -43,7 +43,7 @@ export function MapWorkspace({
   onSelectMapFeature,
 }: MapWorkspaceProps): JSX.Element {
   return (
-    <section>
+    <section data-testid="map-workspace">
       <h2>Map workspace</h2>
       <p>{mapLayerLabel}</p>
       <div className="map-controls">
@@ -53,6 +53,7 @@ export function MapWorkspace({
             value={selectedMapAreaId}
             onChange={(event) => onSelectMapArea(event.target.value)}
             disabled={areas.length === 0}
+            data-testid="map-area-select"
           >
             <option value="">No area</option>
             {areas.map((area) => (
@@ -68,6 +69,7 @@ export function MapWorkspace({
             disabled={!areaFeatureCollection}
             type="checkbox"
             onChange={(event) => onSetAreaLayerVisible(event.target.checked)}
+            data-testid="map-area-visible"
           />
           Area visible
         </label>
@@ -81,6 +83,7 @@ export function MapWorkspace({
             type="range"
             value={areaLayerOpacity}
             onChange={(event) => onSetAreaLayerOpacity(Number(event.target.value))}
+            data-testid="map-area-opacity"
           />
         </label>
         <label className="checkbox-row">
@@ -89,6 +92,7 @@ export function MapWorkspace({
             disabled={!mapFeatureCollection}
             type="checkbox"
             onChange={(event) => onSetMapLayerVisible(event.target.checked)}
+            data-testid="map-layer-visible"
           />
           Layer visible
         </label>
@@ -102,6 +106,7 @@ export function MapWorkspace({
             type="range"
             value={mapLayerOpacity}
             onChange={(event) => onSetMapLayerOpacity(Number(event.target.value))}
+            data-testid="map-layer-opacity"
           />
         </label>
         <div className="map-status">