Fix Table Edit plugin tests

packages/roosterjs-content-model-plugins/lib/tableEdit/editors/TableEditor.ts

@@ -100,7 +100,10 @@ export class TableEditor {
             .some(feature => feature?.div == node);
     }
 
-    onMouseMove(x: number, y: number) {
+    /**
+     * public only for testing purposes
+     */
+    public onMouseMove(x: number, y: number) {
         // Get whole table rect
         const tableRect = normalizeRect(this.table.getBoundingClientRect());
 

packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/CellResizer.ts

@@ -45,18 +45,18 @@ export function createCellResizer(
 
     (anchorContainer || document.body).appendChild(div);
 
-    const context: DragAndDropContext = { editor, td, table, isRTL, zoomScale, onStart };
+    const context: CellResizerContext = { editor, td, table, isRTL, zoomScale, onStart };
     const setPosition = isHorizontal ? setHorizontalPosition : setVerticalPosition;
     setPosition(context, div);
 
-    const handler: DragAndDropHandler<DragAndDropContext, DragAndDropInitValue> = {
+    const handler: DragAndDropHandler<CellResizerContext, CellResizerInitValue> = {
         onDragStart,
         // Horizontal modifies row height, vertical modifies column width
         onDragging: isHorizontal ? onDraggingHorizontal : onDraggingVertical,
         onDragEnd: onEnd,
     };
 
-    const featureHandler = new DragAndDropHelper<DragAndDropContext, DragAndDropInitValue>(
+    const featureHandler = new DragAndDropHelper<CellResizerContext, CellResizerInitValue>(
         div,
         context,
         setPosition,
@@ -68,7 +68,11 @@ export function createCellResizer(
     return { node: td, div, featureHandler };
 }
 
-interface DragAndDropContext {
+/**
+ * @internal
+ * Exported for testing
+ */
+export interface CellResizerContext {
     editor: IEditor;
     td: HTMLTableCellElement;
     table: HTMLTableElement;
@@ -77,15 +81,23 @@ interface DragAndDropContext {
     onStart: () => void;
 }
 
-interface DragAndDropInitValue {
+/**
+ * @internal
+ * Exported for testing
+ */
+export interface CellResizerInitValue {
     cmTable: ContentModelTable | undefined;
     anchorColumn: number | undefined;
     anchorRow: number | undefined;
     anchorRowHeight: number;
     allWidths: number[];
 }
 
-function onDragStart(context: DragAndDropContext, event: MouseEvent): DragAndDropInitValue {
+/**
+ * @internal
+ * Exported for testing
+ */
+export function onDragStart(context: CellResizerContext, event: MouseEvent): CellResizerInitValue {
     const { td, onStart } = context;
     const rect = normalizeRect(td.getBoundingClientRect());
 
@@ -131,10 +143,14 @@ function onDragStart(context: DragAndDropContext, event: MouseEvent): DragAndDro
     }
 }
 
-function onDraggingHorizontal(
-    context: DragAndDropContext,
+/**
+ * @internal
+ * Exported for testing
+ */
+export function onDraggingHorizontal(
+    context: CellResizerContext,
     event: MouseEvent,
-    initValue: DragAndDropInitValue,
+    initValue: CellResizerInitValue,
     deltaX: number,
     deltaY: number
 ) {
@@ -162,10 +178,14 @@ function onDraggingHorizontal(
     }
 }
 
-function onDraggingVertical(
-    context: DragAndDropContext,
+/**
+ * @internal
+ * Exported for testing
+ */
+export function onDraggingVertical(
+    context: CellResizerContext,
     event: MouseEvent,
-    initValue: DragAndDropInitValue,
+    initValue: CellResizerInitValue,
     deltaX: number
 ) {
     const { table, isRTL } = context;
@@ -211,7 +231,7 @@ function onDraggingVertical(
     }
 }
 
-function setHorizontalPosition(context: DragAndDropContext, trigger: HTMLElement) {
+function setHorizontalPosition(context: CellResizerContext, trigger: HTMLElement) {
     const { td } = context;
     const rect = normalizeRect(td.getBoundingClientRect());
     if (rect) {
@@ -223,7 +243,7 @@ function setHorizontalPosition(context: DragAndDropContext, trigger: HTMLElement
     }
 }
 
-function setVerticalPosition(context: DragAndDropContext, trigger: HTMLElement) {
+function setVerticalPosition(context: CellResizerContext, trigger: HTMLElement) {
     const { td, isRTL } = context;
     const rect = normalizeRect(td.getBoundingClientRect());
     if (rect) {

packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableInserter.ts

@@ -92,7 +92,11 @@ export function createTableInserter(
     return null;
 }
 
-class TableInsertHandler implements Disposable {
+/**
+ * @internal
+ * Exported for test only
+ */
+export class TableInsertHandler implements Disposable {
     private disposer: undefined | (() => void);
     constructor(
         private div: HTMLDivElement,

packages/roosterjs-content-model-plugins/lib/tableEdit/editors/features/TableResizer.ts

@@ -49,7 +49,7 @@ export function createTableResizer(
 
     (anchorContainer || document.body).appendChild(div);
 
-    const context: DragAndDropContext = {
+    const context: TableResizerContext = {
         isRTL,
         table,
         zoomScale,
@@ -79,14 +79,14 @@ export function createTableResizer(
     return { node: table, div, featureHandler };
 }
 
-class TableResizer extends DragAndDropHelper<DragAndDropContext, DragAndDropInitValue> {
+class TableResizer extends DragAndDropHelper<TableResizerContext, TableResizerInitValue> {
     private disposer: undefined | (() => void);
 
     constructor(
         trigger: HTMLElement,
-        context: DragAndDropContext,
-        onSubmit: (context: DragAndDropContext, trigger: HTMLElement) => void,
-        handler: DragAndDropHandler<DragAndDropContext, DragAndDropInitValue>,
+        context: TableResizerContext,
+        onSubmit: (context: TableResizerContext, trigger: HTMLElement) => void,
+        handler: DragAndDropHandler<TableResizerContext, TableResizerInitValue>,
         zoomScale: number,
         forceMobile?: boolean,
         onTableEditorCreated?: OnTableEditorCreatedCallback
@@ -102,7 +102,11 @@ class TableResizer extends DragAndDropHelper<DragAndDropContext, DragAndDropInit
     }
 }
 
-interface DragAndDropContext {
+/**
+ * @internal
+ * Exported for testing
+ */
+export interface TableResizerContext {
     table: HTMLTableElement;
     isRTL: boolean;
     zoomScale: number;
@@ -113,14 +117,25 @@ interface DragAndDropContext {
     contentDiv?: EventTarget | null;
 }
 
-interface DragAndDropInitValue {
+/**
+ * @internal
+ * Exported for testing
+ */
+export interface TableResizerInitValue {
     originalRect: DOMRect;
     originalHeights: number[];
     originalWidths: number[];
     cmTable: ContentModelTable | undefined;
 }
 
-function onDragStart(context: DragAndDropContext, event: MouseEvent) {
+/**
+ * @internal
+ * Exported for testing
+ */
+export function onDragStart(
+    context: TableResizerContext,
+    event: MouseEvent
+): TableResizerInitValue {
     context.onStart();
 
     const { editor, table } = context;
@@ -146,10 +161,14 @@ function onDragStart(context: DragAndDropContext, event: MouseEvent) {
     };
 }
 
-function onDragging(
-    context: DragAndDropContext,
+/**
+ * @internal
+ * Exported for testing
+ */
+export function onDragging(
+    context: TableResizerContext,
     event: MouseEvent,
-    initValue: DragAndDropInitValue,
+    initValue: TableResizerInitValue,
     deltaX: number,
     deltaY: number
 ) {
@@ -207,10 +226,14 @@ function onDragging(
     }
 }
 
-function onDragEnd(
-    context: DragAndDropContext,
+/**
+ * @internal
+ * Exported for testing
+ */
+export function onDragEnd(
+    context: TableResizerContext,
     event: MouseEvent,
-    initValue: DragAndDropInitValue | undefined
+    initValue: TableResizerInitValue | undefined
 ) {
     if (context.editor.isDisposed()) {
         return false;
@@ -229,7 +252,7 @@ function onDragEnd(
     return false;
 }
 
-function setDivPosition(context: DragAndDropContext, trigger: HTMLElement) {
+function setDivPosition(context: TableResizerContext, trigger: HTMLElement) {
     const { table, isRTL } = context;
     const rect = normalizeRect(table.getBoundingClientRect());
 
@@ -241,7 +264,7 @@ function setDivPosition(context: DragAndDropContext, trigger: HTMLElement) {
     }
 }
 
-function hideResizer(context: DragAndDropContext, trigger: HTMLElement) {
+function hideResizer(context: TableResizerContext, trigger: HTMLElement) {
     trigger.style.visibility = 'hidden';
 }
 

packages/roosterjs-content-model-plugins/test/tableEdit/TableEditTestHelper.ts

@@ -1,14 +1,10 @@
 import * as TestHelper from '../TestHelper';
+import { ContentModelTable, IEditor } from 'roosterjs-content-model-types';
 import { DOMEventHandlerFunction } from 'roosterjs-editor-types';
-import { getObjectKeys, normalizeTable } from 'roosterjs-content-model-dom';
+import { normalizeTable } from 'roosterjs-content-model-dom';
 import { TableEditFeatureName } from '../../lib/tableEdit/editors/features/TableEditFeatureName';
+import { TableEditor } from '../../lib/tableEdit/editors/TableEditor';
 import { TableEditPlugin } from '../../lib/tableEdit/TableEditPlugin';
-import {
-    ContentModelTable,
-    DOMEventRecord,
-    EditorCore,
-    IEditor,
-} from 'roosterjs-content-model-types';
 
 /**
  * Function to be called before each Table Edit test
@@ -23,37 +19,17 @@ export function beforeTableTest(
 ) {
     const plugin = new TableEditPlugin('.' + anchorContainerSelector, undefined, disabledFeatures);
 
-    let handler: Record<string, DOMEventHandlerFunction> = {};
-    const attachDomEvent = jasmine
-        .createSpy('attachDomEvent')
-        .and.callFake((core: EditorCore, eventMap: Record<string, DOMEventRecord<Event>>) => {
-            getObjectKeys(eventMap || {}).forEach(key => {
-                const eventname = key as keyof HTMLElementEventMap;
-                const { beforeDispatch } = eventMap[key];
-                const onEvent = (event: HTMLElementEventMap[typeof eventname]) => {
-                    beforeDispatch && beforeDispatch(event);
-                };
-                handler[eventname] = onEvent;
-            });
-            return () => {
-                handler = {};
-            };
-        });
-
-    const coreApiOverride = {
-        attachDomEvent,
-    };
     const editor = TestHelper.initEditor(
         TEST_ID,
         [plugin],
         undefined,
-        coreApiOverride,
+        undefined,
         anchorContainerSelector
     );
 
     plugin.initialize(editor);
 
-    return { editor, plugin, handler };
+    return { editor, plugin };
 }
 
 /**
@@ -62,7 +38,11 @@ export function beforeTableTest(
  * @param plugin The plugin to be disposed
  * @param TEST_ID The id of the editor div
  */
-export function afterTableTest(editor: IEditor, plugin: TableEditPlugin, TEST_ID: string) {
+export function afterTableTest(
+    editor: IEditor,
+    plugin: TableEditor | TableEditPlugin,
+    TEST_ID: string
+) {
     plugin.dispose();
     !editor.isDisposed() && editor.dispose();
     TestHelper.removeElement(TEST_ID);