chore: add packages/board/__tests__/other-api.test.ts

This commit is contained in:
chenshenhai 2021-08-13 23:24:36 +08:00
parent 4d7b5e4067
commit a8e7ddbeac
2 changed files with 192 additions and 0 deletions

View 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",
},
]
`;

View 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 });
});
});