From 4c4913c5aeefa9eb5c1a0d458aacf7f56065c815 Mon Sep 17 00:00:00 2001 From: chenshenhai Date: Wed, 9 Jun 2021 13:21:36 +0800 Subject: [PATCH] chore: update jest testing --- .gitignore | 2 + jest.config.js | 6 +- .../__snapshots__/index.test.ts.snap | 54 +++++++- .../__snapshots__/scale.test.ts.snap | 129 ++++++++++++++++++ .../__snapshots__/scroll.test.ts.snap | 129 ++++++++++++++++++ packages/board/__tests__/data.ts | 49 +++++++ packages/board/__tests__/event._test.ts | 48 +++++++ packages/board/__tests__/index.test.ts | 48 +------ packages/board/__tests__/scale.test.ts | 44 ++++++ packages/board/__tests__/scroll.test.ts | 49 +++++++ packages/board/examples/features/lib/event.js | 12 ++ packages/board/examples/features/test.html | 29 ---- packages/board/examples/scale/index.html | 25 ---- packages/board/examples/scale/main.js | 27 ---- packages/board/src/util/event.ts | 6 +- 15 files changed, 523 insertions(+), 134 deletions(-) create mode 100644 packages/board/__tests__/__snapshots__/scale.test.ts.snap create mode 100644 packages/board/__tests__/__snapshots__/scroll.test.ts.snap create mode 100644 packages/board/__tests__/data.ts create mode 100644 packages/board/__tests__/event._test.ts create mode 100644 packages/board/__tests__/scale.test.ts create mode 100644 packages/board/__tests__/scroll.test.ts delete mode 100644 packages/board/examples/features/test.html delete mode 100644 packages/board/examples/scale/index.html delete mode 100644 packages/board/examples/scale/main.js diff --git a/.gitignore b/.gitignore index bc08c8c..2378928 100644 --- a/.gitignore +++ b/.gitignore @@ -111,3 +111,5 @@ temp/ __tests__/diff # __tests__/snapshot + +reports/ diff --git a/jest.config.js b/jest.config.js index d37fa21..5367198 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,5 +1,5 @@ module.exports = { - // "collectCoverage": true, + "collectCoverage": true, "coverageDirectory": "reports", "collectCoverageFrom": [ "packages/**/src/**/*.ts", @@ -7,7 +7,7 @@ module.exports = { "!**/node_modules/**" ], "coverageReporters": [ - // "clover", + "clover", // "html", "text-summary" ], @@ -25,7 +25,7 @@ module.exports = { "modulePaths": [ "" ], - "testRegex": "(/packages/([^\/]{1,})/__tests__/.*|\\.test)\\.ts$", + "testRegex": "(/packages/([^\/]{1,})/__tests__/.*)\\.test.ts$", "setupFiles": [ "jest-canvas-mock" ] diff --git a/packages/board/__tests__/__snapshots__/index.test.ts.snap b/packages/board/__tests__/__snapshots__/index.test.ts.snap index f6e0470..12f5c8e 100644 --- a/packages/board/__tests__/__snapshots__/index.test.ts.snap +++ b/packages/board/__tests__/__snapshots__/index.test.ts.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`testing 1`] = ` +exports[`@idraw/board: context 1`] = ` Array [ Object { "props": Object { @@ -36,10 +36,35 @@ Array [ ], "type": "clearRect", }, + Object { + "props": Object { + "dHeight": 1600, + "dWidth": 2400, + "dx": 0, + "dy": 0, + "img": , + "sHeight": 1600, + "sWidth": 2400, + "sx": 0, + "sy": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "drawImage", + }, ] `; -exports[`testing 2`] = ` +exports[`@idraw/board: context 2`] = ` Array [ Object { "props": Object { @@ -75,5 +100,30 @@ Array [ ], "type": "clearRect", }, + Object { + "props": Object { + "dHeight": 1600, + "dWidth": 2400, + "dx": 0, + "dy": 0, + "img": , + "sHeight": 1600, + "sWidth": 2400, + "sx": 0, + "sy": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "drawImage", + }, ] `; diff --git a/packages/board/__tests__/__snapshots__/scale.test.ts.snap b/packages/board/__tests__/__snapshots__/scale.test.ts.snap new file mode 100644 index 0000000..3bbddcb --- /dev/null +++ b/packages/board/__tests__/__snapshots__/scale.test.ts.snap @@ -0,0 +1,129 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`@idraw/board: scroll 1`] = ` +Array [ + Object { + "props": Object { + "height": 1600, + "width": 2400, + "x": 0, + "y": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "clearRect", + }, + Object { + "props": Object { + "height": 1600, + "width": 2400, + "x": 0, + "y": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "clearRect", + }, + Object { + "props": Object { + "dHeight": 1600, + "dWidth": 2400, + "dx": 600, + "dy": 400, + "img": , + "sHeight": 1600, + "sWidth": 2400, + "sx": 0, + "sy": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "drawImage", + }, +] +`; + +exports[`@idraw/board: scroll 2`] = ` +Array [ + Object { + "props": Object { + "height": 1600, + "width": 2400, + "x": 0, + "y": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "clearRect", + }, + Object { + "props": Object { + "height": 1600, + "width": 2400, + "x": 0, + "y": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "clearRect", + }, + Object { + "props": Object { + "dHeight": 1600, + "dWidth": 2400, + "dx": 600, + "dy": 400, + "img": , + "sHeight": 1600, + "sWidth": 2400, + "sx": 0, + "sy": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "drawImage", + }, +] +`; diff --git a/packages/board/__tests__/__snapshots__/scroll.test.ts.snap b/packages/board/__tests__/__snapshots__/scroll.test.ts.snap new file mode 100644 index 0000000..d494063 --- /dev/null +++ b/packages/board/__tests__/__snapshots__/scroll.test.ts.snap @@ -0,0 +1,129 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`@idraw/board: scroll 1`] = ` +Array [ + Object { + "props": Object { + "height": 1600, + "width": 2400, + "x": 0, + "y": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "clearRect", + }, + Object { + "props": Object { + "height": 1600, + "width": 2400, + "x": 0, + "y": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "clearRect", + }, + Object { + "props": Object { + "dHeight": 1600, + "dWidth": 2400, + "dx": -2400, + "dy": -1600, + "img": , + "sHeight": 1600, + "sWidth": 2400, + "sx": 0, + "sy": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "drawImage", + }, +] +`; + +exports[`@idraw/board: scroll 2`] = ` +Array [ + Object { + "props": Object { + "height": 1600, + "width": 2400, + "x": 0, + "y": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "clearRect", + }, + Object { + "props": Object { + "height": 1600, + "width": 2400, + "x": 0, + "y": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "clearRect", + }, + Object { + "props": Object { + "dHeight": 1600, + "dWidth": 2400, + "dx": -2400, + "dy": -1600, + "img": , + "sHeight": 1600, + "sWidth": 2400, + "sx": 0, + "sy": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "drawImage", + }, +] +`; diff --git a/packages/board/__tests__/data.ts b/packages/board/__tests__/data.ts new file mode 100644 index 0000000..7b54332 --- /dev/null +++ b/packages/board/__tests__/data.ts @@ -0,0 +1,49 @@ + + +export function getData() { + const data = { + elements: [ + { + x: 10, + y: 10, + w: 200, + h: 120, + type: 'rect', + desc: { + color: '#f0f0f0', + } + }, + { + x: 80, + y: 80, + w: 200, + h: 120, + type: 'rect', + desc: { + color: '#cccccc', + } + }, + { + x: 160, + y: 160, + w: 200, + h: 120, + type: 'rect', + desc: { + color: '#c0c0c0', + } + }, + { + x: 400 - 10, + y: 300 - 10, + w: 200, + h: 100, + type: 'rect', + desc: { + color: '#e0e0e0', + } + } + ] + } + return data; +}; \ No newline at end of file diff --git a/packages/board/__tests__/event._test.ts b/packages/board/__tests__/event._test.ts new file mode 100644 index 0000000..51a1899 --- /dev/null +++ b/packages/board/__tests__/event._test.ts @@ -0,0 +1,48 @@ +// // TODO + +// import Board from '../src'; +// import { getData } from './data'; + +// const opts = { +// width: 600, +// height: 400, +// contextWidth: 600, +// contextHeight: 400, +// devicePixelRatio: 4 +// } + +// test('@idraw/board: event.on("scale")', async () => { +// document.body.innerHTML = ` +//
+// `; +// const mount = document.querySelector('#mount') as HTMLDivElement; +// const board = new Board(mount, opts); + +// const data = await execBoard(board, opts); +// const salceNum = 2 +// expect(data).toBe(salceNum); +// }); + + +// function execBoard(board: Board, opts: any): Promise { +// return new Promise((resolve) => { +// const data = getData(); +// const ctx = board.getContext(); +// board.clear(); +// ctx.clearRect(0, 0, opts.width, opts.height); +// ctx.setFillStyle('#ffffff'); +// ctx.fillRect(0, 0, opts.width, opts.height); +// data.elements.forEach(ele => { +// ctx.setFillStyle(ele.desc.color); +// ctx.fillRect(ele.x, ele.y, ele.w, ele.h); +// }); + +// // board.on('scale', (scaleNum) => { +// // resolve(scaleNum); +// // }) +// board.scale(2); +// board.scrollX(-600); +// board.scrollY(-400); +// board.draw(); +// }) +// } \ No newline at end of file diff --git a/packages/board/__tests__/index.test.ts b/packages/board/__tests__/index.test.ts index 765e57d..293145c 100644 --- a/packages/board/__tests__/index.test.ts +++ b/packages/board/__tests__/index.test.ts @@ -1,6 +1,7 @@ import Board from './../src'; +import { getData } from './data'; -test('testing', async () => { +test('@idraw/board: context', async () => { document.body.innerHTML = `
`; @@ -15,50 +16,7 @@ test('testing', async () => { const board = new Board(mount, opts); const ctx = board.getContext(); - const data = { - elements: [ - { - x: 10, - y: 10, - w: 200, - h: 120, - type: 'rect', - desc: { - color: '#f0f0f0', - } - }, - { - x: 80, - y: 80, - w: 200, - h: 120, - type: 'rect', - desc: { - color: '#cccccc', - } - }, - { - x: 160, - y: 160, - w: 200, - h: 120, - type: 'rect', - desc: { - color: '#c0c0c0', - } - }, - { - x: 400 - 10, - y: 300 - 10, - w: 200, - h: 100, - type: 'rect', - desc: { - color: '#e0e0e0', - } - } - ] - }; + const data = getData(); board.clear(); ctx.clearRect(0, 0, opts.width, opts.height); diff --git a/packages/board/__tests__/scale.test.ts b/packages/board/__tests__/scale.test.ts new file mode 100644 index 0000000..80f274b --- /dev/null +++ b/packages/board/__tests__/scale.test.ts @@ -0,0 +1,44 @@ +import Board from '../src'; +import { getData } from './data'; + +test('@idraw/board: scroll', async () => { + document.body.innerHTML = ` +
+ `; + const opts = { + width: 600, + height: 400, + contextWidth: 600, + contextHeight: 400, + devicePixelRatio: 4 + } + const mount = document.querySelector('#mount') as HTMLDivElement; + const board = new Board(mount, opts); + + const ctx = board.getContext(); + const data = getData(); + + board.clear(); + ctx.clearRect(0, 0, opts.width, opts.height); + ctx.setFillStyle('#ffffff'); + ctx.fillRect(0, 0, opts.width, opts.height); + data.elements.forEach(ele => { + ctx.setFillStyle(ele.desc.color); + ctx.fillRect(ele.x, ele.y, ele.w, ele.h); + }); + + const result = board.scale(0.5); + expect(result).toStrictEqual({"position":{"top":150,"bottom":100,"left":100,"right":150},"size":{"x":75,"y":50,"w":300,"h":200}}) + board.draw(); + + const originCtx = board.getOriginContext(); + // @ts-ignore; + const originCalls = originCtx.__getDrawCalls(); + expect(originCalls).toMatchSnapshot(); + + const displayCtx = board.getDisplayContext(); + // @ts-ignore; + const displayCalls = displayCtx.__getDrawCalls(); + expect(displayCalls).toMatchSnapshot(); + +}); \ No newline at end of file diff --git a/packages/board/__tests__/scroll.test.ts b/packages/board/__tests__/scroll.test.ts new file mode 100644 index 0000000..6fe11e4 --- /dev/null +++ b/packages/board/__tests__/scroll.test.ts @@ -0,0 +1,49 @@ +import Board from '../src'; +import { getData } from './data'; + +test('@idraw/board: scroll', async () => { + document.body.innerHTML = ` +
+ `; + const opts = { + width: 600, + height: 400, + contextWidth: 600, + contextHeight: 400, + devicePixelRatio: 4 + } + const mount = document.querySelector('#mount') as HTMLDivElement; + const board = new Board(mount, opts); + + const ctx = board.getContext(); + const data = getData(); + board.clear(); + ctx.clearRect(0, 0, opts.width, opts.height); + ctx.setFillStyle('#ffffff'); + ctx.fillRect(0, 0, opts.width, opts.height); + data.elements.forEach(ele => { + ctx.setFillStyle(ele.desc.color); + ctx.fillRect(ele.x, ele.y, ele.w, ele.h); + }); + + const resultScale =board.scale(2); + expect(resultScale).toStrictEqual({"position":{"top":0,"bottom":-400,"left":0,"right":-600},"size":{"x":0,"y":0,"w":1200,"h":800}}) + + const resultX =board.scrollX(-600); + expect(resultX).toStrictEqual({"position":{"top":-600,"bottom":-400,"left":0,"right":0},"size":{"x":-1200,"y":0,"w":1200,"h":800}}) + + const resultY =board.scrollY(-400); + expect(resultY).toStrictEqual({"position":{"top":-600,"bottom":0,"left":-400,"right":0},"size":{"x":-1200,"y":-800,"w":1200,"h":800}}) + + board.draw(); + + const originCtx = board.getOriginContext(); + // @ts-ignore; + const originCalls = originCtx.__getDrawCalls(); + expect(originCalls).toMatchSnapshot(); + + const displayCtx = board.getDisplayContext(); + // @ts-ignore; + const displayCalls = displayCtx.__getDrawCalls(); + expect(displayCalls).toMatchSnapshot(); +}); \ No newline at end of file diff --git a/packages/board/examples/features/lib/event.js b/packages/board/examples/features/lib/event.js index 4ffe21e..2343866 100644 --- a/packages/board/examples/features/lib/event.js +++ b/packages/board/examples/features/lib/event.js @@ -21,4 +21,16 @@ export function initEvent(board) { board.on('moveEnd', (p) => { selectIdx = false; }); + + board.on('scale', (num) => { + console.log('on("scale") = ', num); + }); + + board.on('scrollX', (num) => { + console.log('on("scrollX") = ', num); + }); + + board.on('scrollX', (num) => { + console.log('on("scrollX") = ', num); + }); } \ No newline at end of file diff --git a/packages/board/examples/features/test.html b/packages/board/examples/features/test.html deleted file mode 100644 index 3efb8b5..0000000 --- a/packages/board/examples/features/test.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - -
- - - - - \ No newline at end of file diff --git a/packages/board/examples/scale/index.html b/packages/board/examples/scale/index.html deleted file mode 100644 index 364def1..0000000 --- a/packages/board/examples/scale/index.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - -
- - - - - \ No newline at end of file diff --git a/packages/board/examples/scale/main.js b/packages/board/examples/scale/main.js deleted file mode 100644 index 0ae202e..0000000 --- a/packages/board/examples/scale/main.js +++ /dev/null @@ -1,27 +0,0 @@ -const { Board } = window.iDraw; - -const mount = document.querySelector('#mount'); -const board = new Board(mount, { - width: 600, - height: 400, - devicePixelRatio: 4 -}); - -const ctx = board.getContext(); - -ctx.setFillStyle('#f0f0f0'); -ctx.fillRect(10, 10, 200, 120); - -ctx.setFillStyle('#cccccc'); -ctx.fillRect(80, 80, 200, 120); - -ctx.setFillStyle('#c0c0c0'); -ctx.fillRect(160, 160, 200, 120); - -ctx.setFillStyle('#e0e0e0'); -ctx.fillRect(400 - 10, 300 - 10, 200, 100); - -board.draw(); - -board.scale(2); -board.draw(); \ No newline at end of file diff --git a/packages/board/src/util/event.ts b/packages/board/src/util/event.ts index d12bccf..22f6543 100644 --- a/packages/board/src/util/event.ts +++ b/packages/board/src/util/event.ts @@ -5,9 +5,9 @@ export interface TypeBoardEventArgMap { 'move': TypePoint; 'moveStart': TypePoint; 'moveEnd': TypePoint; - 'scale': number; - 'scrollX': number; - 'scrollY': number; + // 'scale': number; + // 'scrollX': number; + // 'scrollY': number; } export interface TypeBoardEvent {