test: 应用调试工程 (#2494)

__tests__/integration/gallery.spec.ts

@@ -8,10 +8,9 @@ const TEST_CASES = [
   {
     name: 'variFlight',
     sleepTime: 1000,
-    snapshots: false,
   },
 ];
 
 describe('Gallery Snapshot', () => {
-  generateCanvasTestCases('Gallery', TEST_CASES);
+  generateCanvasTestCases('gallery', TEST_CASES);
 });

__tests__/integration/heatmap.spec.ts

@@ -6,14 +6,12 @@ const TEST_CASES = [
   },
   {
     name: 'grid',
-    snapshots: false,
   },
   {
     name: 'hexagon',
-    snapshots: false,
   },
 ];
 
 describe('Heatmap Snapshot', () => {
-  generateCanvasTestCases('Heatmap', TEST_CASES);
+  generateCanvasTestCases('heatmap', TEST_CASES);
 });

__tests__/integration/line.spec.ts

@@ -9,7 +9,6 @@ const TEST_CASES = [
   },
   {
     name: 'dash',
-    snapshots: false,
     sleepTime: 500,
   },
   {
@@ -25,7 +24,6 @@ const TEST_CASES = [
   },
   {
     name: 'greatcircle',
-    snapshots: false,
     sleepTime: 500,
   },
   {
@@ -35,5 +33,5 @@ const TEST_CASES = [
 ];
 
 describe('Line Snapshot', () => {
-  generateCanvasTestCases('Line', TEST_CASES);
+  generateCanvasTestCases('line', TEST_CASES);
 });

__tests__/integration/mask.spec.ts

@@ -11,5 +11,5 @@ const TEST_CASES = [
 ];
 
 describe('Mask Snapshot', () => {
-  generateCanvasTestCases('Mask', TEST_CASES);
+  generateCanvasTestCases('mask', TEST_CASES);
 });

__tests__/integration/point.spec.ts

@@ -9,24 +9,23 @@ const TEST_CASES = [
   },
   {
     name: 'dot',
-    snapshots: false,
+    snapshot: false,
   },
   {
     name: 'fill',
   },
   {
-    name: 'fill_image',
-    sleepTime: 1000,
+    name: 'fillImage',
   },
   {
     name: 'image',
-    snapshots: false,
+    snapshot: false,
   },
   {
     name: 'text',
   },
 ];
 
 describe('Point Snapshot', () => {
-  generateCanvasTestCases('Point', TEST_CASES);
+  generateCanvasTestCases('point', TEST_CASES);
 });

__tests__/integration/polygon.spec.ts

@@ -14,18 +14,18 @@ const TEST_CASES = [
   },
   {
     name: 'ocean',
-    snapshots: false,
+    snapshot: false,
   },
   {
     name: 'texture',
-    snapshots: false,
+    snapshot: false,
   },
   {
     name: 'water',
-    snapshots: false,
+    snapshot: false,
   },
 ];
 
 describe('Polygon Snapshot', () => {
-  generateCanvasTestCases('Polygon', TEST_CASES);
+  generateCanvasTestCases('polygon', TEST_CASES);
 });

__tests__/integration/utils/generator.ts

@@ -1,23 +1,21 @@
-import type { Browser, BrowserContext, Page } from 'playwright';
+import type { Browser, BrowserContext } from 'playwright';
 import { chromium, devices } from 'playwright';
 import { sleep } from './sleep';
 import './useSnapshotMatchers';
 
 export function generateCanvasTestCases(
   namespace: string,
-  tests: { name: string; sleepTime?: number; snapshots?: boolean }[],
+  tests: { name: string; sleepTime?: number; snapshot?: boolean }[],
 ) {
   const port = (globalThis as any).PORT;
-  let browser: Browser, context: BrowserContext, page: Page;
+  let browser: Browser, context: BrowserContext;
 
   beforeAll(async () => {
     // Setup
     browser = await chromium.launch({
       args: ['--headless', '--no-sandbox'],
     });
     context = await browser.newContext(devices['Desktop Chrome']);
-    page = await context.newPage();
-    await context.exposeFunction('screenshot', () => {});
   });
 
   afterAll(async () => {
@@ -26,15 +24,29 @@ export function generateCanvasTestCases(
   });
 
   tests
-    .filter((test) => test.snapshots !== false)
+    .filter((test) => test.snapshot !== false)
     .map((test) => {
       const { name, sleepTime = 200 } = test;
       const key = `${namespace}_${name}`;
 
       it(key, async () => {
+        const page = await context.newPage();
+
+        let resolveReady: () => void;
+        const readyPromise = new Promise<void>((resolve) => {
+          resolveReady = () => {
+            resolve();
+          };
+        });
+
+        await page.exposeFunction('screenshot', async () => {
+          resolveReady();
+        });
+
         // Go to test page served by vite devServer.
-        const url = `http://localhost:${port}/?type=${namespace}&name=${name}`;
+        const url = `http://localhost:${port}/?namespace=${namespace}&name=${name}&snapshot=true`;
         await page.goto(url);
+        await readyPromise;
         await sleep(sleepTime);
 
         // Chart already rendered, capture into buffer.
@@ -45,7 +57,7 @@ export function generateCanvasTestCases(
         try {
           expect(buffer).toMatchCanvasSnapshot(dir, key, { maxError });
         } finally {
-          //
+          page.close();
         }
       });
     });

examples/constants.ts

@@ -1,6 +1,17 @@
-import type { RenderDemoMap, RenderDemoOptions } from './types';
+import type { GUIOptions, TestCaseBasemap } from './types';
 
-export const MAP_TYPES: RenderDemoMap[] = [
+export const DEFAULT_GUI_OPTIONS: GUIOptions = {
+  map: 'Map',
+  renderer: 'device',
+  animate: false,
+  enableWebGPU: false,
+};
+
+export const SEARCH_PARAMS_KEYS = ['namespace', 'name', 'snapshot'].concat(
+  Object.keys(DEFAULT_GUI_OPTIONS),
+);
+
+export const MAP_TYPES: TestCaseBasemap[] = [
   'Map',
   'GaodeMap',
   'Mapbox',
@@ -10,9 +21,3 @@ export const MAP_TYPES: RenderDemoMap[] = [
   'TMap',
   'GoogleMap',
 ] as const;
-
-export const DEFAULT_RENDER_OPTIONS: RenderDemoOptions = {
-  map: 'Map',
-  renderer: 'device',
-  animate: false,
-};

examples/demos/basemap/amap-data.ts

@@ -1,18 +1,17 @@
-import { LineLayer, Scene, Source } from '@antv/l7';
-import * as allMap from '@antv/l7-maps';
-import type { RenderDemoOptions } from '../../types';
+import { LineLayer, Source } from '@antv/l7';
+import type { TestCase } from '../../types';
+import { CaseScene } from '../../utils';
 
-export function MapRender(options: RenderDemoOptions) {
-  const scene = new Scene({
-    id: 'map',
-    renderer: options.renderer,
-    map: new allMap[options.map]({
-      style: 'normal',
+export const amapData: TestCase = async (options) => {
+  const scene = await CaseScene({
+    ...options,
+    mapConfig: {
       center: [121.434765, 31.256735],
       zoom: 14.83,
       maxZoom: 25,
-    }),
+    },
   });
+
   const geoData = {
     type: 'FeatureCollection',
     features: [
@@ -40,8 +39,7 @@ export function MapRender(options: RenderDemoOptions) {
     .style({
       opacity: 1,
     });
+  scene.addLayer(layer);
 
-  scene.on('loaded', () => {
-    scene.addLayer(layer);
-  });
-}
+  return scene;
+};

examples/demos/basemap/index.ts

@@ -1,2 +1,2 @@
-export { MapRender as amapData } from './amap-data';
-export { MapRender as wgs84Data } from './wgs84-data';
+export { amapData } from './amap-data';
+export { wgs84Data } from './wgs84-data';

examples/demos/basemap/wgs84-data.ts

@@ -1,21 +1,18 @@
-import { LineLayer, Scene, Source } from '@antv/l7';
-import * as allMap from '@antv/l7-maps';
+import { LineLayer, Source } from '@antv/l7';
 import type { Map } from 'maplibre-gl';
-import type { RenderDemoOptions } from '../../types';
+import type { TestCase } from '../../types';
+import { CaseScene } from '../../utils';
 
-export function MapRender(options: RenderDemoOptions) {
-  const scene = new Scene({
-    id: 'map',
-    renderer: options.renderer,
-    map: new allMap[options.map]({
-      style: ['MapLibre', 'Mapbox'].includes(options.map)
-        ? 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json'
-        : 'normal',
+export const wgs84Data: TestCase = async (options) => {
+  const scene = await CaseScene({
+    ...options,
+    mapConfig: {
       center: [121.434765, 31.256735],
       zoom: 14.83,
       maxZoom: 23.9,
-    }),
+    },
   });
+
   const geoData = {
     type: 'FeatureCollection',
     features: [
@@ -44,9 +41,7 @@ export function MapRender(options: RenderDemoOptions) {
       opacity: 1,
     });
 
-  scene.on('loaded', () => {
-    scene.addLayer(layer);
-  });
+  scene.addLayer(layer);
 
   if (scene.getType() === 'mapbox') {
     const baseMap = scene.map as Map;
@@ -70,4 +65,6 @@ export function MapRender(options: RenderDemoOptions) {
       });
     });
   }
-}
+
+  return scene;
+};