Add access token tests.

e2e/access-tokens.spec.ts

@@ -0,0 +1,60 @@
+import { test, expect, describe, beforeEach } from "./utils/fixtures";
+import { MaputnikDriver } from "./maputnik-driver";
+import tokens from "../src/config/tokens.json" with { type: "json" };
+
+describe("access tokens", () => {
+  const { given, when } = new MaputnikDriver();
+
+  const tileJson = {
+    tilejson: "2.2.0",
+    tiles: ["https://example.local/{z}/{x}/{y}.pbf"],
+    minzoom: 0,
+    maxzoom: 14,
+  };
+
+  beforeEach(async () => {
+    await given.setupMockBackedResponses();
+  });
+
+  test("uses the thunderforest token for a thunderforest source", async () => {
+    await given.interceptAndMockResponse({
+      method: "GET",
+      url: /tile\.thunderforest\.com\/.*/,
+      response: tileJson,
+      alias: "thunderforest",
+    });
+
+    await when.setStyle("access_tokens");
+
+    const request = await when.waitForResponse("thunderforest");
+    expect(request.url()).toContain(`apikey=${tokens.thunderforest}`);
+  });
+
+  test("uses the locationiq token for a locationiq source", async () => {
+    await given.interceptAndMockResponse({
+      method: "GET",
+      url: /tiles\.locationiq\.com\/.*/,
+      response: tileJson,
+      alias: "locationiq",
+    });
+
+    await when.setStyle("access_tokens");
+
+    const request = await when.waitForResponse("locationiq");
+    expect(request.url()).toContain(`key=${tokens.locationiq}`);
+  });
+
+  test("appends the stadia token as a query parameter", async () => {
+    await given.interceptAndMockResponse({
+      method: "GET",
+      url: /tiles\.stadiamaps\.com\/.*/,
+      response: tileJson,
+      alias: "stadia",
+    });
+
+    await when.setStyle("access_tokens");
+    
+    const request = await when.waitForResponse("stadia");
+    expect(request.url()).toContain("?api_key=stadia-test-token");
+  });
+});

e2e/fixtures/access-token-style.json

@@ -0,0 +1,22 @@
+{
+  "version": 8,
+  "name": "Access token style",
+  "metadata": {
+    "maputnik:stadia_access_token": "stadia-test-token"
+  },
+  "sources": {
+    "thunderforest_transport": {
+      "type": "vector",
+      "url": "https://tile.thunderforest.com/thunderforest.transport-v2.json?apikey={key}"
+    },
+    "stadia_outdoors": {
+      "type": "vector",
+      "url": "https://tiles.stadiamaps.com/data/openmaptiles.json"
+    },
+    "locationiq": {
+      "type": "vector",
+      "url": "https://tiles.locationiq.com/v3/pbf/tiles.json?key={key}"
+    }
+  },
+  "layers": []
+}

e2e/layer-editor.spec.ts

@@ -352,7 +352,6 @@ describe("layer editor", () => {
     describe("data function", () => {
       beforeEach(async () => {
         id = await when.modal.fillLayers({ type: "circle", layer: "example" });
-        // The property needs a value before it can be turned into a data function.
         await when.setValue("spec-field-input:circle-blur", "1");
         await when.makeDataFunction("circle-blur");
       });
@@ -562,7 +561,6 @@ describe("layer editor", () => {
       const bgId = await createBackground();
       await when.click("layer-list-item:background:" + bgId);
 
-      // Append a property to the layer's JSON; the editor writes it back to the style.
       await when.appendToJsonEditorLine('"background"', ',\n"minzoom": 5');
       await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
         layers: [{ id: "background:" + bgId, type: "background", minzoom: 5 }],

e2e/layers-list.spec.ts

@@ -118,7 +118,6 @@ describe("layers list", () => {
 
     test("change source", async () => {
       const id = await when.modal.fillLayers({ type: "fill", layer: "example" });
-      // The "both" style ships with an "example" and a "raster" source.
       await when.changeLayerSource("raster");
       await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
         layers: [{ id, type: "fill", source: "raster" }],

e2e/maputnik-driver.ts

@@ -38,6 +38,7 @@ export class MaputnikDriver {
         "example-style-with-fonts.json",
         "example-style-with-zoom-7-and-center-0-51.json",
         "example-style-with-zoom-5-and-center-50-50.json",
+        "access-token-style.json",
       ];
       for (const fixture of styleFixtures) {
         await this.helper.given.interceptAndMockResponse({
@@ -71,6 +72,7 @@ export class MaputnikDriver {
         | "rectangles"
         | "font"
         | "zoom_7_center_0_51"
+        | "access_tokens"
         | "",
       zoom?: number
     ) => {
@@ -82,6 +84,7 @@ export class MaputnikDriver {
         rectangles: "rectangles-style.json",
         font: "example-style-with-fonts.json",
         zoom_7_center_0_51: "example-style-with-zoom-7-and-center-0-51.json",
+        access_tokens: "access-token-style.json",
       };
 
       const url = new URL(baseUrl);