test(drawnix): add shared testing board fixture

package.json

@@ -18,12 +18,12 @@
     "@floating-ui/react": "^0.26.24",
     "@plait-board/markdown-to-drawnix": "^0.0.8",
     "@plait-board/mermaid-to-drawnix": "^0.0.8",
-    "@plait/common": "^0.93.4",
-    "@plait/core": "^0.93.4",
-    "@plait/draw": "^0.93.4",
-    "@plait/layouts": "^0.93.4",
-    "@plait/mind": "^0.93.4",
-    "@plait/text-plugins": "^0.93.4",
+    "@plait/common": "^0.94.0",
+    "@plait/core": "^0.94.0",
+    "@plait/draw": "^0.94.0",
+    "@plait/layouts": "^0.94.0",
+    "@plait/mind": "^0.94.0",
+    "@plait/text-plugins": "^0.94.0",
     "ahooks": "^3.9.7",
     "browser-fs-access": "^0.38.0",
     "classnames": "^2.5.1",

packages/drawnix/src/plugins/freehand/pointer-button.spec.ts

@@ -1,124 +1,68 @@
-import { describe, expect, it, vi } from 'vitest';
-
-const mocks = vi.hoisted(() => ({
-  insertNode: vi.fn(),
-  removeElements: vi.fn(),
-}));
-
-vi.mock('@plait/common', () => ({
-  isDrawingMode: () => true,
-}));
-
-vi.mock('@plait-board/react-board', () => ({
-  isTwoFingerMode: () => false,
-}));
-
-vi.mock('@plait/core', () => ({
-  CoreTransforms: {
-    removeElements: mocks.removeElements,
-  },
-  DEFAULT_COLOR: '#000000',
-  PlaitBoard: {
-    getElementTopHost: () => ({}),
-    getPointer: (board: { pointer: string }) => board.pointer,
-    isInPointer: (board: { pointer: string }, pointers: string[]) =>
-      pointers.includes(board.pointer),
-  },
-  PlaitElement: {
-    getElementG: () => ({ style: {} }),
-  },
-  ThemeColorMode: {
-    colorful: 'colorful',
-    dark: 'dark',
-    default: 'default',
-    retro: 'retro',
-    soft: 'soft',
-    starry: 'starry',
-  },
-  Transforms: {
-    insertNode: mocks.insertNode,
-  },
-  distanceBetweenPointAndPoint: (x1: number, y1: number, x2: number, y2: number) =>
-    Math.hypot(x2 - x1, y2 - y1),
-  isMainPointer: (event: MouseEvent) => event.button === 0,
-  throttleRAF: (_board: unknown, _key: string, callback: () => void) => callback(),
-  toHostPoint: (_board: unknown, x: number, y: number) => [x, y],
-  toViewBoxPoint: (_board: unknown, point: [number, number]) => point,
-}));
-
-vi.mock('./freehand.generator', () => ({
-  FreehandGenerator: class {
-    destroy = vi.fn();
-    processDrawing = vi.fn();
-  },
-}));
-
-vi.mock('./smoother', () => ({
-  FreehandSmoother: class {
-    process(point: [number, number]) {
-      return point;
-    }
-    reset = vi.fn();
-  },
-}));
-
-vi.mock('../../utils/laser-pointer', () => ({
-  LaserPointer: class {
-    destroy = vi.fn();
-    init = vi.fn();
-  },
-}));
-
+import { BoardCreationMode } from '@plait/common';
+import { POINTER_BUTTON, createBoardEventObserver, createPointerEvent } from '@plait/core';
+import { afterEach, describe, expect, it } from 'vitest';
+import { setupDrawnixTestingBoard } from '../../../testing';
+import type { DrawnixTestingBoardFixture } from '../../../testing';
+import { FreehandShape } from './type';
+import { createFreehandElement } from './utils';
 import { withFreehandCreate } from './with-freehand-create';
 import { withFreehandErase } from './with-freehand-erase';
-import { FreehandShape } from './type';
-
-const createPointerEvent = (button: number) =>
-  ({
-    button,
-    x: 10,
-    y: 10,
-  }) as PointerEvent;
 
-const createBoard = (pointer: string) => ({
-  children: [],
-  globalPointerUp: vi.fn(),
-  pointer,
-  pointerDown: vi.fn(),
-  pointerMove: vi.fn(),
-  pointerUp: vi.fn(),
-  theme: {
-    themeColorMode: 'default',
-  },
-  touchStart: vi.fn(),
-});
+const createMiddleButtonEvent = (type: string) =>
+  createPointerEvent(type, 10, 10, undefined, undefined, {
+    button: POINTER_BUTTON.WHEEL,
+    view: null,
+  });
 
 describe('freehand pointer buttons', () => {
-  it('does not start freehand drawing from the middle mouse button', () => {
-    const board = createBoard(FreehandShape.feltTipPen);
-    const originalPointerDown = board.pointerDown;
-
-    withFreehandCreate(board as any);
+  let fixture: DrawnixTestingBoardFixture | undefined;
 
-    board.pointerDown(createPointerEvent(1));
-    board.pointerMove(createPointerEvent(1));
-    board.pointerUp(createPointerEvent(1));
-
-    expect(originalPointerDown).toHaveBeenCalledOnce();
-    expect(mocks.insertNode).not.toHaveBeenCalled();
+  afterEach(() => {
+    fixture?.destroy();
+    fixture = undefined;
   });
 
-  it('does not start freehand erasing from the middle mouse button', () => {
-    const board = createBoard(FreehandShape.eraser);
-    const originalPointerDown = board.pointerDown;
-
-    withFreehandErase(board as any);
-
-    board.pointerDown(createPointerEvent(1));
-    board.pointerMove(createPointerEvent(1));
-    board.pointerUp(createPointerEvent(1));
+  it('delegates middle-button events without creating a freehand element', () => {
+    const observer = createBoardEventObserver(['pointerDown', 'pointerMove', 'pointerUp']);
+    fixture = setupDrawnixTestingBoard([observer.plugin, withFreehandCreate], [], {
+      pointer: FreehandShape.feltTipPen,
+      creationMode: BoardCreationMode.drawing,
+    });
+    const pointerDown = createMiddleButtonEvent('pointerdown');
+    const pointerMove = createMiddleButtonEvent('pointermove');
+    const pointerUp = createMiddleButtonEvent('pointerup');
+
+    fixture.board.pointerDown(pointerDown);
+    fixture.board.pointerMove(pointerMove);
+    fixture.board.pointerUp(pointerUp);
+
+    expect(observer.calls.pointerDown).toEqual([pointerDown]);
+    expect(observer.calls.pointerMove).toEqual([pointerMove]);
+    expect(observer.calls.pointerUp).toEqual([pointerUp]);
+    expect(fixture.board.children).toEqual([]);
+  });
 
-    expect(originalPointerDown).toHaveBeenCalledOnce();
-    expect(mocks.removeElements).not.toHaveBeenCalled();
+  it('delegates middle-button events without removing a freehand element', () => {
+    const observer = createBoardEventObserver(['pointerDown', 'pointerMove', 'pointerUp']);
+    const freehand = createFreehandElement(FreehandShape.feltTipPen, [
+      [0, 0],
+      [20, 20],
+    ]);
+    fixture = setupDrawnixTestingBoard([observer.plugin, withFreehandErase], [freehand], {
+      pointer: FreehandShape.eraser,
+      creationMode: BoardCreationMode.drawing,
+    });
+    const pointerDown = createMiddleButtonEvent('pointerdown');
+    const pointerMove = createMiddleButtonEvent('pointermove');
+    const pointerUp = createMiddleButtonEvent('pointerup');
+
+    fixture.board.pointerDown(pointerDown);
+    fixture.board.pointerMove(pointerMove);
+    fixture.board.pointerUp(pointerUp);
+
+    expect(observer.calls.pointerDown).toEqual([pointerDown]);
+    expect(observer.calls.pointerMove).toEqual([pointerMove]);
+    expect(observer.calls.pointerUp).toEqual([pointerUp]);
+    expect(fixture.board.children).toEqual([freehand]);
   });
 });