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: update jest testing

Browse source
This commit is contained in:
chenshenhai 2021-06-09 17:35:54 +08:00
parent 63ddf79cc7
commit 2cfc27bc6b
14 changed files with 666 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/core/__tests__/polyfill/image.ts → __tests__/polyfill/image.ts
View file

@ -3,7 +3,10 @@ window.Image = class {
constructor() {
setTimeout(() => {
// @ts-ignore
this.onload();
if (typeof this.onload === 'function') {
// @ts-ignore
this.onload();
}
}, 50);
}
}

0
packages/core/__tests__/polyfill/mock-test.ts → __tests__/polyfill/mock-test.ts
View file

0
packages/core/__tests__/polyfill/requestanimateframe.ts → __tests__/polyfill/requestanimateframe.ts
View file

189
packages/core/__tests__/__snapshots__/move.test.ts.snap Normal file
View file

@ -0,0 +1,189 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`@idraw/core moveDownElement 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 {
"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[`@idraw/core moveDownElement 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 {
"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[`@idraw/core moveUpElement 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 {
"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[`@idraw/core moveUpElement 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 {
"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",
},
]
`;

5
packages/core/__tests__/index.test.ts
View file

@ -1,9 +1,10 @@
import { requestAnimationFrameMock } from './polyfill/requestanimateframe';
import './polyfill/image';
import { requestAnimationFrameMock } from './../../../__tests__/polyfill/requestanimateframe';
import './../../../__tests__/polyfill/image';
import Core from './../src';
import { getData } from './data';
describe("@idraw/core", () => {
beforeEach(() => {

87
packages/core/__tests__/move.test.ts Normal file
View file

@ -0,0 +1,87 @@
import { requestAnimationFrameMock } from '../../../__tests__/polyfill/requestanimateframe';
import '../../../__tests__/polyfill/image';
import IDraw from '../src';
import { getData } from './data';
function delay(time: number): Promise<void> {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, time)
});
}
describe("@idraw/core", () => {
beforeEach(() => {
requestAnimationFrameMock.reset();
})
test('moveDownElement', 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 idraw = new IDraw(mount, opts);
const data = getData();
idraw.initData(data);
idraw.draw();
idraw.moveUpElement('image-003');
requestAnimationFrameMock.triggerNextAnimationFrame();
const originCtx = idraw.__getOriginContext();
// @ts-ignore;
const originCalls = originCtx.__getDrawCalls();
expect(originCalls).toMatchSnapshot();
const displayCtx = idraw.__getDisplayContext();
// @ts-ignore;
const displayCalls = displayCtx.__getDrawCalls();
expect(displayCalls).toMatchSnapshot();
});
test('moveUpElement', 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 idraw = new IDraw(mount, opts);
const data = getData();
idraw.initData(data);
idraw.draw();
idraw.moveDownElement('image-003');
requestAnimationFrameMock.triggerNextAnimationFrame();
const originCtx = idraw.__getOriginContext();
// @ts-ignore;
const originCalls = originCtx.__getDrawCalls();
expect(originCalls).toMatchSnapshot();
const displayCtx = idraw.__getDisplayContext();
// @ts-ignore;
const displayCalls = displayCtx.__getDrawCalls();
expect(displayCalls).toMatchSnapshot();
});
});

10
packages/core/src/index.ts
View file

@ -106,6 +106,7 @@ class Core {
this[_data].elements[index] = this[_data].elements[index + 1];
this[_data].elements[index + 1] = temp;
}
this._emitChangeData();
this.draw();
}
@ -116,24 +117,25 @@ class Core {
this[_data].elements[index] = this[_data].elements[index - 1];
this[_data].elements[index - 1] = temp;
}
this._emitChangeData();
this.draw();
}
scale(ratio: number): TypeScreenContext {
const screen = this[_board].scale(ratio);
this. _emitChangeScreen();
this._emitChangeScreen();
return screen;
}
scrollX(x: number): TypeScreenContext {
const screen = this[_board].scrollX(x);
this. _emitChangeScreen();
this._emitChangeScreen();
return screen;
}
scrollY(y: number): TypeScreenContext {
const screen = this[_board].scrollY(y);
this. _emitChangeScreen();
this._emitChangeScreen();
return screen;
}
@ -227,7 +229,7 @@ class Core {
'screenSelectElement',
{ index, uuid, element: deepClone(this[_data].elements?.[index])}
);
this. _emitChangeScreen();
this._emitChangeScreen();
}
}
this.draw();

6
packages/core/src/lib/renderer.ts
View file

@ -28,13 +28,13 @@ export class Renderer {
});
// TODO
this._loader.on('load', (res) => {
console.log('load: ', res);
// console.log('load: ', res);
});
this._loader.on('error', (res) => {
console.log('error: ', res);
// console.log('error: ', res);
});
this._loader.on('complete', (res) => {
console.log('complete: ', res);
// console.log('complete: ', res);
})
}

189
packages/idraw/__tests__/__snapshots__/index.test.ts.snap Normal file
View file

@ -0,0 +1,189 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`idraw context 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 {
"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[`idraw context 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 {
"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[`idraw undo/redo 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 {
"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[`idraw undo/redo 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 {
"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",
},
]
`;

62
packages/idraw/__tests__/data.ts Normal file
View file

File diff suppressed because one or more lines are too long

98
packages/idraw/__tests__/index.test.ts Normal file
View file

@ -0,0 +1,98 @@
import { requestAnimationFrameMock } from './../../../__tests__/polyfill/requestanimateframe';
import './../../../__tests__/polyfill/image';
import IDraw from './../src';
import { getData } from './data';
function delay(time: number): Promise<void> {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, time)
});
}
describe("idraw", () => {
beforeEach(() => {
requestAnimationFrameMock.reset();
})
test('context', 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 idraw = new IDraw(mount, opts);
const data = getData();
idraw.initData(data);
idraw.draw();
requestAnimationFrameMock.triggerNextAnimationFrame();
const originCtx = idraw.__getOriginContext();
// @ts-ignore;
const originCalls = originCtx.__getDrawCalls();
expect(originCalls).toMatchSnapshot();
const displayCtx = idraw.__getDisplayContext();
// @ts-ignore;
const displayCalls = displayCtx.__getDrawCalls();
expect(displayCalls).toMatchSnapshot();
});
test('undo/redo', 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 idraw = new IDraw(mount, opts);
const data = getData();
idraw.initData(data);
idraw.draw();
idraw.moveDownElement('svg-004');
idraw.moveDownElement('image-003');
await delay(10);
const undo1 = idraw.undo();
expect(undo1).toBe(2);
const undo2 = idraw.undo();
expect(undo2).toBe(1);
const redo1 = idraw.redo();
expect(redo1).toBe(1);
idraw.moveDownElement('image-003');
const redo2 = idraw.redo();
expect(redo2).toBe(0);
requestAnimationFrameMock.triggerNextAnimationFrame();
const originCtx = idraw.__getOriginContext();
// @ts-ignore;
const originCalls = originCtx.__getDrawCalls();
expect(originCalls).toMatchSnapshot();
const displayCtx = idraw.__getDisplayContext();
// @ts-ignore;
const displayCalls = displayCtx.__getDrawCalls();
expect(displayCalls).toMatchSnapshot();
});
});

3
packages/idraw/examples/index.html
View file

@ -17,6 +17,9 @@
<div class="elem-menu-btn" id="elem-undo">
Undo
</div>
<div class="elem-menu-btn" id="elem-redo">
Redo
</div>
</div>
</div>
</div>

21
packages/idraw/examples/lib/action.js
View file

@ -1,12 +1,23 @@
const undo = document.querySelector('#elem-undo');
const redo = document.querySelector('#elem-redo');
let hasInited = false;
export function doAction(idraw) {
if (hasInited === true) return;
if (!undo) return;
undo.addEventListener('click', () => {
idraw.undo();
})
if (undo) {
undo.addEventListener('click', () => {
const result = idraw.undo();
console.log('undo: ', result);
})
}
if (redo) {
redo.addEventListener('click', () => {
const result = idraw.redo();
console.log('redo: ', result);
})
}
hasInited = true;
}

12
packages/idraw/src/index.ts
View file

@ -31,21 +31,21 @@ class IDraw extends Core {
private [_unDoRecords]: Record[] = [];
private [_hasInited] = false;
constructor(mount: HTMLDivElement, opts: Options, config: TypeConfig) {
constructor(mount: HTMLDivElement, opts: Options, config?: TypeConfig) {
super(mount, {
width: opts.width,
height: opts.height,
contextWidth: opts.contextWidth,
contextHeight: opts.contextHeight,
devicePixelRatio: opts.devicePixelRatio
}, config);
}, config || {});
this[_opts] = this._createOpts(opts);
this[_initEvent]();
}
undo() {
if (!(this[_doRecords].length > 1)) {
return;
return this[_doRecords].length;
}
const popRecord = this[_doRecords].pop();
if (popRecord) {
@ -60,10 +60,10 @@ class IDraw extends Core {
}
redo() {
if (!(this[_unDoRecords].length > 1)) {
return;
if (!(this[_unDoRecords].length > 0)) {
return this[_unDoRecords].length;
}
const record = this[_doRecords].pop();
const record = this[_unDoRecords].pop();
if (record?.data) {
this.setData(record.data);
this.draw();