test: improve e2e test

__tests__/e2e.test.ts

@@ -32,7 +32,7 @@ async function diff() {
       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);
+      await delay(p.delay || 200);
       const buf = await page.screenshot();
 
       const snapshotPicPath = parsePicPath(path.join(snapshotDir, p.path));

__tests__/polyfill/image.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-ignore
 window.Image = class {
   constructor() {
@@ -9,4 +10,4 @@ window.Image = class {
       }
     }, 50);
   }
-}
+};

__tests__/polyfill/mock-test.ts

@@ -1,17 +1,17 @@
 // https://stackoverflow.com/questions/61593774/how-do-i-test-code-that-uses-requestanimationframe-in-jest
 
-import { requestAnimationFrameMock } from "./requestanimateframe";
+import { requestAnimationFrameMock } from './requestanimateframe';
 
-describe("mock_requestAnimationFrame", () => {
+describe('mock_requestAnimationFrame', () => {
   beforeEach(() => {
     requestAnimationFrameMock.reset();
-  })
-  test("reqest -> trigger", () => {
+  });
+  test('reqest -> trigger', () => {
     const order: any = [];
     expect(requestAnimationFrameMock.queue.size).toBe(0);
     expect(order).toEqual([]);
 
-    requestAnimationFrame(t => order.push(1));
+    requestAnimationFrame((t) => order.push(1));
 
     expect(requestAnimationFrameMock.queue.size).toBe(1);
     expect(order).toEqual([]);
@@ -22,13 +22,13 @@ describe("mock_requestAnimationFrame", () => {
     expect(order).toEqual([1]);
   });
 
-  test("reqest -> request -> trigger -> trigger", () => {
+  test('reqest -> request -> trigger -> trigger', () => {
     const order: any = [];
     expect(requestAnimationFrameMock.queue.size).toBe(0);
     expect(order).toEqual([]);
 
-    requestAnimationFrame(t => order.push(1));
-    requestAnimationFrame(t => order.push(2));
+    requestAnimationFrame((t) => order.push(1));
+    requestAnimationFrame((t) => order.push(2));
 
     expect(requestAnimationFrameMock.queue.size).toBe(2);
     expect(order).toEqual([]);
@@ -44,12 +44,12 @@ describe("mock_requestAnimationFrame", () => {
     expect(order).toEqual([1, 2]);
   });
 
-  test("reqest -> cancel", () => {
+  test('reqest -> cancel', () => {
     const order: any = [];
     expect(requestAnimationFrameMock.queue.size).toBe(0);
     expect(order).toEqual([]);
 
-    const handle = requestAnimationFrame(t => order.push(1));
+    const handle = requestAnimationFrame((t) => order.push(1));
 
     expect(requestAnimationFrameMock.queue.size).toBe(1);
     expect(order).toEqual([]);
@@ -60,13 +60,13 @@ describe("mock_requestAnimationFrame", () => {
     expect(order).toEqual([]);
   });
 
-  test("reqest -> request -> cancel(1) -> trigger", () => {
+  test('reqest -> request -> cancel(1) -> trigger', () => {
     const order: any = [];
     expect(requestAnimationFrameMock.queue.size).toBe(0);
     expect(order).toEqual([]);
 
-    const handle = requestAnimationFrame(t => order.push(1));
-    requestAnimationFrame(t => order.push(2));
+    const handle = requestAnimationFrame((t) => order.push(1));
+    requestAnimationFrame((t) => order.push(2));
 
     expect(requestAnimationFrameMock.queue.size).toBe(2);
     expect(order).toEqual([]);
@@ -82,13 +82,13 @@ describe("mock_requestAnimationFrame", () => {
     expect(order).toEqual([2]);
   });
 
-  test("reqest -> request -> cancel(2) -> trigger", () => {
+  test('reqest -> request -> cancel(2) -> trigger', () => {
     const order: any = [];
     expect(requestAnimationFrameMock.queue.size).toBe(0);
     expect(order).toEqual([]);
 
-    requestAnimationFrame(t => order.push(1));
-    const handle = requestAnimationFrame(t => order.push(2));
+    requestAnimationFrame((t) => order.push(1));
+    const handle = requestAnimationFrame((t) => order.push(2));
 
     expect(requestAnimationFrameMock.queue.size).toBe(2);
     expect(order).toEqual([]);
@@ -104,21 +104,20 @@ describe("mock_requestAnimationFrame", () => {
     expect(order).toEqual([1]);
   });
 
-  test("triggerAllAnimationFrames", () => {
+  test('triggerAllAnimationFrames', () => {
     const order: any = [];
     expect(requestAnimationFrameMock.queue.size).toBe(0);
     expect(order).toEqual([]);
 
-    requestAnimationFrame(t => order.push(1));
-    requestAnimationFrame(t => order.push(2));
+    requestAnimationFrame((t) => order.push(1));
+    requestAnimationFrame((t) => order.push(2));
 
     requestAnimationFrameMock.triggerAllAnimationFrames();
 
-    expect(order).toEqual([1,2]);
-
+    expect(order).toEqual([1, 2]);
   });
 
-  test("does not fail if triggerNextAnimationFrame() is called with an empty queue.", () => {
+  test('does not fail if triggerNextAnimationFrame() is called with an empty queue.', () => {
     requestAnimationFrameMock.triggerNextAnimationFrame();
-  })
-});
+  });
+});

__tests__/polyfill/requestanimateframe.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/ban-types */
 // https://stackoverflow.com/questions/61593774/how-do-i-test-code-that-uses-requestanimationframe-in-jest
 // mock_requestAnimationFrame.js
 
@@ -5,33 +7,39 @@ class RequestAnimationFrameMockSession {
   handleCounter = 0;
   queue = new Map();
   requestAnimationFrame(callback: Function) {
-      const handle = this.handleCounter++;
-      this.queue.set(handle, callback);
-      return handle;
+    const handle = this.handleCounter++;
+    this.queue.set(handle, callback);
+    return handle;
   }
   cancelAnimationFrame(handle: Function) {
-      this.queue.delete(handle);
+    this.queue.delete(handle);
   }
-  triggerNextAnimationFrame(time=performance.now()) {
-      const nextEntry = this.queue.entries().next().value;
-      if(nextEntry === undefined) return;
+  triggerNextAnimationFrame(time = performance.now()) {
+    const nextEntry = this.queue.entries().next().value;
+    if (nextEntry === undefined) return;
 
-      const [nextHandle, nextCallback] = nextEntry;
+    const [nextHandle, nextCallback] = nextEntry;
 
-      nextCallback(time);
-      this.queue.delete(nextHandle);
+    nextCallback(time);
+    this.queue.delete(nextHandle);
   }
-  triggerAllAnimationFrames(time=performance.now()) {
-      while(this.queue.size > 0) this.triggerNextAnimationFrame(time);
+  triggerAllAnimationFrames(time = performance.now()) {
+    while (this.queue.size > 0) this.triggerNextAnimationFrame(time);
   }
   reset() {
-      this.queue.clear();
-      this.handleCounter = 0;
+    this.queue.clear();
+    this.handleCounter = 0;
   }
-};
+}
 
 export const requestAnimationFrameMock = new RequestAnimationFrameMockSession();
 
-window.requestAnimationFrame = requestAnimationFrameMock.requestAnimationFrame.bind(requestAnimationFrameMock);
+window.requestAnimationFrame =
+  requestAnimationFrameMock.requestAnimationFrame.bind(
+    requestAnimationFrameMock
+  );
 // @ts-ignore
-window.cancelAnimationFrame = requestAnimationFrameMock.cancelAnimationFrame.bind(requestAnimationFrameMock);
+window.cancelAnimationFrame =
+  requestAnimationFrameMock.cancelAnimationFrame.bind(
+    requestAnimationFrameMock
+  );

jest.cover.js

@@ -1,21 +1,22 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const config = require('./jest.config');
 
 module.exports = {
   ...config,
   ...{
-    "collectCoverage": true,
-    "coverageReporters": [
-      "clover",
+    collectCoverage: true,
+    coverageReporters: [
+      'clover',
       // "html",
-      "text-summary"
+      'text-summary'
     ],
-    "coverageThreshold": {
-      "global": {
-        "branches": 1,
-        "functions": 1,
-        "lines": 1,
-        "statements": 1
+    coverageThreshold: {
+      global: {
+        branches: 1,
+        functions: 1,
+        lines: 1,
+        statements: 1
       }
-    },
+    }
   }
-}
+};

package.json

@@ -18,7 +18,7 @@
     "jest:update": "jest --update-snapshot --config jest.config.js",
     "cover": "jest --config jest.cover.js",
     "beforetest": "lerna bootstrap --no-ci && npm run build",
-    "test": "npm run e2e && npm run jest",
+    "test": "npm run jest",
     "serve": "http-server ./",
     "lint": "eslint  --fix --ext .ts packages/*/src/**",
     "precommit": "npm run lint",

packages/board/__tests__/data.ts

@@ -1,5 +1,3 @@
-
-
 export function getData() {
   const data = {
     elements: [
@@ -10,7 +8,7 @@ export function getData() {
         h: 120,
         type: 'rect',
         desc: {
-          color: '#f0f0f0',
+          color: '#f0f0f0'
         }
       },
       {
@@ -20,7 +18,7 @@ export function getData() {
         h: 120,
         type: 'rect',
         desc: {
-          color: '#cccccc',
+          color: '#cccccc'
         }
       },
       {
@@ -30,7 +28,7 @@ export function getData() {
         h: 120,
         type: 'rect',
         desc: {
-          color: '#c0c0c0',
+          color: '#c0c0c0'
         }
       },
       {
@@ -40,10 +38,10 @@ export function getData() {
         h: 100,
         type: 'rect',
         desc: {
-          color: '#e0e0e0',
+          color: '#e0e0e0'
         }
       }
     ]
-  }
+  };
   return data;
-};
+}

packages/core/__tests__/index.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { requestAnimationFrameMock } from './../../../__tests__/polyfill/requestanimateframe';
 import './../../../__tests__/polyfill/image';
 

packages/core/__tests__/lib/core-element.test.ts

@@ -1,6 +1,5 @@
 // import { TypeData } from '@idraw/types';
 import Core from '../../src';
-import { getData } from '../data';
 
 describe('@idraw/core: Element API', () => {
   document.body.innerHTML = `
@@ -15,7 +14,58 @@ describe('@idraw/core: Element API', () => {
   };
   const mount = document.querySelector('#mount') as HTMLDivElement;
   const core = new Core(mount, opts);
-  const data = getData();
+  const data = {
+    elements: [
+      {
+        name: 'rect-001',
+        x: 10,
+        y: 10,
+        w: 200,
+        h: 100,
+        type: 'rect',
+        desc: {
+          bgColor: '#f0f0f0',
+          borderRadius: 20,
+          borderWidth: 10,
+          borderColor: '#bd0b64'
+        }
+      },
+      {
+        name: 'text-002',
+        x: 80,
+        y: 80,
+        w: 200,
+        h: 120,
+        // angle: 30,
+        type: 'text',
+        desc: {
+          fontSize: 20,
+          text: 'Hello Text',
+          color: '#666666',
+          borderRadius: 60,
+          borderWidth: 2,
+          borderColor: '#bd0b64'
+        }
+      },
+      {
+        name: 'text-003',
+        x: 80,
+        y: 80,
+        w: 200,
+        h: 120,
+        // angle: 30,
+        type: 'text',
+        desc: {
+          fontSize: 20,
+          text: 'Hello Text',
+          color: '#666666',
+          borderRadius: 60,
+          borderWidth: 2,
+          borderColor: '#bd0b64'
+        }
+      }
+    ]
+  };
   core.setData(data);
   const _data = core.getData();
 

packages/core/__tests__/move.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { requestAnimationFrameMock } from '../../../__tests__/polyfill/requestanimateframe';
 import '../../../__tests__/polyfill/image';
 

packages/core/src/lib/is.ts

@@ -1,8 +1,7 @@
-import { isColorStr } from "@idraw/util";
- 
+import { isColorStr } from '@idraw/util';
 
 function number(value: any) {
-  return (typeof value === 'number' && (value > 0 || value <= 0));
+  return typeof value === 'number' && (value > 0 || value <= 0);
 }
 
 function x(value: any) {
@@ -14,15 +13,15 @@ function y(value: any) {
 }
 
 function w(value: any) {
-  return (typeof value === 'number' && value >= 0);
+  return typeof value === 'number' && value >= 0;
 }
 
 function h(value: any) {
-  return (typeof value === 'number' && value >= 0);
+  return typeof value === 'number' && value >= 0;
 }
 
 function angle(value: any) {
-  return (typeof value === 'number' && value >= -360 && value <= 360);
+  return typeof value === 'number' && value >= -360 && value <= 360;
 }
 
 function borderWidth(value: any) {
@@ -38,19 +37,26 @@ function color(value: any) {
 }
 
 function imageURL(value: any) {
-  return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${value}`));
+  return (
+    typeof value === 'string' &&
+    /^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${value}`)
+  );
 }
 
 function imageBase64(value: any) {
-  return (typeof value === 'string' && /^(data:image\/)/.test(`${value}`));
+  return typeof value === 'string' && /^(data:image\/)/.test(`${value}`);
 }
 
 function imageSrc(value: any) {
-  return (imageBase64(value) || imageURL(value));
+  return imageBase64(value) || imageURL(value);
 }
 
 function svg(value: any) {
-  return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test(`${value}`.trim()) && /<\/[\s]{0,}svg>$/i.test(`${value}`.trim()));
+  return (
+    typeof value === 'string' &&
+    /^(<svg[\s]{1,}|<svg>)/i.test(`${value}`.trim()) &&
+    /<\/[\s]{0,}svg>$/i.test(`${value}`.trim())
+  );
 }
 
 function html(value: any) {
@@ -95,40 +101,53 @@ function fontWeight(value: any) {
 }
 
 const is: TypeIs = {
-  x, y, w, h, angle, number,
-  borderWidth, borderRadius, color,
-  imageSrc, imageURL, imageBase64, svg, html,
-  text, fontSize, lineHeight, textAlign, fontFamily, fontWeight,
-  strokeWidth,
+  x,
+  y,
+  w,
+  h,
+  angle,
+  number,
+  borderWidth,
+  borderRadius,
+  color,
+  imageSrc,
+  imageURL,
+  imageBase64,
+  svg,
+  html,
+  text,
+  fontSize,
+  lineHeight,
+  textAlign,
+  fontFamily,
+  fontWeight,
+  strokeWidth
 };
 
 type TypeIs = {
-  x: (value: any) => boolean,
-  y: (value: any) => boolean,
-  w: (value: any) => boolean,
-  h: (value: any) => boolean,
-  angle: (value: any) => boolean,
-  number: (value: any) => boolean,
-  borderWidth: (value: any) => boolean,
-  borderRadius: (value: any) => boolean,
-  color: (value: any) => boolean,
-  imageSrc: (value: any) => boolean,
-  imageURL: (value: any) => boolean,
-  imageBase64: (value: any) => boolean,
-  svg: (value: any) => boolean,
-  html: (value: any) => boolean,
-  text: (value: any) => boolean,
-  fontSize: (value: any) => boolean,
-  fontWeight: (value: any) => boolean,
-  lineHeight: (value: any) => boolean,
-  textAlign: (value: any) => boolean,
-  fontFamily: (value: any) => boolean,
-  strokeWidth: (value: any) => boolean,
-}
+  x: (value: any) => boolean;
+  y: (value: any) => boolean;
+  w: (value: any) => boolean;
+  h: (value: any) => boolean;
+  angle: (value: any) => boolean;
+  number: (value: any) => boolean;
+  borderWidth: (value: any) => boolean;
+  borderRadius: (value: any) => boolean;
+  color: (value: any) => boolean;
+  imageSrc: (value: any) => boolean;
+  imageURL: (value: any) => boolean;
+  imageBase64: (value: any) => boolean;
+  svg: (value: any) => boolean;
+  html: (value: any) => boolean;
+  text: (value: any) => boolean;
+  fontSize: (value: any) => boolean;
+  fontWeight: (value: any) => boolean;
+  lineHeight: (value: any) => boolean;
+  textAlign: (value: any) => boolean;
+  fontFamily: (value: any) => boolean;
+  strokeWidth: (value: any) => boolean;
+};
 
 export default is;
 
-
-export {
-  TypeIs,
-};
+export { TypeIs };

packages/util/__tests__/lib/loader.test.ts

@@ -1,6 +1,6 @@
-import './../../../../__tests__/polyfill/image';
+import '../../../../__tests__/polyfill/image';
 import { loadHTML, loadImage, loadSVG } from '../../src/lib/loader';
-import { parseHTMLToDataURL, parseSVGToDataURL } from './../../src/lib/parser';
+import { parseHTMLToDataURL, parseSVGToDataURL } from '../../src/lib/parser';
 
 describe('@idraw/util: lib/loader', () => {
   test('loadHTML', async () => {

scripts/screen.config.ts

@@ -1,12 +1,10 @@
 export const pageList = [
   { path: 'board/test/main.html', w: 620, h: 270, delay: 500 },
   { path: 'board/test/scale.html', w: 930, h: 540, delay: 500 },
-  { path: 'board/test/scroll.html', w: 620, h: 270, delay: 500 },
+  { path: 'board/test/scroll.html', w: 620, h: 270, delay: 800 },
   { path: 'board/test/event.html', w: 620, h: 270, delay: 500 },
   { path: 'core/test/elements.html', w: 930, h: 810, delay: 800 },
   { path: 'core/test/api.html', w: 930, h: 1570, delay: 800 },
   { path: 'core/test/resource.html', w: 930, h: 540, delay: 800 },
-  { path: 'idraw/test/api.html', w: 930, h: 540, delay: 800 },
+  { path: 'idraw/test/api.html', w: 930, h: 540, delay: 800 }
 ];
-
-