g6/tests/unit/plugins/grid-spec.ts

import Grid from '../../../src/plugins/grid';
import G6 from '../../../src';

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

describe('grid', () => {
  const grid = new Grid();
  const graph = new G6.Graph({
    container: div,
    width: 800,
    height: 600,
    modes: {
      default: [ 'drag-canvas', 'zoom-canvas', 'drag-node' ]
    },
    plugins: [ grid ]
  });

  graph.addItem('node', { x: 100, y: 100 });
  graph.addItem('node', { x: -100, y: -100 });

  it('grid', () => {
    const container = grid.getContainer();
    expect(container).not.toBe(undefined);
    expect(container.childNodes.length).toEqual(1);

    const style = container.style;
    expect(style.overflow).toEqual('hidden');
    expect(style.top).toEqual('0px');
    expect(style.left).toEqual('0px');

    const gridContainer: HTMLDivElement = container.childNodes[0] as HTMLDivElement;
    
    expect(gridContainer.style.width).toEqual('4000px');
    expect(gridContainer.style.height).toEqual('3000px');
    expect(gridContainer.style.left).toEqual('0px');
    expect(gridContainer.style.top).toEqual('0px');
    expect(gridContainer.style.backgroundImage).not.toEqual('');

    graph.translate(-100, -100);
    
    expect(gridContainer.style.transform).toEqual('matrix(1, 0, 0, 1, 0, 0)');
    expect(gridContainer.style.left).toEqual('0px');
    expect(gridContainer.style.top).toEqual('0px');

    graph.zoom(0.5);
    expect(gridContainer.style.transform).toEqual('matrix(0.5, 0, 0, 0.5, 0, 0)');
    expect(gridContainer.style.left).toEqual('0px');
    expect(gridContainer.style.top).toEqual('0px');

    graph.get('group').resetMatrix();

    graph.translate(100, 100);
    expect(gridContainer.style.transform).toEqual('matrix(1, 0, 0, 1, 0, 0)');
    expect(gridContainer.style.left).toEqual('0px');
    expect(gridContainer.style.top).toEqual('0px');

    graph.addItem('node', { x: -200, y: 200 });

    graph.translate(100, 100);
    expect(gridContainer.style.transform).toEqual('matrix(1, 0, 0, 1, 0, 0)');
    expect(gridContainer.style.left).toEqual('0px');
    expect(gridContainer.style.top).toEqual('0px');
  });
  it('grid destroy', () => {
    const container = graph.get('container');
    expect(container.childNodes.length).toEqual(2);

    graph.destroy();
    expect(container.childNodes.length).toEqual(0);
  });
});