g6/tests/unit/layout/fruchterman-spec.ts

import G6 from '../../../src';
import data from './data';


const div = document.createElement('div');
div.id = 'graph-spec';
document.body.appendChild(div);


describe('fruchterman', () => {
  it('new graph with fruchterman layout, without configurations', () => {
    const graph = new G6.Graph({
      container: div,
      layout: { type: 'fruchterman' },
      width: 500,
      height: 500,
      defaultNode: {
        size: 10
      }
    });
    graph.data(data);
    graph.render();
    expect(graph.getNodes()[0].getModel().x).not.toEqual(undefined);
    expect(graph.getNodes()[0].getModel().y).not.toEqual(undefined);
    expect(graph.getNodes()[1].getModel().x).not.toEqual(undefined);
    expect(graph.getNodes()[1].getModel().y).not.toEqual(undefined);
    graph.destroy();
  });
  it('new graph with fruchterman layout, with configurations', () => {
    const graph = new G6.Graph({
      container: div,
      layout: {
        type: 'fruchterman',
        center: [100, 100],
        maxIteration: 5000,
      },
      width: 500,
      height: 500,
    });
    graph.data(data);
    graph.render();
    expect(graph.getNodes()[0].getModel().x).not.toEqual(undefined);
    expect(graph.getNodes()[0].getModel().y).not.toEqual(undefined);
    expect(graph.getNodes()[1].getModel().x).not.toEqual(undefined);
    expect(graph.getNodes()[1].getModel().y).not.toEqual(undefined);
    graph.destroy();
  });
  it('fruchterman layout with no node', () => {
    const graph = new G6.Graph({
      container: div,
      layout: {
        type: 'fruchterman'
      },
      width: 500,
      height: 500,
    });
    graph.data({
      nodes: []
    });
    graph.render();
    graph.destroy();
  });
  it('fruchterman layout with one node', () => {
    const graph = new G6.Graph({
      container: div,
      layout: {
        type: 'fruchterman'
      },
      width: 500,
      height: 500,
    });
    graph.data({
      nodes: [{
        id: 'node'
      }]
    });
    graph.render();
    const nodeModel = graph.getNodes()[0].getModel();
    expect(nodeModel.x).toEqual(250);
    expect(nodeModel.y).toEqual(250);
    graph.destroy();
  });
  it('fruchterman layout with clustering and no clusterGravity', () => {
    const colors = ['#f00', '#0f0','#00f', '#ff0'];
    data.nodes.forEach(node => {
      node.size = 10;
      node.cluster = Math.ceil(Math.random() / 3 * 10);
      node.style = {
        fill: colors[node.cluster]
      };
    });
    const graph = new G6.Graph({
      container: div,
      layout: {
        type: 'fruchterman',
        clustering: true,
        maxIteration: 3000,
        clusterGravity: null
      },
      width: 500,
      height: 500,
    });
    graph.data(data);
    graph.render();
    const node0 = data.nodes[0];
    expect(node0.x).not.toEqual(NaN);
    expect(node0.y).not.toEqual(NaN);
    graph.destroy();
  });
  it('fruchterman layout with overlapped nodes and loop edge', () => {
    const graph = new G6.Graph({
      container: div,
      layout: {
        type: 'fruchterman',
        clustering: true,
        maxIteration: 3000,
        clusterGravity: null
      },
      width: 500,
      height: 500,
    });
    const tmpData = {
      nodes: [{
        id: 'node0',
        x: 100,
        y: 100
      }, {
        id: 'node1',
        x: 100,
        y: 100
      }, {
        id: 'node3',
        x: 150,
        y: 120
      }],
      edges: [{
        source: 'node3',
        target: 'node3'
      }]
    };
    graph.data(tmpData);
    graph.render();
    const node0 = tmpData.nodes[0];
    const node1 = tmpData.nodes[1];
    expect(node0.x).not.toEqual(node1.x);
    expect(node0.y).not.toEqual(node1.y);
    graph.destroy();
  });
  it('update fructherman layout configurations', () => {
    const graph = new G6.Graph({
      container: div,
      layout: {
        type: 'fruchterman',
      },
      width: 500,
      height: 500,
    });
    graph.data(data);
    graph.render();
    graph.updateLayout({
      center: [100, 100],
      gravity: 50,
    });
    expect(graph.getNodes()[0].getModel().x).not.toEqual(undefined);
    expect(graph.getNodes()[0].getModel().y).not.toEqual(undefined);
    expect(graph.getNodes()[1].getModel().x).not.toEqual(undefined);
    expect(graph.getNodes()[1].getModel().y).not.toEqual(undefined);
    graph.destroy();
  });

  it('instantiate layout', () => {
    const fruchtermanLayout = new G6.Layout['fruchterman']({
      center: [250, 250]
    });
    fruchtermanLayout.init(data);
    fruchtermanLayout.execute();

    const graph = new G6.Graph({
      width: 500,
      height: 500,
      container: div
    });
    graph.data(data);
    graph.render();

    expect(graph.getNodes()[0].getModel().x).not.toEqual(undefined);
    expect(graph.getNodes()[0].getModel().y).not.toEqual(undefined);
    expect(graph.getNodes()[1].getModel().x).not.toEqual(undefined);
    expect(graph.getNodes()[1].getModel().y).not.toEqual(undefined);
    graph.destroy();
  });
});