mirror of
https://github.com/idrawjs/idraw
synced 2026-05-24 10:08:34 +00:00
chore: add packages/board/__tests__/other-api.test.ts
This commit is contained in:
parent
4d7b5e4067
commit
a8e7ddbeac
2 changed files with 192 additions and 0 deletions
129
packages/board/__tests__/__snapshots__/other-api.test.ts.snap
Normal file
129
packages/board/__tests__/__snapshots__/other-api.test.ts.snap
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`@idraw/board getTransform 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",
|
||||
},
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`@idraw/board getTransform 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",
|
||||
},
|
||||
]
|
||||
`;
|
||||
63
packages/board/__tests__/other-api.test.ts
Normal file
63
packages/board/__tests__/other-api.test.ts
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
import Board from '../src';
|
||||
import { getData } from './data';
|
||||
|
||||
describe('@idraw/board', () => {
|
||||
|
||||
|
||||
document.body.innerHTML = `
|
||||
<div id="mount"></div>
|
||||
`;
|
||||
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);
|
||||
});
|
||||
|
||||
test('getTransform', async () => {
|
||||
|
||||
|
||||
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();
|
||||
|
||||
|
||||
const transform = board.getTransform();
|
||||
expect(transform).toStrictEqual({ scale: 2, scrollX: -600, scrollY: -400 });
|
||||
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
Loading…
Reference in a new issue