mirror of
https://gitee.com/antv/g6.git
synced 2024-11-30 10:48:24 +08:00
add test
This commit is contained in:
huangtong.ht
parent
4a8f4cdc05
commit
f0c3fef43d
@ -99,7 +99,7 @@
|
||||
"screenshot": "node ./bin/screenshot.js",
|
||||
"start": "npm run dev",
|
||||
"test": "torch --compile --renderer --recursive ./test/unit/plugins/",
|
||||
"test-live": "torch --compile --interactive --watch --recursive ./test/unit/plugins/",
|
||||
"test-live": "torch --compile --interactive --watch --recursive ./test/unit/",
|
||||
"watch": "webpack --config webpack-dev.config.js",
|
||||
"win-dev": "node ./bin/win-dev.js"
|
||||
},
|
||||
|
||||
@ -5,36 +5,40 @@
|
||||
const G6 = require('@antv/g6');
|
||||
const Util = G6.Util;
|
||||
|
||||
function panCanvas(graph, button = 'left') {
|
||||
function panCanvas(graph, button = 'left', panBlank = false) {
|
||||
let lastPoint;
|
||||
if (button === 'right') {
|
||||
graph.behaviourOn('contextmenu', ev => {
|
||||
ev.domEvent.preventDefault();
|
||||
});
|
||||
}
|
||||
// graph.behaviourOn('mousedown', ev => {
|
||||
// if (button === 'left' && ev.domEvent.button === 0 || button === 'right' && ev.domEvent.button === 2) {
|
||||
// lastPoint = {
|
||||
// x: ev.domX,
|
||||
// y: ev.domY
|
||||
// };
|
||||
// }
|
||||
// });
|
||||
graph.behaviourOn('mousedown', ev => {
|
||||
if (button === 'left' && ev.domEvent.button === 0 ||
|
||||
button === 'right' && ev.domEvent.button === 2) {
|
||||
if (panBlank) {
|
||||
if (!ev.shape) {
|
||||
lastPoint = {
|
||||
x: ev.domX,
|
||||
y: ev.domY
|
||||
};
|
||||
}
|
||||
} else {
|
||||
lastPoint = {
|
||||
x: ev.domX,
|
||||
y: ev.domY
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
graph.behaviourOn('canvas:mouseenter', () => {
|
||||
graph.css({
|
||||
cursor: '-webkit-grab'
|
||||
});
|
||||
});
|
||||
graph.behaviourOn('dragstart', ev => {
|
||||
graph.behaviourOn('dragstart', () => {
|
||||
graph.css({
|
||||
cursor: '-webkit-grabbing'
|
||||
});
|
||||
if (ev.domEvent.button === button) {
|
||||
lastPoint = {
|
||||
x: ev.domX,
|
||||
y: ev.domY
|
||||
};
|
||||
}
|
||||
});
|
||||
graph.behaviourOn('drag', ev => {
|
||||
if (lastPoint) {
|
||||
@ -64,6 +68,16 @@ G6.registerBehaviour('rightPanCanvas', graph => {
|
||||
panCanvas(graph, 'right');
|
||||
});
|
||||
|
||||
// 鼠标拖拽画布空白处平移画布交互
|
||||
G6.registerBehaviour('panBlank', graph => {
|
||||
panCanvas(graph, 'left', true);
|
||||
});
|
||||
|
||||
// 鼠标右键拖拽画布空白处平移画布交互
|
||||
G6.registerBehaviour('rightPanBlank', graph => {
|
||||
panCanvas(graph, 'right', true);
|
||||
});
|
||||
|
||||
// 鼠标拖拽平移节点交互
|
||||
G6.registerBehaviour('panNode', graph => {
|
||||
let node;
|
||||
|
||||
@ -390,24 +390,24 @@ function getPathWithBorderRadiusByPolyline(points, borderRadius) {
|
||||
// TODO
|
||||
const pathSegments = [];
|
||||
const startPoint = points[0];
|
||||
pathSegments.push(`M${startPoint.x} ${startPoint.y}`);
|
||||
pathSegments.push([ 'M', startPoint.x, startPoint.y ]);
|
||||
points.forEach((p, i) => {
|
||||
const p1 = points[i + 1];
|
||||
const p2 = points[i + 2];
|
||||
if (p1 && p2) {
|
||||
if (isBending(p, p1, p2)) {
|
||||
const [ ps, pt ] = getBorderRadiusPoints(p, p1, p2, borderRadius);
|
||||
pathSegments.push(`L${ps.x} ${ps.y}`);
|
||||
pathSegments.push(`Q${p1.x} ${p1.y} ${pt.x} ${pt.y}`);
|
||||
pathSegments.push(`L${pt.x} ${pt.y}`);
|
||||
pathSegments.push([ 'L', ps.x, ps.y ]);
|
||||
pathSegments.push([ 'Q', p1.x, p1.y, pt.x, pt.y ]);
|
||||
pathSegments.push([ 'L', pt.x, pt.y ]);
|
||||
} else {
|
||||
pathSegments.push(`L${p1.x} ${p1.y}`);
|
||||
pathSegments.push([ 'L', p1.x, p1.y ]);
|
||||
}
|
||||
} else if (p1) {
|
||||
pathSegments.push(`L${p1.x} ${p1.y}`);
|
||||
pathSegments.push([ 'L', p1.x, p1.y ]);
|
||||
}
|
||||
});
|
||||
return pathSegments.join('');
|
||||
return pathSegments;
|
||||
}
|
||||
|
||||
G6.registerEdge('polyline', {
|
||||
|
||||
@ -182,6 +182,15 @@ class Plugin {
|
||||
Util.isFunction(callback) && callback(legend);
|
||||
return legend;
|
||||
}
|
||||
_getLegendContainer() {
|
||||
const legendCfg = this.legendCfg;
|
||||
const { containerId } = legendCfg;
|
||||
const graph = this.graph;
|
||||
if (legendCfg.containerId) {
|
||||
return document.getElementById(containerId);
|
||||
}
|
||||
return graph.getGraphContainer();
|
||||
}
|
||||
_createLegend() {
|
||||
const padding = 10;
|
||||
const channel = this.channel;
|
||||
@ -190,13 +199,13 @@ class Plugin {
|
||||
const graphWidth = graph.getWidth();
|
||||
const graphHeight = graph.getHeight();
|
||||
const position = legendCfg.position ? legendCfg.position : 'br';
|
||||
const graphContainer = graph.getGraphContainer();
|
||||
const legendContainer = this._getLegendContainer();
|
||||
const marginTop = legendCfg.marginTop ? legendCfg.marginTop : 0;
|
||||
const marginLeft = legendCfg.marginLeft ? legendCfg.marginLeft : 0;
|
||||
const marginBottom = legendCfg.marginBottom ? legendCfg.marginBottom : 0;
|
||||
const marginRight = legendCfg.marginRight ? legendCfg.marginRight : 0;
|
||||
const legend = this._getLegend();
|
||||
const svg = d3.select(graphContainer)
|
||||
const svg = d3.select(legendContainer)
|
||||
.append('svg')
|
||||
.style('position', 'absolute');
|
||||
const legendCells = svg.call(legend).select('.legendCells');
|
||||
@ -225,6 +234,7 @@ class Plugin {
|
||||
.style('left', tl.x + 'px')
|
||||
.style('width', bbox.width + 'px')
|
||||
.style('height', bbox.height + 'px');
|
||||
this.legendCanvas = svg;
|
||||
}
|
||||
_mapping() {
|
||||
const graph = this.graph;
|
||||
@ -241,6 +251,9 @@ class Plugin {
|
||||
};
|
||||
graph[itemType](mapper);
|
||||
}
|
||||
destroy() {
|
||||
this.legendCanvas && this.legendCanvas.remove();
|
||||
}
|
||||
}
|
||||
|
||||
G6.Plugins['tool.d3.mapper'] = Plugin;
|
||||
|
||||
@ -161,7 +161,7 @@ class Edge extends Item {
|
||||
|
||||
if (source.linkable) {
|
||||
const point = (Util.isNumber(this.model.sourceAnchor) && source.id === model.source) ? this.model.sourceAnchor : points[1];
|
||||
const interPoint = source.getLinkPoints(point, this);
|
||||
const interPoint = source.getLinkPoints(point);
|
||||
points[0] = interPoint[0];
|
||||
}
|
||||
if (target.linkable) {
|
||||
|
||||
@ -10,25 +10,23 @@ Mixin.CFG = {
|
||||
* mode list key - value, key - mode name, value - behaviors
|
||||
* @type {object}
|
||||
*/
|
||||
modes: {},
|
||||
modes: {
|
||||
default: []
|
||||
},
|
||||
|
||||
/**
|
||||
* current mode name
|
||||
* @type {string}
|
||||
*/
|
||||
mode: 'default'
|
||||
mode: 'default',
|
||||
// event stash
|
||||
_eventStash: {}
|
||||
};
|
||||
|
||||
Mixin.INIT = '_initModes';
|
||||
Mixin.AUGMENT = {
|
||||
_initModes() {
|
||||
this._eventStash = {};
|
||||
let modes = this.get('modes');
|
||||
const mode = this.get('mode');
|
||||
if (Util.isEmpty(modes)) {
|
||||
modes = Util.cloneDeep(this.constructor.Modes);
|
||||
this.set('modes', modes);
|
||||
}
|
||||
this.changeMode(mode);
|
||||
},
|
||||
/**
|
||||
@ -81,6 +79,7 @@ Mixin.AUGMENT = {
|
||||
currentModes = currentModes.filter(item => {
|
||||
return removes.indexOf(item) === -1;
|
||||
});
|
||||
modes[mode] = currentModes;
|
||||
Handler.resetMode(currentModes, this);
|
||||
return this;
|
||||
},
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
const G6 = require('../../../src/index');
|
||||
const Simulate = require('event-simulate');
|
||||
const expect = require('chai').expect;
|
||||
const Util = G6.Util;
|
||||
require('../../../plugins/behaviour.analysis/');
|
||||
@ -24,13 +25,182 @@ describe('behaviour analysis test', () => {
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
width: 500,
|
||||
height: 500,
|
||||
modes: {
|
||||
default: [ 'panCanvas' ]
|
||||
}
|
||||
height: 500
|
||||
});
|
||||
const mouseEventWrapper = graph.getMouseEventWrapper();
|
||||
graph.read(data);
|
||||
it('panCanvas', () => {
|
||||
graph.addBehaviour([ 'panCanvas' ]);
|
||||
const clientPoint = graph.getClientPoint({
|
||||
x: 50,
|
||||
y: 50
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mouseenter', {
|
||||
clientX: clientPoint.x - 10,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousedown', {
|
||||
clientX: clientPoint.x,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: clientPoint.x + 10,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: clientPoint.x + 150,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mouseup', {
|
||||
clientX: clientPoint.x + 150,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mouseleave', {
|
||||
clientX: clientPoint.x - 10,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
expect(graph.getMatrix()[6]).eql(150);
|
||||
graph.removeBehaviour([ 'panCanvas' ]);
|
||||
graph.updateMatrix([ 1, 0, 0, 0, 1, 0, 0, 0, 1 ]);
|
||||
});
|
||||
it('rightPanCanvas', () => {
|
||||
graph.addBehaviour([ 'rightPanCanvas' ]);
|
||||
const clientPoint = graph.getClientPoint({
|
||||
x: 50,
|
||||
y: 50
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousedown', {
|
||||
clientX: clientPoint.x,
|
||||
clientY: clientPoint.y,
|
||||
button: 2
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: clientPoint.x + 10,
|
||||
clientY: clientPoint.y,
|
||||
button: 2
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: clientPoint.x + 150,
|
||||
clientY: clientPoint.y,
|
||||
button: 2
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mouseup', {
|
||||
clientX: clientPoint.x + 150,
|
||||
clientY: clientPoint.y,
|
||||
button: 2
|
||||
});
|
||||
expect(graph.getMatrix()[6]).eql(150);
|
||||
graph.removeBehaviour([ 'rightPanCanvas' ]);
|
||||
graph.updateMatrix([ 1, 0, 0, 0, 1, 0, 0, 0, 1 ]);
|
||||
});
|
||||
it('panBlank', () => {
|
||||
graph.addBehaviour([ 'panBlank' ]);
|
||||
let clientPoint = graph.getClientPoint({
|
||||
x: 100,
|
||||
y: 200
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousedown', {
|
||||
clientX: clientPoint.x,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: clientPoint.x + 10,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: clientPoint.x + 150,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mouseup', {
|
||||
clientX: clientPoint.x + 150,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
expect(graph.getMatrix()[6]).eql(0);
|
||||
clientPoint = graph.getClientPoint({
|
||||
x: 0,
|
||||
y: 0
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousedown', {
|
||||
clientX: clientPoint.x,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: clientPoint.x + 10,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: clientPoint.x + 150,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mouseup', {
|
||||
clientX: clientPoint.x + 150,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
expect(graph.getMatrix()[6]).eql(150);
|
||||
graph.removeBehaviour([ 'panBlank' ]);
|
||||
graph.updateMatrix([ 1, 0, 0, 0, 1, 0, 0, 0, 1 ]);
|
||||
});
|
||||
it('panNode', () => {
|
||||
graph.addBehaviour([ 'panNode' ]);
|
||||
const clientPoint = graph.getClientPoint({
|
||||
x: 100,
|
||||
y: 200
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousedown', {
|
||||
clientX: clientPoint.x,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: clientPoint.x + 5,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mousemove', {
|
||||
clientX: clientPoint.x + 150,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
Simulate.simulate(mouseEventWrapper, 'mouseup', {
|
||||
clientX: clientPoint.x + 150,
|
||||
clientY: clientPoint.y
|
||||
});
|
||||
expect(graph.find('node1').getModel().x).eql(245);
|
||||
graph.removeBehaviour([ 'panBlank' ]);
|
||||
});
|
||||
it('wheelZoom', done => {
|
||||
const times = 2;
|
||||
graph.addBehaviour([ 'wheelZoom' ]);
|
||||
for (let index = 0; index < times; index++) {
|
||||
setTimeout(() => {
|
||||
graph.emit('mousewheel', {
|
||||
domEvent: {
|
||||
preventDefault() {
|
||||
|
||||
},
|
||||
wheelDelta: 11
|
||||
},
|
||||
x: 50,
|
||||
y: 50
|
||||
});
|
||||
}, 30 * index);
|
||||
}
|
||||
for (let index = 0; index < times; index++) {
|
||||
setTimeout(() => {
|
||||
graph.emit('mousewheel', {
|
||||
domEvent: {
|
||||
preventDefault() {
|
||||
|
||||
},
|
||||
wheelDelta: 2
|
||||
},
|
||||
x: 50,
|
||||
y: 50
|
||||
});
|
||||
if (index === times - 1) {
|
||||
done();
|
||||
}
|
||||
}, 30 * (index + times));
|
||||
}
|
||||
});
|
||||
it('destroy', () => {
|
||||
graph.destroy();
|
||||
});
|
||||
});
|
||||
|
||||
129
test/unit/plugins/edge.polyline-spec.js
Normal file
129
test/unit/plugins/edge.polyline-spec.js
Normal file
@ -0,0 +1,129 @@
|
||||
const G6 = require('../../../src/index');
|
||||
const expect = require('chai').expect;
|
||||
const Util = G6.Util;
|
||||
require('../../../plugins/edge.polyline/');
|
||||
document.body.appendChild(Util.createDOM(`
|
||||
<div id='mountNode'></div>
|
||||
`));
|
||||
describe('edge polyline test', () => {
|
||||
it('polyline', () => {
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'node1',
|
||||
x: 100,
|
||||
y: 200
|
||||
}, {
|
||||
id: 'node2',
|
||||
x: 300,
|
||||
y: 150
|
||||
}],
|
||||
edges: [{
|
||||
id: 'node1->node2',
|
||||
target: 'node2',
|
||||
source: 'node1',
|
||||
shape: 'polyline'
|
||||
}]
|
||||
};
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
width: 500,
|
||||
height: 500
|
||||
});
|
||||
graph.read(data);
|
||||
expect(graph.find('node1->node2').getKeyShape().attr('path')).deep.eql([
|
||||
[
|
||||
'M',
|
||||
119.88792125297931,
|
||||
195.0280196867552
|
||||
],
|
||||
[
|
||||
'L',
|
||||
130.5,
|
||||
195.0280196867552
|
||||
],
|
||||
[
|
||||
'L',
|
||||
130.5,
|
||||
154.9719803132448
|
||||
],
|
||||
[
|
||||
'L',
|
||||
280.1120787470207,
|
||||
154.9719803132448
|
||||
]
|
||||
]);
|
||||
graph.destroy();
|
||||
});
|
||||
it('polyline-round', () => {
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'node1',
|
||||
x: 100,
|
||||
y: 200
|
||||
}, {
|
||||
id: 'node2',
|
||||
x: 300,
|
||||
y: 150
|
||||
}],
|
||||
edges: [{
|
||||
id: 'node1->node2',
|
||||
target: 'node2',
|
||||
source: 'node1',
|
||||
shape: 'polyline-round'
|
||||
}]
|
||||
};
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
width: 500,
|
||||
height: 500
|
||||
});
|
||||
graph.read(data);
|
||||
expect(graph.find('node1->node2').getKeyShape().attr('path')).deep.eql([
|
||||
[
|
||||
'M',
|
||||
119.88792125297931,
|
||||
195.0280196867552
|
||||
],
|
||||
[
|
||||
'L',
|
||||
121.5,
|
||||
195.0280196867552
|
||||
],
|
||||
[
|
||||
'Q',
|
||||
130.5,
|
||||
195.0280196867552,
|
||||
130.5,
|
||||
186.0280196867552
|
||||
],
|
||||
[
|
||||
'L',
|
||||
130.5,
|
||||
186.0280196867552
|
||||
],
|
||||
[
|
||||
'L',
|
||||
130.5,
|
||||
163.9719803132448
|
||||
],
|
||||
[
|
||||
'Q',
|
||||
130.5,
|
||||
154.9719803132448,
|
||||
139.5,
|
||||
154.9719803132448
|
||||
],
|
||||
[
|
||||
'L',
|
||||
139.5,
|
||||
154.9719803132448
|
||||
],
|
||||
[
|
||||
'L',
|
||||
280.1120787470207,
|
||||
154.9719803132448
|
||||
]
|
||||
]);
|
||||
graph.destroy();
|
||||
});
|
||||
});
|
||||
49
test/unit/plugins/edge.quadraticCurve-spec.js
Normal file
49
test/unit/plugins/edge.quadraticCurve-spec.js
Normal file
@ -0,0 +1,49 @@
|
||||
const G6 = require('../../../src/index');
|
||||
const expect = require('chai').expect;
|
||||
const Util = G6.Util;
|
||||
require('../../../plugins/edge.quadraticCurve/');
|
||||
document.body.appendChild(Util.createDOM(`
|
||||
<div id='mountNode'></div>
|
||||
`));
|
||||
describe('edge quadraticCurve test', () => {
|
||||
it('quadraticCurve', () => {
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'node1',
|
||||
x: 100,
|
||||
y: 200
|
||||
}, {
|
||||
id: 'node2',
|
||||
x: 300,
|
||||
y: 150
|
||||
}],
|
||||
edges: [{
|
||||
id: 'node1->node2',
|
||||
target: 'node2',
|
||||
source: 'node1',
|
||||
shape: 'quadraticCurve'
|
||||
}]
|
||||
};
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
width: 500,
|
||||
height: 500
|
||||
});
|
||||
graph.read(data);
|
||||
expect(graph.find('node1->node2').getKeyShape().attr('path')).deep.eql([
|
||||
[
|
||||
'M',
|
||||
120.31067823928494,
|
||||
202.77963117341807
|
||||
],
|
||||
[
|
||||
'Q',
|
||||
210.0140098433776,
|
||||
215.05603937351034,
|
||||
283.3868750469453,
|
||||
162.01058197150297
|
||||
]
|
||||
]);
|
||||
graph.destroy();
|
||||
});
|
||||
});
|
||||
30
test/unit/plugins/layout.archimeddeanSpiral-spec.js
Normal file
30
test/unit/plugins/layout.archimeddeanSpiral-spec.js
Normal file
@ -0,0 +1,30 @@
|
||||
const G6 = require('../../../src/index');
|
||||
const expect = require('chai').expect;
|
||||
const Util = G6.Util;
|
||||
document.body.appendChild(Util.createDOM(`
|
||||
<div id='mountNode'></div>
|
||||
`));
|
||||
require('../../../plugins/util.randomData/');
|
||||
require('../../../plugins/layout.archimeddeanSpiral/');
|
||||
|
||||
describe('plugin layout archimeddeanSpiral', () => {
|
||||
it('layout', () => {
|
||||
const Plugin = G6.Plugins['layout.archimeddeanSpiral'];
|
||||
const Util = G6.Util;
|
||||
const data = Util.createChainData(30);
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
fitView: 'cc',
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ new Plugin() ]
|
||||
});
|
||||
graph.node({
|
||||
size: 16
|
||||
});
|
||||
graph.read(data);
|
||||
expect(graph.find(0).getModel().x).eql(266);
|
||||
expect(graph.find(0).getModel().y).eql(250);
|
||||
graph.destroy();
|
||||
});
|
||||
});
|
||||
78
test/unit/plugins/layout.circle-spec.js
Normal file
78
test/unit/plugins/layout.circle-spec.js
Normal file
@ -0,0 +1,78 @@
|
||||
const G6 = require('../../../src/index');
|
||||
const expect = require('chai').expect;
|
||||
const Util = G6.Util;
|
||||
document.body.appendChild(Util.createDOM(`
|
||||
<div id='mountNode'></div>
|
||||
`));
|
||||
require('../../../plugins/util.randomData/');
|
||||
require('../../../plugins/layout.circle/');
|
||||
|
||||
describe('plugin layout circle', () => {
|
||||
it('layout', () => {
|
||||
const Plugin = G6.Plugins['layout.circle'];
|
||||
const Util = G6.Util;
|
||||
const data = Util.createChainData(30);
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
fitView: 'cc',
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ new Plugin() ]
|
||||
});
|
||||
graph.node({
|
||||
size: 16
|
||||
});
|
||||
graph.read(data);
|
||||
expect(graph.find(0).getModel().x).eql(249.99999999999994);
|
||||
expect(graph.find(0).getModel().y).eql(17);
|
||||
graph.destroy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('plugin layout circle avoidOverlap is true', () => {
|
||||
it('layout', () => {
|
||||
const Plugin = G6.Plugins['layout.circle'];
|
||||
const Util = G6.Util;
|
||||
const data = Util.createChainData(30);
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
fitView: 'cc',
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ new Plugin({
|
||||
avoidOverlap: true
|
||||
}) ]
|
||||
});
|
||||
graph.node({
|
||||
size: 16
|
||||
});
|
||||
graph.read(data);
|
||||
expect(graph.find(0).getModel().x).eql(249.99999999999994);
|
||||
expect(graph.find(0).getModel().y).eql(17);
|
||||
graph.destroy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('plugin layout circle radius is number', () => {
|
||||
it('layout', () => {
|
||||
const Plugin = G6.Plugins['layout.circle'];
|
||||
const Util = G6.Util;
|
||||
const data = Util.createChainData(30);
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
fitView: 'cc',
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ new Plugin({
|
||||
radius: 100
|
||||
}) ]
|
||||
});
|
||||
graph.node({
|
||||
size: 16
|
||||
});
|
||||
graph.read(data);
|
||||
expect(graph.find(0).getModel().x).eql(249.99999999999994);
|
||||
expect(graph.find(0).getModel().y).eql(17);
|
||||
graph.destroy();
|
||||
});
|
||||
});
|
||||
30
test/unit/plugins/layout.dagre-spec.js
Normal file
30
test/unit/plugins/layout.dagre-spec.js
Normal file
@ -0,0 +1,30 @@
|
||||
const G6 = require('../../../src/index');
|
||||
const expect = require('chai').expect;
|
||||
const Util = G6.Util;
|
||||
document.body.appendChild(Util.createDOM(`
|
||||
<div id='mountNode'></div>
|
||||
`));
|
||||
require('../../../plugins/util.randomData/');
|
||||
require('../../../plugins/layout.dagre/');
|
||||
|
||||
describe('plugin layout dagre', () => {
|
||||
it('layout', () => {
|
||||
const Plugin = G6.Plugins['layout.dagre'];
|
||||
const Util = G6.Util;
|
||||
const data = Util.createChainData(10);
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
fitView: 'cc',
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ new Plugin() ]
|
||||
});
|
||||
graph.node({
|
||||
size: 16
|
||||
});
|
||||
graph.read(data);
|
||||
expect(graph.find(0).getModel().x).eql(8.5);
|
||||
expect(graph.find(0).getModel().y).eql(8.5);
|
||||
graph.destroy();
|
||||
});
|
||||
});
|
||||
30
test/unit/plugins/layout.grid-spec.js
Normal file
30
test/unit/plugins/layout.grid-spec.js
Normal file
@ -0,0 +1,30 @@
|
||||
const G6 = require('../../../src/index');
|
||||
const expect = require('chai').expect;
|
||||
const Util = G6.Util;
|
||||
document.body.appendChild(Util.createDOM(`
|
||||
<div id='mountNode'></div>
|
||||
`));
|
||||
require('../../../plugins/util.randomData/');
|
||||
require('../../../plugins/layout.grid/');
|
||||
|
||||
describe('plugin layout grid', () => {
|
||||
it('layout', () => {
|
||||
const Plugin = G6.Plugins['layout.grid'];
|
||||
const Util = G6.Util;
|
||||
const data = Util.createChainData(10);
|
||||
const graph = new G6.Graph({
|
||||
container: 'mountNode',
|
||||
fitView: 'cc',
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ new Plugin() ]
|
||||
});
|
||||
graph.node({
|
||||
size: 16
|
||||
});
|
||||
graph.read(data);
|
||||
expect(graph.find(0).getModel().x).eql(20);
|
||||
expect(graph.find(0).getModel().y).eql(20);
|
||||
graph.destroy();
|
||||
});
|
||||
});
|
||||
468
test/unit/plugins/tool.d3.mapper-spec.js
Normal file
468
test/unit/plugins/tool.d3.mapper-spec.js
Normal file
@ -0,0 +1,468 @@
|
||||
const G6 = require('../../../src/index');
|
||||
const Mapper = require('../../../plugins/tool.d3.mapper/');
|
||||
const expect = require('chai').expect;
|
||||
const Util = G6.Util;
|
||||
const container = Util.createDOM(`
|
||||
<div>
|
||||
<div id='mountNode'></div>
|
||||
<div id="d3NodeSizeLegend"></div>
|
||||
<div id="d3NodeColorLegend"></div>
|
||||
<div id="d3NodeColorLegend1"></div>
|
||||
<div id="d3NodeColorLegend2"></div>
|
||||
<div id="d3NodeColorLegend3"></div>
|
||||
<div id="d3NodeColorCatLegend"></div>
|
||||
<div id="d3NodeSizeFormatLegend"></div>
|
||||
<div id="d3SliderChangeTestDiv"></div>
|
||||
</div>
|
||||
`);
|
||||
document.body.appendChild(container);
|
||||
|
||||
describe('d3 node size mapper test', () => {
|
||||
const originInnerHTML = document.getElementById('d3NodeSizeLegend').innerHTML;
|
||||
const nodeSizeMapper = new Mapper('node', 'weight', 'size', [ 10, 50 ], {
|
||||
scaleCfg: {
|
||||
type: 'log'
|
||||
},
|
||||
legendCfg: {
|
||||
containerId: 'd3NodeSizeLegend',
|
||||
layout: 'horizontal'
|
||||
}
|
||||
});
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'node1',
|
||||
x: 100,
|
||||
y: 200,
|
||||
weight: 10
|
||||
}, {
|
||||
id: 'node2',
|
||||
x: 300,
|
||||
y: 200,
|
||||
weight: 100
|
||||
}],
|
||||
edges: [{
|
||||
target: 'node2',
|
||||
source: 'node1'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ nodeSizeMapper ]
|
||||
});
|
||||
graph.read(data);
|
||||
it('legend render', () => {
|
||||
expect(document.getElementById('d3NodeSizeLegend').innerHTML).not.eql(originInnerHTML);
|
||||
});
|
||||
it('node size mapper', () => {
|
||||
const node1Model = graph.find('node1').getModel();
|
||||
const node2Model = graph.find('node2').getModel();
|
||||
const size1 = node1Model.size;
|
||||
const size2 = node2Model.size;
|
||||
expect(size1).eql(10);
|
||||
expect(size2).eql(50);
|
||||
});
|
||||
it('legend destroy', () => {
|
||||
graph.destroy();
|
||||
expect(document.getElementById('d3NodeSizeLegend').innerHTML).eql(originInnerHTML);
|
||||
});
|
||||
});
|
||||
|
||||
describe('d3 node color mapper domian equals 1 test', () => {
|
||||
const originInnerHTML = document.getElementById('d3NodeColorLegend1').innerHTML;
|
||||
const nodeSizeMapper = new Mapper('node', 'weight', 'color', [ '#ff0000', '#00ff00' ], {
|
||||
scaleCfg: {
|
||||
type: 'pow'
|
||||
},
|
||||
legendCfg: {
|
||||
containerId: 'd3NodeColorLegend1',
|
||||
layout: 'vertical'
|
||||
}
|
||||
});
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'node1',
|
||||
x: 100,
|
||||
y: 200,
|
||||
weight: 1
|
||||
}, {
|
||||
id: 'node2',
|
||||
x: 300,
|
||||
y: 200,
|
||||
weight: 1
|
||||
}],
|
||||
edges: [{
|
||||
target: 'node2',
|
||||
source: 'node1'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ nodeSizeMapper ]
|
||||
});
|
||||
graph.read(data);
|
||||
it('legend render', () => {
|
||||
expect(document.getElementById('d3NodeColorLegend1').innerHTML).not.eql(originInnerHTML);
|
||||
});
|
||||
it('node color mapper', () => {
|
||||
const node1Model = graph.find('node1').getModel();
|
||||
const node2Model = graph.find('node2').getModel();
|
||||
expect(node1Model.color).eql('rgb(0, 255, 0)');
|
||||
expect(node2Model.color).eql('rgb(0, 255, 0)');
|
||||
});
|
||||
it('legend destroy', () => {
|
||||
graph.destroy();
|
||||
expect(document.getElementById('d3NodeColorLegend1').innerHTML).eql(originInnerHTML);
|
||||
});
|
||||
});
|
||||
|
||||
describe('d3 node color mapper domian equals 0 test', () => {
|
||||
const originInnerHTML = document.getElementById('d3NodeColorLegend2').innerHTML;
|
||||
const nodeSizeMapper = new Mapper('node', 'weight', 'color', [ '#ff0000', '#00ff00' ], {
|
||||
scaleCfg: {
|
||||
type: 'pow'
|
||||
},
|
||||
legendCfg: {
|
||||
containerId: 'd3NodeColorLegend2',
|
||||
layout: '',
|
||||
formatter: num => {
|
||||
return num * num;
|
||||
}
|
||||
}
|
||||
});
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'node1',
|
||||
x: 100,
|
||||
y: 200,
|
||||
weight: 0
|
||||
}, {
|
||||
id: 'node2',
|
||||
x: 300,
|
||||
y: 200,
|
||||
weight: 0
|
||||
}],
|
||||
edges: [{
|
||||
target: 'node2',
|
||||
source: 'node1'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ nodeSizeMapper ]
|
||||
});
|
||||
graph.read(data);
|
||||
it('legend render', () => {
|
||||
expect(document.getElementById('d3NodeColorLegend2').innerHTML).not.eql(originInnerHTML);
|
||||
});
|
||||
it('node color mapper', () => {
|
||||
const node1Model = graph.find('node1').getModel();
|
||||
const node2Model = graph.find('node2').getModel();
|
||||
expect(node1Model.color).eql('rgb(0, 255, 0)');
|
||||
expect(node2Model.color).eql('rgb(0, 255, 0)');
|
||||
});
|
||||
it('legend destroy', () => {
|
||||
graph.destroy();
|
||||
expect(document.getElementById('d3NodeColorLegend2').innerHTML).eql(originInnerHTML);
|
||||
});
|
||||
});
|
||||
|
||||
describe('d3 node color mapper domian equals -1 test', () => {
|
||||
const originInnerHTML = document.getElementById('d3NodeColorLegend3').innerHTML;
|
||||
const nodeSizeMapper = new Mapper('node', 'weight', 'color', [ '#ff0000', '#00ff00' ], {
|
||||
scaleCfg: {
|
||||
type: 'pow'
|
||||
},
|
||||
legendCfg: {
|
||||
containerId: 'd3NodeColorLegend3'
|
||||
}
|
||||
});
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'node1',
|
||||
x: 100,
|
||||
y: 200,
|
||||
weight: -1
|
||||
}, {
|
||||
id: 'node2',
|
||||
x: 300,
|
||||
y: 200,
|
||||
weight: -1
|
||||
}],
|
||||
edges: [{
|
||||
target: 'node2',
|
||||
source: 'node1'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ nodeSizeMapper ]
|
||||
});
|
||||
graph.read(data);
|
||||
it('legend render', () => {
|
||||
expect(document.getElementById('d3NodeColorLegend3').innerHTML).not.eql(originInnerHTML);
|
||||
});
|
||||
it('node color mapper', () => {
|
||||
const node1Model = graph.find('node1').getModel();
|
||||
const node2Model = graph.find('node2').getModel();
|
||||
expect(node1Model.color).eql('rgb(255, 0, 0)');
|
||||
expect(node2Model.color).eql('rgb(255, 0, 0)');
|
||||
});
|
||||
it('legend destroy', () => {
|
||||
graph.destroy();
|
||||
expect(document.getElementById('d3NodeColorLegend3').innerHTML).eql(originInnerHTML);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('d3 edge size mapper test', () => {
|
||||
const edgeSizeMapper = new Mapper('edge', 'weight', 'size', [ 10, 50 ], {
|
||||
legendCfg: null
|
||||
});
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'node1',
|
||||
x: 100,
|
||||
y: 200
|
||||
}, {
|
||||
id: 'node2',
|
||||
x: 300,
|
||||
y: 200
|
||||
}, {
|
||||
id: 'node3',
|
||||
x: 400,
|
||||
y: 200
|
||||
}],
|
||||
edges: [{
|
||||
target: 'node2',
|
||||
source: 'node1',
|
||||
weight: 1
|
||||
}, {
|
||||
target: 'node2',
|
||||
source: 'node3',
|
||||
weight: 2
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ edgeSizeMapper ]
|
||||
});
|
||||
graph.read(data);
|
||||
it('edge size mapper', () => {
|
||||
const edges = graph.getEdges();
|
||||
const edge1Model = edges[0].getModel();
|
||||
const edge2Model = edges[1].getModel();
|
||||
const size1 = edge1Model.size;
|
||||
const size2 = edge2Model.size;
|
||||
expect(size1).eql(10);
|
||||
expect(size2).eql(50);
|
||||
});
|
||||
it('legend destroy', () => {
|
||||
graph.destroy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('d3 edge size mapper vertical test', () => {
|
||||
const edgeSizeMapper = new Mapper('edge', 'weight', 'size', [ 10, 50 ], {
|
||||
legendCfg: {
|
||||
layout: 'vertical'
|
||||
}
|
||||
});
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'node1',
|
||||
x: 100,
|
||||
y: 200
|
||||
}, {
|
||||
id: 'node2',
|
||||
x: 300,
|
||||
y: 200
|
||||
}, {
|
||||
id: 'node3',
|
||||
x: 400,
|
||||
y: 200
|
||||
}],
|
||||
edges: [{
|
||||
target: 'node2',
|
||||
source: 'node1',
|
||||
weight: 1
|
||||
}, {
|
||||
target: 'node2',
|
||||
source: 'node3',
|
||||
weight: 2
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ edgeSizeMapper ]
|
||||
});
|
||||
graph.read(data);
|
||||
it('edge size mapper', () => {
|
||||
const edges = graph.getEdges();
|
||||
const edge1Model = edges[0].getModel();
|
||||
const edge2Model = edges[1].getModel();
|
||||
const size1 = edge1Model.size;
|
||||
const size2 = edge2Model.size;
|
||||
expect(size1).eql(10);
|
||||
expect(size2).eql(50);
|
||||
graph.destroy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('d3 node color category mapper test', () => {
|
||||
const originInnerHTML = document.getElementById('d3NodeColorCatLegend').innerHTML;
|
||||
const nodeColoreMapper = new Mapper('node', 'class', 'color', [ '#ff0000', '#00ff00' ], {
|
||||
legendCfg: {
|
||||
containerId: 'd3NodeColorCatLegend'
|
||||
}
|
||||
});
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'node1',
|
||||
x: 100,
|
||||
y: 200,
|
||||
class: 'class1'
|
||||
}, {
|
||||
id: 'node2',
|
||||
x: 300,
|
||||
y: 200,
|
||||
class: 'class2'
|
||||
}],
|
||||
edges: [{
|
||||
target: 'node2',
|
||||
source: 'node1'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ nodeColoreMapper ]
|
||||
});
|
||||
graph.read(data);
|
||||
it('legend render', () => {
|
||||
expect(document.getElementById('d3NodeColorCatLegend').innerHTML).not.eql(originInnerHTML);
|
||||
});
|
||||
it('node color mapper', () => {
|
||||
const node1Model = graph.find('node1').getModel();
|
||||
const node2Model = graph.find('node2').getModel();
|
||||
expect(node1Model.color).eql('#ff0000');
|
||||
expect(node2Model.color).eql('#00ff00');
|
||||
});
|
||||
it('legend destroy', () => {
|
||||
graph.destroy();
|
||||
expect(document.getElementById('d3NodeColorCatLegend').innerHTML).eql(originInnerHTML);
|
||||
});
|
||||
});
|
||||
|
||||
describe('d3 node size mapper with formatter test', () => {
|
||||
const nodeSizeMapper = new Mapper('node', 'weight', 'size', [ 10, 50 ], {
|
||||
legendCfg: {
|
||||
formatter: num => {
|
||||
return num * num;
|
||||
}
|
||||
}
|
||||
});
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'node1',
|
||||
x: 100,
|
||||
y: 200,
|
||||
weight: 2
|
||||
}, {
|
||||
id: 'node2',
|
||||
x: 300,
|
||||
y: 200,
|
||||
weight: 3
|
||||
}],
|
||||
edges: [{
|
||||
target: 'node2',
|
||||
source: 'node1'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ nodeSizeMapper ]
|
||||
});
|
||||
graph.read(data);
|
||||
it('node size mapper', () => {
|
||||
const node1Model = graph.find('node1').getModel();
|
||||
const node2Model = graph.find('node2').getModel();
|
||||
const size1 = node1Model.size;
|
||||
const size2 = node2Model.size;
|
||||
expect(size1).eql(10);
|
||||
expect(size2).eql(50);
|
||||
graph.destroy();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('d3 container undefined test', () => {
|
||||
const fn = function() {
|
||||
const nodeSizeMapper = new Mapper('node', 'weight', 'size', [ 10, 50 ], {
|
||||
legendCfg: {
|
||||
containerId: 'undefinedDOM'
|
||||
}
|
||||
});
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'node1',
|
||||
x: 100,
|
||||
y: 200,
|
||||
weight: 2
|
||||
}, {
|
||||
id: 'node2',
|
||||
x: 300,
|
||||
y: 200,
|
||||
weight: 3
|
||||
}],
|
||||
edges: [{
|
||||
target: 'node2',
|
||||
source: 'node1'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ nodeSizeMapper ]
|
||||
});
|
||||
graph.read(data);
|
||||
graph.destroy();
|
||||
};
|
||||
|
||||
it('legend render', () => {
|
||||
expect(fn).to.Throw();
|
||||
});
|
||||
});
|
||||
@ -2,8 +2,7 @@ const G6 = require('../../../src/index');
|
||||
const Mapper = require('../../../plugins/tool.mapper/');
|
||||
const expect = require('chai').expect;
|
||||
const Util = G6.Util;
|
||||
|
||||
document.body.appendChild(Util.createDOM(`
|
||||
const container = Util.createDOM(`
|
||||
<div>
|
||||
<div id='mountNode'></div>
|
||||
<div id="nodeSizeLegend"></div>
|
||||
@ -15,7 +14,8 @@ document.body.appendChild(Util.createDOM(`
|
||||
<div id="nodeSizeFormatLegend"></div>
|
||||
<div id="sliderChangeTestDiv"></div>
|
||||
</div>
|
||||
`));
|
||||
`);
|
||||
document.body.appendChild(container);
|
||||
|
||||
describe('node size mapper test', () => {
|
||||
const originInnerHTML = document.getElementById('nodeSizeLegend').innerHTML;
|
||||
@ -71,51 +71,51 @@ describe('node size mapper test', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('node color mapper domain length test', () => {
|
||||
const fn = function() {
|
||||
const nodeSizeMapper = new Mapper('node', 'class', 'color', [ '#ff0000', '#00ff00' ], {
|
||||
legendCfg: {
|
||||
layout: 'vertical'
|
||||
}
|
||||
});
|
||||
const data = {
|
||||
nodes: [{
|
||||
id: 'node1',
|
||||
x: 100,
|
||||
y: 200,
|
||||
class: 'class1'
|
||||
}, {
|
||||
id: 'node2',
|
||||
x: 300,
|
||||
y: 200,
|
||||
class: 'class2'
|
||||
}, {
|
||||
id: 'node3',
|
||||
x: 400,
|
||||
y: 200,
|
||||
class: 'class3'
|
||||
}],
|
||||
edges: [{
|
||||
target: 'node2',
|
||||
source: 'node1'
|
||||
}]
|
||||
};
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
const graph = new G6.Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
plugins: [ nodeSizeMapper ]
|
||||
});
|
||||
graph.read(data);
|
||||
graph.destroy();
|
||||
};
|
||||
// describe('node color mapper domain length test', () => {
|
||||
// const fn = function() {
|
||||
// const nodeSizeMapper = new Mapper('node', 'class', 'color', [ '#ff0000', '#00ff00' ], {
|
||||
// legendCfg: {
|
||||
// layout: 'vertical'
|
||||
// }
|
||||
// });
|
||||
// const data = {
|
||||
// nodes: [{
|
||||
// id: 'node1',
|
||||
// x: 100,
|
||||
// y: 200,
|
||||
// class: 'class1'
|
||||
// }, {
|
||||
// id: 'node2',
|
||||
// x: 300,
|
||||
// y: 200,
|
||||
// class: 'class2'
|
||||
// }, {
|
||||
// id: 'node3',
|
||||
// x: 400,
|
||||
// y: 200,
|
||||
// class: 'class3'
|
||||
// }],
|
||||
// edges: [{
|
||||
// target: 'node2',
|
||||
// source: 'node1'
|
||||
// }]
|
||||
// };
|
||||
// const div = document.createElement('div');
|
||||
// document.body.appendChild(div);
|
||||
// const graph = new G6.Graph({
|
||||
// container: div,
|
||||
// width: 500,
|
||||
// height: 500,
|
||||
// plugins: [ nodeSizeMapper ]
|
||||
// });
|
||||
// graph.read(data);
|
||||
// graph.destroy();
|
||||
// };
|
||||
|
||||
it('legend render', () => {
|
||||
expect(fn).to.Throw();
|
||||
});
|
||||
});
|
||||
// it('legend render', () => {
|
||||
// expect(fn).to.Throw();
|
||||
// });
|
||||
// });
|
||||
|
||||
describe('node color mapper domian equals 1 test', () => {
|
||||
const originInnerHTML = document.getElementById('nodeColorLegend1').innerHTML;
|
||||
@ -553,4 +553,8 @@ describe('slider test', () => {
|
||||
expect(document.getElementById('sliderChangeTestDiv')).not.eql(undefined);
|
||||
graph.destroy();
|
||||
});
|
||||
|
||||
it('remove container', () => {
|
||||
container.destroy();
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user