From ea137216bcbb7e9bac2e3f973b3075622af70c5d Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Mon, 13 Sep 2021 18:08:10 +0800 Subject: [PATCH] test: update testing for @idraw/core src/lib/context --- package.json | 1 + .../lib/__snapshots__/context.test.ts.snap | 255 +++++++++++++++++- packages/board/__tests__/lib/context.test.ts | 197 +++++++++++++- 3 files changed, 447 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index b674fde..c4dbdc3 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "init:cnpm": "lerna bootstrap --npm-client=cnpm", "clear": "rm -rf ./packages/*/dist/ & rm -rf ./packages/*/node_modules/", "jest": "jest --config jest.config.js", + "jest:update": "jest --update-snapshot --config jest.config.js", "cover": "jest --config jest.cover.js", "beforetest": "lerna bootstrap --no-ci && npm run build", "test": "npm run e2e && npm run jest", diff --git a/packages/board/__tests__/lib/__snapshots__/context.test.ts.snap b/packages/board/__tests__/lib/__snapshots__/context.test.ts.snap index db74529..4e880fc 100644 --- a/packages/board/__tests__/lib/__snapshots__/context.test.ts.snap +++ b/packages/board/__tests__/lib/__snapshots__/context.test.ts.snap @@ -159,6 +159,157 @@ Array [ ] `; +exports[`@idraw/board: src/lib/context Context.arcTo 1`] = ` +Array [ + Object { + "props": Object { + "fillRule": "nonzero", + "path": Array [ + Object { + "props": Object {}, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "beginPath", + }, + Object { + "props": Object { + "cpx1": 100, + "cpx2": 200, + "cpy1": 100, + "cpy2": 200, + "radius": 12.566370614359172, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "arcTo", + }, + ], + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "fill", + }, +] +`; + +exports[`@idraw/board: src/lib/context Context.beginPath 1`] = ` +Array [ + Object { + "props": Object { + "fillRule": "nonzero", + "path": Array [ + Object { + "props": Object {}, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "beginPath", + }, + ], + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "fill", + }, +] +`; + +exports[`@idraw/board: src/lib/context Context.clearRect 1`] = ` +Array [ + Object { + "props": Object { + "height": 1800, + "width": 2000, + "x": 0, + "y": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "clearRect", + }, +] +`; + +exports[`@idraw/board: src/lib/context Context.closePath 1`] = ` +Array [ + Object { + "props": Object { + "fillRule": "nonzero", + "path": Array [ + Object { + "props": Object {}, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "beginPath", + }, + Object { + "props": Object {}, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "closePath", + }, + ], + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "fill", + }, +] +`; + exports[`@idraw/board: src/lib/context Context.fill 1`] = ` Array [ Object { @@ -196,10 +347,10 @@ exports[`@idraw/board: src/lib/context Context.fillRect 1`] = ` Array [ Object { "props": Object { - "height": 1800, - "width": 2000, - "x": 0, - "y": 0, + "height": 200, + "width": 160, + "x": 20, + "y": 40, }, "transform": Array [ 1, @@ -214,6 +365,102 @@ Array [ ] `; +exports[`@idraw/board: src/lib/context Context.lineTo 1`] = ` +Array [ + Object { + "props": Object { + "fillRule": "nonzero", + "path": Array [ + Object { + "props": Object {}, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "beginPath", + }, + Object { + "props": Object { + "x": 20, + "y": 40, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "lineTo", + }, + ], + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "fill", + }, +] +`; + +exports[`@idraw/board: src/lib/context Context.moveTo 1`] = ` +Array [ + Object { + "props": Object { + "fillRule": "nonzero", + "path": Array [ + Object { + "props": Object {}, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "beginPath", + }, + Object { + "props": Object { + "x": 20, + "y": 40, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "moveTo", + }, + ], + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "fill", + }, +] +`; + exports[`@idraw/board: src/lib/context Context.rect 1`] = ` Array [ Object { diff --git a/packages/board/__tests__/lib/context.test.ts b/packages/board/__tests__/lib/context.test.ts index a9212df..c6863f4 100644 --- a/packages/board/__tests__/lib/context.test.ts +++ b/packages/board/__tests__/lib/context.test.ts @@ -174,7 +174,6 @@ describe('@idraw/board: src/lib/context', () => { expect(calls).toMatchSnapshot(); }) - test('Context.fillRect', async () => { const opts = deepClone(options); const canvas = document.createElement('canvas'); @@ -182,7 +181,7 @@ describe('@idraw/board: src/lib/context', () => { canvas.height = opts.contextHeight; const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; const ctx = new Context(ctx2d, opts); - ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight); + ctx.fillRect(10, 20, 80, 100); // @ts-ignore const calls = ctx2d.__getDrawCalls(); // console.log('calls =', JSON.stringify(calls, null, 2)); @@ -195,6 +194,200 @@ describe('@idraw/board: src/lib/context', () => { // } // ]); }) + + test('Context.clearRect', async () => { + const opts = deepClone(options); + const canvas = document.createElement('canvas'); + canvas.width = opts.contextWidth; + canvas.height = opts.contextHeight; + const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + const ctx = new Context(ctx2d, opts); + ctx.clearRect(0, 0, opts.contextWidth, opts.contextHeight); + // @ts-ignore + const calls = ctx2d.__getDrawCalls(); + // console.log('calls =', JSON.stringify(calls, null, 2)); + expect(calls).toMatchSnapshot(); + }) + + test('Context.beginPath', async () => { + const opts = deepClone(options); + const canvas = document.createElement('canvas'); + canvas.width = opts.contextWidth; + canvas.height = opts.contextHeight; + const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + const ctx = new Context(ctx2d, opts); + ctx.beginPath(); + ctx.fill(); + // @ts-ignore + const calls = ctx2d.__getDrawCalls(); + // console.log('calls =', JSON.stringify(calls, null, 2)); + expect(calls).toMatchSnapshot(); + }) + + + test('Context.closePath', async () => { + const opts = deepClone(options); + const canvas = document.createElement('canvas'); + canvas.width = opts.contextWidth; + canvas.height = opts.contextHeight; + const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + const ctx = new Context(ctx2d, opts); + ctx.closePath(); + ctx.fill(); + // @ts-ignore + const calls = ctx2d.__getDrawCalls(); + // console.log('calls =', JSON.stringify(calls, null, 2)); + expect(calls).toMatchSnapshot(); + }) + + test('Context.lineTo', async () => { + const opts = deepClone(options); + const canvas = document.createElement('canvas'); + canvas.width = opts.contextWidth; + canvas.height = opts.contextHeight; + const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + const ctx = new Context(ctx2d, opts); + ctx.lineTo(10, 20); + ctx.fill(); + // @ts-ignore + const calls = ctx2d.__getDrawCalls(); + // console.log('calls =', JSON.stringify(calls, null, 2)); + expect(calls).toMatchSnapshot(); + }) + + test('Context.moveTo', async () => { + const opts = deepClone(options); + const canvas = document.createElement('canvas'); + canvas.width = opts.contextWidth; + canvas.height = opts.contextHeight; + const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + const ctx = new Context(ctx2d, opts); + ctx.moveTo(10, 20); + ctx.fill(); + // @ts-ignore + const calls = ctx2d.__getDrawCalls(); + // console.log('calls =', JSON.stringify(calls, null, 2)); + expect(calls).toMatchSnapshot(); + }); + + test('Context.arcTo', async () => { + const opts = deepClone(options); + const canvas = document.createElement('canvas'); + canvas.width = opts.contextWidth; + canvas.height = opts.contextHeight; + const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + const ctx = new Context(ctx2d, opts); + ctx.arcTo(50, 50, 100, 100, Math.PI * 2); + ctx.fill(); + // @ts-ignore + const calls = ctx2d.__getDrawCalls(); + // console.log('calls =', JSON.stringify(calls, null, 2)); + expect(calls).toMatchSnapshot(); + }); + + test('Context.setLineWidth', async () => { + const opts = deepClone(options); + const canvas = document.createElement('canvas'); + canvas.width = opts.contextWidth; + canvas.height = opts.contextHeight; + const lineWidth = 12; + const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + const ctx = new Context(ctx2d, opts); + ctx.setLineWidth(lineWidth); + expect(ctx2d.lineWidth).toStrictEqual(lineWidth * opts.devicePixelRatio); + }); + + test('Context.setLineDash', async () => { + const opts = deepClone(options); + const canvas = document.createElement('canvas'); + canvas.width = opts.contextWidth; + canvas.height = opts.contextHeight; + const lineDash = [10, 20]; + const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + const ctx = new Context(ctx2d, opts); + ctx.setLineDash(lineDash); + // @ts-ignore + // const calls = ctx2d.__getDrawCalls(); + // console.log('calls =', JSON.stringify(calls, null, 2)); + // expect(calls).toMatchSnapshot(); + expect(ctx2d.getLineDash()).toStrictEqual(lineDash.map(n => n * opts.devicePixelRatio)); + }); + + + test('Context.setStrokeStyle', async () => { + const opts = deepClone(options); + const canvas = document.createElement('canvas'); + canvas.width = opts.contextWidth; + canvas.height = opts.contextHeight; + const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + const ctx = new Context(ctx2d, opts); + const color = '#f0f0f0'; + ctx.setStrokeStyle(color); + ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight); + expect(ctx2d.strokeStyle).toStrictEqual(color); + }); + + // test('Context.isPointInPath', async () => { + // const opts = deepClone(options); + // const canvas = document.createElement('canvas'); + // canvas.width = opts.contextWidth; + // canvas.height = opts.contextHeight; + // // const lineDash = [10, 20]; + // const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + // const ctx = new Context(ctx2d, opts); + // const x = 50; + // const y = 50; + // const w = 50; + // const h = 50; + + // ctx.beginPath(); + // ctx.moveTo(x, y); + // ctx.lineTo(x + w, y); + // ctx.lineTo(x + w, y + h); + // ctx.lineTo(x, y + h); + // ctx.lineTo(x, y); + // ctx.closePath(); + + // // @ts-ignore + // const calls = ctx2d.__getDrawCalls(); + // console.log('calls =', calls); + // // expect(calls).toMatchSnapshot(); + // console.log('ctx.isPointInPath(51, 51) =', ctx.isPointInPath(60, 60)) + // expect(ctx.isPointInPath(51, 51)) + // .toStrictEqual(ctx2d.isPointInPath(60 * opts.devicePixelRatio, 60 * opts.devicePixelRatio)); + // }); + + // test('Context.isPointInPathWithoutScroll', async () => { + // const opts = deepClone(options); + // const canvas = document.createElement('canvas'); + // canvas.width = opts.contextWidth; + // canvas.height = opts.contextHeight; + // // const lineDash = [10, 20]; + // const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + // const ctx = new Context(ctx2d, opts); + + // ctx.setTransform({ + // scale: 2, + // scrollX: 10, + // scrollY: 10, + // }) + + // ctx.beginPath(); + // ctx.rect(50, 50, 100, 100); + // ctx.closePath(); + // // @ts-ignore + // const calls = ctx2d.__getDrawCalls(); + // // expect(calls).toMatchSnapshot(); + // console.log('ctx.isPointInPathWithoutScroll(51, 51) =', ctx.isPointInPathWithoutScroll(51, 51)) + // expect(ctx.isPointInPathWithoutScroll(51, 51)) + // .toStrictEqual( + // ctx2d.isPointInPath( + // 60 * opts.devicePixelRatio, + // 60 * opts.devicePixelRatio + // ) + // ); + // }); + })