diff --git a/packages/g6/tests/bak/items-edge-line.spec.ts b/packages/g6/tests/bak/items-edge-line.spec.ts
deleted file mode 100644
index bca719c0408..00000000000
--- a/packages/g6/tests/bak/items-edge-line.spec.ts
+++ /dev/null
@@ -1,200 +0,0 @@
-import { resetEntityCounter } from '@antv/g';
-import lineEdge from '../demo/item/edge/line-edge';
-import { createContext, sleep } from './utils';
-import './utils/useSnapshotMatchers';
-
-describe('Items edge line', () => {
- beforeEach(() => {
- /**
- * SVG Snapshot testing will generate a unique id for each element.
- * Reset to 0 to keep snapshot consistent.
- */
- resetEntityCounter();
- });
-
- it('should be rendered correctly with Canvas2D', (done) => {
- const dir = `${__dirname}/snapshots/canvas/items/edge/line`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = lineEdge({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-line');
-
- /**
- * Click the checkbox to show label.
- */
- const $showLabel = document.querySelectorAll(
- 'input',
- )[0] as HTMLInputElement;
- $showLabel.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-line-show-label',
- );
- $showLabel.click();
-
- /**
- * Click the checkbox to display selected style.
- */
- const $selected = document.querySelectorAll(
- 'input',
- )[2] as HTMLInputElement;
- $selected.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-line-selected-style',
- );
- $selected.click();
-
- /**
- * Click the checkbox to highlight.
- */
- const $highlight = document.querySelectorAll(
- 'input',
- )[3] as HTMLInputElement;
- $highlight.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-line-highlight-style',
- );
- $highlight.click();
-
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg/items/edge/line`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = lineEdge({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await sleep(300);
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-line');
-
- /**
- * Click the checkbox to show label.
- */
- const $showLabel = document.querySelectorAll(
- 'input',
- )[0] as HTMLInputElement;
- $showLabel.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-line-show-label',
- );
- $showLabel.click();
-
- /**
- * Click the checkbox to display selected style.
- */
- const $selected = document.querySelectorAll(
- 'input',
- )[2] as HTMLInputElement;
- $selected.click();
- await sleep(500);
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-line-selected-style',
- );
- $selected.click();
-
- /**
- * Click the checkbox to highlight.
- */
- const $highlight = document.querySelectorAll(
- 'input',
- )[3] as HTMLInputElement;
- $highlight.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-line-highlight-style',
- );
- $highlight.click();
-
- graph.destroy();
- done();
- });
- });
-
- it.skip('should be rendered correctly with WebGL', (done) => {
- const dir = `${__dirname}/snapshots/webgl/items/edge/line`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('webgl', 500, 500);
-
- const graph = lineEdge({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchWebGLSnapshot(dir, 'items-edge-line');
-
- /**
- * Click the checkbox to show label.
- */
- const $showLabel = document.querySelectorAll(
- 'input',
- )[0] as HTMLInputElement;
- $showLabel.click();
- await expect(canvas).toMatchWebGLSnapshot(
- dir,
- 'items-edge-line-show-label',
- );
- $showLabel.click();
-
- /**
- * Click the checkbox to display selected style.
- */
- const $selected = document.querySelectorAll(
- 'input',
- )[2] as HTMLInputElement;
- $selected.click();
- await sleep(500);
- await expect(canvas).toMatchWebGLSnapshot(
- dir,
- 'items-edge-line-selected-style',
- );
- $selected.click();
-
- /**
- * Click the checkbox to highlight.
- */
- const $highlight = document.querySelectorAll(
- 'input',
- )[3] as HTMLInputElement;
- $highlight.click();
- await expect(canvas).toMatchWebGLSnapshot(
- dir,
- 'items-edge-line-highlight-style',
- );
- $highlight.click();
-
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/items-edge-loop.spec.ts b/packages/g6/tests/bak/items-edge-loop.spec.ts
deleted file mode 100644
index 1125c544837..00000000000
--- a/packages/g6/tests/bak/items-edge-loop.spec.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import { resetEntityCounter } from '@antv/g';
-import loopEdge from '../demo/item/edge/loop-edge';
-import { createContext } from './utils';
-import './utils/useSnapshotMatchers';
-
-describe('Items edge line', () => {
- beforeEach(() => {
- /**
- * SVG Snapshot testing will generate a unique id for each element.
- * Reset to 0 to keep snapshot consistent.
- */
- resetEntityCounter();
- });
-
- it('should be rendered correctly with Canvas2D', (done) => {
- const dir = `${__dirname}/snapshots/canvas/items/edge/loop`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = loopEdge({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop');
-
- /**
- * Click the checkbox to switch clockwise.
- */
- const $switchClockwise = document.querySelectorAll(
- 'input',
- )[0] as HTMLInputElement;
- $switchClockwise.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-clockwise');
- $switchClockwise.click();
-
- /**
- * Click the checkbox to set custom distance.
- */
- const $dist = document.querySelectorAll('input')[1] as HTMLInputElement;
- $dist.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-distance');
- $dist.click();
-
- /**
- * Click the button to change loop position.
- */
- const $loopPositionBtn = document.querySelectorAll(
- 'button',
- )[0] as HTMLButtonElement;
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-top-right');
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-right');
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-loop-bottom-right',
- );
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-bottom');
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-loop-bottom-left',
- );
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-left');
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-top-left');
- $loopPositionBtn.click();
-
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg/items/edge/loop`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = loopEdge({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop');
-
- /**
- * Click the checkbox to switch clockwise.
- */
- const $switchClockwise = document.querySelectorAll(
- 'input',
- )[0] as HTMLInputElement;
- $switchClockwise.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-clockwise');
- $switchClockwise.click();
-
- /**
- * Click the checkbox to set custom distance.
- */
- const $dist = document.querySelectorAll('input')[1] as HTMLInputElement;
- $dist.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-distance');
- $dist.click();
-
- /**
- * Click the button to change loop position.
- */
- const $loopPositionBtn = document.querySelectorAll(
- 'button',
- )[0] as HTMLButtonElement;
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-top-right');
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-right');
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-loop-bottom-right',
- );
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-bottom');
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-loop-bottom-left',
- );
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-left');
- $loopPositionBtn.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-top-left');
- $loopPositionBtn.click();
-
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/items-edge-polyline.spec.ts b/packages/g6/tests/bak/items-edge-polyline.spec.ts
deleted file mode 100644
index dd20b934952..00000000000
--- a/packages/g6/tests/bak/items-edge-polyline.spec.ts
+++ /dev/null
@@ -1,230 +0,0 @@
-import { resetEntityCounter } from '@antv/g';
-import polylineEdge from '../demo/item/edge/polyline-edge';
-import './utils/useSnapshotMatchers';
-import { createContext, sleep } from './utils';
-
-describe('Items edge polyline', () => {
- beforeEach(() => {
- /**
- * SVG Snapshot testing will generate a unique id for each element.
- * Reset to 0 to keep snapshot consistent.
- */
- resetEntityCounter();
- });
-
- it('should be rendered correctly with Canvas2D', (done) => {
- const dir = `${__dirname}/snapshots/canvas/items/edge/polyline`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = polylineEdge({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-polyline');
-
- /**
- * Click the checkbox to show label.
- */
- const $showLabel = document.querySelectorAll(
- 'input',
- )[0] as HTMLInputElement;
- $showLabel.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-polyline-show-label',
- );
- $showLabel.click();
-
- /**
- * Click the checkbox to display selected style.
- */
- const $selected = document.querySelectorAll(
- 'input',
- )[2] as HTMLInputElement;
- $selected.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-polyline-selected-style',
- );
- $selected.click();
-
- /**
- * Click the checkbox to highlight.
- */
- const $highlight = document.querySelectorAll(
- 'input',
- )[3] as HTMLInputElement;
- $highlight.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-polyline-highlight-style',
- );
- $highlight.click();
-
- /**
- * Click the checkbox to add border radius.
- */
- const $radius = document.querySelectorAll('input')[4] as HTMLInputElement;
- $radius.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-polyline-radius',
- );
- $radius.click();
-
- /**
- * Click the checkbox to enable automatic obstacle avoidances.
- */
- const $obstacle = document.querySelectorAll(
- 'input',
- )[5] as HTMLInputElement;
- const $enableObstacleAvoidance = document.querySelectorAll(
- 'input',
- )[6] as HTMLInputElement;
-
- /**
- * Click the checkbox to prevent obstacle to overlap edges.
- */
- // const $preventObstacleOverlapEdges = document.querySelectorAll(
- // 'input',
- // )[7] as HTMLInputElement;
- // const $moveObstacle = document.querySelectorAll(
- // 'input',
- // )[8] as HTMLInputElement;
- // $obstacle.click();
- // $enableObstacleAvoidance.click();
- // $preventObstacleOverlapEdges.click();
- // $moveObstacle.click();
- // await expect(canvas).toMatchSVGSnapshot(
- // dir,
- // 'items-edge-polyline-prevent-overlap-edges',
- // );
- // $obstacle.click();
- // $enableObstacleAvoidance.click();
- // $preventObstacleOverlapEdges.click();
- // $moveObstacle.click();
-
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg/items/edge/polyline`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = polylineEdge({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-polyline');
-
- /**
- * Click the checkbox to show label.
- */
- const $showLabel = document.querySelectorAll(
- 'input',
- )[0] as HTMLInputElement;
- $showLabel.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-polyline-show-label',
- );
- $showLabel.click();
-
- /**
- * Click the checkbox to display selected style.
- */
- const $selected = document.querySelectorAll(
- 'input',
- )[2] as HTMLInputElement;
- $selected.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-polyline-selected-style',
- );
- $selected.click();
-
- /**
- * Click the checkbox to highlight.
- */
- const $highlight = document.querySelectorAll(
- 'input',
- )[3] as HTMLInputElement;
- $highlight.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-polyline-highlight-style',
- );
- $highlight.click();
-
- /**
- * Click the checkbox to add border radius.
- */
- const $radius = document.querySelectorAll('input')[4] as HTMLInputElement;
- $radius.click();
- await expect(canvas).toMatchSVGSnapshot(
- dir,
- 'items-edge-polyline-radius',
- );
- $radius.click();
-
- /**
- * Click the checkbox to enable automatic obstacle avoidances.
- */
- const $obstacle = document.querySelectorAll(
- 'input',
- )[5] as HTMLInputElement;
- const $enableObstacleAvoidance = document.querySelectorAll(
- 'input',
- )[6] as HTMLInputElement;
- // $obstacle.click();
- // $enableObstacleAvoidance.click();
- // await expect(canvas).toMatchSVGSnapshot(
- // dir,
- // 'items-edge-polyline-obstacle-avoidance',
- // );
- // $obstacle.click();
- // $enableObstacleAvoidance.click();
-
- /**
- * Click the checkbox to prevent obstacle to overlap edges.
- */
- // const $preventObstacleOverlapEdges = document.querySelectorAll(
- // 'input',
- // )[7] as HTMLInputElement;
- // const $moveObstacle = document.querySelectorAll(
- // 'input',
- // )[8] as HTMLInputElement;
- // $obstacle.click();
- // $enableObstacleAvoidance.click();
- // $preventObstacleOverlapEdges.click();
- // $moveObstacle.click();
- // await expect(canvas).toMatchSVGSnapshot(
- // dir,
- // 'items-edge-polyline-prevent-overlap-edges',
- // );
- // $obstacle.click();
- // $enableObstacleAvoidance.click();
- // $preventObstacleOverlapEdges.click();
- // $moveObstacle.click();
-
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/layouts-circular.spec.ts b/packages/g6/tests/bak/layouts-circular.spec.ts
deleted file mode 100644
index 155dc4d70f1..00000000000
--- a/packages/g6/tests/bak/layouts-circular.spec.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { resetEntityCounter } from '@antv/g';
-import circular from '../demo/layouts/circular';
-import { createContext, sleep } from './utils';
-import './utils/useSnapshotMatchers';
-
-describe('Circular layout', () => {
- beforeEach(() => {
- /**
- * SVG Snapshot testing will generate a unique id for each element.
- * Reset to 0 to keep snapshot consistent.
- */
- resetEntityCounter();
- });
-
- it('should be rendered correctly with Canvas2D', (done) => {
- const dir = `${__dirname}/snapshots/canvas`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = circular({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-circular');
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = circular({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await sleep(300);
- await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-circular');
- graph.destroy();
- done();
- });
- });
-
- it.skip('should be rendered correctly with WebGL', (done) => {
- const dir = `${__dirname}/snapshots/webgl`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('webgl', 500, 500);
-
- const graph = circular({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchWebGLSnapshot(dir, 'layouts-circular');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/layouts-d3force.spec.ts b/packages/g6/tests/bak/layouts-d3force.spec.ts
deleted file mode 100644
index fb2eb58aaaf..00000000000
--- a/packages/g6/tests/bak/layouts-d3force.spec.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { resetEntityCounter } from '@antv/g';
-import d3force from '../demo/layouts/d3force';
-import { createContext } from './utils';
-import './utils/useSnapshotMatchers';
-
-describe('D3Force layout', () => {
- beforeEach(() => {
- /**
- * SVG Snapshot testing will generate a unique id for each element.
- * Reset to 0 to keep snapshot consistent.
- */
- resetEntityCounter();
- });
-
- /**
- * D3 force has some random result, which is hard to test with screenshots.
- */
- it.skip('should be rendered correctly with Canvas2D', (done) => {
- const dir = `${__dirname}/snapshots/canvas`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = d3force({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-d3force');
-
- // const layoutAnimation = graph.getLayoutCurrentAnimation()!;
- // layoutAnimation.
- // layoutAnimation.currentTime = 0;
- // await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-d3force-0');
-
- graph.destroy();
- done();
- });
- });
-
- it.skip('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = d3force({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-d3force');
- graph.destroy();
- done();
- });
- });
-
- it.skip('should be rendered correctly with WebGL', (done) => {
- const dir = `${__dirname}/snapshots/webgl`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('webgl', 500, 500);
-
- const graph = d3force({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchWebGLSnapshot(dir, 'layouts-d3force');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/layouts-dagre.spec.ts b/packages/g6/tests/bak/layouts-dagre.spec.ts
deleted file mode 100644
index 5918aaff0e4..00000000000
--- a/packages/g6/tests/bak/layouts-dagre.spec.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { resetEntityCounter } from '@antv/g';
-import dagre from '../demo/layouts/dagre';
-import { createContext } from './utils';
-import './utils/useSnapshotMatchers';
-
-describe('Dagre layout', () => {
- beforeEach(() => {
- /**
- * SVG Snapshot testing will generate a unique id for each element.
- * Reset to 0 to keep snapshot consistent.
- */
- resetEntityCounter();
- });
-
- it('should be rendered correctly with Canvas2D', (done) => {
- const dir = `${__dirname}/snapshots/canvas`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = dagre({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-dagre');
- graph.destroy();
- done();
- });
- });
-
- // TODO: timeout on github ci
- it.skip('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = dagre({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-dagre');
- graph.destroy();
- done();
- });
- });
-
- it.skip('should be rendered correctly with WebGL', (done) => {
- const dir = `${__dirname}/snapshots/webgl`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('webgl', 500, 500);
-
- const graph = dagre({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchWebGLSnapshot(dir, 'layouts-dagre');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/layouts-force.spec.ts b/packages/g6/tests/bak/layouts-force.spec.ts
deleted file mode 100644
index 0c8cb904b27..00000000000
--- a/packages/g6/tests/bak/layouts-force.spec.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { resetEntityCounter } from '@antv/g';
-import force from '../demo/layouts/force';
-import { createContext } from './utils';
-import './utils/useSnapshotMatchers';
-
-describe.skip('Force layout', () => {
- beforeEach(() => {
- /**
- * SVG Snapshot testing will generate a unique id for each element.
- * Reset to 0 to keep snapshot consistent.
- */
- resetEntityCounter();
- });
-
- it('should be rendered correctly with Canvas2D', (done) => {
- const dir = `${__dirname}/snapshots/canvas`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = force({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-force');
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = force({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-force');
- graph.destroy();
- done();
- });
- });
-
- it.skip('should be rendered correctly with WebGL', (done) => {
- const dir = `${__dirname}/snapshots/webgl`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('webgl', 500, 500);
-
- const graph = force({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchWebGLSnapshot(dir, 'layouts-force');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/layouts-grid.spec.ts b/packages/g6/tests/bak/layouts-grid.spec.ts
deleted file mode 100644
index a7cfdd083a8..00000000000
--- a/packages/g6/tests/bak/layouts-grid.spec.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { resetEntityCounter } from '@antv/g';
-import grid from '../demo/layouts/grid';
-import { createContext } from './utils';
-import './utils/useSnapshotMatchers';
-
-describe('Grid layout', () => {
- beforeEach(() => {
- /**
- * SVG Snapshot testing will generate a unique id for each element.
- * Reset to 0 to keep snapshot consistent.
- */
- resetEntityCounter();
- });
-
- it('should be rendered correctly with Canvas2D', (done) => {
- const dir = `${__dirname}/snapshots/canvas`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = grid({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-grid');
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = grid({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-grid');
- graph.destroy();
- done();
- });
- });
-
- it.skip('should be rendered correctly with WebGL', (done) => {
- const dir = `${__dirname}/snapshots/webgl`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('webgl', 500, 500);
-
- const graph = grid({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchWebGLSnapshot(dir, 'layouts-grid');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/node-diamond.spec.ts b/packages/g6/tests/bak/node-diamond.spec.ts
deleted file mode 100644
index 4fbcc9ac4ca..00000000000
--- a/packages/g6/tests/bak/node-diamond.spec.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import diamond from '../demo/demo/diamond';
-import './utils/useSnapshotMatchers';
-import { createContext, sleep } from './utils';
-import { triggerEvent } from './utils/event';
-
-describe('node diamond', () => {
- it('should be rendered correctly with Canvas2D', (done) => {
- const dir = `${__dirname}/snapshots/canvas/items/node/diamond`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = diamond({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-diamond');
- //seleted state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-diamond-selected');
- //normal state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-diamond-restore');
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg/items/node/diamond`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = diamond({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await sleep(300);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-diamond');
- const $selected = document.querySelector(
- 'input#selected',
- ) as HTMLInputElement;
- $selected.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-diamond-seleted');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/node-ellipse.spec.ts b/packages/g6/tests/bak/node-ellipse.spec.ts
deleted file mode 100644
index df2c87aeaa2..00000000000
--- a/packages/g6/tests/bak/node-ellipse.spec.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import ellipse from '../demo/demo/ellipse';
-import './utils/useSnapshotMatchers';
-import { createContext, sleep } from './utils';
-import { triggerEvent } from './utils/event';
-
-describe('node ellipse', () => {
- it('should be rendered correctly with Canvas2D', (done) => {
- const dir = `${__dirname}/snapshots/canvas/items/node/ellipse`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = ellipse({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-ellipse');
- //seleted state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-ellipse-selected');
- //normal state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-ellipse');
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg/items/node/ellipse`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = ellipse({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await sleep(300);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-ellipse');
- const $selected = document.querySelector(
- 'input#selected',
- ) as HTMLInputElement;
- $selected.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-ellipse-seleted');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/node-hexagon.spec.ts b/packages/g6/tests/bak/node-hexagon.spec.ts
deleted file mode 100644
index fa42207bb19..00000000000
--- a/packages/g6/tests/bak/node-hexagon.spec.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import hexagon from '../demo/demo/hexagon';
-import './utils/useSnapshotMatchers';
-import { createContext, sleep } from './utils';
-import { triggerEvent } from './utils/event';
-
-describe('node hexagon', () => {
- it('should be rendered correctly with Canvas2D', (done) => {
- const dir = `${__dirname}/snapshots/canvas/items/node/hexagon`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = hexagon({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-hexagon');
- //seleted state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-hexagon-selected');
- //normal state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-hexagon');
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg/items/node/hexagon`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = hexagon({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await sleep(300);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-hexagon');
- const $selected = document.querySelector(
- 'input#selected',
- ) as HTMLInputElement;
- $selected.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-hexagon-seleted');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/node-modelRect.spec.ts b/packages/g6/tests/bak/node-modelRect.spec.ts
deleted file mode 100644
index e08ac2e97d8..00000000000
--- a/packages/g6/tests/bak/node-modelRect.spec.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import modelRect from '../demo/demo/modelRect';
-import './utils/useSnapshotMatchers';
-import { createContext, sleep } from './utils';
-import { triggerEvent } from './utils/event';
-
-describe('node modelRect', () => {
- it('should be rendered correctly with Canvas2D', (done) => {
- const dir = `${__dirname}/snapshots/canvas/items/node/modelRect`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = modelRect({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await sleep(300);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-modelRect');
- //seleted state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-modelRect-selected');
- //normal state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-modelRect-restore');
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg/items/node/modelRect`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = modelRect({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await sleep(300);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-modelRect');
- const $selected = document.querySelector(
- 'input#selected',
- ) as HTMLInputElement;
- $selected.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-modelRect-seleted');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/node-star.spec.ts b/packages/g6/tests/bak/node-star.spec.ts
deleted file mode 100644
index 628651193ab..00000000000
--- a/packages/g6/tests/bak/node-star.spec.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import star from '../demo/demo/star';
-import './utils/useSnapshotMatchers';
-import { createContext, sleep } from './utils';
-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,
- labelCanvas,
- transientLabelCanvas,
- canvas,
- transientCanvas,
- container,
- } = createContext('canvas', 500, 500);
-
- const graph = star({
- container,
- backgroundCanvas,
- canvas,
- labelCanvas,
- transientLabelCanvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-star');
- //seleted state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-star-selected');
- //normal state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-star');
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg/items/node/star`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = star({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await sleep(300);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-star');
- const $selected = document.querySelector(
- 'input#selected',
- ) as HTMLInputElement;
- $selected.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-star-seleted');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/bak/node-triangle.spec.ts b/packages/g6/tests/bak/node-triangle.spec.ts
deleted file mode 100644
index 43c4bee187b..00000000000
--- a/packages/g6/tests/bak/node-triangle.spec.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import triangle from '../demo/demo/triangle';
-import './utils/useSnapshotMatchers';
-import { createContext, sleep } from './utils';
-import { triggerEvent } from './utils/event';
-
-describe('node triangle', () => {
- it('should be rendered correctly with Canvas2D', (done) => {
- const dir = `${__dirname}/snapshots/canvas/items/node/triangle`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('canvas', 500, 500);
-
- const graph = triangle({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-triangle');
- //seleted state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-triangle-selected');
- //normal state
- triggerEvent(graph, 'mousedown', 100, 100);
- triggerEvent(graph, 'mouseup', 100, 100);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-triangle');
- graph.destroy();
- done();
- });
- });
-
- it('should be rendered correctly with SVG', (done) => {
- const dir = `${__dirname}/snapshots/svg/items/node/triangle`;
- const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('svg', 500, 500);
-
- const graph = triangle({
- container,
- backgroundCanvas,
- canvas,
- transientCanvas,
- width: 500,
- height: 500,
- });
-
- graph.on('afterlayout', async () => {
- await sleep(300);
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-triangle');
- const $selected = document.querySelector(
- 'input#selected',
- ) as HTMLInputElement;
- $selected.click();
- await expect(canvas).toMatchSVGSnapshot(dir, 'node-triangle-seleted');
- graph.destroy();
- done();
- });
- });
-});
diff --git a/packages/g6/tests/demo/layouts/force.ts b/packages/g6/tests/demo/layouts/force.ts
index 8249e97cad1..8ba40355558 100644
--- a/packages/g6/tests/demo/layouts/force.ts
+++ b/packages/g6/tests/demo/layouts/force.ts
@@ -587,4 +587,5 @@ export default (context: TestCaseContext) => {
},
});
}
+ return graph;
};
diff --git a/packages/g6/tests/integration/items-edge-line.spec.ts b/packages/g6/tests/integration/items-edge-line.spec.ts
index d5d461a2eb0..158a68823ee 100644
--- a/packages/g6/tests/integration/items-edge-line.spec.ts
+++ b/packages/g6/tests/integration/items-edge-line.spec.ts
@@ -5,7 +5,7 @@ import './utils/useSnapshotMatchers';
const dir = `${__dirname}/snapshots/items/edge/line`;
describe('Items edge line', () => {
- it('should be rendered correctly with Canvas2D', (done) => {
+ it('should be rendered correctly', (done) => {
const {
backgroundCanvas,
canvas,
diff --git a/packages/g6/tests/integration/items-edge-loop.spec.ts b/packages/g6/tests/integration/items-edge-loop.spec.ts
new file mode 100644
index 00000000000..64f3e3fb984
--- /dev/null
+++ b/packages/g6/tests/integration/items-edge-loop.spec.ts
@@ -0,0 +1,96 @@
+import loopEdge from '../demo/item/edge/loop-edge';
+import { createContext } from './utils';
+import './utils/useSnapshotMatchers';
+
+const dir = `${__dirname}/snapshots/items/edge/loop`;
+
+describe('Items edge line', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = loopEdge({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop');
+
+ /**
+ * Click the checkbox to switch clockwise.
+ */
+ const $switchClockwise = document.querySelectorAll(
+ 'input',
+ )[0] as HTMLInputElement;
+ $switchClockwise.click();
+ await expect(canvas).toMatchSVGSnapshot(
+ dir,
+ 'items-edge-loop-clockwise',
+ );
+ $switchClockwise.click();
+
+ /**
+ * Click the checkbox to set custom distance.
+ */
+ const $dist = document.querySelectorAll('input')[1] as HTMLInputElement;
+ $dist.click();
+ await expect(canvas).toMatchSVGSnapshot(
+ dir,
+ 'items-edge-loop-distance',
+ );
+ $dist.click();
+
+ /**
+ * Click the button to change loop position.
+ */
+ const $loopPositionBtn = document.querySelectorAll(
+ 'button',
+ )[0] as HTMLButtonElement;
+ $loopPositionBtn.click();
+ await expect(canvas).toMatchSVGSnapshot(
+ dir,
+ 'items-edge-loop-top-right',
+ );
+ $loopPositionBtn.click();
+ await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-right');
+ $loopPositionBtn.click();
+ await expect(canvas).toMatchSVGSnapshot(
+ dir,
+ 'items-edge-loop-bottom-right',
+ );
+ $loopPositionBtn.click();
+ await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-bottom');
+ $loopPositionBtn.click();
+ await expect(canvas).toMatchSVGSnapshot(
+ dir,
+ 'items-edge-loop-bottom-left',
+ );
+ $loopPositionBtn.click();
+ await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-loop-left');
+ $loopPositionBtn.click();
+ await expect(canvas).toMatchSVGSnapshot(
+ dir,
+ 'items-edge-loop-top-left',
+ );
+ $loopPositionBtn.click();
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/items-edge-polyline.spec.ts b/packages/g6/tests/integration/items-edge-polyline.spec.ts
new file mode 100644
index 00000000000..60b513b4df2
--- /dev/null
+++ b/packages/g6/tests/integration/items-edge-polyline.spec.ts
@@ -0,0 +1,122 @@
+import polylineEdge from '../demo/item/edge/polyline-edge';
+import './utils/useSnapshotMatchers';
+import { createContext } from './utils';
+
+const dir = `${__dirname}/snapshots/items/edge/polyline`;
+
+describe('Items edge polyline', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = polylineEdge({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'items-edge-polyline');
+
+ /**
+ * Click the checkbox to show label.
+ */
+ const $showLabel = document.querySelectorAll(
+ 'input',
+ )[0] as HTMLInputElement;
+ $showLabel.click();
+ await expect(canvas).toMatchSVGSnapshot(
+ dir,
+ 'items-edge-polyline-show-label',
+ );
+ $showLabel.click();
+
+ /**
+ * Click the checkbox to display selected style.
+ */
+ const $selected = document.querySelectorAll(
+ 'input',
+ )[2] as HTMLInputElement;
+ $selected.click();
+ await expect(canvas).toMatchSVGSnapshot(
+ dir,
+ 'items-edge-polyline-selected-style',
+ );
+ $selected.click();
+
+ /**
+ * Click the checkbox to highlight.
+ */
+ const $highlight = document.querySelectorAll(
+ 'input',
+ )[3] as HTMLInputElement;
+ $highlight.click();
+ await expect(canvas).toMatchSVGSnapshot(
+ dir,
+ 'items-edge-polyline-highlight-style',
+ );
+ $highlight.click();
+
+ /**
+ * Click the checkbox to add border radius.
+ */
+ const $radius = document.querySelectorAll(
+ 'input',
+ )[4] as HTMLInputElement;
+ $radius.click();
+ await expect(canvas).toMatchSVGSnapshot(
+ dir,
+ 'items-edge-polyline-radius',
+ );
+ $radius.click();
+
+ /**
+ * Click the checkbox to enable automatic obstacle avoidances.
+ */
+ const $obstacle = document.querySelectorAll(
+ 'input',
+ )[5] as HTMLInputElement;
+ const $enableObstacleAvoidance = document.querySelectorAll(
+ 'input',
+ )[6] as HTMLInputElement;
+
+ /**
+ * Click the checkbox to prevent obstacle to overlap edges.
+ */
+ // const $preventObstacleOverlapEdges = document.querySelectorAll(
+ // 'input',
+ // )[7] as HTMLInputElement;
+ // const $moveObstacle = document.querySelectorAll(
+ // 'input',
+ // )[8] as HTMLInputElement;
+ // $obstacle.click();
+ // $enableObstacleAvoidance.click();
+ // $preventObstacleOverlapEdges.click();
+ // $moveObstacle.click();
+ // await expect(canvas).toMatchSVGSnapshot(
+ // dir,
+ // 'items-edge-polyline-prevent-overlap-edges',
+ // );
+ // $obstacle.click();
+ // $enableObstacleAvoidance.click();
+ // $preventObstacleOverlapEdges.click();
+ // $moveObstacle.click();
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/layouts-circular.spec.ts b/packages/g6/tests/integration/layouts-circular.spec.ts
new file mode 100644
index 00000000000..de0d29e690d
--- /dev/null
+++ b/packages/g6/tests/integration/layouts-circular.spec.ts
@@ -0,0 +1,38 @@
+import circular from '../demo/layouts/circular';
+import { createContext } from './utils';
+import './utils/useSnapshotMatchers';
+
+const dir = `${__dirname}/snapshots/layouts`;
+
+describe('Circular layout', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = circular({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'circular');
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/layouts-d3force.spec.ts b/packages/g6/tests/integration/layouts-d3force.spec.ts
new file mode 100644
index 00000000000..6a3c357674d
--- /dev/null
+++ b/packages/g6/tests/integration/layouts-d3force.spec.ts
@@ -0,0 +1,46 @@
+import d3force from '../demo/layouts/d3force';
+import { createContext } from './utils';
+import './utils/useSnapshotMatchers';
+
+const dir = `${__dirname}/snapshots/layouts`;
+
+describe('D3Force layout', () => {
+ /**
+ * D3 force has some random result, which is hard to test with screenshots.
+ */
+ it.skip('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = d3force({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'd3force');
+ } finally {
+ // const layoutAnimation = graph.getLayoutCurrentAnimation()!;
+ // layoutAnimation.
+ // layoutAnimation.currentTime = 0;
+ // await expect(canvas).toMatchSVGSnapshot(dir, 'layouts-d3force-0');
+
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/layouts-dagre.spec.ts b/packages/g6/tests/integration/layouts-dagre.spec.ts
new file mode 100644
index 00000000000..7bba46b1d85
--- /dev/null
+++ b/packages/g6/tests/integration/layouts-dagre.spec.ts
@@ -0,0 +1,38 @@
+import dagre from '../demo/layouts/dagre';
+import { createContext } from './utils';
+import './utils/useSnapshotMatchers';
+
+const dir = `${__dirname}/snapshots/layouts`;
+
+describe('Dagre layout', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = dagre({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'dagre');
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/layouts-force.spec.ts b/packages/g6/tests/integration/layouts-force.spec.ts
new file mode 100644
index 00000000000..e800b944f9d
--- /dev/null
+++ b/packages/g6/tests/integration/layouts-force.spec.ts
@@ -0,0 +1,38 @@
+import force from '../demo/layouts/force';
+import { createContext } from './utils';
+import './utils/useSnapshotMatchers';
+
+const dir = `${__dirname}/snapshots/layouts`;
+
+describe.skip('Force layout', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = force({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'force');
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/bak/layouts-force3d.spec.ts b/packages/g6/tests/integration/layouts-force3d.spec.ts
similarity index 59%
rename from packages/g6/tests/bak/layouts-force3d.spec.ts
rename to packages/g6/tests/integration/layouts-force3d.spec.ts
index b0b6fe526fa..663cf340a85 100644
--- a/packages/g6/tests/bak/layouts-force3d.spec.ts
+++ b/packages/g6/tests/integration/layouts-force3d.spec.ts
@@ -1,21 +1,13 @@
-import { resetEntityCounter } from '@antv/g';
import force3D from '../demo/layouts/force-3d';
import './utils/useSnapshotMatchers';
import { createContext } from './utils';
-describe('Force3D layout', () => {
- beforeEach(() => {
- /**
- * SVG Snapshot testing will generate a unique id for each element.
- * Reset to 0 to keep snapshot consistent.
- */
- resetEntityCounter();
- });
+const dir = `${__dirname}/snapshots/layouts`;
+describe('Force3D layout', () => {
it.skip('should be rendered correctly with WebGL', (done) => {
- const dir = `${__dirname}/snapshots/webgl`;
const { backgroundCanvas, canvas, transientCanvas, container } =
- createContext('webgl', 500, 500);
+ createContext(500, 500);
const graph = force3D({
container,
@@ -28,7 +20,7 @@ describe('Force3D layout', () => {
});
graph.on('afterlayout', async () => {
- await expect(canvas).toMatchWebGLSnapshot(dir, 'layouts-force3d');
+ await expect(canvas).toMatchSVGSnapshot(dir, 'force3d');
graph.destroy();
done();
});
diff --git a/packages/g6/tests/integration/layouts-grid.spec.ts b/packages/g6/tests/integration/layouts-grid.spec.ts
new file mode 100644
index 00000000000..0f91fcc56c6
--- /dev/null
+++ b/packages/g6/tests/integration/layouts-grid.spec.ts
@@ -0,0 +1,38 @@
+import grid from '../demo/layouts/grid';
+import { createContext } from './utils';
+import './utils/useSnapshotMatchers';
+
+const dir = `${__dirname}/snapshots/layouts`;
+
+describe('Grid layout', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = grid({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'grid');
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/node-diamond.spec.ts b/packages/g6/tests/integration/node-diamond.spec.ts
new file mode 100644
index 00000000000..f5c257967c3
--- /dev/null
+++ b/packages/g6/tests/integration/node-diamond.spec.ts
@@ -0,0 +1,47 @@
+import diamond from '../demo/demo/diamond';
+import './utils/useSnapshotMatchers';
+import { createContext } from './utils';
+import { triggerEvent } from './utils/event';
+
+const dir = `${__dirname}/snapshots/items/node/diamond`;
+
+describe('node diamond', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = diamond({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-diamond');
+ //seleted state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-diamond-selected');
+ //normal state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-diamond-restore');
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/node-ellipse.spec.ts b/packages/g6/tests/integration/node-ellipse.spec.ts
new file mode 100644
index 00000000000..b606c29c6ee
--- /dev/null
+++ b/packages/g6/tests/integration/node-ellipse.spec.ts
@@ -0,0 +1,47 @@
+import ellipse from '../demo/demo/ellipse';
+import './utils/useSnapshotMatchers';
+import { createContext } from './utils';
+import { triggerEvent } from './utils/event';
+
+const dir = `${__dirname}/snapshots/items/node/ellipse`;
+
+describe('node ellipse', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = ellipse({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-ellipse');
+ //seleted state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-ellipse-selected');
+ //normal state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-ellipse');
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/node-hexagon.spec.ts b/packages/g6/tests/integration/node-hexagon.spec.ts
new file mode 100644
index 00000000000..d600360e00a
--- /dev/null
+++ b/packages/g6/tests/integration/node-hexagon.spec.ts
@@ -0,0 +1,47 @@
+import hexagon from '../demo/demo/hexagon';
+import './utils/useSnapshotMatchers';
+import { createContext } from './utils';
+import { triggerEvent } from './utils/event';
+
+const dir = `${__dirname}/snapshots/items/node/hexagon`;
+
+describe('node hexagon', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = hexagon({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-hexagon');
+ //seleted state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-hexagon-selected');
+ //normal state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-hexagon');
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/node-modelRect.spec.ts b/packages/g6/tests/integration/node-modelRect.spec.ts
new file mode 100644
index 00000000000..38695a2f928
--- /dev/null
+++ b/packages/g6/tests/integration/node-modelRect.spec.ts
@@ -0,0 +1,47 @@
+import modelRect from '../demo/demo/modelRect';
+import './utils/useSnapshotMatchers';
+import { createContext } from './utils';
+import { triggerEvent } from './utils/event';
+
+const dir = `${__dirname}/snapshots/items/node/modelRect`;
+
+describe('node modelRect', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = modelRect({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-modelRect');
+ //seleted state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-modelRect-selected');
+ //normal state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-modelRect-restore');
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/node-star.spec.ts b/packages/g6/tests/integration/node-star.spec.ts
new file mode 100644
index 00000000000..1b5bed8290c
--- /dev/null
+++ b/packages/g6/tests/integration/node-star.spec.ts
@@ -0,0 +1,47 @@
+import star from '../demo/demo/star';
+import './utils/useSnapshotMatchers';
+import { createContext } from './utils';
+import { triggerEvent } from './utils/event';
+
+const dir = `${__dirname}/snapshots/items/node/star`;
+
+describe('node star', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = star({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-star');
+ //seleted state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-star-selected');
+ //normal state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-star');
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/node-triangle.spec.ts b/packages/g6/tests/integration/node-triangle.spec.ts
new file mode 100644
index 00000000000..335765dc092
--- /dev/null
+++ b/packages/g6/tests/integration/node-triangle.spec.ts
@@ -0,0 +1,47 @@
+import triangle from '../demo/demo/triangle';
+import './utils/useSnapshotMatchers';
+import { createContext } from './utils';
+import { triggerEvent } from './utils/event';
+
+const dir = `${__dirname}/snapshots/items/node/triangle`;
+
+describe('node triangle', () => {
+ it('should be rendered correctly', (done) => {
+ const {
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ } = createContext(500, 500);
+
+ const graph = triangle({
+ backgroundCanvas,
+ canvas,
+ container,
+ labelCanvas,
+ transientCanvas,
+ transientLabelCanvas,
+ width: 500,
+ height: 500,
+ });
+
+ graph.on('afterlayout', async () => {
+ try {
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-triangle');
+ //seleted state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-triangle-selected');
+ //normal state
+ triggerEvent(graph, 'mousedown', 100, 100);
+ triggerEvent(graph, 'mouseup', 100, 100);
+ await expect(canvas).toMatchSVGSnapshot(dir, 'node-triangle');
+ } finally {
+ graph.destroy();
+ done();
+ }
+ });
+ });
+});
diff --git a/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-bottom-left.svg b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-bottom-left.svg
new file mode 100644
index 00000000000..12a8e328fcd
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-bottom-left.svg
@@ -0,0 +1,174 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-bottom-right.svg b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-bottom-right.svg
new file mode 100644
index 00000000000..e1f47801bbf
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-bottom-right.svg
@@ -0,0 +1,174 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-bottom.svg b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-bottom.svg
new file mode 100644
index 00000000000..d6967275ef5
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-bottom.svg
@@ -0,0 +1,174 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-clockwise.svg b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-clockwise.svg
new file mode 100644
index 00000000000..508231ddec1
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-clockwise.svg
@@ -0,0 +1,174 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-distance.svg b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-distance.svg
new file mode 100644
index 00000000000..93e715dbff1
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-distance.svg
@@ -0,0 +1,174 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-left.svg b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-left.svg
new file mode 100644
index 00000000000..0c1461058b5
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-left.svg
@@ -0,0 +1,174 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-right.svg b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-right.svg
new file mode 100644
index 00000000000..9abc7de5524
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-right.svg
@@ -0,0 +1,174 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-top-left.svg b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-top-left.svg
new file mode 100644
index 00000000000..cb107da312e
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-top-left.svg
@@ -0,0 +1,174 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-top-right.svg b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-top-right.svg
new file mode 100644
index 00000000000..4c01dd4f43d
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop-top-right.svg
@@ -0,0 +1,174 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop.svg b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop.svg
new file mode 100644
index 00000000000..5d1f8d6c154
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/loop/items-edge-loop.svg
@@ -0,0 +1,174 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-highlight-style.svg b/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-highlight-style.svg
new file mode 100644
index 00000000000..5d80763396d
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-highlight-style.svg
@@ -0,0 +1,119 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-radius.svg b/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-radius.svg
new file mode 100644
index 00000000000..0fb10c570fa
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-radius.svg
@@ -0,0 +1,119 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-selected-style.svg b/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-selected-style.svg
new file mode 100644
index 00000000000..282ab9bf20a
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-selected-style.svg
@@ -0,0 +1,181 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-show-label.svg b/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-show-label.svg
new file mode 100644
index 00000000000..212ff6af9ae
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline-show-label.svg
@@ -0,0 +1,119 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline.svg b/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline.svg
new file mode 100644
index 00000000000..10a29137306
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/edge/polyline/items-edge-polyline.svg
@@ -0,0 +1,119 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/diamond/node-diamond-restore.svg b/packages/g6/tests/integration/snapshots/items/node/diamond/node-diamond-restore.svg
new file mode 100644
index 00000000000..8cf01b962e2
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/diamond/node-diamond-restore.svg
@@ -0,0 +1,179 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/diamond/node-diamond-selected.svg b/packages/g6/tests/integration/snapshots/items/node/diamond/node-diamond-selected.svg
new file mode 100644
index 00000000000..8cf01b962e2
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/diamond/node-diamond-selected.svg
@@ -0,0 +1,179 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/diamond/node-diamond.svg b/packages/g6/tests/integration/snapshots/items/node/diamond/node-diamond.svg
new file mode 100644
index 00000000000..8cf01b962e2
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/diamond/node-diamond.svg
@@ -0,0 +1,179 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/ellipse/node-ellipse-selected.svg b/packages/g6/tests/integration/snapshots/items/node/ellipse/node-ellipse-selected.svg
new file mode 100644
index 00000000000..ace291ccd0f
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/ellipse/node-ellipse-selected.svg
@@ -0,0 +1,177 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/ellipse/node-ellipse.svg b/packages/g6/tests/integration/snapshots/items/node/ellipse/node-ellipse.svg
new file mode 100644
index 00000000000..ace291ccd0f
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/ellipse/node-ellipse.svg
@@ -0,0 +1,177 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/hexagon/node-hexagon-selected.svg b/packages/g6/tests/integration/snapshots/items/node/hexagon/node-hexagon-selected.svg
new file mode 100644
index 00000000000..214c9130483
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/hexagon/node-hexagon-selected.svg
@@ -0,0 +1,171 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/hexagon/node-hexagon.svg b/packages/g6/tests/integration/snapshots/items/node/hexagon/node-hexagon.svg
new file mode 100644
index 00000000000..214c9130483
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/hexagon/node-hexagon.svg
@@ -0,0 +1,171 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/modelRect/node-modelRect-restore.svg b/packages/g6/tests/integration/snapshots/items/node/modelRect/node-modelRect-restore.svg
new file mode 100644
index 00000000000..787a9abe6a0
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/modelRect/node-modelRect-restore.svg
@@ -0,0 +1,184 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/modelRect/node-modelRect-selected.svg b/packages/g6/tests/integration/snapshots/items/node/modelRect/node-modelRect-selected.svg
new file mode 100644
index 00000000000..787a9abe6a0
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/modelRect/node-modelRect-selected.svg
@@ -0,0 +1,184 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/modelRect/node-modelRect.svg b/packages/g6/tests/integration/snapshots/items/node/modelRect/node-modelRect.svg
new file mode 100644
index 00000000000..787a9abe6a0
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/modelRect/node-modelRect.svg
@@ -0,0 +1,184 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/star/node-star-selected.svg b/packages/g6/tests/integration/snapshots/items/node/star/node-star-selected.svg
new file mode 100644
index 00000000000..581e255efc9
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/star/node-star-selected.svg
@@ -0,0 +1,183 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/star/node-star.svg b/packages/g6/tests/integration/snapshots/items/node/star/node-star.svg
new file mode 100644
index 00000000000..581e255efc9
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/star/node-star.svg
@@ -0,0 +1,183 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/triangle/node-triangle-selected.svg b/packages/g6/tests/integration/snapshots/items/node/triangle/node-triangle-selected.svg
new file mode 100644
index 00000000000..9bd4f8ec0fb
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/triangle/node-triangle-selected.svg
@@ -0,0 +1,179 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/items/node/triangle/node-triangle.svg b/packages/g6/tests/integration/snapshots/items/node/triangle/node-triangle.svg
new file mode 100644
index 00000000000..9bd4f8ec0fb
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/items/node/triangle/node-triangle.svg
@@ -0,0 +1,179 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/layouts/circular.svg b/packages/g6/tests/integration/snapshots/layouts/circular.svg
new file mode 100644
index 00000000000..a98eb99c4df
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/layouts/circular.svg
@@ -0,0 +1,2083 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/layouts/dagre.svg b/packages/g6/tests/integration/snapshots/layouts/dagre.svg
new file mode 100644
index 00000000000..3d53c0a3caa
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/layouts/dagre.svg
@@ -0,0 +1,584 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/snapshots/layouts/grid.svg b/packages/g6/tests/integration/snapshots/layouts/grid.svg
new file mode 100644
index 00000000000..f56a5567015
--- /dev/null
+++ b/packages/g6/tests/integration/snapshots/layouts/grid.svg
@@ -0,0 +1,2027 @@
+
\ No newline at end of file
diff --git a/packages/g6/tests/integration/utils/createNodeGCanvas.ts b/packages/g6/tests/integration/utils/createNodeGCanvas.ts
index 07456f0ec3f..e6443c6ad39 100644
--- a/packages/g6/tests/integration/utils/createNodeGCanvas.ts
+++ b/packages/g6/tests/integration/utils/createNodeGCanvas.ts
@@ -16,11 +16,6 @@ export function createNodeGCanvas(
const context = new OffscreenCanvasContext(offscreenNodeCanvas);
const renderer = new SVGRenderer();
- // Remove html plugin to ssr.
- const htmlRendererPlugin = renderer.getPlugin('html-renderer');
- renderer.unregisterPlugin(htmlRendererPlugin);
- const domInteractionPlugin = renderer.getPlugin('dom-interaction');
- renderer.unregisterPlugin(domInteractionPlugin);
renderer.registerPlugin(
new DragAndDropPlugin({ dragstartDistanceThreshold: 10 }),
);
diff --git a/packages/g6/tests/integration/utils/event.ts b/packages/g6/tests/integration/utils/event.ts
index 536cc3e185f..b88ea33f2c1 100644
--- a/packages/g6/tests/integration/utils/event.ts
+++ b/packages/g6/tests/integration/utils/event.ts
@@ -1,5 +1,4 @@
-import { JSDOM } from 'jsdom';
-import Graph from '../../../src/runtime/graph';
+import { Graph } from '../../../src/runtime/graph';
export function triggerEvent(
graph: Graph,
@@ -7,12 +6,11 @@ export function triggerEvent(
clientX: number,
clientY: number,
) {
- const dom = new JSDOM();
// TODO: TouchEvent
// const isMouseEvent = type.startsWith('mouse');
// const isTouchEvent = type.startsWith('touch');
- const event = new dom.window.MouseEvent(type, {
+ const event = new document.defaultView!.MouseEvent(type, {
clientX,
clientY,
});
diff --git a/packages/g6/tests/integration/utils/index.ts b/packages/g6/tests/integration/utils/index.ts
index 99134b5c651..19bcd973339 100644
--- a/packages/g6/tests/integration/utils/index.ts
+++ b/packages/g6/tests/integration/utils/index.ts
@@ -1,3 +1,3 @@
export * from './canvas';
-// export * from './event';
+export * from './event';
export * from './sleep';