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 @@ + + + + + + + + + + + + + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + \ 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 @@ + + + + + + + + + + + + + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + \ 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 @@ + + + + + + + + + + + + + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + \ 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 @@ + + + + + + + + + + + + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + \ 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 @@ + + + + + + + + + + + + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + \ 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 @@ + + + + + + + + + + + + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + \ 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 @@ + + + + + + + + + + + + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + \ 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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Lorem ipsum dolor... + + + + + + + + + + + + + + + + + + + + + + + + + 1 + + + + + + + \ 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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Lorem ipsum dolor... + + + + + + + + + + + + + + + + + + + + + + + + + 1 + + + + + + + \ 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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + Lorem ipsum dolor... + + + + + + + + + + + + + + + + + + + + + + + + + 1 + + + + + + + \ 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 @@ + + + + + + + + + + + + + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + \ 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 @@ + + + + + + + + + + + + + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + \ 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 @@ + + + + + + + + + + + + + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + \ 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 @@ + + + + + + + + + + + + + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + + + + label + + + + + + + + + + + 1 + + + + + + + \ 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';