diff --git a/__tests__/e2e.test.js b/__tests__/e2e.test.js new file mode 100644 index 0000000..075fc4d --- /dev/null +++ b/__tests__/e2e.test.js @@ -0,0 +1,69 @@ +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 { PNG } = pngjs; + +async function diff() { + const middlewares = []; + const diffRateList = []; + pageList.forEach((p) => { + 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}/packages/${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(diffBuf)).scale(1).quality(100).write(parsePicPath(path.join(diffDir, p.path))); + } + diffRateList.push(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((rate) => { + console.log('diff-rate =', rate); + assert.ok(rate < 0.05); + }); + + done(); + }).catch(done); + }); +}); \ No newline at end of file diff --git a/__tests__/snapshot/board/examples/features/test.html.jpg b/__tests__/snapshot/board/examples/features/test.html.jpg new file mode 100644 index 0000000..5c5b0e0 Binary files /dev/null and b/__tests__/snapshot/board/examples/features/test.html.jpg differ diff --git a/__tests__/snapshot/core/examples/features/image.html.jpg b/__tests__/snapshot/core/examples/features/image.html.jpg new file mode 100644 index 0000000..74be356 Binary files /dev/null and b/__tests__/snapshot/core/examples/features/image.html.jpg differ diff --git a/__tests__/snapshot/core/examples/features/rect.html.jpg b/__tests__/snapshot/core/examples/features/rect.html.jpg new file mode 100644 index 0000000..f927f89 Binary files /dev/null and b/__tests__/snapshot/core/examples/features/rect.html.jpg differ diff --git a/__tests__/snapshot/core/examples/features/svg.html.jpg b/__tests__/snapshot/core/examples/features/svg.html.jpg new file mode 100644 index 0000000..68a45cc Binary files /dev/null and b/__tests__/snapshot/core/examples/features/svg.html.jpg differ diff --git a/__tests__/snapshot/core/examples/features/text.html.jpg b/__tests__/snapshot/core/examples/features/text.html.jpg new file mode 100644 index 0000000..19e4adc Binary files /dev/null and b/__tests__/snapshot/core/examples/features/text.html.jpg differ diff --git a/packages/board/example/basic/index.html b/packages/board/examples/basic/index.html similarity index 100% rename from packages/board/example/basic/index.html rename to packages/board/examples/basic/index.html diff --git a/packages/board/example/basic/main.js b/packages/board/examples/basic/main.js similarity index 100% rename from packages/board/example/basic/main.js rename to packages/board/examples/basic/main.js diff --git a/packages/board/example/features/index.html b/packages/board/examples/features/index.html similarity index 100% rename from packages/board/example/features/index.html rename to packages/board/examples/features/index.html diff --git a/packages/board/example/features/lib/action.js b/packages/board/examples/features/lib/action.js similarity index 96% rename from packages/board/example/features/lib/action.js rename to packages/board/examples/features/lib/action.js index 9353d65..8e8ba5d 100644 --- a/packages/board/example/features/lib/action.js +++ b/packages/board/examples/features/lib/action.js @@ -26,7 +26,7 @@ function isPointInElement(board, p = {x, y}) { function moveElement(board, idx, moveX, moveY) { const data = getData(); - const scale = getScale(); + const scale = getScale() || 1; if (data.elements[idx]) { // data.elements[idx].x += (moveX * scale * opts.devicePixelRatio); // data.elements[idx].y += (moveY * scale * opts.devicePixelRatio); diff --git a/packages/board/example/features/lib/data.js b/packages/board/examples/features/lib/data.js similarity index 100% rename from packages/board/example/features/lib/data.js rename to packages/board/examples/features/lib/data.js diff --git a/packages/board/example/features/lib/draw.js b/packages/board/examples/features/lib/draw.js similarity index 100% rename from packages/board/example/features/lib/draw.js rename to packages/board/examples/features/lib/draw.js diff --git a/packages/board/example/features/lib/event.js b/packages/board/examples/features/lib/event.js similarity index 100% rename from packages/board/example/features/lib/event.js rename to packages/board/examples/features/lib/event.js diff --git a/packages/board/example/features/lib/opts.js b/packages/board/examples/features/lib/opts.js similarity index 100% rename from packages/board/example/features/lib/opts.js rename to packages/board/examples/features/lib/opts.js diff --git a/packages/board/example/features/lib/scale.js b/packages/board/examples/features/lib/scale.js similarity index 89% rename from packages/board/example/features/lib/scale.js rename to packages/board/examples/features/lib/scale.js index d239789..e606c07 100644 --- a/packages/board/example/features/lib/scale.js +++ b/packages/board/examples/features/lib/scale.js @@ -3,6 +3,9 @@ let hasInited = false; export function doScale(board, scale) { if (hasInited === true) return; + if (!input) { + return; + } if (scale > 0) { input.value = scale; board.scale(scale); @@ -19,6 +22,9 @@ export function doScale(board, scale) { } export function getScale() { + if (!input) { + return; + } let val = 1; if (input.value * 1 > 0) { val = input.value * 1; diff --git a/packages/board/example/features/lib/scroll.js b/packages/board/examples/features/lib/scroll.js similarity index 94% rename from packages/board/example/features/lib/scroll.js rename to packages/board/examples/features/lib/scroll.js index 3791640..d9020f7 100644 --- a/packages/board/example/features/lib/scroll.js +++ b/packages/board/examples/features/lib/scroll.js @@ -4,6 +4,9 @@ let hasInited = false; export function doScroll(board, conf = {}) { if (hasInited === true) return; + if (!(inputX && inputY)) { + return; + } if (conf.scrollX >= 0) { inputX.value = conf.scrollX; diff --git a/packages/board/example/features/main.js b/packages/board/examples/features/main.js similarity index 100% rename from packages/board/example/features/main.js rename to packages/board/examples/features/main.js diff --git a/packages/board/examples/features/test.html b/packages/board/examples/features/test.html new file mode 100644 index 0000000..3efb8b5 --- /dev/null +++ b/packages/board/examples/features/test.html @@ -0,0 +1,29 @@ + + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/packages/board/example/scale/index.html b/packages/board/examples/scale/index.html similarity index 100% rename from packages/board/example/scale/index.html rename to packages/board/examples/scale/index.html diff --git a/packages/board/example/scale/main.js b/packages/board/examples/scale/main.js similarity index 100% rename from packages/board/example/scale/main.js rename to packages/board/examples/scale/main.js diff --git a/packages/core/example/lib/data/index.js b/packages/core/example/lib/data/index.js deleted file mode 100644 index 23d2f49..0000000 --- a/packages/core/example/lib/data/index.js +++ /dev/null @@ -1,17 +0,0 @@ -import dataRect from './rect.js'; -import dataImage from './image.js'; -import dataSVG from './svg.js'; -import dataText from './text.js'; - -const url = new URLSearchParams(window.location.search); - -const dataMap = { - 'rect': dataRect, - 'image': dataImage, - 'svg': dataSVG, - 'text': dataText -} - -export function getData() { - return dataMap[url.get('data')] || dataMap['rect']; -} \ No newline at end of file diff --git a/packages/core/example/css/index.css b/packages/core/examples/features/css/index.css similarity index 100% rename from packages/core/example/css/index.css rename to packages/core/examples/features/css/index.css diff --git a/packages/core/examples/features/image.html b/packages/core/examples/features/image.html new file mode 100644 index 0000000..2490f0e --- /dev/null +++ b/packages/core/examples/features/image.html @@ -0,0 +1,25 @@ + + + + + + + + + +
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/packages/core/example/index.html b/packages/core/examples/features/index.html similarity index 89% rename from packages/core/example/index.html rename to packages/core/examples/features/index.html index 2ef456c..dce8fb1 100644 --- a/packages/core/example/index.html +++ b/packages/core/examples/features/index.html @@ -31,7 +31,7 @@ - - + + \ No newline at end of file diff --git a/packages/core/example/lib/data/circle.js b/packages/core/examples/features/lib/data/circle.js similarity index 100% rename from packages/core/example/lib/data/circle.js rename to packages/core/examples/features/lib/data/circle.js diff --git a/packages/core/example/lib/data/image.js b/packages/core/examples/features/lib/data/image.js similarity index 82% rename from packages/core/example/lib/data/image.js rename to packages/core/examples/features/lib/data/image.js index e43f115..2cee87f 100644 --- a/packages/core/example/lib/data/image.js +++ b/packages/core/examples/features/lib/data/image.js @@ -15,7 +15,7 @@ const data = { // angle: 30, // angle: 0, desc: { - src: './images/computer.png', + src: './../images/computer.png', } }, { @@ -30,7 +30,7 @@ const data = { borderColor: '#bd0b64', type: 'image', desc: { - src: './images/chart.png', + src: './../images/chart.png', } }, { @@ -42,7 +42,7 @@ const data = { type: 'image', angle: 80, desc: { - src: './images/phone.png', + src: './../images/phone.png', } }, { @@ -53,7 +53,7 @@ const data = { h: 100, type: 'image', desc: { - src: './images/building-001.png', + src: './../images/building-001.png', } }, { @@ -64,7 +64,7 @@ const data = { h: 100, type: 'image', desc: { - src: './images/building-002.png', + src: './../images/building-002.png', } }, { @@ -75,7 +75,7 @@ const data = { h: 100, type: 'image', desc: { - src: './images/building-003.png', + src: './../images/building-003.png', } } ] diff --git a/packages/core/examples/features/lib/data/index.js b/packages/core/examples/features/lib/data/index.js new file mode 100644 index 0000000..b62a2de --- /dev/null +++ b/packages/core/examples/features/lib/data/index.js @@ -0,0 +1,42 @@ +import dataRect from './rect.js'; +import dataImage from './image.js'; +import dataSVG from './svg.js'; +import dataText from './text.js'; + +const url = new URLSearchParams(window.location.search); + +const dataMap = { + 'rect': dataRect, + 'image': dataImage, + 'svg': dataSVG, + 'text': dataText +} + +export function getData() { + return dataMap[getPageName()] || dataMap[url.get('data')] || dataMap['rect']; +} + +function getPageName() { + // const pathname = window.location.pathname || ''; + // const reg = /(?[\w+]{1,})\.html$/; + // const page = reg.exec(pathname)?.groups?.pageName || ''; + // return page; + + const pathname = window.location.pathname || ''; + const list = pathname.split('/'); + let pageName = list.pop() || ''; + pageName = pageName.replace(/\.html$/ig, ''); + return pageName; + + // return getQueryString('data') || 'rect'; +} + + +// function getQueryString(name) { +// let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); +// let r = window.location.search.substr(1).match(reg); +// if (r != null) { +// return decodeURIComponent(r[2]); +// }; +// return null; +// } \ No newline at end of file diff --git a/packages/core/example/lib/data/rect.js b/packages/core/examples/features/lib/data/rect.js similarity index 100% rename from packages/core/example/lib/data/rect.js rename to packages/core/examples/features/lib/data/rect.js diff --git a/packages/core/example/lib/data/svg.js b/packages/core/examples/features/lib/data/svg.js similarity index 100% rename from packages/core/example/lib/data/svg.js rename to packages/core/examples/features/lib/data/svg.js diff --git a/packages/core/example/lib/data/text.js b/packages/core/examples/features/lib/data/text.js similarity index 100% rename from packages/core/example/lib/data/text.js rename to packages/core/examples/features/lib/data/text.js diff --git a/packages/core/example/lib/element.js b/packages/core/examples/features/lib/element.js similarity index 98% rename from packages/core/example/lib/element.js rename to packages/core/examples/features/lib/element.js index 43d1dc5..addf14e 100644 --- a/packages/core/example/lib/element.js +++ b/packages/core/examples/features/lib/element.js @@ -5,6 +5,7 @@ let hasInited = false; export function doElemens(core) { if (hasInited === true) return; + if (!dom) return; renderElemens(core); listenElements(core); } diff --git a/packages/core/example/main.js b/packages/core/examples/features/lib/main.js similarity index 54% rename from packages/core/example/main.js rename to packages/core/examples/features/lib/main.js index 49e0607..a3e5d38 100644 --- a/packages/core/example/main.js +++ b/packages/core/examples/features/lib/main.js @@ -1,16 +1,11 @@ -import { getData } from './lib/data/index.js'; -import { doScale } from './lib/scale.js'; -import { doScroll } from './lib/scroll.js'; -import { doElemens } from './lib/element.js'; +import { getData } from './data/index.js'; +import { doScale } from './scale.js'; +import { doScroll } from './scroll.js'; +import { doElemens } from './element.js'; const { Core } = window.iDraw; const data = getData(); const mount = document.querySelector('#mount'); -// const defaultConf = { -// scale: 0.8, -// scrollX: 100, -// scrollY: 50, -// } const defaultConf = { scale: 1, @@ -23,9 +18,11 @@ const core = new Core(mount, { devicePixelRatio: 4 }); -console.log('core ===', core); core.setData(data); +core.draw(); + doScale(core, defaultConf.scale); doScroll(core, defaultConf); doElemens(core); + diff --git a/packages/core/example/lib/scale.js b/packages/core/examples/features/lib/scale.js similarity index 95% rename from packages/core/example/lib/scale.js rename to packages/core/examples/features/lib/scale.js index a271ef6..e780af6 100644 --- a/packages/core/example/lib/scale.js +++ b/packages/core/examples/features/lib/scale.js @@ -3,6 +3,7 @@ let hasInited = false; export function doScale(core, scale) { if (hasInited === true) return; + if (!input) return; if (scale > 0) { input.value = scale; core.scale(scale); diff --git a/packages/core/example/lib/scroll.js b/packages/core/examples/features/lib/scroll.js similarity index 91% rename from packages/core/example/lib/scroll.js rename to packages/core/examples/features/lib/scroll.js index 3a1c1a7..7e240af 100644 --- a/packages/core/example/lib/scroll.js +++ b/packages/core/examples/features/lib/scroll.js @@ -3,7 +3,8 @@ const inputY = document.querySelector('#scrollY'); let hasInited = false; export function doScroll(core, conf = {}) { - if (hasInited === true) return; + if (hasInited === true) return; + if (!(inputY && inputX)) return; if (conf.scrollX >= 0) { inputX.value = conf.scrollX; diff --git a/packages/core/examples/features/rect.html b/packages/core/examples/features/rect.html new file mode 100644 index 0000000..2490f0e --- /dev/null +++ b/packages/core/examples/features/rect.html @@ -0,0 +1,25 @@ + + + + + + + + + +
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/packages/core/examples/features/svg.html b/packages/core/examples/features/svg.html new file mode 100644 index 0000000..2490f0e --- /dev/null +++ b/packages/core/examples/features/svg.html @@ -0,0 +1,25 @@ + + + + + + + + + +
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/packages/core/examples/features/text.html b/packages/core/examples/features/text.html new file mode 100644 index 0000000..2490f0e --- /dev/null +++ b/packages/core/examples/features/text.html @@ -0,0 +1,25 @@ + + + + + + + + + +
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/packages/core/example/images/building-001.png b/packages/core/examples/images/building-001.png similarity index 100% rename from packages/core/example/images/building-001.png rename to packages/core/examples/images/building-001.png diff --git a/packages/core/example/images/building-002.png b/packages/core/examples/images/building-002.png similarity index 100% rename from packages/core/example/images/building-002.png rename to packages/core/examples/images/building-002.png diff --git a/packages/core/example/images/building-003.png b/packages/core/examples/images/building-003.png similarity index 100% rename from packages/core/example/images/building-003.png rename to packages/core/examples/images/building-003.png diff --git a/packages/core/example/images/chart.png b/packages/core/examples/images/chart.png similarity index 100% rename from packages/core/example/images/chart.png rename to packages/core/examples/images/chart.png diff --git a/packages/core/example/images/computer.png b/packages/core/examples/images/computer.png similarity index 100% rename from packages/core/example/images/computer.png rename to packages/core/examples/images/computer.png diff --git a/packages/core/example/images/phone.png b/packages/core/examples/images/phone.png similarity index 100% rename from packages/core/example/images/phone.png rename to packages/core/examples/images/phone.png diff --git a/scripts/screen.config.js b/scripts/screen.config.js index e6e7f6c..bed60ee 100644 --- a/scripts/screen.config.js +++ b/scripts/screen.config.js @@ -1,7 +1,10 @@ const pageList = [ - // { path: 'paint/examples/path/draw.html', w: 600, h: 600, delay: 200 }, - // { path: 'paint/examples/path/play.html', w: 600, h: 600, delay: 8000 }, - { path: 'drag-core/examples/demo.html', w: 500, h: 1000, delay: 2000 }, + { path: 'board/examples/features/test.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 }, + { path: 'core/examples/features/image.html', w: 600, h: 400, delay: 1000 }, + // { path: 'core/examples/test.html', w: 600, h: 600, delay: 8000 }, ] module.exports = { diff --git a/scripts/snapshot.js b/scripts/snapshot.js index a9cc823..165f1cf 100644 --- a/scripts/snapshot.js +++ b/scripts/snapshot.js @@ -2,6 +2,7 @@ const jimp = require('jimp'); const path = require('path'); const { delay } = require('./util/time'); const { createScreenshot } = require('./util/screen'); +const { removeFullDir } = require('./util/file'); const { pageList } = require('./screen.config'); const snapshotDir = path.join(__dirname, '..', '__tests__', 'snapshot'); @@ -9,13 +10,18 @@ const snapshotDir = path.join(__dirname, '..', '__tests__', 'snapshot'); main(); async function main() { + removeFullDir(snapshotDir); const middlewares = []; pageList.forEach((p) => { middlewares.push(async (ctx = {}, next) => { const { page, port } = ctx; await page.setViewport( { width: p.w, height: p.h } ); const pageUrl = `http://127.0.0.1:${port}/packages/${p.path || ''}`; - await page.goto(pageUrl); + const result = await page.goto(pageUrl); + if (result.status() === 404) { + console.error(`404 Not Found: ${pageUrl}`) + throw Error('404 status code found in result') + } await delay(p.delay || 100); const buf = await page.screenshot(); (await jimp.read(buf)).scale(1).quality(100).write(createPicPath(p.path)); @@ -28,7 +34,7 @@ async function main() { function createPicPath(pagePath) { let picPath = path.join(snapshotDir, pagePath); - picPath = picPath.replace(/\.html$/, '.jpg'); + picPath = picPath + '.jpg'; // picPath.replace(/\.html$/, '.jpg'); return picPath; } diff --git a/scripts/util/file.js b/scripts/util/file.js new file mode 100644 index 0000000..7f9ef77 --- /dev/null +++ b/scripts/util/file.js @@ -0,0 +1,26 @@ +const fs = require('fs'); +const path = require('path'); + +function removeFullDir(dirPath) { + let files = []; + if (fs.existsSync(dirPath)) { + files = fs.readdirSync(dirPath); + files.forEach((filename) => { + let curPath = path.join(dirPath, filename); + const stat = fs.statSync(curPath); + if(stat.isDirectory()) { + removeFullDir(curPath); + } else if (stat.isFile()) { + // fs.unlinkSync(curPath); + fs.rmSync(curPath); + } else { + fs.unlinkSync(curPath); + } + }); + fs.rmdirSync(dirPath); + } +} + +module.exports = { + removeFullDir, +} \ No newline at end of file