feat: add plugins unit test

package.json

@@ -27,7 +27,7 @@
     "lint": "lint-staged",
     "tslint": "tslint -c tslint.json 'src/**/*.ts'",
     "test": "jest",
-    "test-live": "DEBUG_MODE=1 jest --watch  ./tests/unit/plugins/menu-spec.ts",
+    "test-live": "DEBUG_MODE=1 jest --watch  ./tests/unit/plugins/grid-spec.ts",
     "coverage": "jest --coverage",
     "ci": "run-s build coverage",
     "doc": "rimraf apis && typedoc",

plugins/base.ts

@@ -19,7 +19,7 @@ export default abstract class PluginBase {
    * 插件基类的构造函数
    * @param cfgs 插件的配置项
    */
-  constructor(cfgs) {
+  constructor(cfgs?: IPluginBase) {
     this._cfgs = deepMix(this.getDefaultCfgs(), cfgs);
   }
 

src/graph/graph.ts

@@ -89,7 +89,6 @@ export default class Graph extends EventEmitter implements IGraph {
       customGroupControll
     })
 
-    // TODO  缺少初始化plugin的方法的实现
     this.initPlugin()
   }
 
@@ -121,7 +120,12 @@ export default class Graph extends EventEmitter implements IGraph {
   }
 
   private initPlugin(): void {
-
+    const self = this
+    each(self.get('plugins'), plugin => {
+      if (!plugin.destroyed && plugin.initPlugin) {
+        plugin.initPlugin(self);
+      }
+    });
   }
 
   // 初始化所有 Group

tests/unit/plugins/grid-spec.ts

@@ -0,0 +1,73 @@
+import Grid from '../../../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);
+  });
+});