@visuallyjs/browser-ui 1.0.0

package/types/test-support/test-support.d.ts

@@ -0,0 +1,833 @@
+import { Edge, Group, ObjectData, Node, Vertex, Port, VisuallyJsModel, ModelOptions, LoadOptions, ObjectInfo, PointXY } from "../core";
+import { Surface, SurfaceOptions, MiniviewPlugin, MiniviewPluginOptions, BrowserUIModel, TemplateRenderer, BrowserElement, EventManager, SurfaceAnimator, Palette } from "../browser-ui";
+import { Connection } from "../ui";
+import { ConnectReason } from "../core";
+/**
+ * @internal
+ */
+interface TestHarnessMiniviewPluginOptions extends MiniviewPluginOptions {
+    width?: number;
+    height?: number;
+}
+declare function _addDiv(id: string, parent?: HTMLElement, className?: string, styles?: Record<string, string>): any;
+declare function _addDivs(ids: Array<string>, parent?: HTMLElement): void;
+declare function _cleanup(): void;
+/**
+ * Tests that the two values are no further than `amount` apart.
+ * @param v1 First value to compare
+ * @param v2 Second value to compare
+ * @param amount Optional, defaults to 0.0005.
+ * @returns
+ */
+declare function delta(v1: string | number, v2: string | number, amount: number): boolean;
+declare function getEdgeCanvas(connection: Connection<Element>): any;
+/**
+ * Make an event for the given element. Events use page coordinates so we just use the getBoundingClientRect()
+ * method on the given element. The event is positioned on the center of the given element.
+ * @param el
+ * @returns a SynthesizedEvent
+ * @internal
+ */
+declare function _makeEvt(el: Element, data?: Record<string, any>, locationOnTarget?: PointXY): SynthesizedEvent;
+/**
+ * An object conforming to enough of the Event interface to be used to trigger events in the DOM by the TestHarness.
+ * @group Test Support
+ */
+export interface SynthesizedEvent {
+    clientX: number;
+    clientY: number;
+    screenX: number;
+    screenY: number;
+    pageX: number;
+    pageY: number;
+}
+/**
+ * Callbacks you can provide to connection drag methods in the TestHarness to interrupt the process
+ * and inspect what's going on.
+ * @group Test Support
+ */
+export interface ConnectionDragEventHandlers {
+    start?: Function;
+    down?: Function;
+    move?: Function;
+    up?: Function;
+}
+/**
+ * Handlers you can pass as an argument to various element drag methods in the TestHarness, to
+ * interrupt the drag and inspect what's going on.
+ * @group Test Support
+ */
+export interface DragEventHandlers {
+    afterDown?: Function;
+    afterMove?: Function;
+    afterUp?: Function;
+}
+/**
+ * Synthesize an event
+ * @param l
+ * @param t
+ * @returns a SynthesizedEvent
+ * @internal
+ */
+declare function _evt(l: number, t: number, values?: Record<string, any>): SynthesizedEvent;
+declare function _nudgeEvent(evt: SynthesizedEvent, dx: number, dy: number): SynthesizedEvent;
+/**
+ * @internal
+ */
+export interface ContainerOptions {
+    width?: number;
+    height?: number;
+}
+declare function lasso(surface: Surface, start: PointXY, end: PointXY, callbacks?: ConnectionDragEventHandlers): void;
+declare function lassoOnElement(surface: Surface, downEventElement: BrowserElement, start: PointXY, end: PointXY, callbacks?: ConnectionDragEventHandlers): void;
+/**
+ * @internal
+ */
+export declare const VisuallyJsTestSupport: {
+    addDiv: typeof _addDiv;
+    addDivs: typeof _addDivs;
+    cleanup: typeof _cleanup;
+    delta: typeof delta;
+    DOWN_EVENT: string;
+    UP_EVENT: string;
+    MOVE_EVENT: string;
+    isTouchDevice: boolean;
+    makeEvent: typeof _makeEvt;
+    makeEventAt: typeof _evt;
+    nudgeEvent: typeof _nudgeEvent;
+    getEdgeCanvas: typeof getEdgeCanvas;
+    defaultEventManager: EventManager;
+    /**
+     * Drag any DOM element around, not just elements managed by the surface.
+     * @param el
+     * @param dx
+     * @param dy
+     */
+    dragElementBy: (el: Element, dx: number, dy: number, eventHandlers?: DragEventHandlers) => void;
+    attachToSurface: (surface: Surface) => TestHarness;
+    create: (modelOptions: ModelOptions, renderParams: SurfaceOptions, containerParams?: ContainerOptions, templateRenderer?: TemplateRenderer<any>) => TestHarness;
+    trigger: (m: EventManager, el: Element, evt: string, x: number, y: number) => void;
+    getTransform: (el: HTMLElement) => {
+        translateX: number;
+        translateY: number;
+        scale: number;
+    };
+    lasso: typeof lasso;
+    lassoOnElement: typeof lassoOnElement;
+    withinTolerance: (val: number, target: number, tolerance: number) => boolean;
+};
+/**
+ * Provides a set of methods you can use in your unit/component tests to simulate a user interacting with a UI rendered
+ * by VisuallyJs.
+ * @group Test Support
+ */
+export declare class TestHarness {
+    model: BrowserUIModel;
+    /**
+     * @internal
+     */
+    eventManager: EventManager;
+    /**
+     * @internal
+     */
+    surface: Surface;
+    /**
+     * @internal
+     */
+    undoManager: any;
+    /**
+     * @internal
+     */
+    _edgePathEditor: any;
+    /**
+     * @internal
+     */
+    consoleOutput: string;
+    constructor(model: BrowserUIModel, surface?: Surface);
+    /**
+     * @internal
+     */
+    get container(): any;
+    get canvas(): any;
+    /**
+     * @internal
+     */
+    get edgePathEditor(): any;
+    /**
+     * Destroy the underlying Surface and remove the test harness container from the DOM.
+     *
+     */
+    destroy(): void;
+    /**
+     * Start editing the given Edge. Your surface must be configured for editable edge paths for this method to have
+     * any effect.
+     * @param edge - Edge to edit
+     * @param params - Optional editor params. The type of this object depends on the type of the edge that is to be
+     *     edited.
+     *
+     */
+    startEditing(edge: Edge, params?: any): void;
+    /**
+     * Stop editing an Edge. Your surface must be configured for editable edge paths for this method to have any effect.
+     *
+     */
+    stopEditing(): void;
+    /**
+     * Render the current model to a Surface. Used by internal tests; not part of the public API.
+     * @internal
+     * @param renderParams
+     * @param containerParams
+     */
+    render(renderParams: SurfaceOptions, containerParams?: any): Surface;
+    /**
+     * Execute `querySelectorAll(...)` on the current container and return the results.
+     * @param selector
+     *
+     * @return A NodeList of matching elements.
+     */
+    querySelectorAll(selector: string): any;
+    /**
+     * Execute `querySelector(...)` on the current container and return the results.
+     * @param selector
+     *
+     * @return A matching DOM element, or null
+     */
+    querySelector(selector: string): any;
+    /**
+     * Randomly drag a node/group around. Can be useful to ensure the model is being updated, or you're getting
+     * callbacks you expect, etc. We use this internally when we just want a node to move and we don't care where
+     * it moves to.
+     * @param obj Either a Node/Group, or the ID of a Node/Group, or the DOM element representing some Node/Group
+     * @param callbacks Optional set of event handlers to invoke during the drag.
+     *
+     * @return void
+     */
+    dragANodeAround(obj: Element | string | Node | Group, callbacks?: ConnectionDragEventHandlers): void;
+    /**
+     * Randomly drag a DOM element around.
+     * @param el Some DOM element. Doesn't need to be an element that represents a vertex in your model.
+     *
+     * @return void
+     */
+    dragAnElementAround(el: BrowserElement): void;
+    /**
+     * Shortcut to the underlying `load` method of the model.
+     * @param options
+     *
+     */
+    load(options: LoadOptions): VisuallyJsModel;
+    getEdgeCanvas(e: Edge): any;
+    /**
+     * Run a function and capture the console output. Used internally by JsPlumb's unit tests; included in the
+     * public API on the off chance it will be useful for others.
+     * @param fn
+     *
+     */
+    withConsole(fn: Function): void;
+    /**
+     * Shortcut to the underlying `clear` method of the model.
+     *
+     */
+    clear(): VisuallyJsModel;
+    /**
+     * For the given argument, find and return the corresponding DOM element.
+     * @param obj A node/group/port id, or node/group/port, or a DOM element.
+     *
+     */
+    getRenderedElement(obj: Element | string | Node | Group | ObjectData): Element;
+    /**
+     * For the given edge id, find and return the underlying Connection used to render it.
+     * @param edgeId An edge ID
+     *
+     */
+    getRenderedConnection(edgeId: string): Connection<Element>;
+    /**
+     * Drag the given vertex into the given group.
+     * @param vertex Vertex id, Node, Group, or DOM element.
+     * @param group Group id, Group, or DOM element.
+     *
+     */
+    dragVertexIntoGroup(vertex: string | Node | Group | Element, group: string | Group | Element): void;
+    /**
+     * Drag the given vertex out of its current group. The element is placed [50,50] to the left and above
+     * @param vertex Vertex id, Node, Group, or DOM element
+     *
+     */
+    dragVertexOutOfGroup(vertex: string | Node | Group | Element, dragFarFarAway?: boolean): void;
+    /**
+     * Gets a Group from the underlying model.
+     * @param obj Group Id or DOM element representing the Group
+     *
+     */
+    getGroup(obj: Element | string): ObjectInfo<Group>;
+    /**
+     * Gets a Node from the underlying model.
+     * @param obj Node Id or DOM element representing the node.
+     *
+     */
+    getNode(obj: Element | string): ObjectInfo<Node>;
+    /**
+     * Find the corresponding model object for the given input.
+     * @param obj A string representing an ID, a DOM element, a connection, or an existing model object.
+     * @returns an object containing the given model object, plus its id, and type etc.
+     *
+     */
+    getModelObject<T = any>(obj: Element | Connection<Element> | string | Node | Group | Edge | ObjectData): ObjectInfo<T>;
+    /**
+     * Drag the given Node/Group to the given [x,y], which are CANVAS coordinates.
+     * @param obj  Node id, group, node, or DOM element.
+     * @param x Location on canvas in X axis to position top left corner of the node.
+     * @param y Location on canvas in Y axis to position top left corner of the node.
+     *
+     */
+    dragVertexTo(obj: string | Node | Group | Element, x: number, y: number, eventHandlers?: DragEventHandlers): void;
+    /**
+     * Drag the given Node/Group to the given [x,y], which are PAGE coordinates.
+     * @param obj  Node id, node, group, or DOM element.
+     * @param x Location on canvas in X axis to position top left corner of the node.
+     * @param y Location on canvas in Y axis to position top left corner of the node.
+     *
+     */
+    dragVertexToPageLocation(obj: string | Node | Group | Element, x: number, y: number, eventHandlers?: DragEventHandlers): void;
+    /**
+     * Drag the given Node/Group by the given x/y amounts. This is CANVAS coordinates.
+     * @param obj Node/Group id, node, group or DOM element.
+     * @param x Amount to move in X axis
+     * @param y Amount to move in Y axis
+     * @param eventHandlers Optional callbacks to invoke at various points in the drag lifecycle.
+     * @param metaKeys Optional map of meta keys to set on the events used to model the drag.
+     *
+     */
+    dragVertexBy(obj: string | Node | Group | Element, x: number, y: number, eventHandlers?: DragEventHandlers, metaKeys?: Record<string, boolean>): void;
+    /**
+     * Drag the given Node/Group by the given x/y amounts. This is PAGE coordinates.
+     * @param obj Node/Group id, node, group or DOM element.
+     * @param x Amount to move in X axis
+     * @param y Amount to move in Y axis
+     * @param eventHandlers Optional callbacks to invoke at various points in the drag lifecycle.
+     * @param metaKeys Optional map of meta keys to set on the events used to model the drag.
+     *
+     */
+    dragVertexByPageDelta(obj: string | Node | Group | Element, x: number, y: number, eventHandlers?: DragEventHandlers, metaKeys?: Record<string, boolean>): void;
+    /**
+     * Drag the given DOM element by the given x/y amounts. This is PAGE coordinates.
+     * @param el DOM element to drag.
+     * @param x Amount to move in X axis
+     * @param y Amount to move in Y axis
+     * @param eventHandlers Optional callbacks to invoke at various points in the drag lifecycle.
+     * @param metaKeys Optional map of meta keys to set on the events used to model the drag.
+     *
+     */
+    dragElementBy(el: BrowserElement, x: number, y: number, eventHandlers?: DragEventHandlers, metaKeys?: Record<string, boolean>): void;
+    /**
+     * Drag a DOM element over a number of stages, advancing a little each time. This is PAGE coordinates.
+     * @param el DOM element to drag.
+     * @param x Amount to move in X axis
+     * @param y Amount to move in Y axis
+     * @param stages How many stages to break the drag up into.
+     * @param eventHandlers Optional callbacks to invoke at various points in the drag lifecycle. If you provide an
+     *     `afterMove` callback, it will be invoked after each step of the drag.
+     * @param metaKeys Optional map of meta keys to set on the events used to model the drag.
+     *
+     */
+    dragElementByInStages(el: BrowserElement, x: number, y: number, stages?: number, eventHandlers?: DragEventHandlers, metaKeys?: Record<string, boolean>): void;
+    /**
+     * Drag a Node/Group over a number of stages, advancing a little each time.
+     * @param obj Node/Group id, node, group or DOM element.
+     * @param x Amount to move in X axis
+     * @param y Amount to move in Y axis
+     * @param stages How many stages to break the drag up  into.
+     * @param eventHandlers Optional callbacks to invoke at various points in the drag lifecycle. If you provide an
+     *     `afterMove` callback, it will be invoked after each step of the drag.
+     * @param metaKeys Optional map of meta keys to set on the events used to model the drag.
+     *
+     */
+    dragVertexByInStages(obj: string | Node | Group | BrowserElement, x: number, y: number, stages?: number, eventHandlers?: DragEventHandlers, metaKeys?: Record<string, boolean>): void;
+    /**
+     * Connect the given source and target via a call on the model, ie. without using the mouse. If you want
+     * to simulate mouse activity being used to establish an edge, use `dragConnection`.
+     * @param source Node/Port/Group id, node/port/group, or DOM element.
+     * @param target Node/Port/Group id, node/port/group, or DOM element.
+     * @param data Optional data for the edge.
+     *
+     * @return an Edge.
+     */
+    connect(source: string | Node | Port | Group | BrowserElement, target: string | Node | Port | Group | BrowserElement, data?: ObjectData, reason?: ConnectReason): Edge;
+    private _resolveElement;
+    private _resolveSourceAndTarget;
+    /**
+     * Drags a connection between two vertices. You can pass in a variety of arguments to this method for both source
+     * and target: a DOM element, a node/group/port ID, or a combination of vertex id + css selector. We use this last
+     * variant in VisuallyJs's own test suite to ensure that connections can be dragged from specific parts of some
+     * element, or that a connection source on an element does not cause the element to be dragged, etc.
+     * @param source Either a DOM element, the ID of some node/group, or a node/group ID and an associated CSS3
+     *     selector identifying a part of the vertex's element that should be the source of the drag.
+     * @param target Either a DOM element, the ID of some node/group, or a node/group ID and an associated CSS3
+     *     selector identifying a part of the vertex's element that should be the target of the drag.
+     * @param callbacks Optional callbacks to invoke during the connection drag
+     * @param locationOnTarget Optional spec for exactly where on the target element to drop the connection. Values in
+     *     this object are expressed as ratios of the width/height of the element. We use this in VisuallyJs when we're
+     *     testing scenarios in which a given vertex has multiple anchor locations assigned to it.
+     *
+     * @return a Connection. You can access the underlying edge via the `.edge` property of the connection.
+     */
+    dragConnection(source: BrowserElement | string | [string, string], target: BrowserElement | string | [string, string], callbacks?: ConnectionDragEventHandlers, locationOnTarget?: PointXY): Connection<BrowserElement>;
+    /**
+     * Drag a connection in a way that activates the snap to target functionality, ie. it fires mouse events close to
+     * the target but not over it.
+     * @param source
+     * @param target
+     * @param xMargin
+     * @param yMargin
+     * @param callbacks
+     */
+    dragSnapConnection(source: BrowserElement | string | [string, string], target: BrowserElement | string | [string, string], xMargin: number, yMargin: number, callbacks?: ConnectionDragEventHandlers): Connection<BrowserElement>;
+    dragDetachedConnection(source: BrowserElement | string | [string, string], target: PointXY, callbacks?: ConnectionDragEventHandlers): Connection<BrowserElement>;
+    dragDiagramConnection(source: string, target: string, callbacks?: ConnectionDragEventHandlers): Connection<BrowserElement>;
+    dragDiagramSnapConnection(source: string, target: string, xMargin: number, yMargin: number, callbacks?: ConnectionDragEventHandlers): Connection<BrowserElement>;
+    /**
+     * Use the mouse to drag the source of the given edge and drop it on distant whitespace, causing the edge to be
+     * detached.
+     * @param edge
+     *
+     */
+    detachEdge(edge: Edge, pointToDropAt?: PointXY): PointXY;
+    detachEdgeBySource(edge: Edge, pointToDropAt?: PointXY): PointXY;
+    /**
+     * Use the mouse to drag the target of the given edge and drop it on distant whitespace, causing the edge to be
+     * detached.
+     * @param edge
+     *
+     */
+    detachEdgeByTarget(edge: Edge, pointToDropAt?: PointXY): PointXY;
+    /**
+     * Drag the given edge's target relocator and drop it on some other vertex/element.
+     * @param edge
+     * @param target
+     * @param callbacks
+     * @param locationOnTarget
+     */
+    relocateEdgeTarget(edge: Edge, target: string | Node | Port | Group | BrowserElement, callbacks?: ConnectionDragEventHandlers, locationOnTarget?: PointXY): void;
+    /**
+     * Drag the given edge's source relocator and drop it on some other vertex/element.
+     * @param edge
+     * @param source
+     * @param callbacks
+     * @param locationOnTarget
+     */
+    relocateEdgeSource(edge: Edge, source: string | Node | Port | Group | BrowserElement, callbacks?: ConnectionDragEventHandlers, locationOnTarget?: PointXY): void;
+    /**
+     * Trigger the event with the given name on the given object. By default the event will occur in the middle of the
+     * DOM element representing the object.
+     * @param obj Node/Port/Group id, node/port/group, or DOM element.
+     * @param eventName eg 'click', 'mouseover'
+     * @param evt Optional, an event you previously created via #makeEvent. Sometimes you want to control the specific
+     *     location of the event.
+     *
+     */
+    trigger(obj: Node | Port | Group | string | BrowserElement, eventName: string, evt: any): void;
+    /**
+     * Trigger the provided event on the given DOM element.
+     * @param el Element to trigger the event on
+     * @param eventName Name of the event to trigger
+     * @param data Optional data to set on the created event. Any values in this object are copied
+     * into the created event via `Object.assign`.
+     * @deprecated Use triggerEvent instead
+     *
+     */
+    triggerEventOnElement(el: HTMLElement, eventName: string, data?: Record<string, any>, x?: number, y?: number): void;
+    /**
+     * Trigger the provided event on the given DOM element.
+     * @param el Element to trigger the event on
+     * @param eventName Name of the event to trigger
+     * @param data Optional data to set on the created event. Any values in this object are copied
+     * into the created event via `Object.assign`.
+     *
+     */
+    triggerEvent(el: HTMLElement, eventName: string, data?: Record<string, any>, x?: number, y?: number): void;
+    /**
+     * Triggers the given event at the given offset from the origin of the given element.
+     * @param el
+     * @param eventName
+     * @param x
+     * @param y
+     * @param data
+     */
+    triggerEventAt(el: HTMLElement, eventName: string, x: number, y: number, data?: Record<string, any>): void;
+    /**
+     * Synthesize an event for the given object. This method is used by other parts of the test harness class
+     * and is not something a user of the API will necessarily need to make use of.
+     * @param obj Node/Port/Group id, node/port/group, or DOM element.
+     * @param dx Optional offset from the center of the x axis of the related DOM element to position the event.
+     * @param dy Optional offset from the center of the y axis of the related DOM element to position the event.
+     * @returns a SynthesizedEvent
+     *
+     */
+    makeEvent(obj: Node | Port | Group | string | BrowserElement, dx: number, dy: number): SynthesizedEvent;
+    /**
+     * Make an event at the given page location.
+     * @param x
+     * @param y
+     *
+     */
+    makeEventAt(x: number, y: number): SynthesizedEvent;
+    /**
+     * Gets an Edge.
+     * @param obj Edge ID, or Edge object.
+     *
+     */
+    getEdge(obj: any): Edge;
+    /**
+     * Updates an Edge.
+     * @param edge Edge, or edge ID.
+     * @param data Data to update the edge with.
+     *
+     */
+    updateEdge(edge: any, data: any): void;
+    /**
+     * Gets all edges in the underlying model.
+     *
+     */
+    getAllEdges(): Array<Edge>;
+    /**
+     * Gets the DOM element that was rendered for some port. May be null.
+     * @param obj Port, or port ID.
+     *
+     */
+    getRenderedPort(obj: string): Element;
+    /**
+     * Add a Node to the model. A convenience wrapper around the same method on the underlying model.
+     * @param data Data for the Node.
+     *
+     */
+    addNode(data: ObjectData): Node;
+    /**
+     * Update a Node in to the model. A convenience wrapper around the same method on the underlying model.
+     * @param obj Node, or Node Id.
+     * @param data Data for the Node.
+     *
+     */
+    updateNode(obj: string | Node, data: ObjectData): void;
+    /**
+     * Add a Group to the model. A convenience wrapper around the same method on the underlying model.
+     * @param data Data for the Group.
+     *
+     */
+    addGroup(data: ObjectData): Group;
+    /**
+     * Update a Group in the model. A convenience wrapper around the same method on the underlying model.
+     * @param obj Group, or Group Id.
+     * @param data Data for the Group.
+     *
+     */
+    updateGroup(obj: string | Group, data: ObjectData): void;
+    /**
+     * Update a Vertex in the model. A convenience wrapper around the same method on the underlying model.
+     * @param obj vertex, or vertex Id.
+     * @param data Data for the Vertex update.
+     *
+     */
+    updateVertex(obj: string | Vertex, data: ObjectData): void;
+    /**
+     * Clicks on the group with the given ID.
+     * @param groupId ID of the group to click on.
+     *
+     */
+    clickOnGroup(groupId: string): void;
+    /**
+     * Clicks on the node with the given ID.
+     * @param nodeId ID of the group to click on.
+     *
+     */
+    clickOnNode(nodeId: string): void;
+    /**
+     * Clicks on the node/group with the given ID.
+     * @param nodeOrGroupId ID of the node/group to click on.
+     *
+     */
+    clickOnVertex(nodeOrGroupId: string): void;
+    /**
+     * Double clicks on the node/group with the given ID.
+     * @param nodeOrGroupId ID of the node/group to click on.
+     *
+     */
+    dblClickOnVertex(nodeOrGroupId: string): void;
+    /**
+     * Right-clicks on the node/group with the given ID.
+     * @param nodeOrGroupId ID of the node/group to click on.
+     *
+     */
+    rightClickOnVertex(nodeOrGroupId: string): void;
+    /**
+     * Simulates a tap event on the node/group with the given id - a tap event is a mousedown followed by a mouseup
+     * whose page coordinates are identical to the mousedown event's page coordinates.
+     * @param nodeOrGroupId ID of the node/group to tap on.
+     *
+     */
+    tapOnVertex(nodeOrGroupId: string): void;
+    /**
+     * Simulates a tap event on the node with the given id - a tap event is a mousedown followed by a mouseup whose
+     * page coordinates are identical to the mousedown event's page coordinates.
+     * @param nodeId ID of the node to tap on.
+     *
+     */
+    tapOnNode(nodeId: string): void;
+    /**
+     * Simulates a tap event on the group with the given id - a tap event is a mousedown followed by a mouseup whose
+     * page coordinates are identical to the mousedown event's page coordinates.
+     * @param groupId ID of the group to tap on.
+     *
+     */
+    tapOnGroup(groupId: string): void;
+    /**
+     * Simulates a double tap event on the node/group with the given id - a tap event is a mousedown followed by a
+     * mouseup whose page coordinates are identical to the mousedown event's page coordinates.
+     * @param nodeOrGroupId  ID of the node/group to double tap on.
+     */
+    dblTapOnVertex(nodeOrGroupId: string): void;
+    /**
+     * Simulates a double tap event on the node with the given id - a tap event is a mousedown followed by a mouseup
+     * whose page coordinates are identical to the mousedown event's page coordinates.
+     * @param nodeId ID of the node/group to double tap on.
+     */
+    dblTapOnNode(nodeId: string): void;
+    /**
+     * Simulates a double tap event on the group with the given id - a tap event is a mousedown followed by a mouseup
+     * whose page coordinates are identical to the mousedown event's page coordinates.
+     * @param groupId ID of the node/group to double tap on.
+     */
+    dblTapOnGroup(groupId: string): void;
+    /**
+     * Simulates a mousemove event on the node/group with the given id
+     * @param nodeOrGroupId  ID of the node/group to simulate mousemove on.
+     */
+    mousemoveOnVertex(nodeOrGroupId: string, locationOnTarget?: PointXY): void;
+    /**
+     * Simulates a mouseover event on the node/group with the given id
+     * @param nodeOrGroupId  ID of the node/group to simulate mouseover on.
+     */
+    mouseoverOnVertex(nodeOrGroupId: string, locationOnTarget?: PointXY): void;
+    /**
+     * Simulates a mouseout event on the node/group with the given id
+     * @param nodeOrGroupId  ID of the node/group to simulate mouseout on.
+     */
+    mouseoutOnVertex(nodeOrGroupId: string, locationOnTarget?: PointXY): void;
+    /**
+     * Simulates a mouseup event on the node/group with the given id
+     * @param nodeOrGroupId  ID of the node/group to simulate mouseup on.
+     */
+    /**
+     * Simulates a mouseup event on the node/group with the given id
+     * @param nodeOrGroupId  ID of the node/group to simulate mouseup on.
+     */
+    /**
+     * Simulates a right-click event on the node/group with the given id
+     * @param nodeOrGroupId  ID of the node/group to simulate right-click on.
+     */
+    contextmenuOnVertex(nodeOrGroupId: string, locationOnTarget?: PointXY): void;
+    /**
+     * Simulates a click on the canvas
+     * @param clickCount How any clicks to simulate. Defaults to 1.
+     * @param button Which button to simulate. Defaults to 1 - the left button. 2 is right button.
+     *
+     */
+    clickOnCanvas(clickCount?: number, button?: number): void;
+    /**
+     * Simulates a click on the canvas at the given x,y
+     * @param x X location to click at
+     * @param y Y location to click at
+     * @param button Which button to simulate. Defaults to 1 - the left button. 2 is right button.
+     *
+     */
+    clickOnCanvasAt(x: number, y: number, button?: number): void;
+    /**
+     * Simulates a mouse move event on the canvas at the given x,y
+     * @param x
+     * @param y
+     */
+    mousemoveOnCanvasAt(x: number, y: number): void;
+    mousedownOnCanvasAt(x: number, y: number): void;
+    mouseupOnCanvasAt(x: number, y: number): void;
+    /**
+     * Drag a lasso on the canvas from the given start to the given end, which should be provided in pixel values,
+     * relative to the surface canvas origin.
+     * @param start
+     * @param end
+     */
+    lasso(start: PointXY, end: PointXY, callbacks?: ConnectionDragEventHandlers): void;
+    /**
+     * Drag a lasso on the given el from the given start to the given end, which should be provided in pixel values,
+     * relative to the surface canvas origin.
+     * @param el
+     * @param start
+     * @param end
+     * @param callbacks
+     */
+    lassoOnElement(el: BrowserElement, start: PointXY, end: PointXY, callbacks?: ConnectionDragEventHandlers): void;
+    /**
+     * Right-clicks on the canvas.
+     * @param clickCount How any clicks to simulate. Defaults to 1.
+     *
+     */
+    rightClickOnCanvas(clickCount?: number): void;
+    /**
+     * Clicks on a DOM element
+     *
+     */
+    clickOnElement(el: BrowserElement): void;
+    /**
+     * Clicks on an element inside the node/group with the given ID.
+     * @param nodeOrGroupId ID of the node/group to click on.
+     * @param selector CSS selector identifying the child element to click on.
+     *
+     */
+    clickOnElementInsideVertex(nodeOrGroupId: string, selector: string): void;
+    /**
+     * Double clicks on an element inside the node/group with the given ID.
+     * @param nodeOrGroupId ID of the node/group to double click on.
+     * @param selector CSS selector identifying the child element to click on.
+     *
+     */
+    dblClickOnElementInsideVertex(nodeOrGroupId: string, selector: string): void;
+    /**
+     * Taps on a DOM element (mousedown followed by mouseup)
+     *
+     */
+    tapOnElement(el: BrowserElement): void;
+    /**
+     * Taps on a DOM element inside the node/group with the given ID.
+     * @param nodeOrGroupId ID of the node/group to tap on.
+     * @param selector CSS selector identifying the child element to click on.
+     *
+     */
+    tapOnElementInsideVertex(nodeOrGroupId: string, selector: string): void;
+    /**
+     * Double taps on an element inside the node/group with the given ID.
+     * @param nodeOrGroupId ID of the node to tap on.
+     * @param selector CSS selector identifying the child element to click on.
+     *
+     */
+    dblTapOnElementInsideVertex(nodeOrGroupId: string, selector: string): void;
+    /**
+     * Creates a mousedown event on the given element and dispatches it.
+     * @param el
+     */
+    mousedownOnElement(el: BrowserElement): void;
+    /**
+     * Clicks on the given edge
+     * @param edgeId ID of the edge to click on
+     *
+     */
+    clickOnEdge(edgeId: string): void;
+    /**
+     * Double clicks on the given edge
+     * @param edgeId ID of the edge
+     *
+     */
+    dblClickOnEdge(edgeId: string): void;
+    /**
+     * Taps on the given edge
+     * @param edgeOrEdgeId Edge, or ID of the edge
+     *
+     */
+    tapOnEdge(edgeOrEdgeId: string | Edge): void;
+    /**
+     * Double taps on the given edge
+     *
+     * @param edgeOrEdgeId
+     */
+    dblTapOnEdge(edgeOrEdgeId: string | Edge): void;
+    private _addFromPalette;
+    dragFromPalette(palette: Palette<any>, selector: string, options?: any): void;
+    tapFromPalette(palette: Palette<any>, selector: string, options?: any): void;
+    /**
+     * Trigger a mousedown event on the edge with the given id.
+     * @param edgeId
+     *
+     */
+    mousedownOnEdge(edgeId: string): void;
+    /**
+     * Trigger a mouseup event on the edge with the given id.
+     * @param edgeId
+     *
+     */
+    mouseupOnEdge(edgeId: string): void;
+    /**
+     * Trigger a mouseover event on the edge with the given id.
+     * @param edgeId
+     *
+     */
+    mouseoverOnEdge(edgeId: string): void;
+    /**
+     * Trigger a mouseout event on the edge with the given id.
+     * @param edgeId
+     *
+     */
+    mouseoutOnEdge(edgeId: string): void;
+    /**
+     * Trigger a right click event on the edge with the given id.
+     * @param edgeId
+     *
+     */
+    contextmenuOnEdge(edgeId: string): void;
+    /**
+     * Clicks on the overlay with the given ID, on the given Edge.
+     * @param edgeId ID of the Edge
+     * @param overlayId ID of the overlay to click on.
+     *
+     */
+    clickOnOverlay(edgeId: string, overlayId: string): void;
+    /**
+     * Clicks on the port with the given ID on the node with given node id.
+     * @param nodeId ID of the node containing the port
+     * @param portId ID of the port to click on.
+     *
+     */
+    clickOnPort(nodeId: string, portId: string): void;
+    /**
+     * Returns the count of Edges in the underlying model.
+     *
+     */
+    getEdgeCount(): number;
+    /**
+     * Drag the given element onto the canvas, optionally at a specific x,y. Use this when you want to test drag/drop
+     * from some palette.
+     * @param el Element to drop onto the canvas.
+     * @param x Optional, defaults to 250.
+     * @param y Optional, defaults to 250.
+     *
+     */
+    dragElementToCanvas(el: BrowserElement, x: number, y: number): void;
+    /**
+     * Add a miniview to this test harness.
+     * @param miniviewOptions Options for the miniview.
+     * @internal
+     */
+    addMiniview(miniviewOptions: TestHarnessMiniviewPluginOptions): MiniviewPlugin;
+    /**
+     * Gets the position in the DOM of the element representing the given Node or Group
+     * @param v
+     *
+     */
+    getDOMPosition(v: string | Node | Group): PointXY;
+    /**
+     * Returns whether or not the DOM element representing the given vertex is at the given point `p`.
+     * @param v node/group or id of node/group
+     * @param x x location to test
+     * @param y y location to test
+     *
+     */
+    isAtPosition(v: string | Node | Group, x: number, y: number): boolean;
+    /**
+     * Attaches a SurfaceAnimator to the surface, and returns it.
+     * @internal
+     */
+    attachAnimator(): SurfaceAnimator;
+    /**
+     * Helper to test that a value is the same as some target, within our tolerance (0.00000000001).
+     * In rare instances the trigonometry stuff needs a little bit of leeway.
+     * @internal
+     */
+    within(val: number, target: number, _ok: Function, msg: string): void;
+}
+export {};