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

chore: update e2e testing

Browse source
This commit is contained in:
chenshenhai 2021-06-08 19:22:11 +08:00
parent 30dd34ef92
commit d61a6c9cf5
9 changed files with 150 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
__tests__/snapshot/board/examples/test/transform-large.html.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 72 KiB

BIN
__tests__/snapshot/board/examples/test/transform-small.html.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 107 KiB

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

@ -7,6 +7,8 @@ test('testing', async () => {
const opts = {
width: 600,
height: 400,
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 4
}
const mount = document.querySelector('#mount') as HTMLDivElement;
@ -74,8 +76,8 @@ test('testing', async () => {
expect(originCalls).toMatchSnapshot();
const displayCtx = board.getDisplayContext();
// @ts-ignore;
const displayCalls = displayCtx.__getDrawCalls();
expect(displayCalls).toMatchSnapshot();
// @ts-ignore;
const displayCalls = displayCtx.__getDrawCalls();
expect(displayCalls).toMatchSnapshot();
});

30
packages/board/examples/test/main.html
View file

@ -21,6 +21,34 @@
<div id="mount"></div>
<script src="./../../dist/index.global.js"></script>
<script src="./main.js"></script>
<script>
const { Board } = window.iDraw;
const mount = document.querySelector('#mount');
const board = new Board(mount, {
width: 600,
height: 400,
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 4
});
const ctx = board.getContext();
ctx.setFillStyle('#f0f0f0');
ctx.fillRect(10, 10, 200, 120);
ctx.setFillStyle('#cccccc');
ctx.fillRect(80, 80, 200, 120);
ctx.setFillStyle('#c0c0c0');
ctx.fillRect(160, 160, 200, 120);
ctx.setFillStyle('#e0e0e0');
ctx.fillRect(400 - 10, 300 - 10, 200, 100);
board.draw();
</script>
</body>
</html>

26
packages/board/examples/test/main.js
View file

@ -1,26 +0,0 @@
const { Board } = window.iDraw;
const mount = document.querySelector('#mount');
const board = new Board(mount, {
width: 600,
height: 400,
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 4
});
const ctx = board.getContext();
ctx.setFillStyle('#f0f0f0');
ctx.fillRect(10, 10, 200, 120);
ctx.setFillStyle('#cccccc');
ctx.fillRect(80, 80, 200, 120);
ctx.setFillStyle('#c0c0c0');
ctx.fillRect(160, 160, 200, 120);
ctx.setFillStyle('#e0e0e0');
ctx.fillRect(400 - 10, 300 - 10, 200, 100);
board.draw();

57
packages/board/examples/test/transform-large.html Normal file
View file

@ -0,0 +1,57 @@
<html>
<head>
<style></style>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
html,body { margin: 0; padding: 0; }
#mount canvas {
border-right: 1px solid #aaaaaa40;
border-bottom: 1px solid #aaaaaa40;
background-image:
linear-gradient(#aaaaaa40 1px, transparent 0),
linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
linear-gradient(#aaa 1px, transparent 0),
linear-gradient(90deg, #aaa 1px, transparent 0);
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
}
</style>
</head>
<body>
<div id="mount"></div>
<script src="./../../dist/index.global.js"></script>
<script>
const { Board } = window.iDraw;
const mount = document.querySelector('#mount');
const board = new Board(mount, {
width: 600,
height: 400,
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 4
});
const ctx = board.getContext();
ctx.setFillStyle('#f0f0f0');
ctx.fillRect(10, 10, 200, 120);
ctx.setFillStyle('#cccccc');
ctx.fillRect(80, 80, 200, 120);
ctx.setFillStyle('#c0c0c0');
ctx.fillRect(160, 160, 200, 120);
ctx.setFillStyle('#e0e0e0');
ctx.fillRect(400 - 10, 300 - 10, 200, 100);
board.scale(2);
board.scrollX(-600);
board.scrollY(-400);
board.draw();
</script>
</body>
</html>

55
packages/board/examples/test/transform-small.html Normal file
View file

@ -0,0 +1,55 @@
<html>
<head>
<style></style>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
html,body { margin: 0; padding: 0; }
#mount canvas {
border-right: 1px solid #aaaaaa40;
border-bottom: 1px solid #aaaaaa40;
background-image:
linear-gradient(#aaaaaa40 1px, transparent 0),
linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
linear-gradient(#aaa 1px, transparent 0),
linear-gradient(90deg, #aaa 1px, transparent 0);
background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
}
</style>
</head>
<body>
<div id="mount"></div>
<script src="./../../dist/index.global.js"></script>
<script>
const { Board } = window.iDraw;
const mount = document.querySelector('#mount');
const board = new Board(mount, {
width: 600,
height: 400,
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 4
});
const ctx = board.getContext();
ctx.setFillStyle('#f0f0f0');
ctx.fillRect(10, 10, 200, 120);
ctx.setFillStyle('#cccccc');
ctx.fillRect(80, 80, 200, 120);
ctx.setFillStyle('#c0c0c0');
ctx.fillRect(160, 160, 200, 120);
ctx.setFillStyle('#e0e0e0');
ctx.fillRect(400 - 10, 300 - 10, 200, 100);
board.scale(0.5);
board.draw();
</script>
</body>
</html>

2
scripts/screen.config.js
View file

@ -1,5 +1,7 @@
const pageList = [
{ path: 'board/examples/test/main.html', w: 600, h: 400, delay: 1000 },
{ path: 'board/examples/test/transform-small.html', w: 600, h: 400, delay: 1000 },
{ path: 'board/examples/test/transform-large.html', w: 600, h: 400, delay: 1000 },
{ path: 'core/examples/features/rect.html', w: 600, h: 400, delay: 1000 },
{ path: 'core/examples/features/text.html', w: 600, h: 400, delay: 1000 },
{ path: 'core/examples/features/svg.html', w: 600, h: 400, delay: 1000 },

3
scripts/snapshot.js
View file

@ -12,9 +12,10 @@ main();
async function main() {
removeFullDir(snapshotDir);
const middlewares = [];
pageList.forEach((p) => {
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 pageUrl = `http://127.0.0.1:${port}/packages/${p.path || ''}`;
const result = await page.goto(pageUrl);