Replace integration tests URI localization with transformRequest (internal-7187)

GitOrigin-RevId: 2e249becac232317289a82c3a516719e2b417794

Author: stepankuzmin

debug/query-test.html

@@ -19,13 +19,19 @@
         import {getAccessToken} from './access_token_generated.js';
 
         mapboxgl.accessToken = getAccessToken();
-        import {applyOperations} from 'http://localhost:9966/test/integration/lib/operation-handlers.js';
+        import {applyOperations} from '../test/integration/lib/operation-handlers.js';
+        import {transformRequest as baseTransformRequest} from '../test/integration/lib/transform-request.js';
+
+        function transformRequest(url, resourceTypeEnum) {
+            const req = baseTransformRequest(url, resourceTypeEnum);
+            return {url: req.url.replace(location.origin, `${location.origin}/test/integration/`)};
+        }
 
         async function fetchStyle() {
             let test = new URLSearchParams(location.search).get('test');
             if (!test) test = prompt('test name:', 'geometry/point');
 
-            const response = await fetch(`http://localhost:9966/test/integration/query-tests/${test}/style.json`);
+            const response = await fetch(`../test/integration/query-tests/${test}/style.json`);
             const style = await response.json();
 
             history.replaceState({}, '', `${location.pathname}?test=${test}`);
@@ -49,8 +55,6 @@
         container.style.width = width + 'px';
         container.style.height = height + 'px';
 
-        const transformRequest = url => ({url: url.replace('local://', 'http://localhost:9966/test/integration/')});
-
         const map = window.map = new mapboxgl.Map({
             container,
             style,

debug/render-test.html

@@ -19,14 +19,20 @@
         import {getAccessToken} from './access_token_generated.js';
 
         mapboxgl.accessToken = getAccessToken();
-        import {renderTestNow} from 'http://localhost:9966/test/integration/lib/constants.js';
-        import {applyOperations} from 'http://localhost:9966/test/integration/lib/operation-handlers.js';
+        import {renderTestNow} from '../test/integration/lib/constants.js';
+        import {applyOperations} from '../test/integration/lib/operation-handlers.js';
+        import {transformRequest as baseTransformRequest} from '../test/integration/lib/transform-request.js';
+
+        function transformRequest(url, resourceTypeEnum) {
+            const req = baseTransformRequest(url, resourceTypeEnum);
+            return {url: req.url.replace(location.origin, `${location.origin}/test/integration/`)};
+        }
 
         async function fetchStyle() {
             let test = new URLSearchParams(location.search).get('test');
             if (!test) test = prompt('test name:', 'text-writing-mode/line_label/mixed-multiline-horizontal-mode');
 
-            const response = await fetch(`http://localhost:9966/test/integration/render-tests/${test}/style.json`);
+            const response = await fetch(`../test/integration/render-tests/${test}/style.json`);
             const style = await response.json();
 
             return style;
@@ -93,13 +99,6 @@
         container.style.width = width + 'px';
         container.style.height = height + 'px';
 
-        const transformRequest = url => ({url:
-            url
-                .replace('local://mapbox-gl-styles/', 'http://localhost:9966/node_modules/mapbox-gl-styles/')
-                .replace('local://mvt-fixtures/', 'http://localhost:9966/node_modules/@mapbox/mvt-fixtures/')
-                .replace('local://', 'http://localhost:9966/test/integration/')
-        });
-
         const map = window.map = new mapboxgl.Map({
             container,
             style,

src/util/mapbox.ts

@@ -21,11 +21,12 @@ import {uuid, validateUuid, storageAvailable, b64DecodeUnicode, b64EncodeUnicode
 import {postData, getData} from './ajax';
 import {getLivePerformanceMetrics} from '../util/live_performance';
 
+import type {ResourceType as ResourceTypeEnum, RequestParameters} from './ajax';
 import type {LivePerformanceData} from '../util/live_performance';
-import type {RequestParameters, ResourceType as ResourceTypeEnum} from './ajax';
 import type {Cancelable} from '../types/cancelable';
 import type {TileJSON} from '../types/tilejson';
 import type {Map as MapboxMap} from "../ui/map";
+
 import '../types/import-meta.d';
 
 export type ResourceType = keyof typeof ResourceTypeEnum;
@@ -143,7 +144,6 @@ export class RequestManager {
         if (this._isSkuTokenExpired()) {
             this._createSkuToken();
         }
-
         if (tileURL && !isMapboxURL(tileURL)) return tileURL;
 
         const urlObject = parseUrl(tileURL);

test/integration/lib/localize-urls.js

@@ -9,8 +9,6 @@ import {createRequire} from 'module';
 const require = createRequire(import.meta.url);
 
 export default function localizeURLs(style, port) {
-    localizeStyleURLs(style, port);
-
     if (style.imports) {
         for (const importSpec of style.imports) {
             localizeURLs(importSpec.data, port);
@@ -19,9 +17,7 @@ export default function localizeURLs(style, port) {
 
     if (style.metadata && style.metadata.test && style.metadata.test.operations) {
         style.metadata.test.operations.forEach((op) => {
-            if (op[0] === 'addSource') {
-                localizeSourceURLs(op[2], port);
-            } else if (op[0] === 'setStyle') {
+            if (op[0] === 'setStyle') {
                 if (typeof op[1] === 'object') {
                     localizeURLs(op[1], port);
                     return;
@@ -48,76 +44,9 @@ export default function localizeURLs(style, port) {
                     return;
                 }
 
-                localizeStyleURLs(styleJSON, port);
-
                 op[1] = styleJSON;
                 op[2] = {diff: false};
             }
         });
     }
-}
-
-function localizeURL(url, port) {
-    return url.replace(/^local:\/\//, `http://localhost:${port}/`);
-}
-
-function localizeMapboxSpriteURL(url, port) {
-    return url.replace(/^mapbox:\/\//, `http://localhost:${port}/`);
-}
-
-function localizeMapboxFontsURL(url, port) {
-    return url.replace(/^mapbox:\/\/fonts/, `http://localhost:${port}/glyphs`);
-}
-
-function localizeMapboxTilesURL(url, port) {
-    return url.replace(/^mapbox:\/\//, `http://localhost:${port}/tiles/`);
-}
-
-function localizeMapboxTilesetURL(url, port) {
-    return url.replace(/^mapbox:\/\//, `http://localhost:${port}/tilesets/`);
-}
-
-export function localizeSourceURLs(source, port) {
-    for (const tile in source.tiles) {
-        source.tiles[tile] = localizeMapboxTilesURL(source.tiles[tile], port);
-        source.tiles[tile] = localizeURL(source.tiles[tile], port);
-    }
-
-    if (source.urls) {
-        source.urls = source.urls.map((url) => localizeMapboxTilesetURL(url, port));
-        source.urls = source.urls.map((url) => localizeURL(url, port));
-    }
-
-    if (source.url) {
-        source.url = localizeMapboxTilesetURL(source.url, port);
-        source.url = localizeURL(source.url, port);
-    }
-
-    if (source.data && typeof source.data == 'string') {
-        source.data = localizeURL(source.data, port);
-    }
-
-    for (const model in source.models) {
-        source.models[model].uri = localizeURL(source.models[model].uri, port);
-    }
-}
-
-function localizeStyleURLs(style, port) {
-    for (const source in style.sources) {
-        localizeSourceURLs(style.sources[source], port);
-    }
-    if (style.models) {
-        for (const modelId in style.models) {
-            style.models[modelId] = localizeURL(style.models[modelId], port);
-        }
-    }
-    if (style.sprite) {
-        style.sprite = localizeMapboxSpriteURL(style.sprite, port);
-        style.sprite = localizeURL(style.sprite, port);
-    }
-
-    if (style.glyphs) {
-        style.glyphs = localizeMapboxFontsURL(style.glyphs, port);
-        style.glyphs = localizeURL(style.glyphs, port);
-    }
-}
+}

test/integration/lib/middlewares.js

@@ -4,7 +4,6 @@ import path, {dirname} from 'path';
 import serveStatic from 'serve-static';
 import {fileURLToPath} from 'url';
 import {createRequire} from 'module';
-import {localizeSourceURLs} from './localize-urls.js';
 
 const require = createRequire(import.meta.url);
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -61,7 +60,6 @@ export async function tilesets(req, res) {
     const json = JSON.parse(fileContent);
 
     const port = req.socket.localPort;
-    localizeSourceURLs(json, port);
 
     res.writeHead(200, {'Content-Type': 'application/json'});
     res.end(JSON.stringify(json));

test/integration/lib/transform-request.js

@@ -0,0 +1,42 @@
+/**
+ * Transform Mapbox API URLs to localhost URLs for integration tests.
+ *
+ * This function reverses the URL normalization done by RequestManager:
+ * - mapbox:// URLs are normalized to api.mapbox.com by normalize functions
+ * - This transforms them back to localhost test paths
+ */
+export function transformRequest(url, resourceTypeEnum) {
+    if (url.startsWith('local://')) {
+        return {
+            url: url
+                .replace('local://mapbox-gl-styles/', `${location.origin}/node_modules/mapbox-gl-styles/`)
+                .replace('local://mvt-fixtures/', `${location.origin}/node_modules/@mapbox/mvt-fixtures/`)
+                .replace('local://', `${location.origin}/`)
+        };
+    }
+
+    if (url.startsWith('https://api.mapbox.com')) {
+        const baseUrl = url.split('?')[0];
+        switch (resourceTypeEnum) {
+            case 'Source':
+                return {url: baseUrl.replace(/^https:\/\/api\.mapbox\.com\/v4\/(.+)\.json$/, `${location.origin}/tilesets/$1`)};
+
+            case 'Tile':
+                return {url: baseUrl.replace(/^https:\/\/api\.mapbox\.com\/(v4|raster\/v1|rasterarrays\/v1|3dtiles\/v1)\/(.+)$/, `${location.origin}/tiles/$2`)};
+
+            case 'Glyphs':
+                return {url: baseUrl.replace(/^https:\/\/api\.mapbox\.com\/fonts\/v1\/(.+)$/, `${location.origin}/glyphs/$1`)};
+
+            case 'SpriteJSON':
+            case 'SpriteImage': {
+                const match = baseUrl.match(/^https:\/\/api\.mapbox\.com\/styles\/v1\/(.+)\/sprite(.*)$/);
+                return {url: `${location.origin}/sprites/${match[1]}${match[2]}`};
+            }
+
+            default:
+                return {url: baseUrl.replace('https://api.mapbox.com/', `${location.origin}/`)};
+        }
+    }
+
+    return {url};
+}

test/integration/query-tests/index.test.ts

@@ -14,6 +14,7 @@ import {integrationTests} from 'virtual:integration-tests';
 import {getStatsHTML, setupHTML, updateHTML} from '../../util/html_generator';
 import {mapboxgl} from '../lib/mapboxgl.js';
 import {sendFragment} from '../lib/utils';
+import {transformRequest} from '../lib/transform-request.js';
 
 setupHTML();
 
@@ -116,7 +117,9 @@ const getTest = (queryTestName) => async () => {
             fadeDuration: options.fadeDuration || 0,
             localIdeographFontFamily: options.localIdeographFontFamily || false,
             crossSourceCollisions: typeof options.crossSourceCollisions === "undefined" ? true : options.crossSourceCollisions,
-            performanceMetricsCollection: false
+            performanceMetricsCollection: false,
+            transformRequest,
+            testMode: true
         });
 
         if (options.collisionDebug) {

test/integration/render-tests/utils.ts

@@ -6,6 +6,7 @@ import {setupHTML} from '../../util/html_generator.js';
 import {applyOperations} from '../lib/operation-handlers.js';
 import {mapboxgl} from '../lib/mapboxgl.js';
 import {renderTestNow} from '../lib/constants.js';
+import {transformRequest} from '../lib/transform-request.js';
 
 import type {Map as MapboxMap} from '../../../src/ui/map';
 
@@ -160,7 +161,9 @@ export async function renderMap(style, options, currentTestName) {
             // ordinary instancing is enabled by default, manual is disabled
             forceManualRenderingForInstanceIDShaders: options.forceManualRenderingForInstanceIDShaders,
         },
-        worldview: options.worldview
+        worldview: options.worldview,
+        transformRequest,
+        testMode: true
     });
 
     mapRef.current?.on('error', (e) => {