feat: test 支持 snapshot 对比

jest-setup.js

@@ -0,0 +1,20 @@
+// eslint-disable-next-line
+const { toMatchImageSnapshot } = require('jest-image-snapshot');
+// eslint-disable-next-line
+const CanvasConverter = require('canvas-to-buffer');
+
+expect.extend({
+  toMatchImageSnapshot(received) {
+    const converter = new CanvasConverter(received.canvas, {
+      image: { types: ['png'] },
+    });
+
+    const execPath = process.execPath;
+    // toMatchImageSnapshot 需要使用 node 环境
+    process.execPath = 'node';
+    const result = toMatchImageSnapshot.call(this, converter.toBuffer());
+    process.execPath = execPath;
+
+    return result;
+  },
+});

jest.config.js

@@ -3,14 +3,9 @@ module.exports = {
   testEnvironment: 'jest-electron/environment',
   preset: 'ts-jest',
   collectCoverage: false,
-  collectCoverageFrom: [
-    'packages/*/src/**/*.{ts,tsx,js}',
-    '!**/node_modules/**',
-  ],
-  modulePathIgnorePatterns: ["packages/*/dist"],
+  collectCoverageFrom: ['packages/*/src/**/*.{ts,tsx,js}', '!**/node_modules/**'],
+  modulePathIgnorePatterns: ['packages/*/dist'],
   testPathIgnorePatterns: [],
   testRegex: '/test/.*\\.test\\.tsx?$',
-  transform: {
-    '\\.(less|css)$': 'jest-less-loader',
-  },
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
 };

package.json

@@ -32,13 +32,16 @@
     "@babel/preset-env": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
     "@types/jest": "^26.0.20",
+    "@types/jest-image-snapshot": "^4.3.1",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "babel-jest": "^26.6.3",
+    "canvas-to-buffer": "^1.1.1",
     "eslint": "^7.32.0",
     "father": "^2.30.0",
     "jest": "^26.6.3",
     "jest-electron": "^0.1.12",
+    "jest-image-snapshot": "^4.5.1",
     "jest-less-loader": "^0.1.1",
     "lerna": "^3.22.1",
     "pre-commit": "^1.2.2",
@@ -57,6 +60,7 @@
     "test-live": "npm run test-watch packages",
     "test-watch": "DEBUG_MODE=1 jest --watch",
     "coverage": "jest --coverage",
+    "snapshot": "jest --updateSnapshot",
     "lint": "eslint ./",
     "lint-fix": "eslint --fix ./",
     "publish": "npm run build && npm run test && lerna publish prerelease --dist-tag next",

packages/f2/test/canvas/graphic.test.tsx

@@ -1,5 +1,5 @@
 import { jsx, Canvas, Component } from '../../src';
-import { createContext } from '../util';
+import { createContext, delay } from '../util';
 const context = createContext();
 
 function View() {
@@ -39,15 +39,18 @@ function View() {
 }
 
 describe('Canvas', () => {
-  it('图形绘制', () => {
+  it('图形绘制', async () => {
     const ref = { current: null };
-    const { type, props } = (
+    const { props } = (
       <Canvas context={context} pixelRatio={1}>
         <View />
       </Canvas>
     );
 
     const canvas = new Canvas(props);
     canvas.render();
+
+    await delay(100);
+    expect(context).toMatchImageSnapshot();
   });
 });

packages/f2/test/chart/index.test.tsx

@@ -1,5 +1,5 @@
 import { jsx, Canvas, Chart, Axis, Interval } from '../../src';
-import { createContext } from '../util';
+import { createContext, delay } from '../util';
 const context = createContext();
 
 const data = [
@@ -16,52 +16,42 @@ const data = [
 ];
 
 describe('Chart', () => {
-  it('Chart render', () => {
+  it('Chart render', async () => {
     const { type, props } = (
-      <Canvas context={context} pixelRatio={2}>
-        <Chart
-          data={data}
-          coord={
-            {
-              // type: Polar,
-              // transposed: true,
-            }
-          }
-          scale={{}}
-          // style={{
-          //   left: 50,
-          // }}
-        >
+      <Canvas context={context} pixelRatio={1}>
+        <Chart data={data}>
           <Axis field="genre" />
           <Axis field="sold" />
           <Interval x="genre" y="sold" color="genre" />
         </Chart>
       </Canvas>
     );
 
-    // @ts-ignored
     const canvas = new Canvas(props);
     canvas.render();
 
-    setTimeout(() => {
-      console.log('调用update');
-      canvas.update(
-        (
-          <Canvas context={context} pixelRatio={2}>
-            <Chart
-              data={data}
-              style={{
-                left: 50,
-                width: 100,
-              }}
-            >
-              <Axis field="genre" />
-              <Axis field="sold" />
-              <Interval x="genre" y="sold" color="genre" />
-            </Chart>
-          </Canvas>
-        ).props
-      );
-    }, 1000);
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
+
+    canvas.update(
+      (
+        <Canvas context={context} pixelRatio={1}>
+          <Chart
+            data={data}
+            style={{
+              left: 50,
+              width: 100,
+            }}
+          >
+            <Axis field="genre" />
+            <Axis field="sold" />
+            <Interval x="genre" y="sold" color="genre" />
+          </Chart>
+        </Canvas>
+      ).props
+    );
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
   });
 });

packages/f2/test/components/line/line.test.tsx

@@ -503,8 +503,8 @@ describe('折线图', () => {
                   showCrosshairs
                   crosshairsType="xy"
                   crosshairsStyle={{
-                    stroke: "#1577FE",
-                    lineWidth: "1px",
+                    stroke: '#1577FE',
+                    lineWidth: '1px',
                     lineDash: [2, 2],
                   }}
                   custom
@@ -997,13 +997,14 @@ describe('折线图', () => {
       }
 
       didMount() {
-        // 更新数据
-        for (let i = 0; i <= 40; i++) {
-          setTimeout(() => {
-            const { data } = this.state;
-            this.setState({ data: [].concat(data, getRecord(i)) });
-          }, i * 30);
-        }
+        setTimeout(() => {
+          const { data } = this.state;
+          let newData = [].concat(data);
+          for (let i = 0; i <= 10; i++) {
+            newData.push(getRecord(i));
+          }
+          this.setState({ data: newData });
+        }, 20);
       }
 
       render() {

packages/f2/test/util.ts

@@ -4,7 +4,7 @@ function delay(time) {
   });
 }
 
-const createContext = (title = '', { height = '225px', width = '300px' }: any = {}) => {
+const createContext = (title = '', { width = '300px', height = '225px' }: any = {}) => {
   const canvasEl = document.createElement('canvas');
   const titleEl = document.createElement('p');
   titleEl.innerText = title + ':';

packages/graphic/src/engine/canvas-element.ts

@@ -13,8 +13,11 @@ class CanvasElement extends EventEmit {
     super();
     this.context = ctx;
     // canvas实际的宽高 (width/height) * pixelRatio
-    this.width = 0;
-    this.height = 0;
+
+    // 有可能是 node canvas 创建的 context 对象
+    const canvas = ctx.canvas || {};
+    this.width = canvas.width || 0;
+    this.height = canvas.height || 0;
     this.style = {};
     this.currentStyle = {};
     this.attrs = {};

packages/graphic/src/engine/canvas.ts

@@ -79,19 +79,13 @@ class Canvas extends EventEmit {
     }
 
     if (context && canvas && !canvas.getContext) {
-      canvas.getContext = function () {
+      canvas.getContext = function() {
         return context;
       };
     }
-    let width = this.get('width');
-    if (!width) {
-      width = getWidth(canvas);
-    }
+    const width = this.get('width') || getWidth(canvas) || canvas.width;
 
-    let height = this.get('height');
-    if (!height) {
-      height = getHeight(canvas);
-    }
+    const height = this.get('height') || getHeight(canvas) || canvas.height;
 
     this.set('canvas', this);
     this.set('el', canvas);