mirror of
https://github.com/idrawjs/idraw
synced 2026-05-24 10:08:34 +00:00
chore: update jest testing
This commit is contained in:
chenshenhai
parent
4361a2812f
commit
94919142ce
2 changed files with 762 additions and 0 deletions
705
packages/board/__tests__/__snapshots__/wheel.test.ts.snap
Normal file
705
packages/board/__tests__/__snapshots__/wheel.test.ts.snap
Normal file
|
|
@ -0,0 +1,705 @@
|
|||
// 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": <canvas
|
||||
height="1600"
|
||||
width="2400"
|
||||
/>,
|
||||
"sHeight": 1600,
|
||||
"sWidth": 2400,
|
||||
"sx": 0,
|
||||
"sy": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "drawImage",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 80,
|
||||
"width": 2400,
|
||||
"x": 0,
|
||||
"y": 1520,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "fillRect",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"fillRule": "nonzero",
|
||||
"path": Array [
|
||||
Object {
|
||||
"props": Object {},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "beginPath",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"x": 2240,
|
||||
"y": 1520,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "moveTo",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"cpx1": 2400,
|
||||
"cpx2": 2400,
|
||||
"cpy1": 1520,
|
||||
"cpy2": 1600,
|
||||
"radius": 40,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "arcTo",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"cpx1": 2400,
|
||||
"cpx2": 2200,
|
||||
"cpy1": 1600,
|
||||
"cpy2": 1600,
|
||||
"radius": 40,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "arcTo",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"cpx1": 2200,
|
||||
"cpx2": 2200,
|
||||
"cpy1": 1600,
|
||||
"cpy2": 1520,
|
||||
"radius": 40,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "arcTo",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"cpx1": 2200,
|
||||
"cpx2": 2400,
|
||||
"cpy1": 1520,
|
||||
"cpy2": 1520,
|
||||
"radius": 40,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "arcTo",
|
||||
},
|
||||
Object {
|
||||
"props": Object {},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "closePath",
|
||||
},
|
||||
],
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "fill",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 1600,
|
||||
"width": 80,
|
||||
"x": 2320,
|
||||
"y": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "fillRect",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"fillRule": "nonzero",
|
||||
"path": Array [
|
||||
Object {
|
||||
"props": Object {},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "beginPath",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"x": 2360,
|
||||
"y": 1400,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "moveTo",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"cpx1": 2400,
|
||||
"cpx2": 2400,
|
||||
"cpy1": 1400,
|
||||
"cpy2": 1600,
|
||||
"radius": 40,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "arcTo",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"cpx1": 2400,
|
||||
"cpx2": 2320,
|
||||
"cpy1": 1600,
|
||||
"cpy2": 1600,
|
||||
"radius": 40,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "arcTo",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"cpx1": 2320,
|
||||
"cpx2": 2320,
|
||||
"cpy1": 1600,
|
||||
"cpy2": 1400,
|
||||
"radius": 40,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "arcTo",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"cpx1": 2320,
|
||||
"cpx2": 2400,
|
||||
"cpy1": 1400,
|
||||
"cpy2": 1400,
|
||||
"radius": 40,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "arcTo",
|
||||
},
|
||||
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 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": <canvas
|
||||
height="1600"
|
||||
width="2400"
|
||||
/>,
|
||||
"sHeight": 1600,
|
||||
"sWidth": 2400,
|
||||
"sx": 0,
|
||||
"sy": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "drawImage",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 80,
|
||||
"width": 2400,
|
||||
"x": 0,
|
||||
"y": 1520,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "fillRect",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"fillRule": "nonzero",
|
||||
"path": Array [
|
||||
Object {
|
||||
"props": Object {},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "beginPath",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"x": 2240,
|
||||
"y": 1520,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "moveTo",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"cpx1": 2400,
|
||||
"cpx2": 2400,
|
||||
"cpy1": 1520,
|
||||
"cpy2": 1600,
|
||||
"radius": 40,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "arcTo",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"cpx1": 2400,
|
||||
"cpx2": 2200,
|
||||
"cpy1": 1600,
|
||||
"cpy2": 1600,
|
||||
"radius": 40,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "arcTo",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"cpx1": 2200,
|
||||
"cpx2": 2200,
|
||||
"cpy1": 1600,
|
||||
"cpy2": 1520,
|
||||
"radius": 40,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "arcTo",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"cpx1": 2200,
|
||||
"cpx2": 2400,
|
||||
"cpy1": 1520,
|
||||
"cpy2": 1520,
|
||||
"radius": 40,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "arcTo",
|
||||
},
|
||||
Object {
|
||||
"props": Object {},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "closePath",
|
||||
},
|
||||
],
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "fill",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"height": 1600,
|
||||
"width": 80,
|
||||
"x": 2320,
|
||||
"y": 0,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "fillRect",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"fillRule": "nonzero",
|
||||
"path": Array [
|
||||
Object {
|
||||
"props": Object {},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "beginPath",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"x": 2360,
|
||||
"y": 1400,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "moveTo",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"cpx1": 2400,
|
||||
"cpx2": 2400,
|
||||
"cpy1": 1400,
|
||||
"cpy2": 1600,
|
||||
"radius": 40,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "arcTo",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"cpx1": 2400,
|
||||
"cpx2": 2320,
|
||||
"cpy1": 1600,
|
||||
"cpy2": 1600,
|
||||
"radius": 40,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "arcTo",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"cpx1": 2320,
|
||||
"cpx2": 2320,
|
||||
"cpy1": 1600,
|
||||
"cpy2": 1400,
|
||||
"radius": 40,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "arcTo",
|
||||
},
|
||||
Object {
|
||||
"props": Object {
|
||||
"cpx1": 2320,
|
||||
"cpx2": 2400,
|
||||
"cpy1": 1400,
|
||||
"cpy2": 1400,
|
||||
"radius": 40,
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "arcTo",
|
||||
},
|
||||
Object {
|
||||
"props": Object {},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "closePath",
|
||||
},
|
||||
],
|
||||
},
|
||||
"transform": Array [
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
],
|
||||
"type": "fill",
|
||||
},
|
||||
]
|
||||
`;
|
||||
57
packages/board/__tests__/wheel.test.ts
Normal file
57
packages/board/__tests__/wheel.test.ts
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import Board from '../src';
|
||||
import { getData } from './data';
|
||||
|
||||
describe('@idraw/board', () => {
|
||||
test('scroll', async () => {
|
||||
document.body.innerHTML = `
|
||||
<div id="mount"></div>
|
||||
`;
|
||||
const opts = {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 600,
|
||||
contextHeight: 400,
|
||||
devicePixelRatio: 4,
|
||||
canScroll: true,
|
||||
scrollConfig: {
|
||||
lineWidth: 20,
|
||||
color: '#666666'
|
||||
}
|
||||
}
|
||||
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":0,"bottom":-400,"left":-600,"right":0},"size":{"x":-1200,"y":0,"w":1200,"h":800}})
|
||||
|
||||
const resultY =board.scrollY(-400);
|
||||
expect(resultY).toStrictEqual({"position":{"top":-400,"bottom":0,"left":-600,"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();
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in a new issue