fix: fix issue that integration test lack of canvas (#5175)

* fix: fix issue that integration test lack of canvas

* fix: update demos of igonoring label

---------

Co-authored-by: yvonneyx <[email protected]>

packages/g6/package.json

@@ -27,7 +27,7 @@
     "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/data-process-parallel-edges.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/node-star.spec.ts --config jest.node.config.js --coverage -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",

packages/g6/src/runtime/graph.ts

@@ -172,16 +172,7 @@ export class Graph<B extends BehaviorRegistry, T extends ThemeRegistry>
   }
 
   private initCanvas() {
-    const {
-      renderer,
-      container,
-      canvas,
-      backgroundCanvas,
-      transientCanvas,
-      transientLabelCanvas,
-      width,
-      height,
-    } = this.specification;
+    const { renderer, container, width, height } = this.specification;
 
     let pixelRatio: number;
     if (renderer && !isString(renderer)) {
@@ -194,14 +185,7 @@ export class Graph<B extends BehaviorRegistry, T extends ThemeRegistry>
       this.rendererType = renderer || 'canvas';
     }
 
-    /**
-     * These 3 canvases can be passed in by users, e.g. when doing serverside rendering we can't use DOM API.
-     */
-    if (canvas) {
-      this.canvas = canvas;
-      this.backgroundCanvas = backgroundCanvas;
-      this.transientCanvas = transientCanvas;
-      this.transientLabelCanvas = transientLabelCanvas;
+    if (container) {
       this.container = container as HTMLElement;
     } else {
       const containerDOM = isString(container)
@@ -215,52 +199,29 @@ export class Graph<B extends BehaviorRegistry, T extends ThemeRegistry>
         this.destroy();
         return;
       }
-
       this.container = containerDOM;
-      const size = [width, height];
-      if (size[0] === undefined) {
-        size[0] = containerDOM.scrollWidth;
-      }
-      if (size[1] === undefined) {
-        size[1] = containerDOM.scrollHeight;
-      }
-      this.backgroundCanvas = createCanvas(
-        this.rendererType,
-        containerDOM,
-        size[0],
-        size[1],
-        pixelRatio,
-      );
-      this.canvas = createCanvas(
-        this.rendererType,
-        containerDOM,
-        size[0],
-        size[1],
-        pixelRatio,
-      );
-      this.labelCanvas = createCanvas(
-        'canvas',
-        containerDOM,
-        size[0],
-        size[1],
-        pixelRatio,
-      );
-      this.transientCanvas = createCanvas(
-        this.rendererType,
-        containerDOM,
-        size[0],
-        size[1],
-        pixelRatio,
-      );
-      this.transientLabelCanvas = createCanvas(
-        'canvas',
-        containerDOM,
-        size[0],
-        size[1],
-        pixelRatio,
-      );
     }
 
+    [
+      'backgroundCanvas',
+      'canvas',
+      'labelCanvas',
+      'transientCanvas',
+      'transientLabelCanvas',
+    ].forEach((name) => {
+      this[name] =
+        this.specification[name] ||
+        createCanvas(
+          ['labelCanvas', 'transientLabelCanvas'].includes(name)
+            ? 'canvas'
+            : this.rendererType,
+          this.container,
+          width ?? this.container.scrollWidth,
+          height ?? this.container.scrollHeight,
+          pixelRatio,
+        );
+    });
+
     Promise.all(
       [
         this.backgroundCanvas,

packages/g6/src/types/spec.ts

@@ -42,6 +42,7 @@ export interface Specification<
   container?: string | HTMLElement;
   backgroundCanvas?: Canvas;
   canvas?: Canvas;
+  labelCanvas?: Canvas;
   transientCanvas?: Canvas;
   transientLabelCanvas?: Canvas;
   width?: number;

packages/g6/tests/demo/index.ts

@@ -133,7 +133,7 @@ export {
   legend,
   line_edge,
   loop_edge,
-  map,
+  // map,
   mapper,
   menu,
   minimap,

packages/g6/tests/demo/interface.ts

@@ -6,6 +6,8 @@ export type TestCaseContext<ExtendedParams = any> = Partial<{
   renderer: RendererName;
   canvas: Canvas;
   transientCanvas: Canvas;
+  labelCanvas: Canvas;
+  transientLabelCanvas: Canvas;
   backgroundCanvas: Canvas;
   width: number;
   height: number;

packages/g6/tests/integration/node-star.spec.ts

@@ -6,13 +6,21 @@ import { triggerEvent } from './utils/event';
 describe('node star', () => {
   it('should be rendered correctly with Canvas2D', (done) => {
     const dir = `${__dirname}/snapshots/canvas/items/node/star`;
-    const { backgroundCanvas, canvas, transientCanvas, container } =
-      createContext('canvas', 500, 500);
+    const {
+      backgroundCanvas,
+      labelCanvas,
+      transientLabelCanvas,
+      canvas,
+      transientCanvas,
+      container,
+    } = createContext('canvas', 500, 500);
 
     const graph = star({
       container,
       backgroundCanvas,
       canvas,
+      labelCanvas,
+      transientLabelCanvas,
       transientCanvas,
       width: 500,
       height: 500,