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

test: update testing for @idraw/core src/lib/context

Browse source
This commit is contained in:
chenshenhai 2021-09-13 15:31:49 +08:00
parent a9649b2bb5
commit 5f08bd1740
2 changed files with 364 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

219
packages/board/__tests__/lib/__snapshots__/context.test.ts.snap
View file

@ -4,8 +4,8 @@ exports[`@idraw/board: src/lib/context Context 1`] = `
Array [
Object {
"props": Object {
"height": 1600,
"width": 2400,
"height": 1800,
"width": 2000,
"x": 0,
"y": 0,
},
@ -21,8 +21,8 @@ Array [
},
Object {
"props": Object {
"height": 1600,
"width": 2400,
"height": 1800,
"width": 2000,
"x": 0,
"y": 0,
},
@ -38,10 +38,10 @@ Array [
},
Object {
"props": Object {
"height": 480,
"width": 800,
"x": 40,
"y": 40,
"height": 240,
"width": 400,
"x": 20,
"y": 20,
},
"transform": Array [
1,
@ -55,8 +55,25 @@ Array [
},
Object {
"props": Object {
"height": 480,
"width": 800,
"height": 240,
"width": 400,
"x": 160,
"y": 160,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "fillRect",
},
Object {
"props": Object {
"height": 240,
"width": 400,
"x": 320,
"y": 320,
},
@ -72,27 +89,10 @@ Array [
},
Object {
"props": Object {
"height": 480,
"width": 800,
"x": 640,
"y": 640,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "fillRect",
},
Object {
"props": Object {
"height": 400,
"width": 800,
"x": 1560,
"y": 1160,
"height": 200,
"width": 400,
"x": 780,
"y": 580,
},
"transform": Array [
1,
@ -106,3 +106,160 @@ Array [
},
]
`;
exports[`@idraw/board: src/lib/context Context.arc 1`] = `
Array [
Object {
"props": Object {
"fillRule": "nonzero",
"path": Array [
Object {
"props": Object {},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "beginPath",
},
Object {
"props": Object {
"anticlockwise": true,
"endAngle": 6.283185307179586,
"radius": 100,
"startAngle": 0,
"x": 140,
"y": 160,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "arc",
},
],
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "fill",
},
]
`;
exports[`@idraw/board: src/lib/context Context.fill 1`] = `
Array [
Object {
"props": Object {
"fillRule": "nonzero",
"path": Array [
Object {
"props": Object {},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "beginPath",
},
],
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "fill",
},
]
`;
exports[`@idraw/board: src/lib/context Context.fillRect 1`] = `
Array [
Object {
"props": Object {
"height": 1800,
"width": 2000,
"x": 0,
"y": 0,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "fillRect",
},
]
`;
exports[`@idraw/board: src/lib/context Context.rect 1`] = `
Array [
Object {
"props": Object {
"fillRule": "nonzero",
"path": Array [
Object {
"props": Object {},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "beginPath",
},
Object {
"props": Object {
"height": 400,
"width": 200,
"x": 20,
"y": 40,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "rect",
},
],
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "fill",
},
]
`;

185
packages/board/__tests__/lib/context.test.ts
View file

@ -1,15 +1,20 @@
import Context from './../../src/lib/context';
import util from '@idraw/util'
import { getData } from './../data';
const { deepClone } = util.data;
describe('@idraw/board: src/lib/context', () => {
const options = {
width: 600,
height: 400,
contextWidth: 1000,
contextHeight: 900,
devicePixelRatio: 2
}
test('Context', async () => {
const opts = {
width: 600,
height: 400,
contextWidth: 1000,
contextHeight: 900,
devicePixelRatio: 4
}
const opts = deepClone(options);
const canvas = document.createElement('canvas');
canvas.width = opts.contextWidth;
canvas.height = opts.contextHeight;
@ -18,9 +23,9 @@ describe('@idraw/board: src/lib/context', () => {
const ctx = new Context(ctx2d, opts);
const data = getData();
ctx.clearRect(0, 0, opts.width, opts.height);
ctx.clearRect(0, 0, opts.contextWidth, opts.contextHeight);
ctx.setFillStyle('#ffffff');
ctx.fillRect(0, 0, opts.width, opts.height);
ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);
data.elements.forEach(ele => {
ctx.setFillStyle(ele.desc.color);
ctx.fillRect(ele.x, ele.y, ele.w, ele.h);
@ -29,5 +34,167 @@ describe('@idraw/board: src/lib/context', () => {
const calls = ctx2d.__getDrawCalls();
expect(calls).toMatchSnapshot();
});
test('Context.getSize', async () => {
const opts = deepClone(options);
const canvas = document.createElement('canvas');
canvas.width = opts.contextWidth;
canvas.height = opts.contextHeight;
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
const ctx = new Context(ctx2d, opts);
expect(ctx.getSize()).toStrictEqual(opts);
})
test('Context.resetSize', async () => {
const opts = deepClone(options);
const canvas = document.createElement('canvas');
canvas.width = opts.contextWidth;
canvas.height = opts.contextHeight;
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
const newOpts = {
width: 601,
height: 401,
contextWidth: 1001,
contextHeight: 901,
devicePixelRatio: 3,
}
const ctx = new Context(ctx2d, opts);
ctx.resetSize(newOpts);
expect(ctx.getSize()).toStrictEqual(newOpts);
});
test('Context.calcDeviceNum', async () => {
const opts = deepClone(options);
const canvas = document.createElement('canvas');
canvas.width = opts.contextWidth;
canvas.height = opts.contextHeight;
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
const ctx = new Context(ctx2d, opts);
const num = 100;
expect(ctx.calcDeviceNum(num)).toStrictEqual(opts.devicePixelRatio * num);
});
test('Context.calcScreenNum', async () => {
const opts = deepClone(options);
const canvas = document.createElement('canvas');
canvas.width = opts.contextWidth;
canvas.height = opts.contextHeight;
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
const ctx = new Context(ctx2d, opts);
const num = 100;
expect(ctx.calcScreenNum(num)).toStrictEqual(num / opts.devicePixelRatio);
});
test('Context.setTransform', async () => {
const opts = deepClone(options);
const canvas = document.createElement('canvas');
canvas.width = opts.contextWidth;
canvas.height = opts.contextHeight;
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
const ctx = new Context(ctx2d, opts);
const transform = {
scale: 2,
scrollX: 100,
scrollY: -200,
};
ctx.setTransform(deepClone(transform))
expect(ctx.getTransform()).toStrictEqual(deepClone(transform));
});
test('Context.getTransform', async () => {
const opts = deepClone(options);
const canvas = document.createElement('canvas');
canvas.width = opts.contextWidth;
canvas.height = opts.contextHeight;
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
const ctx = new Context(ctx2d, opts);
expect(ctx.getTransform()).toStrictEqual({
scale: 1,
scrollX: 0,
scrollY: 0,
});
});
test('Context.setFillStyle', async () => {
const opts = deepClone(options);
const canvas = document.createElement('canvas');
canvas.width = opts.contextWidth;
canvas.height = opts.contextHeight;
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
const ctx = new Context(ctx2d, opts);
const color = '#f0f0f0';
ctx.setFillStyle(color);
ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);
expect(ctx2d.fillStyle).toStrictEqual(color);
});
test('Context.fill', async () => {
const opts = deepClone(options);
const canvas = document.createElement('canvas');
canvas.width = opts.contextWidth;
canvas.height = opts.contextHeight;
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
const ctx = new Context(ctx2d, opts);
ctx.fill();
// @ts-ignore
const calls = ctx2d.__getDrawCalls();
expect(calls).toMatchSnapshot();
})
test('Context.arc', async () => {
const opts = deepClone(options);
const canvas = document.createElement('canvas');
canvas.width = opts.contextWidth;
canvas.height = opts.contextHeight;
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
const ctx = new Context(ctx2d, opts);
ctx.arc(70, 80, 50, 0, Math.PI * 2, true);
ctx.fill();
// @ts-ignore
const calls = ctx2d.__getDrawCalls();
// console.log('calls =', JSON.stringify(calls, null, 2));
expect(calls).toMatchSnapshot();
})
test('Context.rect', async () => {
const opts = deepClone(options);
const canvas = document.createElement('canvas');
canvas.width = opts.contextWidth;
canvas.height = opts.contextHeight;
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
const ctx = new Context(ctx2d, opts);
ctx.rect(10, 20, 100, 200);
ctx.fill();
// @ts-ignore
const calls = ctx2d.__getDrawCalls();
// console.log('calls =', JSON.stringify(calls, null, 2));
expect(calls).toMatchSnapshot();
})
test('Context.fillRect', async () => {
const opts = deepClone(options);
const canvas = document.createElement('canvas');
canvas.width = opts.contextWidth;
canvas.height = opts.contextHeight;
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
const ctx = new Context(ctx2d, opts);
ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);
// @ts-ignore
const calls = ctx2d.__getDrawCalls();
// console.log('calls =', JSON.stringify(calls, null, 2));
expect(calls).toMatchSnapshot();
// expect(calls).toStrictEqual([
// {
// type: 'fillRect',
// transform: [ 1, 0, 0, 1, 0, 0 ],
// props: { x: 0, y: 0, width: 2000, height: 1800 }
// }
// ]);
})
})