Elgato_dark/idraw
1
0
Fork 0
mirror of https://github.com/idrawjs/idraw synced 2026-05-23 09:38:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

test: refactor unit test

Browse source
This commit is contained in:
chenshenhai 2023-02-12 13:34:06 +08:00
parent 4360131bbd
commit eb87fc2dff
35 changed files with 3379 additions and 2909 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
__tests__/e2e.test.js
View file

@ -1,76 +0,0 @@
const fs = require('fs');
const path = require('path');
const assert = require('assert');
const jimp = require('jimp');
const pixelmatch = require('pixelmatch');
const pngjs = require('pngjs');
const { delay } = require('./../scripts/util/time');
const { pageList } = require('./../scripts/screen.config');
const { createScreenshot } = require('../scripts/util/screen');
const snapshotDir = path.join(__dirname, 'snapshot');
const diffDir = path.join(__dirname, 'diff');
const testResultDir = path.join(__dirname, 'test-result');
const { PNG } = pngjs;
async function diff() {
const middlewares = [];
const diffRateList = [];
pageList.forEach((p, i) => {
middlewares.push(async (ctx = {}, next) => {
const { page, port } = ctx;
const width = p.w;
const height = p.h;
await page.setViewport( { width: p.w, height: p.h } );
const pageUrl = `http://127.0.0.1:${port}/examples/${p.path || ''}`;
await page.goto(pageUrl);
await delay(p.delay || 100);
const buf = await page.screenshot();
const snapshotPicPath = parsePicPath(path.join(snapshotDir, p.path));
const actual = (await jimp.read(buf)).scale(1).quality(100).bitmap;
const expected = (await jimp.read(fs.readFileSync(snapshotPicPath))).bitmap;
const diffBuf = new PNG({ width, height });
const failedPixel = pixelmatch(expected.data, actual.data, diffBuf.data, actual.width, actual.height);
const failRate = failedPixel / (width * height);
if (failRate > 0) {
(await jimp.read(actual)).scale(1).quality(100).write(parsePicPath(path.join(testResultDir, p.path)));
(await jimp.read(diffBuf)).scale(1).quality(100).write(parsePicPath(path.join(diffDir, p.path)));
}
diffRateList.push({
path: p.path,
rate: failRate,
});
console.log(`[${i+1}/${pageList.length}] E2E Testing: ${p.path} | diff: ${failRate}`)
await next();
});
});
await createScreenshot(middlewares, { baseDir: path.join(__dirname, '..') });
return diffRateList;
}
function parsePicPath(pagePath) {
// const picPath = pagePath.replace(/\.html$/, '.jpg');
const picPath = pagePath + '.jpg';
return picPath;
}
describe('Screenshot testing', function() {
it('testing...', function(done){
this.timeout(1000 * 60 * 2);
diff().then((rateList) => {
assert.ok(Array.isArray(rateList));
assert.ok(rateList.length > 0);
rateList.forEach((data) => {
// console.log(`${data.path}]diff-rate: ${data.rate}`, );
assert.ok(data.rate < 0.04);
});
done();
}).catch(done);
});
});

98
__tests__/e2e.test.ts Normal file
View file

@ -0,0 +1,98 @@
import fs from 'fs';
import path from 'path';
import assert from 'assert';
import jimp from 'jimp';
import pixelmatch from 'pixelmatch';
import pngjs from 'pngjs';
import { pageList } from './../scripts/screen.config';
import { createScreenshot } from '../scripts/util/screen';
function delay(time = 100): Promise<void> {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, time);
});
}
const snapshotDir = path.join(__dirname, 'snapshot');
const diffDir = path.join(__dirname, 'diff');
const testResultDir = path.join(__dirname, 'test-result');
const { PNG } = pngjs;
async function diff() {
const middlewares: any[] = [];
const diffRateList: any[] = [];
pageList.forEach((p, i) => {
middlewares.push(async (ctx: any, next: any) => {
const { page, port } = ctx as any;
const width = p.w;
const height = p.h;
await page.setViewport({ width: p.w, height: p.h });
const pageUrl = `http://127.0.0.1:${port}/examples/${p.path || ''}`;
await page.goto(pageUrl);
await delay(p.delay || 100);
const buf = await page.screenshot();
const snapshotPicPath = parsePicPath(path.join(snapshotDir, p.path));
const actual = (await jimp.read(buf)).scale(1).quality(100).bitmap;
const expected = (await jimp.read(fs.readFileSync(snapshotPicPath)))
.bitmap;
const diffBuf = new PNG({ width, height });
const failedPixel = pixelmatch(
expected.data,
actual.data,
diffBuf.data,
actual.width,
actual.height
);
const failRate = failedPixel / (width * height);
if (failRate > 0) {
(await jimp.read(actual as any))
.scale(1)
.quality(100)
.write(parsePicPath(path.join(testResultDir, p.path)));
(await jimp.read(diffBuf as any))
.scale(1)
.quality(100)
.write(parsePicPath(path.join(diffDir, p.path)));
}
diffRateList.push({
path: p.path,
rate: failRate
});
console.log(
`[${i + 1}/${pageList.length}] E2E Testing: ${
p.path
} | diff: ${failRate}`
);
await next();
});
});
await createScreenshot(middlewares, { baseDir: path.join(__dirname, '..') });
return diffRateList;
}
function parsePicPath(pagePath) {
// const picPath = pagePath.replace(/\.html$/, '.jpg');
const picPath = pagePath + '.jpg';
return picPath;
}
describe('Screenshot testing', function () {
it('testing...', function (done) {
diff()
.then((rateList) => {
assert.ok(Array.isArray(rateList));
assert.ok(rateList.length > 0);
rateList.forEach((data) => {
console.log(`${data.path}]diff-rate: ${data.rate}`);
assert.ok(data.rate < 0.04);
});
done();
})
.catch(done);
});
});

43
jest.config.js
View file

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

11
jest.e2e.config.js Normal file
View file

@ -0,0 +1,11 @@
module.exports = {
// "collectCoverage": true,
testEnvironment: 'jsdom',
testTimeout: 2 * 60 * 1000,
moduleFileExtensions: ['js', 'ts'],
modulePaths: ['<rootDir>'],
testRegex: '/__tests__/e2e.test.ts$'
// testRegex: '/__tests__/(.*)\\.test.ts$'
// "testRegex": "(/packages/idraw/__tests__/.*)\\.test.ts$",
// setupFiles: ['jest-canvas-mock']
};

44
package.json
View file

@ -1,9 +1,8 @@
{
"name": "root",
"private": false,
"type": "module",
"scripts": {
"_postinstall": "npm run build",
"postinstall": "npm run build",
"dev": "vite-node ./scripts/dev.ts",
"dev:mod": "vite-node ./scripts/dev-mod.ts",
"build": "npm run build:mod && npm run build:bundle && npm run build:min",
@ -11,7 +10,7 @@
"build:mod": "vite-node ./scripts/build-module.ts",
"build:min": "vite-node ./scripts/minify.ts",
"snapshot": "npm run build:bundle && vite-node ./scripts/snapshot.ts",
"e2e": "mocha --exit ./__tests__/e2e.test.js",
"e2e": "jest --config jest.e2e.config.js",
"init": "lerna bootstrap",
"init:cnpm": "lerna bootstrap --npm-client=cnpm",
"clear": "rm -rf node_modules/ && rm -rf ./packages/*/dist/ && rm -rf ./packages/*/esm/ && rm -rf ./packages/*/node_modules/",
@ -29,41 +28,42 @@
"pu2": "lerna version && npm run build && lerna publish from-git --force-publish"
},
"devDependencies": {
"@babel/core": "^7.20.7",
"@babel/core": "^7.20.12",
"@babel/preset-env": "^7.20.2",
"@babel/preset-typescript": "^7.18.6",
"@types/glob": "^8.0.1",
"@types/jest": "^29.2.5",
"@types/jest": "^29.4.0",
"@types/koa-compose": "^3.2.5",
"@types/node": "^18.11.18",
"@types/node": "^18.13.0",
"@types/serve-handler": "^6.1.1",
"@typescript-eslint/eslint-plugin": "^5.47.1",
"@typescript-eslint/parser": "^5.47.1",
"babel-jest": "^29.3.1",
"@typescript-eslint/eslint-plugin": "^5.51.0",
"@typescript-eslint/parser": "^5.51.0",
"babel-jest": "^29.4.2",
"canvas": "^2.11.0",
"chalk": "^5.2.0",
"enquirer": "^2.3.6",
"eslint": "^8.31.0",
"execa": "^6.1.0",
"eslint": "^8.34.0",
"execa": "^7.0.0",
"fs-extra": "^11.1.0",
"glob": "^8.0.3",
"glob": "^8.1.0",
"http-server": "^14.1.1",
"husky": "^8.0.2",
"jest": "^29.3.1",
"husky": "^8.0.3",
"jest": "^29.4.2",
"jest-canvas-mock": "^2.4.0",
"jimp": "^0.16.2",
"jest-environment-jsdom": "^29.4.2",
"jimp": "^0.22.4",
"koa-compose": "^4.1.0",
"lerna": "^6.3.0",
"lerna": "^6.4.1",
"mocha": "^10.2.0",
"pixelmatch": "^5.3.0",
"pngjs": "^6.0.0",
"puppeteer": "^19.4.1",
"puppeteer": "^19.6.3",
"serve-handler": "^6.1.5",
"terser": "^5.16.1",
"terser": "^5.16.3",
"ts-node": "^10.9.1",
"tslib": "^2.4.1",
"typescript": "^4.9.4",
"vite": "^4.0.3",
"vite-node": "^0.26.2"
"tslib": "^2.5.0",
"typescript": "^4.9.5",
"vite": "^4.1.1",
"vite-node": "^0.28.4"
}
}

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

@ -1,15 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`@idraw/board context 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -19,14 +19,14 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -36,14 +36,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 40,
"y": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -53,14 +53,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 320,
"y": 320,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -70,14 +70,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 640,
"y": 640,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -87,14 +87,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 400,
"width": 800,
"x": 1560,
"y": 1160,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -108,15 +108,15 @@ Array [
`;
exports[`@idraw/board context 2`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -126,14 +126,14 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -143,8 +143,8 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"dHeight": 3600,
"dWidth": 4000,
"dx": 0,
@ -158,7 +158,7 @@ Array [
"sx": 0,
"sy": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -168,8 +168,8 @@ Array [
],
"type": "drawImage",
},
Object {
"props": Object {
{
"props": {
"dHeight": 3600,
"dWidth": 4000,
"dx": 0,
@ -183,7 +183,7 @@ Array [
"sx": 0,
"sy": 0,
},
"transform": Array [
"transform": [
1,
0,
0,

64
packages/board/__tests__/__snapshots__/other-api.test.ts.snap
View file

@ -1,15 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`@idraw/board getTransform 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -19,14 +19,14 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -36,14 +36,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 40,
"y": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -53,14 +53,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 320,
"y": 320,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -70,14 +70,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 640,
"y": 640,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -87,14 +87,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 400,
"width": 800,
"x": 1560,
"y": 1160,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -108,15 +108,15 @@ Array [
`;
exports[`@idraw/board getTransform 2`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -126,14 +126,14 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -143,8 +143,8 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"dHeight": 1600,
"dWidth": 2400,
"dx": -2400,
@ -158,7 +158,7 @@ Array [
"sx": 0,
"sy": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -168,8 +168,8 @@ Array [
],
"type": "drawImage",
},
Object {
"props": Object {
{
"props": {
"dHeight": 1600,
"dWidth": 2400,
"dx": -2400,
@ -183,7 +183,7 @@ Array [
"sx": 0,
"sy": 0,
},
"transform": Array [
"transform": [
1,
0,
0,

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

@ -1,15 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`@idraw/board scale 001 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -19,14 +19,14 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -36,14 +36,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 40,
"y": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -53,14 +53,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 320,
"y": 320,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -70,14 +70,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 640,
"y": 640,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -87,14 +87,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 400,
"width": 800,
"x": 1560,
"y": 1160,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -108,15 +108,15 @@ Array [
`;
exports[`@idraw/board scale 001 2`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -126,14 +126,14 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -143,8 +143,8 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"dHeight": 3600,
"dWidth": 4000,
"dx": 200,
@ -158,7 +158,7 @@ Array [
"sx": 0,
"sy": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -168,8 +168,8 @@ Array [
],
"type": "drawImage",
},
Object {
"props": Object {
{
"props": {
"dHeight": 3600,
"dWidth": 4000,
"dx": 200,
@ -183,7 +183,7 @@ Array [
"sx": 0,
"sy": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -197,15 +197,15 @@ Array [
`;
exports[`@idraw/board scale 002 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -215,14 +215,14 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -232,14 +232,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 40,
"y": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -249,14 +249,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 320,
"y": 320,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -266,14 +266,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 640,
"y": 640,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -283,14 +283,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 400,
"width": 800,
"x": 1560,
"y": 1160,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -304,15 +304,15 @@ Array [
`;
exports[`@idraw/board scale 002 2`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -322,14 +322,14 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -339,8 +339,8 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"dHeight": 2400,
"dWidth": 4800,
"dx": 0,
@ -354,7 +354,7 @@ Array [
"sx": 0,
"sy": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -364,8 +364,8 @@ Array [
],
"type": "drawImage",
},
Object {
"props": Object {
{
"props": {
"dHeight": 2400,
"dWidth": 4800,
"dx": 0,
@ -379,7 +379,7 @@ Array [
"sx": 0,
"sy": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -393,15 +393,15 @@ Array [
`;
exports[`@idraw/board scale 003 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -411,14 +411,14 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -428,14 +428,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 40,
"y": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -445,14 +445,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 320,
"y": 320,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -462,14 +462,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 640,
"y": 640,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -479,14 +479,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 400,
"width": 800,
"x": 1560,
"y": 1160,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -500,15 +500,15 @@ Array [
`;
exports[`@idraw/board scale 003 2`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -518,14 +518,14 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -535,8 +535,8 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"dHeight": 2400,
"dWidth": 4000,
"dx": 0,
@ -550,7 +550,7 @@ Array [
"sx": 0,
"sy": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -560,8 +560,8 @@ Array [
],
"type": "drawImage",
},
Object {
"props": Object {
{
"props": {
"dHeight": 2400,
"dWidth": 4000,
"dx": 0,
@ -575,7 +575,7 @@ Array [
"sx": 0,
"sy": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -589,15 +589,15 @@ Array [
`;
exports[`@idraw/board scale 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -607,14 +607,14 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -624,14 +624,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 40,
"y": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -641,14 +641,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 320,
"y": 320,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -658,14 +658,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 640,
"y": 640,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -675,14 +675,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 400,
"width": 800,
"x": 1560,
"y": 1160,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -696,15 +696,15 @@ Array [
`;
exports[`@idraw/board scale 2`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -714,14 +714,14 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -731,8 +731,8 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"dHeight": 1600,
"dWidth": 2400,
"dx": 600,
@ -746,7 +746,7 @@ Array [
"sx": 0,
"sy": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -756,8 +756,8 @@ Array [
],
"type": "drawImage",
},
Object {
"props": Object {
{
"props": {
"dHeight": 1600,
"dWidth": 2400,
"dx": 600,
@ -771,7 +771,7 @@ Array [
"sx": 0,
"sy": 0,
},
"transform": Array [
"transform": [
1,
0,
0,

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

@ -1,15 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`@idraw/board scroll 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -19,14 +19,14 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -36,14 +36,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 40,
"y": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -53,14 +53,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 320,
"y": 320,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -70,14 +70,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 640,
"y": 640,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -87,14 +87,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 400,
"width": 800,
"x": 1560,
"y": 1160,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -108,15 +108,15 @@ Array [
`;
exports[`@idraw/board scroll 2`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -126,14 +126,14 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -143,8 +143,8 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"dHeight": 1600,
"dWidth": 2400,
"dx": -2400,
@ -158,7 +158,7 @@ Array [
"sx": 0,
"sy": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -168,8 +168,8 @@ Array [
],
"type": "drawImage",
},
Object {
"props": Object {
{
"props": {
"dHeight": 1600,
"dWidth": 2400,
"dx": -2400,
@ -183,7 +183,7 @@ Array [
"sx": 0,
"sy": 0,
},
"transform": Array [
"transform": [
1,
0,
0,

176
packages/board/__tests__/__snapshots__/wheel.test.ts.snap
View file

@ -1,15 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`@idraw/board scroll 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -19,14 +19,14 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -36,14 +36,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 40,
"y": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -53,14 +53,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 320,
"y": 320,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -70,14 +70,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 480,
"width": 800,
"x": 640,
"y": 640,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -87,14 +87,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 400,
"width": 800,
"x": 1560,
"y": 1160,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -108,15 +108,15 @@ Array [
`;
exports[`@idraw/board scroll 2`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -126,14 +126,14 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -143,8 +143,8 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"dHeight": 1600,
"dWidth": 2400,
"dx": -2400,
@ -158,7 +158,7 @@ Array [
"sx": 0,
"sy": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -168,8 +168,8 @@ Array [
],
"type": "drawImage",
},
Object {
"props": Object {
{
"props": {
"dHeight": 1600,
"dWidth": 2400,
"dx": -2400,
@ -183,7 +183,7 @@ Array [
"sx": 0,
"sy": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -193,14 +193,14 @@ Array [
],
"type": "drawImage",
},
Object {
"props": Object {
{
"props": {
"height": 80,
"width": 2400,
"x": 0,
"y": 1520,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -210,13 +210,13 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"fillRule": "nonzero",
"path": Array [
Object {
"props": Object {},
"transform": Array [
"path": [
{
"props": {},
"transform": [
1,
0,
0,
@ -226,12 +226,12 @@ Array [
],
"type": "beginPath",
},
Object {
"props": Object {
{
"props": {
"x": 2240,
"y": 1520,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -241,15 +241,15 @@ Array [
],
"type": "moveTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 2400,
"cpx2": 2400,
"cpy1": 1520,
"cpy2": 1600,
"radius": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -259,15 +259,15 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 2400,
"cpx2": 2200,
"cpy1": 1600,
"cpy2": 1600,
"radius": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -277,15 +277,15 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 2200,
"cpx2": 2200,
"cpy1": 1600,
"cpy2": 1520,
"radius": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -295,15 +295,15 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 2200,
"cpx2": 2400,
"cpy1": 1520,
"cpy2": 1520,
"radius": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -313,9 +313,9 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {},
"transform": Array [
{
"props": {},
"transform": [
1,
0,
0,
@ -327,7 +327,7 @@ Array [
},
],
},
"transform": Array [
"transform": [
1,
0,
0,
@ -337,14 +337,14 @@ Array [
],
"type": "fill",
},
Object {
"props": Object {
{
"props": {
"height": 1600,
"width": 80,
"x": 2320,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -354,13 +354,13 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"fillRule": "nonzero",
"path": Array [
Object {
"props": Object {},
"transform": Array [
"path": [
{
"props": {},
"transform": [
1,
0,
0,
@ -370,12 +370,12 @@ Array [
],
"type": "beginPath",
},
Object {
"props": Object {
{
"props": {
"x": 2360,
"y": 1400,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -385,15 +385,15 @@ Array [
],
"type": "moveTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 2400,
"cpx2": 2400,
"cpy1": 1400,
"cpy2": 1600,
"radius": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -403,15 +403,15 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 2400,
"cpx2": 2320,
"cpy1": 1600,
"cpy2": 1600,
"radius": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -421,15 +421,15 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 2320,
"cpx2": 2320,
"cpy1": 1600,
"cpy2": 1400,
"radius": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -439,15 +439,15 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 2320,
"cpx2": 2400,
"cpy1": 1400,
"cpy2": 1400,
"radius": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -457,9 +457,9 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {},
"transform": Array [
{
"props": {},
"transform": [
1,
0,
0,
@ -471,7 +471,7 @@ Array [
},
],
},
"transform": Array [
"transform": [
1,
0,
0,

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

@ -1,9 +1,8 @@
import { Board } from './../src';
import Board from './../src';
import { getData } from './data';
describe('@idraw/board', () => {
test('context', async () => {
test('context', async () => {
document.body.innerHTML = `
<div id="mount"></div>
`;
@ -13,33 +12,31 @@ describe('@idraw/board', () => {
contextWidth: 1000,
contextHeight: 900,
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 => {
data.elements.forEach((ele) => {
ctx.setFillStyle(ele.desc.color);
ctx.fillRect(ele.x, ele.y, ele.w, ele.h);
});
board.draw();
const originCtx = board.getOriginContext2D();
// @ts-ignore;
const originCalls = originCtx.__getDrawCalls();
expect(originCalls).toMatchSnapshot();
const displayCtx = board.getDisplayContext2D();
// @ts-ignore;
const displayCalls = displayCtx.__getDrawCalls();
expect(displayCalls).toMatchSnapshot();
});
})
});

2
packages/board/__tests__/lib/__snapshots__/style.test.ts.snap
View file

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`@idraw/board: src/lib/style getStyle 1`] = `
Object {
{
"height": "20px",
"margin-top": "123px",
"overflow": "auto",

48
packages/board/__tests__/other-api.test.ts
View file

@ -1,9 +1,7 @@
import { Board } from '../src';
import Board from '../src';
import { getData } from './data';
describe('@idraw/board', () => {
document.body.innerHTML = `
<div id="mount"></div>
`;
@ -13,7 +11,7 @@ describe('@idraw/board', () => {
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 4
}
};
const mount = document.querySelector('#mount') as HTMLDivElement;
const board = new Board(mount, opts);
@ -23,41 +21,43 @@ describe('@idraw/board', () => {
ctx.clearRect(0, 0, opts.width, opts.height);
ctx.setFillStyle('#ffffff');
ctx.fillRect(0, 0, opts.width, opts.height);
data.elements.forEach(ele => {
data.elements.forEach((ele) => {
ctx.setFillStyle(ele.desc.color);
ctx.fillRect(ele.x, ele.y, ele.w, ele.h);
});
test('getTransform', async () => {
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":0,"bottom":-400,"left":-600,"right":0},"size":{"x":-1200,"y":0,"w":1200,"h":800}})
const resultY =board.scrollY(-400);
expect(resultY).toStrictEqual({"position":{"top":-400,"bottom":0,"left":-600,"right":0},"size":{"x":-1200,"y":-800,"w":1200,"h":800}})
test('getTransform', async () => {
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: 0, bottom: -400, left: -600, right: 0 },
size: { x: -1200, y: 0, w: 1200, h: 800 }
});
const resultY = board.scrollY(-400);
expect(resultY).toStrictEqual({
position: { top: -400, bottom: 0, left: -600, right: 0 },
size: { x: -1200, y: -800, w: 1200, h: 800 }
});
board.draw();
const originCtx = board.getOriginContext2D();
// @ts-ignore;
const originCalls = originCtx.__getDrawCalls();
expect(originCalls).toMatchSnapshot();
const displayCtx = board.getDisplayContext2D();
// @ts-ignore;
const displayCalls = displayCtx.__getDrawCalls();
expect(displayCalls).toMatchSnapshot();
const transform = board.getTransform();
expect(transform).toStrictEqual({ scale: 2, scrollX: -600, scrollY: -400 });
});
});

13
packages/board/__tests__/point.test.ts
View file

@ -1,7 +1,6 @@
import { Board } from '../src';
import Board from '../src';
describe('@idraw/board', () => {
document.body.innerHTML = `
<div id="mount"></div>
`;
@ -11,12 +10,12 @@ describe('@idraw/board', () => {
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 4,
canScroll: true,
canScroll: true
};
const transform = {
scale: 2,
scrollX: -200,
scrollY: -100,
scrollY: -100
};
const mount = document.querySelector('#mount') as HTMLDivElement;
const board = new Board(mount, opts);
@ -26,8 +25,8 @@ describe('@idraw/board', () => {
board.scrollY(transform.scrollY);
board.draw();
const p1 = {x: 400, y: 300};
const p2 = {x: 300, y: 200};
const p1 = { x: 400, y: 300 };
const p2 = { x: 300, y: 200 };
test('pointScreenToContext', async () => {
expect(board.pointScreenToContext(p1)).toStrictEqual(p2);
@ -36,6 +35,4 @@ describe('@idraw/board', () => {
test('pointContextToScreen', async () => {
expect(board.pointContextToScreen(p2)).toStrictEqual(p1);
});
});

92
packages/board/__tests__/scale.test.ts
View file

@ -1,9 +1,8 @@
import { Board } from '../src';
import Board from '../src';
import { getData } from './data';
describe('@idraw/board', () => {
test('scale', async () => {
test('scale', async () => {
document.body.innerHTML = `
<div id="mount"></div>
`;
@ -13,39 +12,41 @@ describe('@idraw/board', () => {
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 => {
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":100,"bottom":100,"left":150,"right":150},"size":{"x":75,"y":50,"w":300,"h":200}})
expect(result).toStrictEqual({
position: { top: 100, bottom: 100, left: 150, right: 150 },
size: { x: 75, y: 50, w: 300, h: 200 }
});
board.draw();
const originCtx = board.getOriginContext2D();
// @ts-ignore;
const originCalls = originCtx.__getDrawCalls();
expect(originCalls).toMatchSnapshot();
const displayCtx = board.getDisplayContext2D();
// @ts-ignore;
const displayCalls = displayCtx.__getDrawCalls();
expect(displayCalls).toMatchSnapshot();
});
test('scale 001', async () => {
test('scale 001', async () => {
document.body.innerHTML = `
<div id="mount-001"></div>
`;
@ -55,39 +56,41 @@ describe('@idraw/board', () => {
contextWidth: 1000,
contextHeight: 900,
devicePixelRatio: 4
}
};
const mount = document.querySelector('#mount-001') 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 => {
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":0,"bottom":-50,"left":50,"right":50},"size":{"x":25,"y":0,"w":500,"h":450}})
expect(result).toStrictEqual({
position: { top: 0, bottom: -50, left: 50, right: 50 },
size: { x: 25, y: 0, w: 500, h: 450 }
});
board.draw();
const originCtx = board.getOriginContext2D();
// @ts-ignore;
const originCalls = originCtx.__getDrawCalls();
expect(originCalls).toMatchSnapshot();
const displayCtx = board.getDisplayContext2D();
// @ts-ignore;
const displayCalls = displayCtx.__getDrawCalls();
expect(displayCalls).toMatchSnapshot();
});
test('scale 002', async () => {
test('scale 002', async () => {
document.body.innerHTML = `
<div id="mount-002"></div>
`;
@ -97,41 +100,43 @@ describe('@idraw/board', () => {
contextWidth: 1200,
contextHeight: 600,
devicePixelRatio: 4
}
};
const mount = document.querySelector('#mount-002') 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 => {
data.elements.forEach((ele) => {
ctx.setFillStyle(ele.desc.color);
ctx.fillRect(ele.x, ele.y, ele.w, ele.h);
});
board.scrollX(-600);
board.scrollY(-400);
const result = board.scale(0.5);
expect(result).toStrictEqual({"position":{"top":50,"bottom":50,"left":0,"right":0},"size":{"x":0,"y":25,"w":600,"h":300}})
expect(result).toStrictEqual({
position: { top: 50, bottom: 50, left: 0, right: 0 },
size: { x: 0, y: 25, w: 600, h: 300 }
});
board.draw();
const originCtx = board.getOriginContext2D();
// @ts-ignore;
const originCalls = originCtx.__getDrawCalls();
expect(originCalls).toMatchSnapshot();
const displayCtx = board.getDisplayContext2D();
// @ts-ignore;
const displayCalls = displayCtx.__getDrawCalls();
expect(displayCalls).toMatchSnapshot();
});
test('scale 003', async () => {
test('scale 003', async () => {
document.body.innerHTML = `
<div id="mount-003"></div>
`;
@ -141,36 +146,39 @@ describe('@idraw/board', () => {
contextWidth: 1000,
contextHeight: 600,
devicePixelRatio: 4
}
};
const mount = document.querySelector('#mount-003') 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 => {
data.elements.forEach((ele) => {
ctx.setFillStyle(ele.desc.color);
ctx.fillRect(ele.x, ele.y, ele.w, ele.h);
});
board.scrollX(400);
board.scrollY(400);
const result = board.scale(0.8);
expect(result).toStrictEqual({"position":{"top":0,"bottom":-80,"left":0,"right":-200},"size":{"x":0,"y":0,"w":800,"h":480}})
expect(result).toStrictEqual({
position: { top: 0, bottom: -80, left: 0, right: -200 },
size: { x: 0, y: 0, w: 800, h: 480 }
});
board.draw();
const originCtx = board.getOriginContext2D();
// @ts-ignore;
const originCalls = originCtx.__getDrawCalls();
expect(originCalls).toMatchSnapshot();
const displayCtx = board.getDisplayContext2D();
// @ts-ignore;
const displayCalls = displayCtx.__getDrawCalls();
expect(displayCalls).toMatchSnapshot();
});
})
});

61
packages/board/__tests__/scroll.test.ts
View file

@ -1,9 +1,7 @@
import { Board } from '../src';
import Board from '../src';
import { getData } from './data';
describe('@idraw/board', () => {
document.body.innerHTML = `
<div id="mount"></div>
`;
@ -13,7 +11,7 @@ describe('@idraw/board', () => {
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 4
}
};
const mount = document.querySelector('#mount') as HTMLDivElement;
const board = new Board(mount, opts);
@ -23,41 +21,54 @@ describe('@idraw/board', () => {
ctx.clearRect(0, 0, opts.width, opts.height);
ctx.setFillStyle('#ffffff');
ctx.fillRect(0, 0, opts.width, opts.height);
data.elements.forEach(ele => {
data.elements.forEach((ele) => {
ctx.setFillStyle(ele.desc.color);
ctx.fillRect(ele.x, ele.y, ele.w, ele.h);
});
test('scroll', async () => {
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":0,"bottom":-400,"left":-600,"right":0},"size":{"x":-1200,"y":0,"w":1200,"h":800}})
const resultY =board.scrollY(-400);
expect(resultY).toStrictEqual({"position":{"top":-400,"bottom":0,"left":-600,"right":0},"size":{"x":-1200,"y":-800,"w":1200,"h":800}})
test('scroll', async () => {
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: 0, bottom: -400, left: -600, right: 0 },
size: { x: -1200, y: 0, w: 1200, h: 800 }
});
const resultY = board.scrollY(-400);
expect(resultY).toStrictEqual({
position: { top: -400, bottom: 0, left: -600, right: 0 },
size: { x: -1200, y: -800, w: 1200, h: 800 }
});
board.draw();
const originCtx = board.getOriginContext2D();
// @ts-ignore;
const originCalls = originCtx.__getDrawCalls();
expect(originCalls).toMatchSnapshot();
const displayCtx = board.getDisplayContext2D();
// @ts-ignore;
const displayCalls = displayCtx.__getDrawCalls();
expect(displayCalls).toMatchSnapshot();
const screenInfo = board.getScreenInfo();
expect(screenInfo).toStrictEqual({"size":{"x":-1200,"y":-800,"w":1200,"h":800},"position":{"top":-400,"bottom":0,"left":-600,"right":0},"deviceSize":{"x":-2400,"y":-1600,"w":4800,"h":3200},"width":600,"height":400,"devicePixelRatio":4, "canScrollXNext": true, "canScrollXPrev": true, "canScrollYNext": true, "canScrollYPrev": true, });
expect(screenInfo).toStrictEqual({
size: { x: -1200, y: -800, w: 1200, h: 800 },
position: { top: -400, bottom: 0, left: -600, right: 0 },
deviceSize: { x: -2400, y: -1600, w: 4800, h: 3200 },
width: 600,
height: 400,
devicePixelRatio: 4,
canScrollXNext: true,
canScrollXPrev: true,
canScrollYNext: true,
canScrollYPrev: true
});
});
});

47
packages/board/__tests__/wheel.test.ts
View file

@ -1,8 +1,8 @@
import { Board } from '../src';
import Board from '../src';
import { getData } from './data';
describe('@idraw/board', () => {
test('scroll', async () => {
test('scroll', async () => {
document.body.innerHTML = `
<div id="mount"></div>
`;
@ -17,45 +17,52 @@ describe('@idraw/board', () => {
lineWidth: 20,
color: '#666666'
}
}
};
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 => {
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":0,"bottom":-400,"left":-600,"right":0},"size":{"x":-1200,"y":0,"w":1200,"h":800}})
const resultY =board.scrollY(-400);
expect(resultY).toStrictEqual({"position":{"top":-400,"bottom":0,"left":-600,"right":0},"size":{"x":-1200,"y":-800,"w":1200,"h":800}})
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: 0, bottom: -400, left: -600, right: 0 },
size: { x: -1200, y: 0, w: 1200, h: 800 }
});
const resultY = board.scrollY(-400);
expect(resultY).toStrictEqual({
position: { top: -400, bottom: 0, left: -600, right: 0 },
size: { x: -1200, y: -800, w: 1200, h: 800 }
});
board.draw();
const originCtx = board.getOriginContext2D();
// @ts-ignore;
const originCalls = originCtx.__getDrawCalls();
expect(originCalls).toMatchSnapshot();
const displayCtx = board.getDisplayContext2D();
// @ts-ignore;
const displayCalls = displayCtx.__getDrawCalls();
expect(displayCalls).toMatchSnapshot();
const scrollLineWidth = board.getScrollLineWidth();
expect(scrollLineWidth).toStrictEqual(opts.scrollConfig.lineWidth)
expect(scrollLineWidth).toStrictEqual(opts.scrollConfig.lineWidth);
});
});

240
packages/core/__tests__/__snapshots__/index.test.ts.snap
View file

@ -1,15 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`@idraw/core @idraw/core: context 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -19,12 +19,12 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
"path": Array [
Object {
"props": Object {},
"transform": Array [
{
"props": {
"path": [
{
"props": {},
"transform": [
1,
0,
0,
@ -34,12 +34,12 @@ Array [
],
"type": "beginPath",
},
Object {
"props": Object {
{
"props": {
"x": 120,
"y": 20,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -49,15 +49,15 @@ Array [
],
"type": "moveTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 860,
"cpx2": 860,
"cpy1": 20,
"cpy2": 460,
"radius": 100,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -67,15 +67,15 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 860,
"cpx2": 20,
"cpy1": 460,
"cpy2": 460,
"radius": 100,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -85,15 +85,15 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 20,
"cpx2": 20,
"cpy1": 460,
"cpy2": 20,
"radius": 100,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -103,15 +103,15 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 20,
"cpx2": 860,
"cpy1": 20,
"cpy2": 20,
"radius": 100,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -121,9 +121,9 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {},
"transform": Array [
{
"props": {},
"transform": [
1,
0,
0,
@ -135,7 +135,7 @@ Array [
},
],
},
"transform": Array [
"transform": [
1,
0,
0,
@ -145,13 +145,13 @@ Array [
],
"type": "stroke",
},
Object {
"props": Object {
{
"props": {
"fillRule": "nonzero",
"path": Array [
Object {
"props": Object {},
"transform": Array [
"path": [
{
"props": {},
"transform": [
1,
0,
0,
@ -161,12 +161,12 @@ Array [
],
"type": "beginPath",
},
Object {
"props": Object {
{
"props": {
"x": 120,
"y": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -176,15 +176,15 @@ Array [
],
"type": "moveTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 840,
"cpx2": 840,
"cpy1": 40,
"cpy2": 440,
"radius": 80,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -194,15 +194,15 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 840,
"cpx2": 40,
"cpy1": 440,
"cpy2": 440,
"radius": 80,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -212,15 +212,15 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 40,
"cpx2": 40,
"cpy1": 440,
"cpy2": 40,
"radius": 80,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -230,15 +230,15 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 40,
"cpx2": 840,
"cpy1": 40,
"cpy2": 40,
"radius": 80,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -248,9 +248,9 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {},
"transform": Array [
{
"props": {},
"transform": [
1,
0,
0,
@ -262,7 +262,7 @@ Array [
},
],
},
"transform": Array [
"transform": [
1,
0,
0,
@ -272,12 +272,12 @@ Array [
],
"type": "fill",
},
Object {
"props": Object {
"path": Array [
Object {
"props": Object {},
"transform": Array [
{
"props": {
"path": [
{
"props": {},
"transform": [
1,
0,
0,
@ -287,12 +287,12 @@ Array [
],
"type": "beginPath",
},
Object {
"props": Object {
{
"props": {
"x": 560,
"y": 316,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -302,15 +302,15 @@ Array [
],
"type": "moveTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 1124,
"cpx2": 1124,
"cpy1": 316,
"cpy2": 804,
"radius": 244,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -320,15 +320,15 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 1124,
"cpx2": 316,
"cpy1": 804,
"cpy2": 804,
"radius": 244,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -338,15 +338,15 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 316,
"cpx2": 316,
"cpy1": 804,
"cpy2": 316,
"radius": 244,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -356,15 +356,15 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 316,
"cpx2": 1124,
"cpy1": 316,
"cpy2": 316,
"radius": 244,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -374,9 +374,9 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {},
"transform": Array [
{
"props": {},
"transform": [
1,
0,
0,
@ -388,7 +388,7 @@ Array [
},
],
},
"transform": Array [
"transform": [
1,
0,
0,
@ -398,13 +398,13 @@ Array [
],
"type": "stroke",
},
Object {
"props": Object {
{
"props": {
"fillRule": "nonzero",
"path": Array [
Object {
"props": Object {},
"transform": Array [
"path": [
{
"props": {},
"transform": [
1,
0,
0,
@ -414,12 +414,12 @@ Array [
],
"type": "beginPath",
},
Object {
"props": Object {
{
"props": {
"x": 560,
"y": 320,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -429,15 +429,15 @@ Array [
],
"type": "moveTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 1120,
"cpx2": 1120,
"cpy1": 320,
"cpy2": 800,
"radius": 240,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -447,15 +447,15 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 1120,
"cpx2": 320,
"cpy1": 800,
"cpy2": 800,
"radius": 240,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -465,15 +465,15 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 320,
"cpx2": 320,
"cpy1": 800,
"cpy2": 320,
"radius": 240,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -483,15 +483,15 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {
{
"props": {
"cpx1": 320,
"cpx2": 1120,
"cpy1": 320,
"cpy2": 320,
"radius": 240,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -501,9 +501,9 @@ Array [
],
"type": "arcTo",
},
Object {
"props": Object {},
"transform": Array [
{
"props": {},
"transform": [
1,
0,
0,
@ -515,7 +515,7 @@ Array [
},
],
},
"transform": Array [
"transform": [
1,
0,
0,
@ -525,14 +525,14 @@ Array [
],
"type": "fill",
},
Object {
"props": Object {
{
"props": {
"maxWidth": null,
"text": "Hello Text",
"x": 715,
"y": 520,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -546,15 +546,15 @@ Array [
`;
exports[`@idraw/core @idraw/core: context 2`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -564,14 +564,14 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"height": 1600,
"width": 2400,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -581,8 +581,8 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"dHeight": 1600,
"dWidth": 2400,
"dx": 0,
@ -596,7 +596,7 @@ Array [
"sx": 0,
"sy": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -606,8 +606,8 @@ Array [
],
"type": "drawImage",
},
Object {
"props": Object {
{
"props": {
"dHeight": 1600,
"dWidth": 2400,
"dx": 0,
@ -621,7 +621,7 @@ Array [
"sx": 0,
"sy": 0,
},
"transform": Array [
"transform": [
1,
0,
0,

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

File diff suppressed because it is too large Load diff

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

@ -1,17 +1,15 @@
import { requestAnimationFrameMock } from './../../../__tests__/polyfill/requestanimateframe';
import './../../../__tests__/polyfill/image';
import { Core } from './../src/';
import Core from './../src/';
import { getData } from './data';
describe("@idraw/core", () => {
describe('@idraw/core', () => {
beforeEach(() => {
requestAnimationFrameMock.reset();
})
});
test('@idraw/core: context', async () => {
test('@idraw/core: context', async () => {
document.body.innerHTML = `
<div id="mount"></div>
`;
@ -21,26 +19,22 @@ describe("@idraw/core", () => {
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 4
}
};
const mount = document.querySelector('#mount') as HTMLDivElement;
const core = new Core(mount, opts);
const data = getData();
core.setData(data);
requestAnimationFrameMock.triggerNextAnimationFrame();
const originCtx = core.__getOriginContext2D();
// @ts-ignore;
const originCalls = originCtx.__getDrawCalls();
expect(originCalls).toMatchSnapshot();
const displayCtx = core.__getDisplayContext2D();
// @ts-ignore;
const displayCalls = displayCtx.__getDrawCalls();
expect(displayCalls).toMatchSnapshot();
});
});

290
packages/core/__tests__/lib/core-check.test.ts
View file

@ -1,185 +1,223 @@
import { Core } from './../../src';
describe("@idraw/core static check", () => {
import Core from './../../src';
describe('@idraw/core static check', () => {
test('Core.check.attrs', () => {
expect(Core.check.attrs({
x: 0,
y: 100,
w: 200,
h: 200,
angle: 0
})).toStrictEqual(true);
expect(
Core.check.attrs({
x: 0,
y: 100,
w: 200,
h: 200,
angle: 0
})
).toStrictEqual(true);
expect(Core.check.attrs({
x: 0,
y: 100,
w: -200,
h: 200,
angle: 0
})).toStrictEqual(false);
expect(
Core.check.attrs({
x: 0,
y: 100,
w: -200,
h: 200,
angle: 0
})
).toStrictEqual(false);
expect(Core.check.attrs({
x: 0,
y: 100,
w: 200,
h: 200,
angle: -99999
})).toStrictEqual(false);
expect(
Core.check.attrs({
x: 0,
y: 100,
w: 200,
h: 200,
angle: -99999
})
).toStrictEqual(false);
});
test('Core.check.rectDesc', () => {
expect(
Core.check.rectDesc({
bgColor: '#ffffff'
})
).toStrictEqual(true);
expect(Core.check.rectDesc({
bgColor: '#ffffff',
})).toStrictEqual(true);
expect(
Core.check.rectDesc({
bgColor: 123
})
).toStrictEqual(false);
expect(Core.check.rectDesc({
bgColor: 123,
})).toStrictEqual(false);
expect(
Core.check.rectDesc({
borderRadius: 12,
borderWidth: 10,
borderColor: '#123abf',
bgColor: '#ffffff'
})
).toStrictEqual(true);
expect(Core.check.rectDesc({
borderRadius: 12,
borderWidth: 10,
borderColor: '#123abf',
bgColor: '#ffffff',
})).toStrictEqual(true);
expect(Core.check.rectDesc({
borderRadius: 12,
borderWidth: 10,
borderColor: '#123af',
})).toStrictEqual(false);
expect(
Core.check.rectDesc({
borderRadius: 12,
borderWidth: 10,
borderColor: '#123af'
})
).toStrictEqual(false);
});
test('Core.check.circleDesc', () => {
expect(
Core.check.circleDesc({
bgColor: '#ffffff'
})
).toStrictEqual(true);
expect(Core.check.circleDesc({
bgColor: '#ffffff',
})).toStrictEqual(true);
expect(
Core.check.circleDesc({
bgColor: 123
})
).toStrictEqual(false);
expect(Core.check.circleDesc({
bgColor: 123,
})).toStrictEqual(false);
expect(
Core.check.circleDesc({
borderWidth: 10,
borderColor: '#123abf',
bgColor: '#ffffff'
})
).toStrictEqual(true);
expect(Core.check.circleDesc({
borderWidth: 10,
borderColor: '#123abf',
bgColor: '#ffffff',
})).toStrictEqual(true);
expect(Core.check.circleDesc({
borderWidth: 10,
borderColor: '#123af',
})).toStrictEqual(false);
expect(
Core.check.circleDesc({
borderWidth: 10,
borderColor: '#123af'
})
).toStrictEqual(false);
});
test('Core.check.imageDesc', () => {
expect(
Core.check.imageDesc({
src: 'https://xxxxxx'
})
).toStrictEqual(true);
expect(Core.check.imageDesc({
src: 'https://xxxxxx',
})).toStrictEqual(true);
expect(
Core.check.imageDesc({
src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOg'
})
).toStrictEqual(true);
expect(Core.check.imageDesc({
src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOg',
})).toStrictEqual(true);
expect(
Core.check.imageDesc({
src: '/xx/xxx/xxx'
})
).toStrictEqual(true);
expect(Core.check.imageDesc({
src: '/xx/xxx/xxx',
})).toStrictEqual(true);
expect(
Core.check.imageDesc({
src: './xx/xxx/xxx'
})
).toStrictEqual(true);
expect(Core.check.imageDesc({
src: './xx/xxx/xxx',
})).toStrictEqual(true);
expect(
Core.check.imageDesc({
src: 'abcdefg'
})
).toStrictEqual(false);
expect(Core.check.imageDesc({
src: 'abcdefg',
})).toStrictEqual(false);
expect(Core.check.imageDesc({
src: 1234,
})).toStrictEqual(false);
expect(
Core.check.imageDesc({
src: 1234
})
).toStrictEqual(false);
expect(Core.check.imageDesc({})).toStrictEqual(false);
});
test('Core.check.svgDesc', () => {
expect(Core.check.svgDesc({
svg: `
expect(
Core.check.svgDesc({
svg: `
<svg t="12231231">
<g></g>
</svg>
`,
})).toStrictEqual(true);
`
})
).toStrictEqual(true);
expect(Core.check.svgDesc({
svg: `
expect(
Core.check.svgDesc({
svg: `
<svg>
<g></g>
</ svg>
`,
})).toStrictEqual(true);
`
})
).toStrictEqual(true);
expect(Core.check.svgDesc({
svg: './xxxxx/xxx',
})).toStrictEqual(false);
expect(
Core.check.svgDesc({
svg: './xxxxx/xxx'
})
).toStrictEqual(false);
expect(Core.check.svgDesc({})).toStrictEqual(false);
});
test('Core.check.htmlDesc', () => {
expect(Core.check.htmlDesc({
html: `
expect(
Core.check.htmlDesc({
html: `
<style>
.box { display: block }
</style>
<div class="box">Hello World</div>
`,
})).toStrictEqual(true);
`
})
).toStrictEqual(true);
expect(Core.check.htmlDesc({
html: `
expect(
Core.check.htmlDesc({
html: `
abcdefg
<div class="box">Hello World</div>
`,
})).toStrictEqual(true);
`
})
).toStrictEqual(true);
expect(Core.check.htmlDesc({
html: 'Hello World',
})).toStrictEqual(false);
expect(
Core.check.htmlDesc({
html: 'Hello World'
})
).toStrictEqual(false);
expect(Core.check.htmlDesc({})).toStrictEqual(false);
});
test('Core.check.textDesc', () => {
expect(Core.check.textDesc({
text: 'abcdefg',
color: '#af1234',
bgColor: '#f0f0f0',
fontSize: 12,
lineHeight: 12,
fontWeight: 'bold',
fontFamily: 'abc',
textAlign: 'center',
borderRadius: 12,
borderWidth: 10,
borderColor: '#123abf',
})).toStrictEqual(true);
expect(
Core.check.textDesc({
text: 'abcdefg',
color: '#af1234',
bgColor: '#f0f0f0',
fontSize: 12,
lineHeight: 12,
fontWeight: 'bold',
fontFamily: 'abc',
textAlign: 'center',
borderRadius: 12,
borderWidth: 10,
borderColor: '#123abf'
})
).toStrictEqual(true);
expect(Core.check.textDesc({
text: 'abcdefg',
color: '#af1234',
fontSize: 12,
})).toStrictEqual(true);
expect(
Core.check.textDesc({
text: 'abcdefg',
color: '#af1234',
fontSize: 12
})
).toStrictEqual(true);
expect(Core.check.textDesc({})).toStrictEqual(false);
});
})
});

21
packages/core/__tests__/lib/core-element.test.ts
View file

@ -1,8 +1,8 @@
// import { TypeData } from '@idraw/types';
import { Core } from '../../src';
import Core from '../../src';
import { getData } from '../data';
describe("@idraw/core: Element API", () => {
describe('@idraw/core: Element API', () => {
document.body.innerHTML = `
<div id="mount"></div>
`;
@ -12,33 +12,28 @@ describe("@idraw/core: Element API", () => {
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 4
}
};
const mount = document.querySelector('#mount') as HTMLDivElement;
const core = new Core(mount, opts);
const data = getData();
core.setData(data);
const _data = core.getData();
test('getSelectedElements', async () => {
test('getSelectedElements', async () => {
core.selectElement(_data.elements[1].uuid || '');
const elems = core.getSelectedElements();
expect(elems).toStrictEqual([_data.elements[1]]);
});
test('getElement', async () => {
test('getElement', async () => {
const uuid = core.getData().elements[0]?.uuid;
const elem = core.getElement(uuid);
expect(elem).toStrictEqual(core.getData().elements[0])
expect(elem).toStrictEqual(core.getData().elements[0]);
});
test('getElementByIndex', async () => {
test('getElementByIndex', async () => {
const index = 0;
const elem = core.getElementByIndex(index);
expect(elem).toStrictEqual(core.getData().elements[index])
expect(elem).toStrictEqual(core.getData().elements[index]);
});
});

41
packages/core/__tests__/lib/core-is.test.ts
View file

@ -1,7 +1,6 @@
import { Core } from './../../src';
describe("@idraw/core:static is", () => {
import Core from './../../src';
describe('@idraw/core:static is', () => {
test('Core.is.number', () => {
expect(Core.is.number(0)).toStrictEqual(true);
expect(Core.is.number(100)).toStrictEqual(true);
@ -70,7 +69,9 @@ describe("@idraw/core:static is", () => {
expect(Core.is.imageSrc('http://xxxxx')).toStrictEqual(true);
expect(Core.is.imageSrc('./xxxxx/xxx')).toStrictEqual(true);
expect(Core.is.imageSrc('/xxxxx/xxx')).toStrictEqual(true);
expect(Core.is.imageSrc('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOg')).toStrictEqual(true);
expect(
Core.is.imageSrc('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOg')
).toStrictEqual(true);
expect(Core.is.imageSrc('dafafsfsaffafa')).toStrictEqual(false);
});
@ -83,7 +84,9 @@ describe("@idraw/core:static is", () => {
});
test('Core.is.imageBase64', () => {
expect(Core.is.imageBase64('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOg')).toStrictEqual(true);
expect(
Core.is.imageBase64('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOg')
).toStrictEqual(true);
expect(Core.is.imageBase64('http://xxxxx')).toStrictEqual(false);
expect(Core.is.imageBase64('./xxxxx/xxx')).toStrictEqual(false);
expect(Core.is.imageBase64('/xxxxx/xxx')).toStrictEqual(false);
@ -91,31 +94,39 @@ describe("@idraw/core:static is", () => {
});
test('Core.is.svg', () => {
expect(Core.is.svg(`
expect(
Core.is.svg(`
<svg t="12231231">
<g></g>
</svg>
`)).toStrictEqual(true);
expect(Core.is.svg(`
`)
).toStrictEqual(true);
expect(
Core.is.svg(`
<svg>
<g></g>
</ svg>
`)).toStrictEqual(true);
`)
).toStrictEqual(true);
expect(Core.is.svg('./xxxxx/xxx')).toStrictEqual(false);
expect(Core.is.svg('/xxxxx/xxx')).toStrictEqual(false);
expect(Core.is.svg('dafafsfsaffafa')).toStrictEqual(false);
});
test('Core.is.html', () => {
expect(Core.is.html(`
expect(
Core.is.html(`
<div>Hello World</div>
`)).toStrictEqual(true);
expect(Core.is.html(`
`)
).toStrictEqual(true);
expect(
Core.is.html(`
<style>
.box { display: block }
</style>
<div class="box">Hello World</div>
`)).toStrictEqual(true);
`)
).toStrictEqual(true);
expect(Core.is.html('./xxxxx/xxx')).toStrictEqual(false);
expect(Core.is.html('/xxxxx/xxx')).toStrictEqual(false);
expect(Core.is.html('dafafsfsaffafa')).toStrictEqual(false);
@ -146,7 +157,6 @@ describe("@idraw/core:static is", () => {
expect(Core.is.textAlign('helloworld')).toStrictEqual(false);
});
test('Core.is.fontFamily', () => {
expect(Core.is.fontFamily('yahei')).toStrictEqual(true);
expect(Core.is.fontFamily('helloworld')).toStrictEqual(true);
@ -158,5 +168,4 @@ describe("@idraw/core:static is", () => {
expect(Core.is.fontWeight('xxxxxxx')).toStrictEqual(false);
expect(Core.is.fontWeight('')).toStrictEqual(false);
});
})
});

14
packages/core/__tests__/lib/element.test.ts
View file

@ -1,9 +1,9 @@
import { TypeData } from '@idraw/types';
import { Core } from './../../src';
import Core from './../../src';
import { getData } from './../data';
import { Element } from './../../src/lib/element';
describe("@idraw/core: lib/element", () => {
describe('@idraw/core: lib/element', () => {
document.body.innerHTML = `
<div id="mount"></div>
`;
@ -13,21 +13,15 @@ describe("@idraw/core: lib/element", () => {
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 4
}
};
const mount = document.querySelector('#mount') as HTMLDivElement;
const core = new Core(mount, opts);
const ctx = core.__getBoardContext();
const data = getData();
test('initData', async () => {
test('initData', async () => {
const element = new Element(ctx);
const newData = element.initData(data as TypeData);
expect(newData.elements[0].uuid.length).toStrictEqual(36);
});
});

13
packages/core/__tests__/lib/point.test.ts
View file

@ -1,7 +1,6 @@
import { Core } from '../../src';
import Core from '../../src';
describe('@idraw/core', () => {
document.body.innerHTML = `
<div id="mount"></div>
`;
@ -11,12 +10,12 @@ describe('@idraw/core', () => {
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 4,
canScroll: true,
canScroll: true
};
const transform = {
scale: 2,
scrollLeft: 200,
scrollTop: 100,
scrollTop: 100
};
const mount = document.querySelector('#mount') as HTMLDivElement;
const idraw = new Core(mount, opts);
@ -25,8 +24,8 @@ describe('@idraw/core', () => {
idraw.scrollLeft(transform.scrollLeft);
idraw.scrollTop(transform.scrollTop);
const p1 = {x: 400, y: 300};
const p2 = {x: 300, y: 200};
const p1 = { x: 400, y: 300 };
const p2 = { x: 300, y: 200 };
test('pointScreenToContext', async () => {
expect(idraw.pointScreenToContext(p1)).toStrictEqual(p2);
@ -35,6 +34,4 @@ describe('@idraw/core', () => {
test('pointContextToScreen', async () => {
expect(idraw.pointContextToScreen(p2)).toStrictEqual(p1);
});
});

32
packages/core/__tests__/move.test.ts
View file

@ -1,7 +1,7 @@
import { requestAnimationFrameMock } from '../../../__tests__/polyfill/requestanimateframe';
import '../../../__tests__/polyfill/image';
import { Core } from '../src';
import Core from '../src';
import { getData } from './data';
// function delay(time: number): Promise<void> {
@ -12,13 +12,12 @@ import { getData } from './data';
// });
// }
describe("@idraw/core", () => {
describe('@idraw/core', () => {
beforeEach(() => {
requestAnimationFrameMock.reset();
})
});
test('moveDownElement', async () => {
test('moveDownElement', async () => {
document.body.innerHTML = `
<div id="mount"></div>
`;
@ -28,27 +27,27 @@ describe("@idraw/core", () => {
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 4
}
};
const mount = document.querySelector('#mount') as HTMLDivElement;
const idraw = new Core(mount, opts);
const data = getData();
idraw.setData(data);
idraw.moveUpElement('image-003');
idraw.moveUpElement('image-003');
requestAnimationFrameMock.triggerNextAnimationFrame();
const originCtx = idraw.__getOriginContext2D();
// @ts-ignore;
const originCalls = originCtx.__getDrawCalls();
expect(originCalls).toMatchSnapshot();
const displayCtx = idraw.__getDisplayContext2D();
// @ts-ignore;
const displayCalls = displayCtx.__getDrawCalls();
expect(displayCalls).toMatchSnapshot();
});
test('moveUpElement', async () => {
test('moveUpElement', async () => {
document.body.innerHTML = `
<div id="mount"></div>
`;
@ -58,28 +57,23 @@ describe("@idraw/core", () => {
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 4
}
};
const mount = document.querySelector('#mount') as HTMLDivElement;
const idraw = new Core(mount, opts);
const data = getData();
idraw.setData(data);
idraw.moveDownElement('image-003');
idraw.moveDownElement('image-003');
requestAnimationFrameMock.triggerNextAnimationFrame();
const originCtx = idraw.__getOriginContext2D();
// @ts-ignore;
const originCalls = originCtx.__getDrawCalls();
expect(originCalls).toMatchSnapshot();
const displayCtx = idraw.__getDisplayContext2D();
// @ts-ignore;
const displayCalls = displayCtx.__getDrawCalls();
expect(displayCalls).toMatchSnapshot();
});
});

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

File diff suppressed because it is too large Load diff

45
packages/util/__tests__/index.test.ts
View file

@ -1,33 +1,32 @@
import util from '../src/default';
import * as util from '../src';
const types = {
'Context': 'Function',
'check': 'Object',
'compose': 'Function',
'createUUID': 'Function',
'deepClone': 'Function',
'delay': 'Function',
'downloadImageFromCanvas': 'Function',
'is': 'Object',
'isColorStr': 'Function',
'istype': 'Object',
'loadHTML': 'AsyncFunction',
'loadImage': 'Function',
'loadSVG': 'AsyncFunction',
'throttle': 'Function',
'toColorHexNum': 'Function',
'toColorHexStr': 'Function'
}
Context: 'Function',
check: 'Object',
compose: 'Function',
createUUID: 'Function',
deepClone: 'Function',
delay: 'Function',
downloadImageFromCanvas: 'Function',
is: 'Object',
isColorStr: 'Function',
istype: 'Object',
loadHTML: 'AsyncFunction',
loadImage: 'Function',
loadSVG: 'AsyncFunction',
throttle: 'Function',
toColorHexNum: 'Function',
toColorHexStr: 'Function',
default: 'Object'
};
function getType (data: any): string {
function getType(data: any): string {
const typeStr = Object.prototype.toString.call(data) || '';
const result = typeStr.replace(/(\[object|\])/ig, '').trim();
const result = typeStr.replace(/(\[object|\])/gi, '').trim();
return result;
}
describe('@idraw/util', () => {
test('index', async () => {
const keys = Object.keys(util);
keys.forEach((key) => {
@ -37,6 +36,4 @@ describe('@idraw/util', () => {
expect(type).toStrictEqual(types[key]);
});
});
});

364
packages/util/__tests__/lib/__snapshots__/context.test.ts.snap
View file

@ -1,15 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`@idraw/board: src/lib/context Context 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 1800,
"width": 2000,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -19,14 +19,14 @@ Array [
],
"type": "clearRect",
},
Object {
"props": Object {
{
"props": {
"height": 1800,
"width": 2000,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -36,14 +36,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 240,
"width": 400,
"x": 20,
"y": 20,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -53,14 +53,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 240,
"width": 400,
"x": 160,
"y": 160,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -70,14 +70,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 240,
"width": 400,
"x": 320,
"y": 320,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -87,14 +87,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 200,
"width": 400,
"x": 780,
"y": 580,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -108,14 +108,14 @@ Array [
`;
exports[`@idraw/board: src/lib/context Context.arc 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"fillRule": "nonzero",
"path": Array [
Object {
"props": Object {},
"transform": Array [
"path": [
{
"props": {},
"transform": [
1,
0,
0,
@ -125,8 +125,8 @@ Array [
],
"type": "beginPath",
},
Object {
"props": Object {
{
"props": {
"anticlockwise": true,
"endAngle": 6.283185307179586,
"radius": 100,
@ -134,7 +134,7 @@ Array [
"x": 140,
"y": 160,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -146,7 +146,7 @@ Array [
},
],
},
"transform": Array [
"transform": [
1,
0,
0,
@ -160,14 +160,14 @@ Array [
`;
exports[`@idraw/board: src/lib/context Context.arcTo 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"fillRule": "nonzero",
"path": Array [
Object {
"props": Object {},
"transform": Array [
"path": [
{
"props": {},
"transform": [
1,
0,
0,
@ -177,15 +177,15 @@ Array [
],
"type": "beginPath",
},
Object {
"props": Object {
{
"props": {
"cpx1": 100,
"cpx2": 200,
"cpy1": 100,
"cpy2": 200,
"radius": 12.566370614359172,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -197,7 +197,7 @@ Array [
},
],
},
"transform": Array [
"transform": [
1,
0,
0,
@ -211,14 +211,14 @@ Array [
`;
exports[`@idraw/board: src/lib/context Context.beginPath 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"fillRule": "nonzero",
"path": Array [
Object {
"props": Object {},
"transform": Array [
"path": [
{
"props": {},
"transform": [
1,
0,
0,
@ -230,7 +230,7 @@ Array [
},
],
},
"transform": Array [
"transform": [
1,
0,
0,
@ -244,15 +244,15 @@ Array [
`;
exports[`@idraw/board: src/lib/context Context.clearRect 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 1800,
"width": 2000,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -266,14 +266,14 @@ Array [
`;
exports[`@idraw/board: src/lib/context Context.closePath 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"fillRule": "nonzero",
"path": Array [
Object {
"props": Object {},
"transform": Array [
"path": [
{
"props": {},
"transform": [
1,
0,
0,
@ -283,9 +283,9 @@ Array [
],
"type": "beginPath",
},
Object {
"props": Object {},
"transform": Array [
{
"props": {},
"transform": [
1,
0,
0,
@ -297,7 +297,7 @@ Array [
},
],
},
"transform": Array [
"transform": [
1,
0,
0,
@ -311,15 +311,15 @@ Array [
`;
exports[`@idraw/board: src/lib/context Context.createPattern 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 600,
"width": 600,
"x": 0,
"y": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -333,9 +333,9 @@ Array [
`;
exports[`@idraw/board: src/lib/context Context.drawImage 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"dHeight": 0,
"dWidth": 0,
"dx": 22,
@ -346,7 +346,7 @@ Array [
"sx": 0,
"sy": 0,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -356,8 +356,8 @@ Array [
],
"type": "drawImage",
},
Object {
"props": Object {
{
"props": {
"dHeight": 104,
"dWidth": 102,
"dx": 22,
@ -368,7 +368,7 @@ Array [
"sx": 122,
"sy": 124,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -382,14 +382,14 @@ Array [
`;
exports[`@idraw/board: src/lib/context Context.fill 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"fillRule": "nonzero",
"path": Array [
Object {
"props": Object {},
"transform": Array [
"path": [
{
"props": {},
"transform": [
1,
0,
0,
@ -401,7 +401,7 @@ Array [
},
],
},
"transform": Array [
"transform": [
1,
0,
0,
@ -415,15 +415,15 @@ Array [
`;
exports[`@idraw/board: src/lib/context Context.fillRect 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 200,
"width": 160,
"x": 20,
"y": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -437,15 +437,15 @@ Array [
`;
exports[`@idraw/board: src/lib/context Context.fillText 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"maxWidth": null,
"text": "Hello world",
"x": 100,
"y": 200,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -459,14 +459,14 @@ Array [
`;
exports[`@idraw/board: src/lib/context Context.lineTo 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"fillRule": "nonzero",
"path": Array [
Object {
"props": Object {},
"transform": Array [
"path": [
{
"props": {},
"transform": [
1,
0,
0,
@ -476,12 +476,12 @@ Array [
],
"type": "beginPath",
},
Object {
"props": Object {
{
"props": {
"x": 20,
"y": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -493,7 +493,7 @@ Array [
},
],
},
"transform": Array [
"transform": [
1,
0,
0,
@ -507,14 +507,14 @@ Array [
`;
exports[`@idraw/board: src/lib/context Context.moveTo 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"fillRule": "nonzero",
"path": Array [
Object {
"props": Object {},
"transform": Array [
"path": [
{
"props": {},
"transform": [
1,
0,
0,
@ -524,12 +524,12 @@ Array [
],
"type": "beginPath",
},
Object {
"props": Object {
{
"props": {
"x": 20,
"y": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -541,7 +541,7 @@ Array [
},
],
},
"transform": Array [
"transform": [
1,
0,
0,
@ -555,14 +555,14 @@ Array [
`;
exports[`@idraw/board: src/lib/context Context.rect 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"fillRule": "nonzero",
"path": Array [
Object {
"props": Object {},
"transform": Array [
"path": [
{
"props": {},
"transform": [
1,
0,
0,
@ -572,14 +572,14 @@ Array [
],
"type": "beginPath",
},
Object {
"props": Object {
{
"props": {
"height": 400,
"width": 200,
"x": 20,
"y": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -591,7 +591,7 @@ Array [
},
],
},
"transform": Array [
"transform": [
1,
0,
0,
@ -605,15 +605,15 @@ Array [
`;
exports[`@idraw/board: src/lib/context Context.restore 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 200,
"width": 200,
"x": 20,
"y": 20,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -623,14 +623,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 200,
"width": 200,
"x": 300,
"y": 150,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -644,13 +644,13 @@ Array [
`;
exports[`@idraw/board: src/lib/context Context.rotate 1`] = `
Array [
Object {
"props": Object {
"path": Array [
Object {
"props": Object {},
"transform": Array [
[
{
"props": {
"path": [
{
"props": {},
"transform": [
1,
0,
0,
@ -660,14 +660,14 @@ Array [
],
"type": "beginPath",
},
Object {
"props": Object {
{
"props": {
"height": 400,
"width": 200,
"x": 20,
"y": 40,
},
"transform": Array [
"transform": [
0.8660254037844387,
0.49999999999999994,
-0.49999999999999994,
@ -679,7 +679,7 @@ Array [
},
],
},
"transform": Array [
"transform": [
0.8660254037844387,
0.49999999999999994,
-0.49999999999999994,
@ -693,15 +693,15 @@ Array [
`;
exports[`@idraw/board: src/lib/context Context.save 1`] = `
Array [
Object {
"props": Object {
[
{
"props": {
"height": 200,
"width": 200,
"x": 20,
"y": 20,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -711,14 +711,14 @@ Array [
],
"type": "fillRect",
},
Object {
"props": Object {
{
"props": {
"height": 200,
"width": 200,
"x": 300,
"y": 150,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -732,13 +732,13 @@ Array [
`;
exports[`@idraw/board: src/lib/context Context.scale 1`] = `
Array [
Object {
"props": Object {
"path": Array [
Object {
"props": Object {},
"transform": Array [
[
{
"props": {
"path": [
{
"props": {},
"transform": [
1,
0,
0,
@ -748,14 +748,14 @@ Array [
],
"type": "beginPath",
},
Object {
"props": Object {
{
"props": {
"height": 400,
"width": 200,
"x": 20,
"y": 40,
},
"transform": Array [
"transform": [
2,
0,
0,
@ -767,7 +767,7 @@ Array [
},
],
},
"transform": Array [
"transform": [
2,
0,
0,
@ -781,13 +781,13 @@ Array [
`;
exports[`@idraw/board: src/lib/context Context.stroke 1`] = `
Array [
Object {
"props": Object {
"path": Array [
Object {
"props": Object {},
"transform": Array [
[
{
"props": {
"path": [
{
"props": {},
"transform": [
1,
0,
0,
@ -797,14 +797,14 @@ Array [
],
"type": "beginPath",
},
Object {
"props": Object {
{
"props": {
"height": 400,
"width": 200,
"x": 20,
"y": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -816,7 +816,7 @@ Array [
},
],
},
"transform": Array [
"transform": [
1,
0,
0,
@ -830,13 +830,13 @@ Array [
`;
exports[`@idraw/board: src/lib/context Context.translate 1`] = `
Array [
Object {
"props": Object {
"path": Array [
Object {
"props": Object {},
"transform": Array [
[
{
"props": {
"path": [
{
"props": {},
"transform": [
1,
0,
0,
@ -846,14 +846,14 @@ Array [
],
"type": "beginPath",
},
Object {
"props": Object {
{
"props": {
"height": 400,
"width": 200,
"x": 20,
"y": 40,
},
"transform": Array [
"transform": [
1,
0,
0,
@ -865,7 +865,7 @@ Array [
},
],
},
"transform": Array [
"transform": [
1,
0,
0,

14
packages/util/__tests__/lib/loader.test.ts
View file

@ -1,11 +1,8 @@
import './../../../../__tests__/polyfill/image'
import {
loadHTML, loadImage, loadSVG
} from '../../src/lib/loader';
import './../../../../__tests__/polyfill/image';
import { loadHTML, loadImage, loadSVG } from '../../src/lib/loader';
import { parseHTMLToDataURL, parseSVGToDataURL } from './../../src/lib/parser';
describe('@idraw/util: lib/loader', () => {
test('loadHTML', async () => {
const html = `
<style>
@ -56,15 +53,14 @@ describe('@idraw/util: lib/loader', () => {
`;
const opts = {
width: 120,
height: 80,
}
height: 80
};
const result = await loadHTML(html, opts);
const expectDataURL = await parseHTMLToDataURL(html, opts);
const expectImage = await loadImage(expectDataURL);
expect(result.src).toStrictEqual(expectImage.src);
});
test('loadSVG', async () => {
const svg = `<svg t="1622524780663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8365" width="200" height="200"><path d="M881 442.4H519.7v148.5h206.4c-8.9 48-35.9 88.6-76.6 115.8-34.4 23-78.3 36.6-129.9 36.6-99.9 0-184.4-67.5-214.6-158.2-7.6-23-12-47.6-12-72.9s4.4-49.9 12-72.9c30.3-90.6 114.8-158.1 214.7-158.1 56.3 0 106.8 19.4 146.6 57.4l110-110.1c-66.5-62-153.2-100-256.6-100-149.9 0-279.6 86-342.7 211.4-26 51.8-40.8 110.4-40.8 172.4S151 632.8 177 684.6C240.1 810 369.8 896 519.7 896c103.6 0 190.4-34.4 253.8-93 72.5-66.8 114.4-165.2 114.4-282.1 0-27.2-2.4-53.3-6.9-78.5z" p-id="8366" fill="#1296db"></path></svg>`;
const result = await loadSVG(svg);
@ -72,6 +68,4 @@ describe('@idraw/util: lib/loader', () => {
const expectImage = await loadImage(expectDataURL);
expect(result.src).toStrictEqual(expectImage.src);
});
});

3033
pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

0
scripts/screen.config.js → scripts/screen.config.ts
View file

11
scripts/snapshot.js → scripts/snapshot.ts
View file

@ -14,9 +14,10 @@ async function main() {
const middlewares = [];
pageList.forEach((p, i) => {
middlewares.push(async (ctx = {}, next) => {
const { page, port } = ctx;
console.log(`[${i+1}/${pageList.length}] Screen: ${p.path}`);
await page.setViewport( { width: p.w, height: p.h } );
const { page, port } = ctx as any;
console.log(`[${i + 1}/${pageList.length}] Screen: ${p.path}`);
await page.setViewport({ width: p.w, height: p.h });
const pageUrl = `http://127.0.0.1:${port}/examples/${p.path || ''}`;
const result = await page.goto(pageUrl);
if (result.status() === 404) {
@ -29,13 +30,11 @@ async function main() {
await next();
});
});
await createScreenshot(middlewares, { baseDir: path.join(__dirname, '..') });
await createScreenshot(middlewares, { baseDir: path.join(__dirname, '..') });
}
function createPicPath(pagePath) {
let picPath = path.join(snapshotDir, pagePath);
picPath = picPath + '.jpg'; // picPath.replace(/\.html$/, '.jpg');
return picPath;
}

9
scripts/util/screen.ts
View file

@ -9,13 +9,6 @@ const port = 3001;
const width = 600;
const height = 600;
module.exports = {
createScreenshotBuffer,
createScreenshot,
width,
height
};
async function createScreenshotBuffer(pagePath: string) {
const middlewares = [];
let buf;
@ -62,3 +55,5 @@ async function createScreenshot(
server.on('SIGINT', () => process.exit(1));
});
}
export { createScreenshotBuffer, createScreenshot, width, height };

1
tsconfig.node.json
View file

@ -15,6 +15,7 @@
},
"include": [
"scripts/",
"__tests__/e2e.test.ts",
],
"exclude": [
"node_modules"