chore: update testing

.github/workflows/node.js.yml

@@ -26,4 +26,5 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm install
+    - run: npm run beforetest
     - run: npm run test

__tests__/e2e.test.js

@@ -15,11 +15,12 @@ const { PNG } = pngjs;
 async function diff() {
   const middlewares = [];
   const diffRateList = [];
-  pageList.forEach((p) => {
+  pageList.forEach((p, i) => {
     middlewares.push(async (ctx = {}, next) => {
       const { page, port } = ctx;
       const width = p.w;
       const height = p.h;
+      console.log(`[${i+1}/${pageList.length}] E2E Testing: ${p.path}`)
       await page.setViewport( { width: p.w, height: p.h } );
       const pageUrl = `http://127.0.0.1:${port}/packages/${p.path || ''}`;
       await page.goto(pageUrl);

package.json

@@ -9,11 +9,13 @@
     "init": "lerna bootstrap --npm-client=cnpm",
     "clear": "rm -rf ./packages/*/dist/ & rm -rf ./packages/*/node_modules/",
     "jest": "jest --config jest.config.js",
-    "test": "lerna bootstrap --no-ci && npm run build && npm run jest && npm run e2e",
+    "beforetest": "lerna bootstrap --no-ci && npm run build",
+    "test": "npm run e2e && npm run jest",
     "serve": "http-server ./",
     "lint": "eslint  --fix --ext .ts packages/*/src/**",
     "precommit": "npm run lint",
-    "prepush": "npm run lint"
+    "prepush": "npm run lint",
+    "clear:jest": "rm -rf ./packages/*/__tests__/__snapshots__"
   },
   "devDependencies": {
     "@babel/core": "^7.13.14",

packages/board/__tests__/__snapshots__/index.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`@idraw/board: context 1`] = `
+exports[`@idraw/board context 1`] = `
 Array [
   Object {
     "props": Object {
@@ -64,7 +64,7 @@ Array [
 ]
 `;
 
-exports[`@idraw/board: context 2`] = `
+exports[`@idraw/board context 2`] = `
 Array [
   Object {
     "props": Object {

packages/board/__tests__/__snapshots__/scale.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`@idraw/board: scroll 1`] = `
+exports[`@idraw/board scale 1`] = `
 Array [
   Object {
     "props": Object {
@@ -64,7 +64,7 @@ Array [
 ]
 `;
 
-exports[`@idraw/board: scroll 2`] = `
+exports[`@idraw/board scale 2`] = `
 Array [
   Object {
     "props": Object {

packages/board/__tests__/__snapshots__/scroll.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`@idraw/board: scroll 1`] = `
+exports[`@idraw/board scroll 1`] = `
 Array [
   Object {
     "props": Object {
@@ -64,7 +64,7 @@ Array [
 ]
 `;
 
-exports[`@idraw/board: scroll 2`] = `
+exports[`@idraw/board scroll 2`] = `
 Array [
   Object {
     "props": Object {

packages/board/__tests__/index.test.ts

@@ -1,41 +1,45 @@
 import Board from './../src';
 import { getData } from './data';
 
-test('@idraw/board: context', async () => {  
-  document.body.innerHTML = `
-    <div id="mount"></div>
-  `;
-  const opts = {
-    width: 600,
-    height: 400,
-    contextWidth: 600,
-    contextHeight: 400,
-    devicePixelRatio: 4
-  }
-  const mount = document.querySelector('#mount') as HTMLDivElement;
-  const board = new Board(mount, opts);
 
-  const ctx = board.getContext();
+describe('@idraw/board', () => {
-  const data = getData();
+  test('context', async () => {  
-
+    document.body.innerHTML = `
-  board.clear();
+      <div id="mount"></div>
-  ctx.clearRect(0, 0, opts.width, opts.height);
+    `;
-  ctx.setFillStyle('#ffffff');
+    const opts = {
-  ctx.fillRect(0, 0, opts.width, opts.height);
+      width: 600,
-  data.elements.forEach(ele => {
+      height: 400,
-    ctx.setFillStyle(ele.desc.color);
+      contextWidth: 600,
-    ctx.fillRect(ele.x, ele.y, ele.w, ele.h);
+      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 => {
+      ctx.setFillStyle(ele.desc.color);
+      ctx.fillRect(ele.x, ele.y, ele.w, ele.h);
+    });
+    board.draw();
+  
+    const originCtx = board.getOriginContext();
+    // @ts-ignore;
+    const originCalls = originCtx.__getDrawCalls();
+    expect(originCalls).toMatchSnapshot();
+  
+    const displayCtx = board.getDisplayContext();
+    // @ts-ignore;
+    const displayCalls = displayCtx.__getDrawCalls();
+    expect(displayCalls).toMatchSnapshot();
+  
   });
-  board.draw();
+})
 
-  const originCtx = board.getOriginContext();
-  // @ts-ignore;
-  const originCalls = originCtx.__getDrawCalls();
-  expect(originCalls).toMatchSnapshot();
-
-  const displayCtx = board.getDisplayContext();
-  // @ts-ignore;
-  const displayCalls = displayCtx.__getDrawCalls();
-  expect(displayCalls).toMatchSnapshot();
-
-});

packages/board/__tests__/scale.test.ts

@@ -1,44 +1,47 @@
 import Board from '../src';
 import { getData } from './data';
 
-test('@idraw/board: scroll', async () => {  
+describe('@idraw/board', () => {
-  document.body.innerHTML = `
-    <div id="mount"></div>
-  `;
-  const opts = {
-    width: 600,
-    height: 400,
-    contextWidth: 600,
-    contextHeight: 400,
-    devicePixelRatio: 4
-  }
-  const mount = document.querySelector('#mount') as HTMLDivElement;
-  const board = new Board(mount, opts);
 
-  const ctx = board.getContext();
+  test('scale', async () => {  
-  const data = getData();
+    document.body.innerHTML = `
-
+      <div id="mount"></div>
-  board.clear();
+    `;
-  ctx.clearRect(0, 0, opts.width, opts.height);
+    const opts = {
-  ctx.setFillStyle('#ffffff');
+      width: 600,
-  ctx.fillRect(0, 0, opts.width, opts.height);
+      height: 400,
-  data.elements.forEach(ele => {
+      contextWidth: 600,
-    ctx.setFillStyle(ele.desc.color);
+      contextHeight: 400,
-    ctx.fillRect(ele.x, ele.y, ele.w, ele.h);
+      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 => {
+      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":150,"bottom":100,"left":100,"right":150},"size":{"x":75,"y":50,"w":300,"h":200}})
+    board.draw();
+  
+    const originCtx = board.getOriginContext();
+    // @ts-ignore;
+    const originCalls = originCtx.__getDrawCalls();
+    expect(originCalls).toMatchSnapshot();
+  
+    const displayCtx = board.getDisplayContext();
+    // @ts-ignore;
+    const displayCalls = displayCtx.__getDrawCalls();
+    expect(displayCalls).toMatchSnapshot();
+  
   });
-
+})
-  const result = board.scale(0.5);
-  expect(result).toStrictEqual({"position":{"top":150,"bottom":100,"left":100,"right":150},"size":{"x":75,"y":50,"w":300,"h":200}})
-  board.draw();
-
-  const originCtx = board.getOriginContext();
-  // @ts-ignore;
-  const originCalls = originCtx.__getDrawCalls();
-  expect(originCalls).toMatchSnapshot();
-
-  const displayCtx = board.getDisplayContext();
-  // @ts-ignore;
-  const displayCalls = displayCtx.__getDrawCalls();
-  expect(displayCalls).toMatchSnapshot();
-
-});

packages/board/__tests__/scroll.test.ts

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