feat: add unit tests for layout using web worker

test/unit/layout/circular-web-worker-spec.js

@@ -0,0 +1,67 @@
+const expect = require('chai').expect;
+// 注意：这里不能直接require原始的src文件，而要使用build后的文件，因为web worker代码是通过worker-loader内联进来的。
+const G6 = require('../../../build/g6');
+const data = require('./data.json');
+
+const div = document.createElement('div');
+div.id = 'circular-layout-web-worker';
+document.body.appendChild(div);
+
+function mathEqual(a, b) {
+  return Math.abs(a - b) < 1;
+}
+
+describe.only('circular layout(web worker)', () => {
+  it('circular layout(web worker) with default configs', done => {
+    const graph = new G6.Graph({
+      container: div,
+      layout: {
+        type: 'circular',
+        // use web worker to layout
+        workerEnabled: true
+      },
+      width: 500,
+      height: 500,
+      defaultNode: { size: 10 }
+    });
+    graph.data(data);
+    graph.on('afterlayout', () => {
+      const width = graph.get('width');
+      const height = graph.get('height');
+      const radius = height > width ? width / 2 : height / 2;
+      expect(mathEqual(data.nodes[0].x, 250 + radius)).to.equal(true);
+      expect(mathEqual(data.nodes[0].y, 250)).to.equal(true);
+      expect(data.nodes[0].y === 250);
+      graph.destroy();
+      done();
+    });
+    graph.render();
+  });
+
+  it('circular(web worker) counterclockwise, and fixed radius, start angle, end angle', done => {
+    const graph = new G6.Graph({
+      container: div,
+      layout: {
+        type: 'circular',
+        center: [ 250, 250 ],
+        radius: 200,
+        startAngle: Math.PI / 4,
+        endAngle: Math.PI,
+        // use web worker to layout
+        workerEnabled: true
+      },
+      width: 500,
+      height: 500,
+      defaultNode: { size: 10 }
+    });
+    graph.data(data);
+    graph.on('afterlayout', () => {
+      const pos = 200 * Math.sqrt(2) / 2;
+      expect(mathEqual(data.nodes[0].x, 250 + pos)).to.equal(true);
+      expect(mathEqual(data.nodes[0].y, 250 + pos)).to.equal(true);
+      graph.destroy();
+      done();
+    });
+    graph.render();
+  });
+});

test/unit/layout/force-web-worker-spec.js

@@ -0,0 +1,47 @@
+const expect = require('chai').expect;
+// 注意：这里不能直接require原始的src文件，而要使用build后的文件，因为web worker代码是通过worker-loader内联进来的。
+const G6 = require('../../../build/g6');
+const data = require('./data.json');
+
+const div = document.createElement('div');
+div.id = 'force-layout-web-worker';
+document.body.appendChild(div);
+
+describe.only('force layout(web worker)', function() {
+  this.timeout(10000);
+
+  it('force layout(web worker) with default configs', function(done) {
+    const node = data.nodes[0];
+    let count = 0;
+    let ended = false;
+    const graph = new G6.Graph({
+      container: div,
+      layout: {
+        type: 'force',
+        onTick() {
+          count++;
+          expect(node.x).to.not.be.undefined;
+          expect(node.y).to.not.be.undefined;
+        },
+        onLayoutEnd() {
+          ended = true;
+        },
+        // use web worker to layout
+        workerEnabled: true
+      },
+      width: 500,
+      height: 500,
+      defaultNode: { size: 10 }
+    });
+    graph.data(data);
+    graph.on('afterlayout', () => {
+      expect(node.x).to.not.be.undefined;
+      expect(node.y).to.not.be.undefined;
+      expect(count >= 1).to.be.true;
+      expect(ended).to.be.true;
+      graph.destroy();
+      done();
+    });
+    graph.render();
+  });
+});

test/unit/layout/web-worker-spec.js

@@ -0,0 +1,68 @@
+const expect = require('chai').expect;
+// 注意：这里不能直接require原始的src文件，而要使用build后的文件，因为web worker代码是通过worker-loader内联进来的。
+const G6 = require('../../../build/g6');
+const data = require('./data.json');
+
+const div = document.createElement('div');
+div.id = 'layout-web-worker';
+document.body.appendChild(div);
+
+function mathEqual(a, b) {
+  return Math.abs(a - b) < 1;
+}
+
+describe.only('layout using web worker', function() {
+  this.timeout(10000);
+
+  it('change layout', function(done) {
+    const node = data.nodes[0];
+    const graph = new G6.Graph({
+      container: div,
+      layout: {
+        type: 'circular',
+        // use web worker to layout
+        workerEnabled: true
+      },
+      width: 500,
+      height: 500,
+      defaultNode: { size: 10 }
+    });
+
+    graph.data(data);
+    // 下面的graph.updateLayout又会触发一次afterLayout，为了避免这里的event handler重复执行，
+    // 这里用了graph.one.
+    graph.one('afterlayout', () => {
+      expect(mathEqual(node.x, 500)).to.equal(true);
+      expect(mathEqual(node.y, 250)).to.equal(true);
+    });
+    graph.render();
+
+    let count = 0;
+    let ended = false;
+
+    setTimeout(() => {
+      // 只执行一次
+      graph.one('afterlayout', () => {
+        expect(node.x).to.not.be.undefined;
+        expect(node.y).to.not.be.undefined;
+        expect(count >= 1).to.be.true;
+        expect(ended).to.be.true;
+        graph.destroy();
+        done();
+      });
+      graph.updateLayout({
+        type: 'force',
+        onTick() {
+          count++;
+          expect(node.x).to.not.be.undefined;
+          expect(node.y).to.not.be.undefined;
+        },
+        onLayoutEnd() {
+          ended = true;
+        },
+        // use web worker to layout
+        workerEnabled: true
+      });
+    }, 1000);
+  });
+});