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

chore: init jest testing

Browse source
This commit is contained in:
chenshenhai 2021-06-04 15:22:36 +08:00
parent cc15b9d799
commit 255d188fcb
5 changed files with 257 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
jest.config.js Normal file
View file

@ -0,0 +1,32 @@
module.exports = {
// "collectCoverage": true,
"coverageDirectory": "reports",
"collectCoverageFrom": [
"packages/**/src/**/*.ts",
"!packages/**/node_modules/**",
"!**/node_modules/**"
],
"coverageReporters": [
// "clover",
// "html",
"text-summary"
],
"coverageThreshold": {
"global": {
"branches": 80,
"functions": 80,
"lines": 80,
"statements": 80
}
},
"moduleFileExtensions": [
"js", "ts"
],
"modulePaths": [
"<rootDir>"
],
"testRegex": "(/packages/([^\/]{1,})/__tests__/.*|\\.test)\\.ts$",
"setupFiles": [
"jest-canvas-mock"
]
}

3
package.json
View file

@ -21,9 +21,11 @@
"@babel/preset-typescript": "^7.13.0",
"@microsoft/api-extractor": "^7.13.2",
"@rollup/plugin-node-resolve": "^11.2.1",
"@types/jest": "^26.0.23",
"@typescript-eslint/eslint-plugin": "^4.25.0",
"@typescript-eslint/parser": "^4.25.0",
"babel-jest": "^26.6.3",
"canvas": "^2.8.0",
"chalk": "^4.1.0",
"eslint": "^7.27.0",
"execa": "^5.0.0",
@ -31,6 +33,7 @@
"http-server": "^0.12.3",
"husky": "^6.0.0",
"jest": "^26.6.3",
"jest-canvas-mock": "^2.3.1",
"jimp": "^0.16.1",
"koa-compose": "^4.1.0",
"lerna": "^3.22.1",

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

@ -0,0 +1,129 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`testing 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": 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`] = `
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": 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",
},
]
`;

81
packages/board/__tests__/index.test.ts Normal file
View file

@ -0,0 +1,81 @@
import Board from './../src';
test('testing', async () => {
document.body.innerHTML = `
<div id="mount"></div>
`;
const opts = {
width: 600,
height: 400,
devicePixelRatio: 4
}
const mount = document.querySelector('#mount') as HTMLDivElement;
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',
}
}
]
};
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.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();
});

16
packages/board/src/index.ts
View file

@ -22,6 +22,7 @@ class Board {
private _hasRendered = false;
private _ctx: Context;
private _displayCtx: CanvasRenderingContext2D;
private _originCtx: CanvasRenderingContext2D;
private _scaleRatio = 1;
private _scrollX = 0;
private _scrollY = 0;
@ -33,15 +34,22 @@ class Board {
this._displayCanvas = document.createElement('canvas');
this._mount.appendChild(this._displayCanvas);
this._opts = this._parsePrivateOptions(opts);
const ctx = this._canvas.getContext('2d') as CanvasRenderingContext2D;
const displayCtx = this._displayCanvas.getContext('2d') as CanvasRenderingContext2D;
this._ctx = new Context(ctx, this._opts);
this._displayCtx = displayCtx;
this._originCtx = this._canvas.getContext('2d') as CanvasRenderingContext2D;
this._displayCtx = this._displayCanvas.getContext('2d') as CanvasRenderingContext2D;
this._ctx = new Context(this._originCtx, this._opts);
this._watcher = new Watcher(this._displayCanvas);
this._render();
}
getDisplayContext(): CanvasRenderingContext2D {
return this._displayCtx;
}
getOriginContext(): CanvasRenderingContext2D {
return this._displayCtx;
}
getContext(): Context {
return this._ctx;
}