mirror of
https://github.com/idrawjs/idraw
synced 2026-05-24 10:08:34 +00:00
test: update e2e test for @idraw/core
This commit is contained in:
chenshenhai
parent
5a675cab87
commit
b4b61eb6dd
16 changed files with 1 additions and 403 deletions
BIN
__tests__/snapshot/core/examples/test/api.html.jpg
Normal file
BIN
__tests__/snapshot/core/examples/test/api.html.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 646 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 164 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 164 KiB |
|
|
@ -1,51 +0,0 @@
|
|||
<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 src="./../../../util/dist/index.global.js"></script>
|
||||
<script type="module">
|
||||
import data from './../features/lib/data/image.js';
|
||||
const Core = window.iDrawCore;
|
||||
const uitl = window.iDrawUtil;
|
||||
data.elements.forEach((elem, i) => {
|
||||
elem.uuid = `aaaaaaaa-aaaa-aaaa-aaaa-aa000000000${i}`;
|
||||
});
|
||||
const core = new Core(
|
||||
document.querySelector('#mount'), {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 600,
|
||||
contextHeight: 400,
|
||||
devicePixelRatio: 4,
|
||||
onlyRender: true,
|
||||
});
|
||||
core.setData(data);
|
||||
|
||||
setTimeout(() => {
|
||||
data.elements[0].desc.src = `./../images/phone.png?v=${Date.now()}`;
|
||||
core.updateElement(data.elements[0]);
|
||||
console.log('update ok!');
|
||||
}, 2000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
<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 type="module">
|
||||
import { getData } from './data.js';
|
||||
const Core = window.iDrawCore;
|
||||
const data = getData();
|
||||
const core = new Core(
|
||||
document.querySelector('#mount'), {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 1000,
|
||||
contextHeight: 900,
|
||||
devicePixelRatio: 4,
|
||||
}, {
|
||||
scrollWrapper: {
|
||||
use: true,
|
||||
}
|
||||
});
|
||||
core.setData(data);
|
||||
core.addElement({
|
||||
name: 'text-001',
|
||||
x: 790,
|
||||
y: 790,
|
||||
w: 200,
|
||||
h: 100,
|
||||
type: 'text',
|
||||
desc: {
|
||||
fontSize: 20,
|
||||
color: '#333333',
|
||||
text: '生活就像海洋，只有意志坚强的人，才能到达彼岸。',
|
||||
fontFamily: '',
|
||||
borderRadius: 20,
|
||||
borderWidth: 2,
|
||||
borderColor: '#bd0b64',
|
||||
}
|
||||
})
|
||||
core.scale(1);
|
||||
|
||||
core.resetSize({
|
||||
width: 300,
|
||||
height: 200,
|
||||
contextWidth: 990,
|
||||
contextHeight: 890,
|
||||
devicePixelRatio: 3,
|
||||
});
|
||||
core.scale(0.5);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<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 type="module">
|
||||
import { getData } from './data.js';
|
||||
const Core = window.iDrawCore;
|
||||
const data = getData();
|
||||
const core = new Core(
|
||||
document.querySelector('#mount'), {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 1000,
|
||||
contextHeight: 900,
|
||||
devicePixelRatio: 4
|
||||
});
|
||||
core.setData(data);
|
||||
const result = core.scale(0.5);
|
||||
console.log('scale: ', result);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<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 type="module">
|
||||
import { getData } from './data.js';
|
||||
const Core = window.iDrawCore;
|
||||
const data = getData();
|
||||
const core = new Core(
|
||||
document.querySelector('#mount'), {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 1200,
|
||||
contextHeight: 600,
|
||||
devicePixelRatio: 4
|
||||
});
|
||||
core.setData(data);
|
||||
core.scrollLeft(600);
|
||||
core.scrollTop(400);
|
||||
const result = core.scale(0.5);
|
||||
console.log('scale: ', result);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<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 type="module">
|
||||
import { getData } from './data.js';
|
||||
const Core = window.iDrawCore;
|
||||
const data = getData();
|
||||
const core = new Core( document.querySelector('#mount'), {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 1000,
|
||||
contextHeight: 600,
|
||||
devicePixelRatio: 4
|
||||
});
|
||||
core.setData(data);
|
||||
core.scrollLeft(400);
|
||||
core.scrollTop(400);
|
||||
const result = core.scale(0.8);
|
||||
// console.log('scale: ', result);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<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 type="module">
|
||||
import { getData } from './data.js';
|
||||
const Core = window.iDrawCore;
|
||||
const data = getData();
|
||||
const core = new Core(
|
||||
document.querySelector('#mount'), {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 1000,
|
||||
contextHeight: 900,
|
||||
devicePixelRatio: 4,
|
||||
}, {
|
||||
scrollWrapper: {
|
||||
use: true,
|
||||
lineWidth: 20,
|
||||
}
|
||||
});
|
||||
core.setData(data);
|
||||
const result = core.scale(1);
|
||||
console.log('scale: ', result);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<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 src="./../../../util/dist/index.global.js"></script>
|
||||
<script type="module">
|
||||
import data from './../features/lib/data/image.js';
|
||||
const Core = window.iDrawCore;
|
||||
const uitl = window.iDrawUtil;
|
||||
data.elements.forEach((elem, i) => {
|
||||
elem.uuid = `aaaaaaaa-aaaa-aaaa-aaaa-aa000000000${i}`;
|
||||
});
|
||||
const core = new Core(
|
||||
document.querySelector('#mount'), {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 600,
|
||||
contextHeight: 400,
|
||||
devicePixelRatio: 4
|
||||
});
|
||||
core.setData(data);
|
||||
|
||||
setTimeout(() => {
|
||||
data.elements[0].desc.src = `./../images/phone.png?v=${Date.now()}`;
|
||||
core.updateElement(data.elements[0]);
|
||||
console.log('update ok!');
|
||||
}, 2000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<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 src="./../../../util/dist/index.global.js"></script>
|
||||
<script type="module">
|
||||
import data from './../features/lib/data/image.js';
|
||||
const Core = window.iDrawCore;
|
||||
const uitl = window.iDrawUtil;
|
||||
data.elements.forEach((elem, i) => {
|
||||
elem.uuid = `aaaaaaaa-aaaa-aaaa-aaaa-aa000000000${i}`;
|
||||
});
|
||||
const core = new Core(
|
||||
document.querySelector('#mount'), {
|
||||
width: 600,
|
||||
height: 400,
|
||||
contextWidth: 600,
|
||||
contextHeight: 400,
|
||||
devicePixelRatio: 4
|
||||
});
|
||||
core.setData(data);
|
||||
|
||||
data.elements[0].desc.src = `./../images/phone.png?v=${Date.now()}`;
|
||||
core.updateElement(data.elements[0]);
|
||||
console.log('update ok!');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -4,13 +4,7 @@ const pageList = [
|
|||
{ path: 'board/examples/test/scroll.html', w: 620, h: 270, delay: 500 },
|
||||
{ path: 'board/examples/test/event.html', w: 620, h: 270, delay: 500 },
|
||||
{ path: 'core/examples/test/elements.html', w: 930, h: 540, delay: 500 },
|
||||
{ path: 'core/examples/test/scale-001.html', w: 600, h: 400, delay: 500 },
|
||||
{ path: 'core/examples/test/scale-002.html', w: 600, h: 400, delay: 500 },
|
||||
{ path: 'core/examples/test/scale-003.html', w: 600, h: 400, delay: 500 },
|
||||
{ path: 'core/examples/test/reset-size.html', w: 300, h: 300, delay: 500 },
|
||||
{ path: 'core/examples/test/update-element.html', w: 600, h: 400, delay: 500 },
|
||||
{ path: 'core/examples/test/update-element-later.html', w: 600, h: 400, delay: 2500 },
|
||||
// { path: 'core/examples/test.html', w: 600, h: 600, delay: 8000 },
|
||||
{ path: 'core/examples/test/api.html', w: 930, h: 1300, delay: 1000 },
|
||||
]
|
||||
|
||||
module.exports = {
|
||||
|
|
|
|||
Loading…
Reference in a new issue