Elgato_dark/idraw
1
0
Fork 0
mirror of https://github.com/idrawjs/idraw synced 2026-05-24 10:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: update jest testing

Browse source
This commit is contained in:
chenshenhai 2021-06-09 13:21:36 +08:00
parent d61a6c9cf5
commit 4c4913c5ae
15 changed files with 523 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -111,3 +111,5 @@ temp/
__tests__/diff
# __tests__/snapshot
reports/

6
jest.config.js
View file

@ -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": [
"<rootDir>"
],
"testRegex": "(/packages/([^\/]{1,})/__tests__/.*|\\.test)\\.ts$",
"testRegex": "(/packages/([^\/]{1,})/__tests__/.*)\\.test.ts$",
"setupFiles": [
"jest-canvas-mock"
]

54
packages/board/__tests__/__snapshots__/index.test.ts.snap
View file

@ -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": <canvas
height="1600"
width="2400"
/>,
"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": <canvas
height="1600"
width="2400"
/>,
"sHeight": 1600,
"sWidth": 2400,
"sx": 0,
"sy": 0,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "drawImage",
},
]
`;

129
packages/board/__tests__/__snapshots__/scale.test.ts.snap Normal file
View file

@ -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": <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: 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": <canvas
height="1600"
width="2400"
/>,
"sHeight": 1600,
"sWidth": 2400,
"sx": 0,
"sy": 0,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "drawImage",
},
]
`;

129
packages/board/__tests__/__snapshots__/scroll.test.ts.snap Normal file
View file

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

49
packages/board/__tests__/data.ts Normal file
View file

@ -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;
};

48
packages/board/__tests__/event._test.ts Normal file
View file

@ -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 = `
// <div id="mount"></div>
// `;
// 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<any> {
// 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();
// })
// }

48
packages/board/__tests__/index.test.ts
View file

@ -1,6 +1,7 @@
import Board from './../src';
import { getData } from './data';
test('testing', async () => {
test('@idraw/board: context', async () => {
document.body.innerHTML = `
<div id="mount"></div>
`;
@ -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);

44
packages/board/__tests__/scale.test.ts Normal file
View file

@ -0,0 +1,44 @@
import Board from '../src';
import { getData } from './data';
test('@idraw/board: scroll', async () => {
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);
});
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();
});

49
packages/board/__tests__/scroll.test.ts Normal file
View file

@ -0,0 +1,49 @@
import Board from '../src';
import { getData } from './data';
test('@idraw/board: scroll', async () => {
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);
});
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();
});

12
packages/board/examples/features/lib/event.js
View file

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

29
packages/board/examples/features/test.html
View file

@ -1,29 +0,0 @@
<html>
<head>
<style></style>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
html,body {
margin: 0;
padding: 0;
}
#mount canvas {
border-right: 1px solid #aaaaaa40;
border-bottom: 1px solid #aaaaaa40;
background-image:
linear-gradient(#aaaaaa40 1px, transparent 0),
linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
linear-gradient(#aaa 1px, transparent 0),
linear-gradient(90deg, #aaa 1px, transparent 0);
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
}
</style>
</head>
<body>
<div id="mount"></div>
<script src="./../../dist/index.global.js"></script>
<script type="module" src="./main.js"></script>
</body>
</html>

25
packages/board/examples/scale/index.html
View file

@ -1,25 +0,0 @@
<html>
<head>
<style></style>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
#mount canvas {
border-right: 1px solid #aaaaaa40;
border-bottom: 1px solid #aaaaaa40;
background-image:
linear-gradient(#aaaaaa40 1px, transparent 0),
linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
linear-gradient(#aaa 1px, transparent 0),
linear-gradient(90deg, #aaa 1px, transparent 0);
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
}
</style>
</head>
<body>
<div id="mount"></div>
<script src="./../../dist/index.global.js"></script>
<script src="./main.js"></script>
</body>
</html>

27
packages/board/examples/scale/main.js
View file

@ -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();

6
packages/board/src/util/event.ts
View file

@ -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 {