test: add test case

This commit is contained in:
Aaron 2024-07-03 22:53:45 +08:00
parent 54092f08b3
commit 5339f21b0e
13 changed files with 317 additions and 2 deletions

View File

@ -0,0 +1,40 @@
import { createGraph } from '@@/utils';
describe('fit view', () => {
it('suite 1', async () => {
// https://github.com/antvis/G6/issues/5943
const graph = createGraph({
data: {
nodes: [
{ id: 'node-1', style: { x: 250, y: 150 } },
{ id: 'node-2', style: { x: 350, y: 150 } },
{ id: 'node-3', style: { x: 250, y: 300 } },
],
},
behaviors: ['zoom-canvas'],
});
await graph.draw();
await expect(graph).toMatchSnapshot(__filename);
// wheel
graph.emit('wheel', { deltaY: 5 });
graph.emit('wheel', { deltaY: 5 });
await expect(graph).toMatchSnapshot(__filename, 'after-wheel');
// fit center
await graph.fitCenter();
await graph.fitCenter();
await expect(graph).toMatchSnapshot(__filename, 'after-fit-center');
// fit view
await graph.fitView();
await expect(graph).toMatchSnapshot(__filename, 'after-fit-view');
// fit center again
await graph.fitCenter();
await expect(graph).toMatchSnapshot(__filename, 'after-fit-center-again');
});
});

View File

@ -0,0 +1,56 @@
import { CanvasEvent, CommonEvent, NodeEvent } from '@/src';
import { createGraph } from '@@/utils';
describe('focus element', () => {
it('focus after drag', async () => {
// https://github.com/antvis/G6/issues/5955
const graph = createGraph({
data: {
nodes: [
{ id: 'node-1', style: { x: 250, y: 150 } },
{ id: 'node-2', style: { x: 350, y: 150 } },
{ id: 'node-3', style: { x: 250, y: 300 } },
],
},
behaviors: ['zoom-canvas', 'drag-canvas'],
});
await graph.draw();
graph.emit(CanvasEvent.DRAG, { movement: { x: 100, y: 100 }, targetType: 'canvas' });
await expect(graph).toMatchSnapshot(__filename, 'focus-before-drag');
await graph.focusElement('node-1');
await expect(graph).toMatchSnapshot(__filename, 'focus-after-drag');
});
it('hover after focus', async () => {
// https://github.com/antvis/G6/issues/5925
const graph = createGraph({
data: {
nodes: [
{ id: 'node-1', style: { x: 250, y: 150 } },
{ id: 'node-2', style: { x: 350, y: 150 } },
{ id: 'node-3', style: { x: 250, y: 300 } },
],
},
behaviors: ['zoom-canvas', 'hover-activate'],
});
await graph.draw();
await expect(graph).toMatchSnapshot(__filename, 'hover-before-focus');
await graph.focusElement('node-1');
graph.emit(NodeEvent.POINTER_OVER, {
target: { id: 'node-2' },
targetType: 'node',
type: CommonEvent.POINTER_OVER,
});
await expect(graph).toMatchSnapshot(__filename, 'hover-after-focus');
});
});

View File

@ -1,6 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1"> <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/> <defs/>
<g transform="matrix(0.819672,0,0,0.819672,-6.147559,-25.819664)"> <g transform="matrix(0.819672,0,0,0.819672,-6.147559,-25.819689)">
<g fill="none"> <g fill="none">
<g fill="none"> <g fill="none">
<g fill="none" x="540" y="480" transform="matrix(1,0,0,1,540,480)"> <g fill="none" x="540" y="480" transform="matrix(1,0,0,1,540,480)">

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

View File

@ -1,6 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1"> <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/> <defs/>
<g transform="matrix(0.819672,0,0,0.819672,-6.147559,-25.819664)"> <g transform="matrix(0.819672,0,0,0.819672,-6.147559,-25.819689)">
<g fill="none"> <g fill="none">
<g fill="none"> <g fill="none">
<g fill="none" x="540" y="480" transform="matrix(1,0,0,1,540,480)"> <g fill="none" x="540" y="480" transform="matrix(1,0,0,1,540,480)">

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

View File

@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g transform="matrix(2.747253,0,0,2.747253,-574.175781,-368.131866)">
<g fill="none">
<g fill="none">
<g fill="none" x="250" y="150" transform="matrix(1,0,0,1,250,150)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="350" y="150" transform="matrix(1,0,0,1,350,150)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="250" y="300" transform="matrix(1,0,0,1,250,300)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g transform="matrix(0.902500,0,0,0.902500,-20.750019,46.937508)">
<g fill="none">
<g fill="none">
<g fill="none" x="250" y="150" transform="matrix(1,0,0,1,250,150)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="350" y="150" transform="matrix(1,0,0,1,350,150)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="250" y="300" transform="matrix(1,0,0,1,250,300)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g transform="matrix(2.747253,0,0,2.747253,-574.175781,-368.131866)">
<g fill="none">
<g fill="none">
<g fill="none" x="250" y="150" transform="matrix(1,0,0,1,250,150)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="350" y="150" transform="matrix(1,0,0,1,350,150)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="250" y="300" transform="matrix(1,0,0,1,250,300)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g transform="matrix(0.902500,0,0,0.902500,24.375006,24.375006)">
<g fill="none">
<g fill="none">
<g fill="none" x="250" y="150" transform="matrix(1,0,0,1,250,150)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="350" y="150" transform="matrix(1,0,0,1,350,150)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="250" y="300" transform="matrix(1,0,0,1,250,300)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g >
<g fill="none">
<g fill="none">
<g fill="none" x="250" y="150" transform="matrix(1,0,0,1,250,150)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="350" y="150" transform="matrix(1,0,0,1,350,150)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="250" y="300" transform="matrix(1,0,0,1,250,300)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 971 B

View File

@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g transform="matrix(1,0,0,1,0,100)">
<g fill="none">
<g fill="none">
<g fill="none" x="250" y="150" transform="matrix(1,0,0,1,250,150)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="350" y="150" transform="matrix(1,0,0,1,350,150)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="250" y="300" transform="matrix(1,0,0,1,250,300)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1004 B

View File

@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g transform="matrix(1,0,0,1,100,100)">
<g fill="none">
<g fill="none">
<g fill="none" x="250" y="150" transform="matrix(1,0,0,1,250,150)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="350" y="150" transform="matrix(1,0,0,1,350,150)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="250" y="300" transform="matrix(1,0,0,1,250,300)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1006 B

View File

@ -0,0 +1,27 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g transform="matrix(1,0,0,1,-0.000015,100)">
<g fill="none">
<g fill="none">
<g fill="none" x="250" y="150" transform="matrix(1,0,0,1,250,150)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="350" y="150" transform="matrix(1,0,0,1,350,150)">
<g>
<circle fill="none" class="halo" stroke-width="12" stroke="rgba(23,131,255,1)" stroke-opacity="0.15" r="16" stroke-dasharray="0,0" pointer-events="none"/>
</g>
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="250" y="300" transform="matrix(1,0,0,1,250,300)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background: transparent; position: absolute; outline: none;" color-interpolation-filters="sRGB" tabindex="1">
<defs/>
<g >
<g fill="none">
<g fill="none">
<g fill="none" x="250" y="150" transform="matrix(1,0,0,1,250,150)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="350" y="150" transform="matrix(1,0,0,1,350,150)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
<g fill="none" x="250" y="300" transform="matrix(1,0,0,1,250,300)">
<g>
<circle fill="rgba(23,131,255,1)" class="key" stroke-width="0" stroke="rgba(0,0,0,1)" r="16"/>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 971 B