diff --git a/jest-setup.js b/jest-setup.js index f2427e294..ea672ceb1 100644 --- a/jest-setup.js +++ b/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; }, }); diff --git a/packages/f2/test/context-collect.ts b/packages/f2/test/context-collect.ts new file mode 100644 index 000000000..613c27edb --- /dev/null +++ b/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; diff --git a/packages/f2/test/util.ts b/packages/f2/test/util.ts index 97e74b2ed..82b1648a4 100644 --- a/packages/f2/test/util.ts +++ b/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; }; diff --git a/result.json b/result.json new file mode 100644 index 000000000..392fa40b0 --- /dev/null +++ b/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} \ No newline at end of file