chore: 测试 canvas api 使用情况

jest-setup.js

@@ -1,4 +1,6 @@
 // eslint-disable-next-line
+const fs = require('fs');
+// eslint-disable-next-line
 const { configureToMatchImageSnapshot } = require('jest-image-snapshot');
 // eslint-disable-next-line
 const CanvasConverter = require('canvas-to-buffer');
@@ -19,6 +21,22 @@ expect.extend({
     const result = toMatchImageSnapshot.call(this, converter.toBuffer());
     process.execPath = execPath;
 
+    try {
+      const result = JSON.parse(fs.readFileSync(__dirname + '/result.json', 'utf-8'));
+      // const result = {};
+      const commands = received.commands;
+
+      if (commands && commands.length) {
+        commands.forEach((item) => {
+          result[item[0]] = true;
+        });
+      }
+
+      fs.writeFileSync(__dirname + '/result.json', JSON.stringify(result));
+    } catch (err) {
+      console.error(err);
+    }
+
     return result;
   },
 });

packages/f2/test/context-collect.ts

@@ -0,0 +1,72 @@
+const unused = [
+  'direction',
+  'filter',
+  'fontKerning',
+  'fontStretch',
+  'fontVariantCaps',
+  'globalCompositeOperation',
+  'imageSmoothingEnabled',
+  'imageSmoothingQuality',
+  'letterSpacing',
+  'textRendering',
+  'getContextAttributes',
+  'getLineDash',
+  'getTransform',
+  'isContextLost',
+  'isPointInStroke',
+  'reset',
+  'roundRect',
+];
+
+// 不常用
+// const rarelyUsed = [
+//   'lineDashOffset',
+//   'shadowColor',
+//   'shadowOffsetX',
+//   'shadowOffsetY',
+//   'wordSpacing',
+//   'createImageData',
+//   'getImageData',
+//   'putImageData',
+//   'createRadialGradient',
+//   'isPointInPath',
+//   'quadraticCurveTo',
+//   'strokeText',
+//   'transform',
+// ];
+const createCollectContext = (ctx: CanvasRenderingContext2D) => {
+  const canvas = ctx.canvas;
+
+  const commands = [];
+  const context = new Proxy(ctx, {
+    get: (target, prop) => {
+      if (prop === 'commands') {
+        return commands;
+      }
+      // @ts-ignore
+      if (unused.includes(prop)) {
+        return;
+      }
+      commands.push([prop]);
+      if (typeof target[prop] === 'function') {
+        return target[prop].bind(target);
+      } else {
+        return target[prop];
+      }
+    },
+    set: function(obj, prop, value) {
+      commands.push([prop, value]);
+      obj[prop] = value;
+      return true;
+    },
+  });
+
+  // @ts-ignore
+  canvas.getContext = () => {
+    return context;
+  };
+
+  return context;
+};
+
+export default createCollectContext;

packages/f2/test/util.ts

@@ -1,3 +1,4 @@
+import createCollectContext from './context-collect';
 const isTouch = (eventType) => {
   if (eventType.indexOf('touch') !== -1) return true;
   if (eventType.indexOf('press') !== -1) return true;
@@ -31,7 +32,8 @@ const createContext = (title = '', { width = '300px', height = '225px' } = {}) =
   canvasEl.style.width = width;
   canvasEl.style.height = height;
   document.body.appendChild(canvasEl);
-  const context = canvasEl.getContext('2d');
+
+  const context = createCollectContext(canvasEl.getContext('2d'));
   return context;
 };
 

result.json

@@ -0,0 +1 @@
+{"canvas":true,"clearRect":true,"fillStyle":true,"fillRect":true,"resetTransform":true,"save":true,"beginPath":true,"rect":true,"clip":true,"setTransform":true,"globalAlpha":true,"closePath":true,"fill":true,"restore":true,"arc":true,"font":true,"lineWidth":true,"textAlign":true,"lineJoin":true,"miterLimit":true,"textBaseline":true,"fillText":true,"strokeStyle":true,"moveTo":true,"lineTo":true,"lineCap":true,"stroke":true,"setLineDash":true,"ellipse":true,"bezierCurveTo":true,"createLinearGradient":true,"scale":true,"drawImage":true,"getImageData":true,"measureText":true,"translate":true,"rotate":true,"createPattern":true}