chore: use jsdom in screenshot

antvis · Nov 28, 2023 · 9198b0f · 9198b0f
1 parent a315fec
commit 9198b0f
Show file tree

Hide file tree

Showing 292 changed files with 2,778 additions and 3,064 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -56,3 +56,12 @@ jobs:
             <!-- Created by actions-cool/maintain-one-comment -->
           emojis: 'eyes'
           body-include: '<!-- Created by actions-cool/maintain-one-comment -->'
+
+      - name: Upload blob report to GitHub Actions Artifacts
+          if: always()
+          uses: actions/upload-artifact@v3
+          with:
+            name: snapshots
+            path: |
+              packages/g6/tests/integration/snapshots/**/*-actual.svg
+            retention-days: 1
diff --git a/packages/g6/jest.node.config.js b/packages/g6/jest.node.config.js
@@ -5,20 +5,23 @@ const esm = ['internmap', 'd3-*', 'lodash-es']
   .join('|');
 
 module.exports = {
-  testEnvironment: 'jsdom',
   testTimeout: 100000,
   preset: 'ts-jest/presets/js-with-ts',
-  globals: {
-    'ts-jest': {
-      diagnostics: {
-        exclude: ['**'],
-      },
-      tsconfig: {
-        target: 'esnext', // Increase test coverage.
-        allowJs: true,
-        sourceMap: true,
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.[tj]s$': [
+      'ts-jest',
+      {
+        diagnostics: {
+          exclude: ['**'],
+        },
+        tsconfig: {
+          allowJs: true,
+          target: 'esnext',
+          esModuleInterop: true,
+        },
       },
-    },
+    ],
   },
   collectCoverageFrom: ['src/**/*.ts'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],

diff --git a/packages/g6/package.json b/packages/g6/package.json
@@ -27,10 +27,10 @@
     "fix": "eslint ./src ./tests --fix && prettier ./src ./tests --write ",
     "test": "jest",
     "test:integration": "node --expose-gc --max-old-space-size=4096 --unhandled-rejections=strict node_modules/jest/bin/jest tests/integration/ --config jest.node.config.js --coverage -i  --logHeapUsage --detectOpenHandles",
-    "test:integration_one": "node --expose-gc --max-old-space-size=4096 --unhandled-rejections=strict node_modules/jest/bin/jest tests/integration/node-star.spec.ts --config jest.node.config.js --coverage -i  --logHeapUsage --detectOpenHandles",
+    "test:integration_one": "node --expose-gc --max-old-space-size=4096 --unhandled-rejections=strict node_modules/jest/bin/jest tests/integration/arrow.spec.ts --config jest.node.config.js -i  --logHeapUsage --detectOpenHandles",
     "test-live": "DEBUG_MODE=1 jest --watch  ./tests/unit/item-animate-spec.ts",
     "test-behavior": "DEBUG_MODE=1 jest --watch ./tests/unit/item-3d-spec.ts",
-    "ci": "run-s lint build",
+    "ci": "run-s lint build test:integration",
     "coverage": "jest --coverage"
   },
   "keywords": [
@@ -55,10 +55,10 @@
     "@antv/event-emitter": "latest",
     "@antv/g": "^5.18.17",
     "@antv/g-canvas": "^1.11.19",
-    "@antv/g-plugin-3d": "^1.9.22",
-    "@antv/g-plugin-control": "^1.9.15",
+    "@antv/g-plugin-3d": "^1.9.26",
+    "@antv/g-plugin-control": "^1.9.17",
     "@antv/g-plugin-dragndrop": "^1.8.15",
-    "@antv/g-svg": "^1.10.17",
+    "@antv/g-svg": "^1.10.21",
     "@antv/g-webgl": "^1.9.29",
     "@antv/graphlib": "^2.0.2",
     "@antv/gui": "0.5.1-alpha.1",
@@ -75,39 +75,31 @@
   "devDependencies": {
     "@antv/g6-plugin-map-view": "workspace:*",
     "@rollup/plugin-terser": "^0.4.3",
-    "@types/gl": "6.0.2",
     "@types/jest": "^29.5.1",
     "@types/jsdom": "^21.1.1",
     "@types/node": "13.11.1",
-    "@types/pixelmatch": "^5.2.4",
-    "@types/pngjs": "^6.0.1",
     "@types/xmlserializer": "^0.6.3",
     "@typescript-eslint/eslint-plugin": "^6.5.0",
     "@typescript-eslint/parser": "^6.5.0",
     "@umijs/fabric": "^2.0.0",
     "babel-loader": "^8.0.6",
-    "canvas": "2.11.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.48.0",
     "eslint-plugin-import": "^2.28.1",
-    "gl": "^6.0.2",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "",
-    "jest-extended": "^0.11.2",
+    "jest": "^29.5.1",
+    "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^19.0.0",
     "limit-size": "^0.1.4",
     "lint-staged": "^10.5.4",
     "npm-run-all": "^4.1.5",
-    "pixelmatch": "5.3.0",
-    "pngjs": "^6.0.0",
     "prettier": "^3.0.3",
     "rimraf": "^3.0.0",
     "rollup": "^2.79.1",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-polyfill-node": "^0.8.0",
     "rollup-plugin-typescript": "^1.0.1",
     "rollup-plugin-visualizer": "^5.6.0",
-    "ts-jest": "^28.0.8",
+    "ts-jest": "^29.1.1",
     "typedoc": "^0.25.0",
     "typedoc-plugin-markdown": "^3.16.0",
     "typescript": "5.1.6",

diff --git a/...egration/animations-node-build-in.spec.ts → ...ests/bak/animations-node-build-in.spec.ts b/...egration/animations-node-build-in.spec.ts → ...ests/bak/animations-node-build-in.spec.ts
@@ -39,7 +39,7 @@ describe('Animation node buildIn', () => {
           animation.pause();
         });
       });
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'animations-node-build-in-ready',
       );
@@ -54,7 +54,7 @@ describe('Animation node buildIn', () => {
           animation.pause();
         });
       });
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'animations-node-build-in-running',
       );
@@ -80,7 +80,7 @@ describe('Animation node buildIn', () => {
           );
         }),
       );
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'animations-node-build-in-finished',
       );

diff --git a/...sts/integration/api-update-mapper.spec.ts → ...es/g6/tests/bak/api-update-mapper.spec.ts b/...sts/integration/api-update-mapper.spec.ts → ...es/g6/tests/bak/api-update-mapper.spec.ts
@@ -27,13 +27,13 @@ describe('updateMapper API', () => {
     });
 
     graph.on('afterlayout', async () => {
-      await expect(canvas).toMatchCanvasSnapshot(dir, 'api-update-mapper-init');
+      await expect(canvas).toMatchSVGSnapshot(dir, 'api-update-mapper-init');
 
       const $updateNodeJson = document.getElementById(
         'change-node-json-mapper',
       );
       $updateNodeJson?.click();
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'api-update-mapper-node-json',
       );
@@ -42,7 +42,7 @@ describe('updateMapper API', () => {
         'change-node-func-mapper',
       );
       $updateNodeFunc?.click();
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'api-update-mapper-node-func',
       );
@@ -51,7 +51,7 @@ describe('updateMapper API', () => {
         'change-edge-json-mapper',
       );
       $updateEdgeJson?.click();
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'api-update-mapper-edge-json',
       );
@@ -60,7 +60,7 @@ describe('updateMapper API', () => {
         'change-edge-func-mapper',
       );
       $updateEdgeFunc?.click();
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'api-update-mapper-edge-func',
       );

diff --git a/...tion/behaviors-activate-relations.spec.ts → .../bak/behaviors-activate-relations.spec.ts b/...tion/behaviors-activate-relations.spec.ts → .../bak/behaviors-activate-relations.spec.ts
@@ -28,15 +28,15 @@ describe('Activate relations behavior', () => {
 
     graph.on('afterlayout', async () => {
       await sleep(300);
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'behaviors-activate-relations',
       );
 
       // @ts-ignore
       // mouseEvent.target = canvas.getContextService().getDomElement();
       graph.emit('node:click', { itemId: 'node1', itemType: 'node' });
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'behaviors-activate-relations-activate-node1',
       );
@@ -45,7 +45,7 @@ describe('Activate relations behavior', () => {
        * Click document to clear active state.
        */
       graph.emit('canvas:click', {});
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'behaviors-activate-relations-deactivate-node1',
       );

diff --git a/...on/behaviors-collapse-expand-tree.spec.ts → ...ak/behaviors-collapse-expand-tree.spec.ts b/...on/behaviors-collapse-expand-tree.spec.ts → ...ak/behaviors-collapse-expand-tree.spec.ts
@@ -28,38 +28,35 @@ describe('Collapse or expand a branch', () => {
 
     graph.on('afterrender', async (e) => {
       await sleep(100);
-      await expect(canvas).toMatchCanvasSnapshot(
-        dir,
-        'behaviors-collapse-expand',
-      );
+      await expect(canvas).toMatchSVGSnapshot(dir, 'behaviors-collapse-expand');
 
       // collapse child branch
       graph.emit('node:click', { itemId: 'cnode1', itemType: 'node' });
       await sleep(800);
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'behaviors-collapse-expand-collapse-cnode1',
       );
 
       // collapse parent branch
       graph.emit('node:click', { itemId: 'node1', itemType: 'node' });
       await sleep(800);
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'behaviors-collapse-expand-collapse-node1',
       );
 
       // expand parent branch
       graph.emit('node:click', { itemId: 'node1', itemType: 'node' });
       await sleep(1000);
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'behaviors-collapse-expand-expand-node1',
       );
       // expand child branch
       graph.emit('node:click', { itemId: 'cnode1', itemType: 'node' });
       await sleep(1000);
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'behaviors-collapse-expand-expand-cnode1',
       );

diff --git a/...integration/behaviors-create-edge.spec.ts → ...6/tests/bak/behaviors-create-edge.spec.ts b/...integration/behaviors-create-edge.spec.ts → ...6/tests/bak/behaviors-create-edge.spec.ts
@@ -41,7 +41,7 @@ describe('Create edge behavior', () => {
         canvas: { x: 100, y: 100 },
       });
       graph.emit('pointermove', { canvas: { x: 100, y: 100 } });
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'behaviors-create-edge-click-begin',
       );
@@ -51,7 +51,7 @@ describe('Create edge behavior', () => {
         itemType: 'node',
         canvas: { x: 100, y: 100 },
       });
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'behaviors-create-edge-click-finish',
       );
@@ -66,7 +66,7 @@ describe('Create edge behavior', () => {
         itemType: 'node',
         canvas: { x: 100, y: 100 },
       });
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'behaviors-create-edge-click-loop',
       );
@@ -103,7 +103,7 @@ describe('Create edge behavior', () => {
         canvas: { x: 100, y: 100 },
       });
       graph.emit('drag', { canvas: { x: 100, y: 100 } });
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'behaviors-create-edge-drag-begin',
       );
@@ -114,7 +114,7 @@ describe('Create edge behavior', () => {
         itemType: 'node',
         canvas: { x: nodeModel?.data.x, y: nodeModel?.data.y },
       });
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'behaviors-create-edge-drag-finish',
       );
@@ -131,7 +131,7 @@ describe('Create edge behavior', () => {
         itemType: 'node',
         canvas: { x: node5Model?.data.x, y: node5Model?.data.y },
       });
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'behaviors-create-edge-drag-loop',
       );

diff --git a/...tegration/behaviors-scroll-canvas.spec.ts → ...tests/bak/behaviors-scroll-canvas.spec.ts b/...tegration/behaviors-scroll-canvas.spec.ts → ...tests/bak/behaviors-scroll-canvas.spec.ts
@@ -34,17 +34,14 @@ describe('Scroll canvas behavior', () => {
     });
 
     graph.on('afterlayout', async () => {
-      await expect(canvas).toMatchCanvasSnapshot(
-        dir,
-        'behaviors-scroll-canvas',
-      );
+      await expect(canvas).toMatchSVGSnapshot(dir, 'behaviors-scroll-canvas');
 
       graph.emit('wheel', {
         deltaX: 50,
         deltaY: 50,
       });
       await sleep(2000);
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'behaviors-scroll-canvas-wheel',
       );
@@ -55,7 +52,7 @@ describe('Scroll canvas behavior', () => {
       });
 
       await sleep(2000);
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'behaviors-scroll-canvas-zoom',
       );

diff --git a/...egration/behaviors-shortcuts-call.spec.ts → ...ests/bak/behaviors-shortcuts-call.spec.ts b/...egration/behaviors-shortcuts-call.spec.ts → ...ests/bak/behaviors-shortcuts-call.spec.ts
@@ -26,10 +26,7 @@ describe('Shortcuts-call behavior', () => {
 
     graph.on('afterlayout', async () => {
       await sleep(300);
-      await expect(canvas).toMatchCanvasSnapshot(
-        dir,
-        'behaviors-shortcuts-call',
-      );
+      await expect(canvas).toMatchSVGSnapshot(dir, 'behaviors-shortcuts-call');
 
       // default behavior ctrl + 1 to fitView
       graph.emit('keydown', {
@@ -38,7 +35,7 @@ describe('Shortcuts-call behavior', () => {
       graph.emit('keydown', {
         key: '1',
       });
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'behaviors-shortcuts-call-with-fitView',
       );
@@ -75,7 +72,7 @@ describe('Shortcuts-call behavior', () => {
         key: 'm',
       });
       await sleep(300);
-      await expect(canvas).toMatchCanvasSnapshot(
+      await expect(canvas).toMatchSVGSnapshot(
         dir,
         'behaviors-shortcuts-call-with-zoom',
       );