chore: await fo api key

Author: iobuhov

packages/pluggableWidgets/maps-web/openspec/changes/maps-defer-render-until-key/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: tdd-refactor
+created: 2026-06-17

packages/pluggableWidgets/maps-web/openspec/changes/maps-defer-render-until-key/design.md

@@ -0,0 +1,41 @@
+## Test Cases
+
+### Reproduction Tests
+
+- renders map immediately for openStreet provider (unit)
+    - **Given**: `mapProvider` is `"openStreet"`, `apiKey.get()` returns `null`
+    - **When**: `MapsWidget` renders
+    - **Then**: `MapSwitcher` is rendered
+
+- does not render map when key is null for googleMaps (unit)
+    - **Given**: `mapProvider` is `"googleMaps"`, `apiKey.get()` returns `null`
+    - **When**: `MapsWidget` renders
+    - **Then**: `MapSwitcher` is NOT rendered, empty container is rendered instead
+
+- renders map when key becomes available for googleMaps (unit)
+    - **Given**: `mapProvider` is `"googleMaps"`, `apiKey.get()` initially returns `null`
+    - **When**: `apiKey.get()` resolves to `"my-key"`
+    - **Then**: `MapSwitcher` is rendered with `mapsToken="my-key"`
+
+### Edge Cases
+
+- renders map when key is null for mapBox (unit)
+    - **Given**: `mapProvider` is `"mapBox"`, `apiKey.get()` returns `null`
+    - **When**: `MapsWidget` renders
+    - **Then**: `MapSwitcher` is NOT rendered
+
+- renders map when key is null for hereMaps (unit)
+    - **Given**: `mapProvider` is `"hereMaps"`, `apiKey.get()` returns `null`
+    - **When**: `MapsWidget` renders
+    - **Then**: `MapSwitcher` is NOT rendered
+
+### Regression Tests
+
+- still passes mapsToken to MapSwitcher when key is available (unit)
+    - **Given**: `mapProvider` is `"googleMaps"`, `apiKey.get()` returns `"token-123"`
+    - **When**: `MapsWidget` renders
+    - **Then**: `MapSwitcher` receives `mapsToken="token-123"`
+
+## Notes
+
+The gate is purely in `MapsWidget` (observer component). No changes needed in `MapSwitcher`, `LeafletMap`, or `GoogleMap`. The loading state is just the widget container div with appropriate dimensions (no spinner needed — key resolves within one tick in practice).

packages/pluggableWidgets/maps-web/openspec/changes/maps-defer-render-until-key/proposal.md

@@ -0,0 +1,19 @@
+## Why
+
+Currently `MapsWidget` renders `MapSwitcher` immediately regardless of whether the API key has resolved. For providers that require a key (Google Maps, MapBox, HERE Maps), this causes the map to initialize with `undefined` as the token, leading to failed tile requests or error screens until the key arrives. OpenStreetMap does not require a key and should render immediately.
+
+## Root Cause
+
+`MapsWidget` passes `apiKey.get() ?? undefined` as `mapsToken` but does not gate rendering on the key being available. The map components attempt to initialize (loading scripts, creating map instances) before the key is ready.
+
+## What Changes
+
+- `MapsWidget` checks whether the API key is required (all providers except `openStreet`)
+- If required and `apiKey.get()` is `null`, render a loading/empty state instead of `MapSwitcher`
+- OpenStreetMap always renders immediately (no key dependency)
+
+## Impact
+
+- `src/components/MapsWidget.tsx` — add conditional render gate
+- No breaking changes; behavior only improves (deferred init vs failed init)
+- No new dependencies

packages/pluggableWidgets/maps-web/openspec/changes/maps-defer-render-until-key/tasks.md

@@ -0,0 +1,18 @@
+## 1. Test Setup
+
+- [x] 1.1 Add test: openStreet renders immediately when apiKey is null
+- [x] 1.2 Add test: googleMaps does NOT render MapSwitcher when apiKey is null
+- [x] 1.3 Add test: googleMaps renders MapSwitcher when apiKey resolves
+- [x] 1.4 Add test: mapBox and hereMaps do NOT render when apiKey is null
+- [x] 1.5 Add test: mapsToken is passed correctly when key is available
+
+## 2. Implementation
+
+- [x] 2.1 In `MapsWidget`, add early return with empty container when `mapProvider !== "openStreet"` and `apiKey.get()` is null
+- [x] 2.2 Ensure the empty container preserves widget dimensions (class, style, width/height props)
+
+## 3. Verification
+
+- [x] 3.1 All new tests passing
+- [x] 3.2 Full test suite passes (`pnpm run test`)
+- [x] 3.3 TypeScript clean (`tsc --noEmit`)

packages/pluggableWidgets/maps-web/src/components/MapsWidget.tsx

@@ -1,5 +1,6 @@
 import { observer } from "mobx-react-lite";
 import { ReactElement } from "react";
+import { getDimensions } from "@mendix/widget-plugin-platform/utils/get-dimensions";
 import { MapSwitcher } from "./MapSwitcher";
 import { useApiKey, useCurrentLocation, useLocationResolver, useMainGate } from "../model/hooks/injection-hooks";
 import { translateZoom } from "../utils/zoom";
@@ -14,6 +15,10 @@ export const MapsWidget = observer(function MapsWidget(): ReactElement {
     const { location: currentLocation } = useCurrentLocation();
     const apiKey = useApiKey();
 
+    if (props.mapProvider !== "openStreet" && apiKey.get() === null) {
+        return <div className={`widget-maps ${props.class}`} style={{ ...props.style, ...getDimensions(props) }} />;
+    }
+
     return (
         <MapSwitcher
             attributionControl={props.attributionControl}

packages/pluggableWidgets/maps-web/src/components/__tests__/GoogleMap.spec.tsx

@@ -1,5 +1,5 @@
 import "@testing-library/jest-dom";
-import { render, RenderResult } from "@testing-library/react";
+import { act, render, RenderResult } from "@testing-library/react";
 import { GoogleMapContainer, GoogleMapsProps } from "../GoogleMap";
 import { initialize } from "@googlemaps/jest-mocks";
 
@@ -35,32 +35,36 @@ describe("Google maps", () => {
         jest.clearAllMocks();
     });
 
-    function renderGoogleMap(props: Partial<GoogleMapsProps> = {}): RenderResult {
-        return render(<GoogleMapContainer {...defaultProps} {...props} />);
+    async function renderGoogleMap(props: Partial<GoogleMapsProps> = {}): Promise<RenderResult> {
+        let result: RenderResult;
+        await act(async () => {
+            result = render(<GoogleMapContainer {...defaultProps} {...props} />);
+        });
+        return result!;
     }
 
-    it("renders a map with right structure", () => {
-        const { asFragment } = renderGoogleMap({ heightUnit: "percentageOfWidth", widthUnit: "pixels" });
+    it("renders a map with right structure", async () => {
+        const { asFragment } = await renderGoogleMap({ heightUnit: "percentageOfWidth", widthUnit: "pixels" });
         expect(asFragment()).toMatchSnapshot();
     });
 
-    it("renders a map with pixels renders structure correctly", () => {
-        const { asFragment } = renderGoogleMap({ heightUnit: "pixels", widthUnit: "pixels" });
+    it("renders a map with pixels renders structure correctly", async () => {
+        const { asFragment } = await renderGoogleMap({ heightUnit: "pixels", widthUnit: "pixels" });
         expect(asFragment()).toMatchSnapshot();
     });
 
-    it("renders a map with percentage of width and height units renders the structure correctly", () => {
-        const { asFragment } = renderGoogleMap({ heightUnit: "percentageOfWidth", widthUnit: "percentage" });
+    it("renders a map with percentage of width and height units renders the structure correctly", async () => {
+        const { asFragment } = await renderGoogleMap({ heightUnit: "percentageOfWidth", widthUnit: "percentage" });
         expect(asFragment()).toMatchSnapshot();
     });
 
-    it("renders a map with percentage of parent units renders the structure correctly", () => {
-        const { asFragment } = renderGoogleMap({ heightUnit: "percentageOfParent", widthUnit: "percentage" });
+    it("renders a map with percentage of parent units renders the structure correctly", async () => {
+        const { asFragment } = await renderGoogleMap({ heightUnit: "percentageOfParent", widthUnit: "percentage" });
         expect(asFragment()).toMatchSnapshot();
     });
 
-    it("renders a map with markers", () => {
-        const { asFragment } = renderGoogleMap({
+    it("renders a map with markers", async () => {
+        const { asFragment } = await renderGoogleMap({
             locations: [
                 {
                     title: "Mendix HQ",
@@ -79,8 +83,8 @@ describe("Google maps", () => {
         expect(asFragment()).toMatchSnapshot();
     });
 
-    it("renders a map with current location", () => {
-        const { asFragment } = renderGoogleMap({
+    it("renders a map with current location", async () => {
+        const { asFragment } = await renderGoogleMap({
             showCurrentLocation: true,
             currentLocation: {
                 latitude: 51.906688,

packages/pluggableWidgets/maps-web/src/components/__tests__/MapsWidget.spec.tsx

@@ -0,0 +1,76 @@
+import "@testing-library/jest-dom";
+import { act, render } from "@testing-library/react";
+import { DynamicValue } from "mendix";
+import Maps from "../../Maps";
+import { mockContainerProps } from "../../utils/mock-container-props";
+
+describe("MapsWidget render gating", () => {
+    it("renders map immediately for openStreet when apiKey is null", async () => {
+        const { container } = render(
+            <Maps {...mockContainerProps({ mapProvider: "openStreet", apiKey: "", apiKeyExp: undefined })} />
+        );
+
+        expect(container.querySelector(".leaflet-container")).toBeInTheDocument();
+        await act(async () => Promise.resolve());
+    });
+
+    it("does NOT render MapSwitcher when apiKey is null for googleMaps", async () => {
+        const { container } = render(
+            <Maps {...mockContainerProps({ mapProvider: "googleMaps", apiKey: "", apiKeyExp: undefined })} />
+        );
+
+        expect(container.querySelector(".widget-maps")).toBeInTheDocument();
+        expect(container.querySelector(".leaflet-container")).not.toBeInTheDocument();
+        await act(async () => Promise.resolve());
+    });
+
+    it("renders MapSwitcher when apiKey resolves for googleMaps", async () => {
+        const { container } = render(
+            <Maps
+                {...mockContainerProps({
+                    mapProvider: "googleMaps",
+                    apiKey: "",
+                    apiKeyExp: { value: "my-key" } as DynamicValue<string>
+                })}
+            />
+        );
+
+        expect(container.querySelector(".widget-maps")).toBeInTheDocument();
+        await act(async () => Promise.resolve());
+    });
+
+    it("does NOT render MapSwitcher when apiKey is null for mapBox", async () => {
+        const { container } = render(
+            <Maps {...mockContainerProps({ mapProvider: "mapBox", apiKey: "", apiKeyExp: undefined })} />
+        );
+
+        expect(container.querySelector(".widget-maps")).toBeInTheDocument();
+        expect(container.querySelector(".leaflet-container")).not.toBeInTheDocument();
+        await act(async () => Promise.resolve());
+    });
+
+    it("does NOT render MapSwitcher when apiKey is null for hereMaps", async () => {
+        const { container } = render(
+            <Maps {...mockContainerProps({ mapProvider: "hereMaps", apiKey: "", apiKeyExp: undefined })} />
+        );
+
+        expect(container.querySelector(".widget-maps")).toBeInTheDocument();
+        expect(container.querySelector(".leaflet-container")).not.toBeInTheDocument();
+        await act(async () => Promise.resolve());
+    });
+
+    it("passes mapsToken to MapSwitcher when key is available", async () => {
+        const { container } = render(
+            <Maps
+                {...mockContainerProps({
+                    mapProvider: "openStreet",
+                    apiKey: "",
+                    apiKeyExp: { value: "token-123" } as DynamicValue<string>
+                })}
+            />
+        );
+
+        expect(container.querySelector(".leaflet-container")).toBeInTheDocument();
+        await act(async () => Promise.resolve());
+    });
+});