Elgato_dark/idraw
1
0
Fork 0
mirror of https://github.com/idrawjs/idraw synced 2026-05-23 17:48:23 +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 18:08:10 +08:00
parent 5f08bd1740
commit ea137216bc
3 changed files with 447 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -12,6 +12,7 @@
"init:cnpm": "lerna bootstrap --npm-client=cnpm",
"clear": "rm -rf ./packages/*/dist/ & rm -rf ./packages/*/node_modules/",
"jest": "jest --config jest.config.js",
"jest:update": "jest --update-snapshot --config jest.config.js",
"cover": "jest --config jest.cover.js",
"beforetest": "lerna bootstrap --no-ci && npm run build",
"test": "npm run e2e && npm run jest",

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

@ -159,6 +159,157 @@ Array [
]
`;
exports[`@idraw/board: src/lib/context Context.arcTo 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 {
"cpx1": 100,
"cpx2": 200,
"cpy1": 100,
"cpy2": 200,
"radius": 12.566370614359172,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "arcTo",
},
],
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "fill",
},
]
`;
exports[`@idraw/board: src/lib/context Context.beginPath 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.clearRect 1`] = `
Array [
Object {
"props": Object {
"height": 1800,
"width": 2000,
"x": 0,
"y": 0,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "clearRect",
},
]
`;
exports[`@idraw/board: src/lib/context Context.closePath 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 {},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "closePath",
},
],
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "fill",
},
]
`;
exports[`@idraw/board: src/lib/context Context.fill 1`] = `
Array [
Object {
@ -196,10 +347,10 @@ exports[`@idraw/board: src/lib/context Context.fillRect 1`] = `
Array [
Object {
"props": Object {
"height": 1800,
"width": 2000,
"x": 0,
"y": 0,
"height": 200,
"width": 160,
"x": 20,
"y": 40,
},
"transform": Array [
1,
@ -214,6 +365,102 @@ Array [
]
`;
exports[`@idraw/board: src/lib/context Context.lineTo 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 {
"x": 20,
"y": 40,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "lineTo",
},
],
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "fill",
},
]
`;
exports[`@idraw/board: src/lib/context Context.moveTo 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 {
"x": 20,
"y": 40,
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "moveTo",
},
],
},
"transform": Array [
1,
0,
0,
1,
0,
0,
],
"type": "fill",
},
]
`;
exports[`@idraw/board: src/lib/context Context.rect 1`] = `
Array [
Object {

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

@ -174,7 +174,6 @@ describe('@idraw/board: src/lib/context', () => {
expect(calls).toMatchSnapshot();
})
test('Context.fillRect', async () => {
const opts = deepClone(options);
const canvas = document.createElement('canvas');
@ -182,7 +181,7 @@ describe('@idraw/board: src/lib/context', () => {
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);
ctx.fillRect(10, 20, 80, 100);
// @ts-ignore
const calls = ctx2d.__getDrawCalls();
// console.log('calls =', JSON.stringify(calls, null, 2));
@ -195,6 +194,200 @@ describe('@idraw/board: src/lib/context', () => {
// }
// ]);
})
test('Context.clearRect', 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.clearRect(0, 0, opts.contextWidth, opts.contextHeight);
// @ts-ignore
const calls = ctx2d.__getDrawCalls();
// console.log('calls =', JSON.stringify(calls, null, 2));
expect(calls).toMatchSnapshot();
})
test('Context.beginPath', 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.beginPath();
ctx.fill();
// @ts-ignore
const calls = ctx2d.__getDrawCalls();
// console.log('calls =', JSON.stringify(calls, null, 2));
expect(calls).toMatchSnapshot();
})
test('Context.closePath', 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.closePath();
ctx.fill();
// @ts-ignore
const calls = ctx2d.__getDrawCalls();
// console.log('calls =', JSON.stringify(calls, null, 2));
expect(calls).toMatchSnapshot();
})
test('Context.lineTo', 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.lineTo(10, 20);
ctx.fill();
// @ts-ignore
const calls = ctx2d.__getDrawCalls();
// console.log('calls =', JSON.stringify(calls, null, 2));
expect(calls).toMatchSnapshot();
})
test('Context.moveTo', 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.moveTo(10, 20);
ctx.fill();
// @ts-ignore
const calls = ctx2d.__getDrawCalls();
// console.log('calls =', JSON.stringify(calls, null, 2));
expect(calls).toMatchSnapshot();
});
test('Context.arcTo', 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.arcTo(50, 50, 100, 100, Math.PI * 2);
ctx.fill();
// @ts-ignore
const calls = ctx2d.__getDrawCalls();
// console.log('calls =', JSON.stringify(calls, null, 2));
expect(calls).toMatchSnapshot();
});
test('Context.setLineWidth', async () => {
const opts = deepClone(options);
const canvas = document.createElement('canvas');
canvas.width = opts.contextWidth;
canvas.height = opts.contextHeight;
const lineWidth = 12;
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
const ctx = new Context(ctx2d, opts);
ctx.setLineWidth(lineWidth);
expect(ctx2d.lineWidth).toStrictEqual(lineWidth * opts.devicePixelRatio);
});
test('Context.setLineDash', async () => {
const opts = deepClone(options);
const canvas = document.createElement('canvas');
canvas.width = opts.contextWidth;
canvas.height = opts.contextHeight;
const lineDash = [10, 20];
const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
const ctx = new Context(ctx2d, opts);
ctx.setLineDash(lineDash);
// @ts-ignore
// const calls = ctx2d.__getDrawCalls();
// console.log('calls =', JSON.stringify(calls, null, 2));
// expect(calls).toMatchSnapshot();
expect(ctx2d.getLineDash()).toStrictEqual(lineDash.map(n => n * opts.devicePixelRatio));
});
test('Context.setStrokeStyle', 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.setStrokeStyle(color);
ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);
expect(ctx2d.strokeStyle).toStrictEqual(color);
});
// test('Context.isPointInPath', async () => {
// const opts = deepClone(options);
// const canvas = document.createElement('canvas');
// canvas.width = opts.contextWidth;
// canvas.height = opts.contextHeight;
// // const lineDash = [10, 20];
// const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
// const ctx = new Context(ctx2d, opts);
// const x = 50;
// const y = 50;
// const w = 50;
// const h = 50;
// ctx.beginPath();
// ctx.moveTo(x, y);
// ctx.lineTo(x + w, y);
// ctx.lineTo(x + w, y + h);
// ctx.lineTo(x, y + h);
// ctx.lineTo(x, y);
// ctx.closePath();
// // @ts-ignore
// const calls = ctx2d.__getDrawCalls();
// console.log('calls =', calls);
// // expect(calls).toMatchSnapshot();
// console.log('ctx.isPointInPath(51, 51) =', ctx.isPointInPath(60, 60))
// expect(ctx.isPointInPath(51, 51))
// .toStrictEqual(ctx2d.isPointInPath(60 * opts.devicePixelRatio, 60 * opts.devicePixelRatio));
// });
// test('Context.isPointInPathWithoutScroll', async () => {
// const opts = deepClone(options);
// const canvas = document.createElement('canvas');
// canvas.width = opts.contextWidth;
// canvas.height = opts.contextHeight;
// // const lineDash = [10, 20];
// const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
// const ctx = new Context(ctx2d, opts);
// ctx.setTransform({
// scale: 2,
// scrollX: 10,
// scrollY: 10,
// })
// ctx.beginPath();
// ctx.rect(50, 50, 100, 100);
// ctx.closePath();
// // @ts-ignore
// const calls = ctx2d.__getDrawCalls();
// // expect(calls).toMatchSnapshot();
// console.log('ctx.isPointInPathWithoutScroll(51, 51) =', ctx.isPointInPathWithoutScroll(51, 51))
// expect(ctx.isPointInPathWithoutScroll(51, 51))
// .toStrictEqual(
// ctx2d.isPointInPath(
// 60 * opts.devicePixelRatio,
// 60 * opts.devicePixelRatio
// )
// );
// });
})