feat(tests): 增加插件测试 (#402)

* feat(tests): 增加插件测试

* feat(test): 完成DringPlugin测试

* feat(test): 修改type定义

* feat(test): 修改vitest配置

* feat(test): 修改DringPlugin.spec.ts测试单例

packages/core/__tests__/plugin/DringPlugin.spec.ts

@@ -0,0 +1,52 @@
+import { beforeEach, expect, test } from 'vitest';
+import { initPlugin } from '../utils/setup.ts';
+import { DringPlugin } from '../../plugin/DringPlugin.ts';
+import { wait, mouseDown, drag } from '../utils/common.ts';
+import { describe } from 'node:test';
+
+describe('canvas:drag', async () => {
+  const { pluginInstance, cleanUp } = initPlugin(DringPlugin);
+
+  beforeEach(() => {
+    return () => {
+      cleanUp();
+      (pluginInstance as DringPlugin).destroy();
+    };
+  });
+  test('dragMode is  true', async () => {
+    const instance = pluginInstance as DringPlugin;
+    instance.dragMode = true;
+    const testCanvas = instance.canvas as ExtCanvas;
+    testCanvas.lastPosX = 0;
+    testCanvas.lastPosY = 0;
+    mouseDown(testCanvas, { x: 50, y: 50 });
+    await wait();
+    expect([testCanvas.lastPosX, testCanvas.lastPosY]).toEqual([50, 50]);
+    expect(testCanvas.isDragging).toEqual(true);
+    expect(testCanvas.selection).toEqual(false);
+  });
+
+  test('dragMode is  false', async () => {
+    const instance = pluginInstance as DringPlugin;
+    instance.dragMode = false;
+    const testCanvas = instance.canvas as ExtCanvas;
+    testCanvas.lastPosX = 0;
+    testCanvas.lastPosY = 0;
+    mouseDown(testCanvas, { x: 50, y: 50 });
+    await wait();
+    expect([testCanvas.lastPosX, testCanvas.lastPosY]).toEqual([0, 0]);
+  });
+
+  test('canvas drag', async () => {
+    const instance = pluginInstance as DringPlugin;
+    instance.dragMode = false;
+    const testCanvas = pluginInstance.canvas as ExtCanvas;
+    testCanvas.lastPosX = 0;
+    testCanvas.lastPosY = 0;
+    drag(testCanvas, { x: 50, y: 50 }, { x: 100, y: 100 });
+    await wait();
+    expect([testCanvas.lastPosX, testCanvas.lastPosY]).toEqual([100, 100]);
+    expect(testCanvas.isDragging).toEqual(false);
+    expect(testCanvas.selection).toEqual(true);
+  });
+});

packages/core/__tests__/utils/common.ts

@@ -0,0 +1,63 @@
+export function wait(time = 0) {
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => {
+      setTimeout(resolve, time);
+    });
+  });
+}
+
+/**
+ * simulate mouseDown event
+ * @param target
+ * @param position position relative to the target
+ */
+export function mouseDown(target: ExtCanvas, position: { x: number; y: number }) {
+  const clientX = target.lastPosX + position.x;
+  const clientY = target.lastPosY + position.y;
+  target.fire('mouse:down', { e: { clientX: clientX, clientY: clientY } });
+}
+
+/**
+ * simulate mouseMove event
+ * @param target
+ * @param position
+ */
+
+export function mouseMove(target: ExtCanvas, position: { x: number; y: number }) {
+  const clientX = position.x;
+  const clientY = position.y;
+  target.fire('mouse:move', { e: { clientX: clientX, clientY: clientY } });
+}
+
+/**
+ * simulate mouseUp event
+ * @param target
+ */
+
+export function mouseUp(target: ExtCanvas) {
+  target.fire('mouse:up');
+}
+
+export function drag(
+  target: ExtCanvas,
+  start: { x: number; y: number },
+  end: { x: number; y: number },
+  step = 5
+) {
+  mouseDown(target, start);
+  mouseMove(target, start);
+  if (step !== 0) {
+    const xStep = (end.x - start.x) / step;
+    const yStep = (end.y - start.y) / step;
+
+    for (const [i] of Array.from({ length: step }).entries()) {
+      mouseMove(target, {
+        x: xStep * (i + 1),
+        y: yStep * (i + 1),
+      });
+    }
+  }
+
+  mouseMove(target, end);
+  mouseUp(target);
+}

packages/core/__tests__/utils/setup.ts

@@ -19,3 +19,18 @@ export function createEditor() {
     cleanUp: editor.destory(),
   };
 }
+
+export function initPlugin(plugin: any) {
+  const editor = new Editor();
+  const canvasElement = document.createElement('canvas');
+  canvasElement.id = 'canvas';
+  const canvas = new fabric.Canvas('canvas', {});
+  const pluginInstance = new plugin(canvas, editor);
+
+  return {
+    pluginInstance,
+    cleanUp: () => {
+      editor.destory();
+    },
+  };
+}

packages/core/plugin/DringPlugin.ts

@@ -9,13 +9,7 @@
 import Editor from '../Editor';
 type IEditor = Editor;
 
-declare type ExtCanvas = fabric.Canvas & {
-  isDragging: boolean;
-  lastPosX: number;
-  lastPosY: number;
-};
-
-class DringPlugin {
+export class DringPlugin {
   public canvas: fabric.Canvas;
   public editor: IEditor;
   public defautOption = {};
@@ -122,4 +116,12 @@ class DringPlugin {
   }
 }
 
+declare global {
+  export type ExtCanvas = fabric.Canvas & {
+    isDragging: boolean;
+    lastPosX: number;
+    lastPosY: number;
+  };
+}
+
 export default DringPlugin;

packages/core/vitest.config.ts

@@ -15,6 +15,11 @@ export default defineConfig((_configEnv) =>
       deps: {
         interopDefault: true,
       },
+      poolOptions: {
+        threads: {
+          singleThread: true,
+        },
+      },
       environment: 'jsdom',
     },
   })