feat: Refactor the ui visual regression

Author: dabeng

.travis.yml

@@ -1,5 +1,5 @@
 language: node_js
-node_js: "6"
+node_js: "8"
 
 before_install:
     - stty cols 80

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "Simple and direct organization chart(tree-like hierarchy) plugin based on pure DOM and jQuery.",
   "main": "./dist/js/jquery.orgchart.min.js",
   "style": [

package.json

@@ -1,9 +1,19 @@
-const { toMatchImageSnapshot } = require("jest-image-snapshot");
+const { toMatchImageSnapshot } = require('jest-image-snapshot');
 
 expect.extend({ toMatchImageSnapshot });
 
+const config = {
+  failureThreshold: 0.01,
+  failureThresholdType: 'percent'
+};
+
 describe('orgchart -- visual regression tests', () => {
   beforeAll(async () => {
+    await page.setViewport({
+      width: 1680,
+      height: 450,
+      deviceScaleFactor: 1,
+    });
     await page.goto(
       `file:${require('path').join(__dirname, '../../../demo/pan-zoom.html')}`
     );
@@ -18,7 +28,7 @@ describe('orgchart -- visual regression tests', () => {
       el.dispatchEvent(syntheticEvent);
     });
     const image = await page.screenshot();
-    expect(image).toMatchImageSnapshot();
+    expect(image).toMatchImageSnapshot(config);
   });
 
   it('zoomout correctly', async () => {
@@ -31,6 +41,6 @@ describe('orgchart -- visual regression tests', () => {
       el.dispatchEvent(syntheticEvent);
     });
     const image = await page.screenshot();
-    expect(image).toMatchImageSnapshot();
+    expect(image).toMatchImageSnapshot(config);
   });
 });