test: update unit test and e2e test

.npmrc

@@ -1 +1 @@
-# registry=https://registry.npmmirror.com
+registry=https://registry.npmmirror.com

jest.e2e.config.js

@@ -1,6 +1,4 @@
 module.exports = {
-  // "collectCoverage": true,
-  testEnvironment: 'jsdom',
   testTimeout: 2 * 60 * 1000,
   moduleFileExtensions: ['js', 'ts'],
   modulePaths: ['<rootDir>'],

package.json

@@ -28,47 +28,47 @@
     "pu2": "lerna version && npm run build && lerna publish from-git --force-publish"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.0",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-typescript": "^7.21.0",
+    "@babel/core": "^7.21.4",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-typescript": "^7.21.4",
     "@rollup/plugin-json": "^6.0.0",
     "@types/glob": "^8.1.0",
-    "@types/jest": "^29.4.0",
+    "@types/jest": "^29.5.0",
     "@types/koa-compose": "^3.2.5",
-    "@types/node": "^18.14.1",
+    "@types/node": "^18.15.11",
     "@types/serve-handler": "^6.1.1",
-    "@typescript-eslint/eslint-plugin": "^5.53.0",
-    "@typescript-eslint/parser": "^5.53.0",
-    "babel-jest": "^29.4.3",
+    "@typescript-eslint/eslint-plugin": "^5.57.0",
+    "@typescript-eslint/parser": "^5.57.0",
+    "babel-jest": "^29.5.0",
     "canvas": "^2.11.0",
     "chalk": "^5.2.0",
     "enquirer": "^2.3.6",
-    "esbuild": "^0.17.10",
-    "eslint": "^8.34.0",
-    "execa": "^7.0.0",
-    "fs-extra": "^11.1.0",
-    "glob": "^8.1.0",
+    "esbuild": "^0.17.15",
+    "eslint": "^8.37.0",
+    "execa": "^7.1.1",
+    "fs-extra": "^11.1.1",
+    "glob": "^9.3.2",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
-    "jest": "^29.4.3",
-    "jest-canvas-mock": "^2.4.0",
-    "jest-environment-jsdom": "^29.4.3",
+    "jest": "^29.5.0",
+    "jest-canvas-mock": "^2.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "jimp": "^0.22.7",
     "koa-compose": "^4.1.0",
-    "lerna": "^6.5.1",
+    "lerna": "^6.6.1",
     "pixelmatch": "^5.3.0",
     "pngjs": "^7.0.0",
-    "puppeteer": "^19.7.2",
-    "rollup": "^3.17.2",
-    "rollup-plugin-dts": "^5.2.0",
+    "puppeteer": "^19.8.2",
+    "rollup": "^3.20.2",
+    "rollup-plugin-dts": "^5.3.0",
     "rollup-plugin-esbuild": "^5.0.0",
     "serve-handler": "^6.1.5",
-    "terser": "^5.16.5",
-    "ts-morph": "^17.0.1",
+    "terser": "^5.16.8",
+    "ts-morph": "^18.0.0",
     "ts-node": "^10.9.1",
     "tslib": "^2.5.0",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.4",
-    "vite-node": "^0.28.5"
+    "typescript": "^5.0.3",
+    "vite": "^4.2.1",
+    "vite-node": "^0.29.8"
   }
 }

packages/core/__tests__/index.test.ts

@@ -28,12 +28,12 @@ describe('@idraw/core', () => {
 
     requestAnimationFrameMock.triggerNextAnimationFrame();
 
-    const originCtx = core.__getOriginContext2D();
+    const originCtx = core.$getOriginContext2D();
     // @ts-ignore;
     const originCalls = originCtx.__getDrawCalls();
     expect(originCalls).toMatchSnapshot();
 
-    const displayCtx = core.__getDisplayContext2D();
+    const displayCtx = core.$getDisplayContext2D();
     // @ts-ignore;
     const displayCalls = displayCtx.__getDrawCalls();
     expect(displayCalls).toMatchSnapshot();

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

@@ -16,7 +16,7 @@ describe('@idraw/core: lib/element', () => {
   };
   const mount = document.querySelector('#mount') as HTMLDivElement;
   const core = new Core(mount, opts);
-  const ctx = core.__getBoardContext();
+  const ctx = core.$getBoardContext();
   const data = getData();
 
   test('initData', async () => {

packages/core/__tests__/move.test.ts

@@ -37,12 +37,12 @@ describe('@idraw/core', () => {
 
     requestAnimationFrameMock.triggerNextAnimationFrame();
 
-    const originCtx = idraw.__getOriginContext2D();
+    const originCtx = idraw.$getOriginContext2D();
     // @ts-ignore;
     const originCalls = originCtx.__getDrawCalls();
     expect(originCalls).toMatchSnapshot();
 
-    const displayCtx = idraw.__getDisplayContext2D();
+    const displayCtx = idraw.$getDisplayContext2D();
     // @ts-ignore;
     const displayCalls = displayCtx.__getDrawCalls();
     expect(displayCalls).toMatchSnapshot();
@@ -67,12 +67,12 @@ describe('@idraw/core', () => {
 
     requestAnimationFrameMock.triggerNextAnimationFrame();
 
-    const originCtx = idraw.__getOriginContext2D();
+    const originCtx = idraw.$getOriginContext2D();
     // @ts-ignore;
     const originCalls = originCtx.__getDrawCalls();
     expect(originCalls).toMatchSnapshot();
 
-    const displayCtx = idraw.__getDisplayContext2D();
+    const displayCtx = idraw.$getDisplayContext2D();
     // @ts-ignore;
     const displayCalls = displayCtx.__getDrawCalls();
     expect(displayCalls).toMatchSnapshot();

packages/core/src/index.ts

@@ -53,8 +53,8 @@ import {
 } from './lib/draw/wrapper';
 
 export default class Core {
+  $data: IDrawData;
   private _board: Board;
-  private _data: IDrawData;
   private _opts: CoreOptions;
   private _config: IDrawConfigStrict;
   private _renderer: Renderer;
@@ -67,7 +67,7 @@ export default class Core {
   static check: CheckTypeUtil = check;
 
   constructor(mount: HTMLDivElement, opts: CoreOptions, config?: IDrawConfig) {
-    this._data = { elements: [] };
+    this.$data = { elements: [] };
     this._opts = opts;
     this._config = mergeConfig(config || {});
     this._board = new Board(mount, {
@@ -109,7 +109,7 @@ export default class Core {
       element: this._elementHandler,
       config: this._config,
       drawFeekback: this.$draw.bind(this),
-      getDataFeekback: () => this._data,
+      getDataFeekback: () => this.$data,
       selectElementByIndex: this.selectElementByIndex.bind(this),
       emitChangeScreen: this._emitChangeScreen.bind(this),
       emitChangeData: this.$emitChangeData.bind(this)
@@ -142,7 +142,7 @@ export default class Core {
     });
 
     this._renderer.thaw();
-    this._renderer.render(this._board.getContext(), this._data, {
+    this._renderer.render(this._board.getContext(), this.$data, {
       changeResourceUUIDs: opts?.resourceChangeUUIDs || []
     });
   }
@@ -260,12 +260,12 @@ export default class Core {
   }
 
   getData(): IDrawData {
-    return this._data;
+    return deepClone(this.$data);
   }
 
   setData(data: any | IDrawData, opts?: { triggerChangeEvent: boolean }): void {
-    const resourceChangeUUIDs = diffElementResourceChangeList(this._data, data);
-    this._data = this._elementHandler.initData(deepClone(parseData(data)));
+    const resourceChangeUUIDs = diffElementResourceChangeList(this.$data, data);
+    this.$data = this._elementHandler.initData(deepClone(parseData(data)));
     if (opts && opts.triggerChangeEvent === true) {
       this.$emitChangeData();
     }
@@ -317,7 +317,7 @@ export default class Core {
 
   $emitChangeData() {
     if (this._coreEvent.has('changeData')) {
-      this._coreEvent.trigger('changeData', deepClone(this._data));
+      this._coreEvent.trigger('changeData', deepClone(this.$data));
     }
   }
 

packages/core/src/mixins/element.ts

@@ -18,7 +18,7 @@ export function getSelectedElements(
   list.forEach((uuid) => {
     const index = core.getEngine().helper.getElementIndexByUUID(uuid);
     if (index !== null && index >= 0) {
-      const elem = core.getData().elements[index];
+      const elem = core.$data.elements[index];
       if (elem) elems.push(elem);
     }
   });
@@ -31,8 +31,8 @@ export function getElement(
 ): DataElement<keyof DataElemDesc> | null {
   let elem: DataElement<keyof DataElemDesc> | null = null;
   const index = core.getEngine().helper.getElementIndexByUUID(uuid);
-  if (index !== null && core.getData().elements[index]) {
-    elem = deepClone(core.getData().elements[index]);
+  if (index !== null && core.$data.elements[index]) {
+    elem = deepClone(core.$data.elements[index]);
   }
   return elem;
 }
@@ -42,8 +42,8 @@ export function getElementByIndex(
   index: number
 ): DataElement<keyof DataElemDesc> | null {
   let elem: DataElement<keyof DataElemDesc> | null = null;
-  if (index >= 0 && core.getData().elements[index]) {
-    elem = deepClone(core.getData().elements[index]);
+  if (index >= 0 && core.$data.elements[index]) {
+    elem = deepClone(core.$data.elements[index]);
   }
   return elem;
 }
@@ -70,8 +70,8 @@ export function updateElement(
 }
 
 export function selectElementByIndex(core: Core, index: number): void {
-  if (core.getData().elements[index]) {
-    const uuid = core.getData().elements[index].uuid;
+  if (core.$data.elements[index]) {
+    const uuid = core.$data.elements[index].uuid;
     core.getEngine().temp.set('mode', Mode.NULL);
     if (typeof uuid === 'string') {
       core.getEngine().temp.set('selectedUUID', uuid);
@@ -89,8 +89,8 @@ export function selectElement(core: Core, uuid: string): void {
 }
 
 export function cancelElementByIndex(core: Core, index: number): void {
-  if (core.getData().elements[index]) {
-    const uuid = core.getData().elements[index].uuid;
+  if (core.$data.elements[index]) {
+    const uuid = core.$data.elements[index].uuid;
     const selectedUUID = core.getEngine().temp.get('selectedUUID');
     if (typeof uuid === 'string' && uuid === selectedUUID) {
       core.getEngine().temp.set('mode', Mode.NULL);
@@ -113,11 +113,11 @@ export function moveUpElement(core: Core, uuid: string): void {
   if (
     typeof index === 'number' &&
     index >= 0 &&
-    index < core.getData().elements.length - 1
+    index < core.$data.elements.length - 1
   ) {
-    const temp = core.getData().elements[index];
-    core.getData().elements[index] = core.getData().elements[index + 1];
-    core.getData().elements[index + 1] = temp;
+    const temp = core.$data.elements[index];
+    core.$data.elements[index] = core.$data.elements[index + 1];
+    core.$data.elements[index + 1] = temp;
   }
   core.$emitChangeData();
   core.$draw();
@@ -128,11 +128,11 @@ export function moveDownElement(core: Core, uuid: string): void {
   if (
     typeof index === 'number' &&
     index > 0 &&
-    index < core.getData().elements.length
+    index < core.$data.elements.length
   ) {
-    const temp = core.getData().elements[index];
-    core.getData().elements[index] = core.getData().elements[index - 1];
-    core.getData().elements[index - 1] = temp;
+    const temp = core.$data.elements[index];
+    core.$data.elements[index] = core.$data.elements[index - 1];
+    core.$data.elements[index - 1] = temp;
   }
   core.$emitChangeData();
   core.$draw();
@@ -144,7 +144,7 @@ export function addElement(
 ): string | null {
   const _elem = deepClone(elem);
   _elem.uuid = createUUID();
-  core.getData().elements.push(_elem);
+  core.$data.elements.push(_elem);
   core.$emitChangeData();
   core.$draw();
   return _elem.uuid;
@@ -153,7 +153,7 @@ export function addElement(
 export function deleteElement(core: Core, uuid: string) {
   const index = core.$getElementHandler().getElementIndex(core.getData(), uuid);
   if (index >= 0) {
-    core.getData().elements.splice(index, 1);
+    core.$data.elements.splice(index, 1);
     core.$emitChangeData();
     core.$draw();
   }
@@ -179,7 +179,7 @@ export function insertElementBeforeIndex(
   const _elem = deepClone(elem);
   _elem.uuid = createUUID();
   if (index >= 0) {
-    core.getData().elements.splice(index, 0, _elem);
+    core.$data.elements.splice(index, 0, _elem);
     core.$emitChangeData();
     core.$draw();
     return _elem.uuid;
@@ -207,7 +207,7 @@ export function insertElementAfterIndex(
   const _elem = deepClone(elem);
   _elem.uuid = createUUID();
   if (index >= 0) {
-    core.getData().elements.splice(index + 1, 0, _elem);
+    core.$data.elements.splice(index + 1, 0, _elem);
     core.$emitChangeData();
     core.$draw();
     return _elem.uuid;

packages/idraw/__tests__/index.test.ts

@@ -8,17 +8,16 @@ function delay(time: number): Promise<void> {
   return new Promise((resolve) => {
     setTimeout(() => {
       resolve();
-    }, time)
+    }, time);
   });
 }
 
-describe("idraw", () => {
-
+describe('idraw', () => {
   beforeEach(() => {
     requestAnimationFrameMock.reset();
-  })
+  });
 
-  test('context', async () => {  
+  test('context', async () => {
     document.body.innerHTML = `
       <div id="mount"></div>
     `;
@@ -28,26 +27,26 @@ describe("idraw", () => {
       contextWidth: 600,
       contextHeight: 400,
       devicePixelRatio: 4
-    }
+    };
     const mount = document.querySelector('#mount') as HTMLDivElement;
     const idraw = new IDraw(mount, opts);
     const data = getData();
     idraw.setData(data, { triggerChangeEvent: true });
 
     requestAnimationFrameMock.triggerNextAnimationFrame();
-  
-    const originCtx = idraw.__getOriginContext2D();
+
+    const originCtx = idraw.$getOriginContext2D();
     // @ts-ignore;
     const originCalls = originCtx.__getDrawCalls();
     expect(originCalls).toMatchSnapshot();
-  
-    const displayCtx = idraw.__getDisplayContext2D();
+
+    const displayCtx = idraw.$getDisplayContext2D();
     // @ts-ignore;
     const displayCalls = displayCtx.__getDrawCalls();
     expect(displayCalls).toMatchSnapshot();
   });
 
-  test('undo/redo', async () => {  
+  test('undo/redo', async () => {
     document.body.innerHTML = `
       <div id="mount"></div>
     `;
@@ -57,7 +56,7 @@ describe("idraw", () => {
       contextWidth: 600,
       contextHeight: 400,
       devicePixelRatio: 4
-    }
+    };
     const mount = document.querySelector('#mount') as HTMLDivElement;
     const idraw = new IDraw(mount, opts);
     const data = getData();
@@ -69,7 +68,6 @@ describe("idraw", () => {
     const undo1 = idraw.undo();
     expect(undo1.doRecordCount).toBe(2);
     expect(undo1.data?.elements?.length).toBe(4);
-    
 
     const undo2 = idraw.undo();
     expect(undo2.doRecordCount).toBe(1);
@@ -86,20 +84,15 @@ describe("idraw", () => {
     expect(redo2.data).toBe(null);
 
     requestAnimationFrameMock.triggerNextAnimationFrame();
-  
-    const originCtx = idraw.__getOriginContext2D();
+
+    const originCtx = idraw.$getOriginContext2D();
     // @ts-ignore;
     const originCalls = originCtx.__getDrawCalls();
     expect(originCalls).toMatchSnapshot();
-  
-    const displayCtx = idraw.__getDisplayContext2D();
+
+    const displayCtx = idraw.$getDisplayContext2D();
     // @ts-ignore;
     const displayCalls = displayCtx.__getDrawCalls();
     expect(displayCalls).toMatchSnapshot();
   });
-  
 });
-
-
-
-