Class jsPlumbToolkitTestHarness

Provides a set of methods you can use in your unit/component tests to simulate a user interacting with a UI rendered by JsPlumb.

Methods

addGroup addNode clear clickOnCanvas clickOnEdge clickOnElement clickOnElementInsideVertex clickOnGroup clickOnNode clickOnOverlay clickOnPort clickOnVertex connect contextmenuOnEdge contextmenuOnVertex dblClickOnEdge dblClickOnElementInsideVertex dblClickOnVertex dblTapOnEdge dblTapOnElementInsideVertex dblTapOnGroup dblTapOnNode dblTapOnVertex destroy detachEdge dragANodeAround dragAnElementAround dragConnection dragElementBy dragElementByInStages dragElementToCanvas dragNodeIntoGroup dragVertexBy dragVertexByInStages dragVertexTo getAllEdges getDOMPosition getEdge getEdgeCount getGroup getNode getRenderedConnection getRenderedElement getRenderedPort getToolkitObject isAtPosition load makeEvent makeEventAt mousedownOnEdge mousedownOnVertex mousemoveOnVertex mouseoutOnEdge mouseoutOnVertex mouseoverOnEdge mouseoverOnVertex mouseupOnEdge mouseupOnVertex querySelector querySelectorAll rightClickOnCanvas rightClickOnVertex startEditing stopEditing tapOnEdge tapOnElement tapOnElementInsideVertex tapOnGroup tapOnNode tapOnVertex trigger triggerEventOnElement updateEdge updateGroup updateNode updateVertex withConsole

Methods

addGroup

  • addGroup(data): Group

  • Add a Group to the Toolkit. A convenience wrapper around the same method on the underlying Toolkit.

    Parameters

    • data: ObjectData

      Data for the Group.

    Returns Group

addNode

  • addNode(data): Node

  • Add a Node to the Toolkit. A convenience wrapper around the same method on the underlying Toolkit.

    Parameters

    • data: ObjectData

      Data for the Node.

    Returns Node

clear

clickOnCanvas

  • clickOnCanvas(clickCount?, button?): void

  • Simulates a clicks on the canvas

    Parameters

    • clickCount: number = 1
    • button: number = 1

    Returns void

clickOnEdge

  • clickOnEdge(edgeId): void

  • Clicks on the given edge

    Parameters

    • edgeId: string

      ID of the edge to click on

    Returns void

clickOnElement

  • clickOnElement(el): void

  • Clicks on a DOM element

    Parameters

    • el: BrowserElement

    Returns void

clickOnElementInsideVertex

  • clickOnElementInsideVertex(nodeOrGroupId, selector): void

  • Clicks on an element inside the node/group with the given ID.

    Parameters

    • nodeOrGroupId: string

      ID of the node/group to click on.

    • selector: string

      CSS selector identifying the child element to click on.

    Returns void

clickOnGroup

  • clickOnGroup(groupId): void

  • Clicks on the group with the given ID.

    Parameters

    • groupId: string

      ID of the group to click on.

    Returns void

clickOnNode

  • clickOnNode(nodeId): void

  • Clicks on the node with the given ID.

    Parameters

    • nodeId: string

      ID of the group to click on.

    Returns void

clickOnOverlay

  • clickOnOverlay(edgeId, overlayId): void

  • Clicks on the overlay with the given ID, on the given Edge.

    Parameters

    • edgeId: string

      ID of the Edge

    • overlayId: string

      ID of the overlay to click on.

    Returns void

clickOnPort

  • clickOnPort(nodeId, portId): void

  • Clicks on the port with the given ID on the node with given node id. The port may be represented by an Endpoint or by a DOM element.

    Parameters

    • nodeId: string

      ID of the node containing the port

    • portId: string

      ID of the port to click on.

    Returns void

clickOnVertex

  • clickOnVertex(nodeOrGroupId): void

  • Clicks on the node/group with the given ID.

    Parameters

    • nodeOrGroupId: string

      ID of the node/group to click on.

    Returns void

connect

  • connect(source, target, data?): Edge

  • Connect the given source and target via a call on the Toolkit, ie. without using the mouse. If you want to simulate mouse activity being used to establish an edge, use dragConnection.

    Parameters

    • source: string | BrowserElement | Node | Group | Port

      Node/Port/Group id, node/port/group, or DOM element.

    • target: string | BrowserElement | Node | Group | Port

      Node/Port/Group id, node/port/group, or DOM element.

    • Optional data: ObjectData

      Optional data for the edge.

    Returns Edge

    an Edge.

contextmenuOnEdge

  • contextmenuOnEdge(edgeId): void

  • Trigger a right click event on the edge with the given id.

    Parameters

    • edgeId: string

    Returns void

contextmenuOnVertex

  • contextmenuOnVertex(nodeOrGroupId): void

  • Simulates a right-click event on the node/group with the given id

    Parameters

    • nodeOrGroupId: string

      ID of the node/group to simulate right-click on.

    Returns void

dblClickOnEdge

  • dblClickOnEdge(edgeId): void

  • Double clicks on the given edge

    Parameters

    • edgeId: string

      ID of the edge

    Returns void

dblClickOnElementInsideVertex

  • dblClickOnElementInsideVertex(nodeOrGroupId, selector): void

  • Double clicks on an element inside the node/group with the given ID.

    Parameters

    • nodeOrGroupId: string

      ID of the node/group to double click on.

    • selector: string

      CSS selector identifying the child element to click on.

    Returns void

dblClickOnVertex

  • dblClickOnVertex(nodeOrGroupId): void

  • Double clicks on the node/group with the given ID.

    Parameters

    • nodeOrGroupId: string

      ID of the node/group to click on.

    Returns void

dblTapOnEdge

  • dblTapOnEdge(edgeId): void

  • Double taps on the given edge

    Parameters

    • edgeId: string

      ID of the edge

    Returns void

dblTapOnElementInsideVertex

  • dblTapOnElementInsideVertex(nodeOrGroupId, selector): void

  • Double taps on an element inside the node/group with the given ID.

    Parameters

    • nodeOrGroupId: string

      ID of the node to tap on.

    • selector: string

      CSS selector identifying the child element to click on.

    Returns void

dblTapOnGroup

  • dblTapOnGroup(groupId): 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.

    Parameters

    • groupId: string

      ID of the node/group to double tap on.

    Returns void

dblTapOnNode

  • dblTapOnNode(nodeId): 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.

    Parameters

    • nodeId: string

      ID of the node/group to double tap on.

    Returns void

dblTapOnVertex

  • dblTapOnVertex(nodeOrGroupId): 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.

    Parameters

    • nodeOrGroupId: string

      ID of the node/group to double tap on.

    Returns void

destroy

  • destroy(): void

  • Destroy the underlying Surface and remove the test harness container from the DOM.

    Returns void

detachEdge

  • detachEdge(edge): void

  • Use the mouse to drag the target endpoint of the given edge and drop it on distant whitespace, causing the edge to be detached.

    Parameters

    • edge: Edge

    Returns void

dragANodeAround

  • dragANodeAround(obj, callbacks?): void

  • 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.

    Parameters

    • obj: string | Element | Node | Group

      Either a Node/Group, or the ID of a Node/Group, or the DOM element representing some Node/Group

    • Optional callbacks: ConnectionDragEventHandlers

      Optional set of event handlers to invoke during the drag.

    Returns void

    void

dragAnElementAround

  • dragAnElementAround(el): void

  • Randomly drag a DOM element around.

    Parameters

    • el: BrowserElement

      Some DOM element. Doesn't need to be an element that represents a vertex in your model.

    Returns void

    void

dragConnection

  • dragConnection(source, target, callbacks?, locationOnTarget?): Connection<BrowserElement>

  • Drags a connection between two vertices. You can pass in a variety of arguments to this method for both source and target: an Endpoint, a DOM element, a node/group/port ID, or a combination of vertex id + css selector. We use this last variant in JsPlumb'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.

    Parameters

    • source: string | [string, string] | BrowserElement | Endpoint<BrowserElement>

      Either a DOM element, an Endpoint, 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.

    • target: string | [string, string] | BrowserElement | Endpoint<BrowserElement>

      Either a DOM element, an Endpoint, 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.

    • Optional callbacks: ConnectionDragEventHandlers

      Optional callbacks to invoke during the connection drag

    • Optional locationOnTarget: PointXY

      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 JsPlumb when we're testing scenarios in which a given vertex has multiple anchor locations assigned to it.

    Returns Connection<BrowserElement>

    a Connection. You can access the underlying edge via the .edge property of the connection.

dragElementBy

  • dragElementBy(el, x, y, eventHandlers?, metaKeys?): void

  • Drag the given DOM element by the given x/y amounts.

    Parameters

    • el: BrowserElement

      DOM element to drag.

    • x: number

      Amount to move in X axis

    • y: number

      Amount to move in Y axis

    • Optional eventHandlers: DragEventHandlers

      Optional callbacks to invoke at various points in the drag lifecycle.

    • Optional metaKeys: Record<string, boolean>

      Optional map of meta keys to set on the events used to model the drag.

    Returns void

dragElementByInStages

  • dragElementByInStages(el, x, y, stages?, eventHandlers?, metaKeys?): void

  • Drag a DOM element over a number of stages, advancing a little each time.

    Parameters

    • el: BrowserElement

      DOM element to drag.

    • x: number

      Amount to move in X axis

    • y: number

      Amount to move in Y axis

    • Optional stages: number

      How many stages to break the drag up into.

    • Optional eventHandlers: DragEventHandlers

      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.

    • Optional metaKeys: Record<string, boolean>

      Optional map of meta keys to set on the events used to model the drag.

    Returns void

dragElementToCanvas

  • dragElementToCanvas(el, x, y): void

  • 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.

    Parameters

    • el: BrowserElement

      Element to drop onto the canvas.

    • x: number

      Optional, defaults to 250.

    • y: number

      Optional, defaults to 250.

    Returns void

dragNodeIntoGroup

  • dragNodeIntoGroup(node, group): void

  • Drag the given node into the given group.

    Parameters

    • node: string | Element | Node

      Node id, Node, or DOM element.

    • group: string | Element | Group

      Group id, Group, or DOM element.

    Returns void

dragVertexBy

  • dragVertexBy(obj, x, y, eventHandlers?, metaKeys?): void

  • Drag the given Node/Group by the given x/y amounts.

    Parameters

    • obj: string | Element | Node

      Node/Group id, node, group or DOM element.

    • x: number

      Amount to move in X axis

    • y: number

      Amount to move in Y axis

    • Optional eventHandlers: DragEventHandlers

      Optional callbacks to invoke at various points in the drag lifecycle.

    • Optional metaKeys: Record<string, boolean>

      Optional map of meta keys to set on the events used to model the drag.

    Returns void

dragVertexByInStages

  • dragVertexByInStages(obj, x, y, stages?, eventHandlers?, metaKeys?): void

  • Drag a Node/Group over a number of stages, advancing a little each time.

    Parameters

    • obj: string | BrowserElement | Node | Group

      Node/Group id, node, group or DOM element.

    • x: number

      Amount to move in X axis

    • y: number

      Amount to move in Y axis

    • Optional stages: number

      How many stages to break the drag up into.

    • Optional eventHandlers: DragEventHandlers

      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.

    • Optional metaKeys: Record<string, boolean>

      Optional map of meta keys to set on the events used to model the drag.

    Returns void

dragVertexTo

  • dragVertexTo(obj, x, y): void

  • Drag the given Node/Group to the given [x,y], which are canvas coordinates.

    Parameters

    • obj: string | Element | Node

      Node id, node, or DOM element.

    • x: number

      Location on canvas in X axis to position top left corner of the node.

    • y: number

      Location on canvas in Y axis to position top left corner of the node.

    Returns void

getAllEdges

  • getAllEdges(): Edge[]

  • Gets all edges in the underlying Toolkit.

    Returns Edge[]

getDOMPosition

  • getDOMPosition(v): PointXY

  • Gets the position in the DOM of the element representing the given Node or Group

    Parameters

    • v: string | Node | Group

    Returns PointXY

getEdge

  • getEdge(obj): Edge

  • Gets an Edge.

    Parameters

    • obj: any

      Edge ID, or Edge object.

    Returns Edge

getEdgeCount

  • getEdgeCount(): number

  • Returns the count of Edges in the underlying Toolkit.

    Returns number

getGroup

  • getGroup(obj): ObjectInfo<Group>

  • Gets a Group from the underlying Toolkit.

    Parameters

    • obj: string | Element

      Group Id or DOM element representing the Group

    Returns ObjectInfo<Group>

getNode

  • getNode(obj): ObjectInfo<Node>

  • Gets a Node from the underlying Toolkit.

    Parameters

    • obj: string | Element

      Node Id or DOM element representing the node.

    Returns ObjectInfo<Node>

getRenderedConnection

  • getRenderedConnection(edgeId): Connection<Element>

  • For the given edge id, find and return the underlying Connection used to render it.

    Parameters

    • edgeId: string

      An edge ID

    Returns Connection<Element>

getRenderedElement

  • getRenderedElement(obj): Element

  • For the given argument, find and return the corresponding DOM element.

    Parameters

    • obj: string | Element | Node | Group | ObjectData

      A node/group/port id, or node/group/port, or a DOM element.

    Returns Element

getRenderedPort

  • getRenderedPort(obj): Element

  • Gets the DOM element that was rendered for some port. May be null.

    Parameters

    • obj: any

      Port, or port ID.

    Returns Element

getToolkitObject

  • getToolkitObject<T>(obj): ObjectInfo<T>

  • Find the corresponding Toolkit object for the given input.

    Type Parameters

    • T = any

    Parameters

    • obj: string | Element | Edge | Node | Group | ObjectData | Connection<Element>

      A string representing an ID, a DOM element, a connection, or an existing Toolkit object.

    Returns ObjectInfo<T>

    an object containing the given model object, plus its id, and type etc.

isAtPosition

  • isAtPosition(v, x, y): boolean

  • Returns whether or not the DOM element representing the given vertex is at the given point p.

    Parameters

    • v: string | Node | Group

      node/group or id of node/group

    • x: number

      x location to test

    • y: number

      y location to test

    Returns boolean

load

makeEvent

  • makeEvent(obj, dx, dy): SynthesizedEvent

  • 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.

    Parameters

    • obj: string | BrowserElement | Node | Group | Port

      Node/Port/Group id, node/port/group, or DOM element.

    • dx: number

      Optional offset from the center of the x axis of the related DOM element to position the event.

    • dy: number

      Optional offset from the center of the y axis of the related DOM element to position the event.

    Returns SynthesizedEvent

    a SynthesizedEvent

makeEventAt

mousedownOnEdge

  • mousedownOnEdge(edgeId): void

  • Trigger a mousedown event on the edge with the given id.

    Parameters

    • edgeId: string

    Returns void

mousedownOnVertex

  • mousedownOnVertex(nodeOrGroupId): void

  • Simulates a mouseup event on the node/group with the given id

    Parameters

    • nodeOrGroupId: string

      ID of the node/group to simulate mouseup on.

    Returns void

mousemoveOnVertex

  • mousemoveOnVertex(nodeOrGroupId): void

  • Simulates a mousemove event on the node/group with the given id

    Parameters

    • nodeOrGroupId: string

      ID of the node/group to simulate mousemove on.

    Returns void

mouseoutOnEdge

  • mouseoutOnEdge(edgeId): void

  • Trigger a mouseout event on the edge with the given id.

    Parameters

    • edgeId: string

    Returns void

mouseoutOnVertex

  • mouseoutOnVertex(nodeOrGroupId): void

  • Simulates a mouseout event on the node/group with the given id

    Parameters

    • nodeOrGroupId: string

      ID of the node/group to simulate mouseout on.

    Returns void

mouseoverOnEdge

  • mouseoverOnEdge(edgeId): void

  • Trigger a mouseover event on the edge with the given id.

    Parameters

    • edgeId: string

    Returns void

mouseoverOnVertex

  • mouseoverOnVertex(nodeOrGroupId): void

  • Simulates a mouseover event on the node/group with the given id

    Parameters

    • nodeOrGroupId: string

      ID of the node/group to simulate mouseover on.

    Returns void

mouseupOnEdge

  • mouseupOnEdge(edgeId): void

  • Trigger a mouseup event on the edge with the given id.

    Parameters

    • edgeId: string

    Returns void

mouseupOnVertex

  • mouseupOnVertex(nodeOrGroupId): void

  • Simulates a mouseup event on the node/group with the given id

    Parameters

    • nodeOrGroupId: string

      ID of the node/group to simulate mouseup on.

    Returns void

querySelector

  • querySelector(selector): any

  • Execute querySelector(...) on the current container and return the results.

    Parameters

    • selector: string

    Returns any

    A matching DOM element, or null

querySelectorAll

  • querySelectorAll(selector): any

  • Execute querySelectorAll(...) on the current container and return the results.

    Parameters

    • selector: string

    Returns any

    A NodeList of matching elements.

rightClickOnCanvas

  • rightClickOnCanvas(clickCount?): void

  • Right-clicks on the canvas.

    Parameters

    • clickCount: number = 1

    Returns void

rightClickOnVertex

  • rightClickOnVertex(nodeOrGroupId): void

  • Right-clicks on the node/group with the given ID.

    Parameters

    • nodeOrGroupId: string

      ID of the node/group to click on.

    Returns void

startEditing

  • startEditing(edge, params?): void

  • Start editing the given Edge. Your surface must be configured for editable edge paths for this method to have any effect.

    Parameters

    • edge: Edge

      Edge to edit

    • Optional params: any

      Optional editor params. The type of this object depends on the type of the edge that is to be edited.

    Returns void

stopEditing

  • stopEditing(): void

  • Stop editing an Edge. Your surface must be configured for editable edge paths for this method to have any effect.

    Returns void

tapOnEdge

  • tapOnEdge(edgeId): void

  • Taps on the given edge

    Parameters

    • edgeId: string

      ID of the edge

    Returns void

tapOnElement

  • tapOnElement(el): void

  • Taps on a DOM element (mousedown followed by mouseup)

    Parameters

    • el: BrowserElement

    Returns void

tapOnElementInsideVertex

  • tapOnElementInsideVertex(nodeOrGroupId, selector): void

  • Taps on a DOM element inside the node/group with the given ID.

    Parameters

    • nodeOrGroupId: string

      ID of the node/group to tap on.

    • selector: string

      CSS selector identifying the child element to click on.

    Returns void

tapOnGroup

  • tapOnGroup(groupId): 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.

    Parameters

    • groupId: string

      ID of the group to tap on.

    Returns void

tapOnNode

  • tapOnNode(nodeId): 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.

    Parameters

    • nodeId: string

      ID of the node to tap on.

    Returns void

tapOnVertex

  • tapOnVertex(nodeOrGroupId): 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.

    Parameters

    • nodeOrGroupId: string

      ID of the node/group to tap on.

    Returns void

trigger

  • trigger(obj, eventName, evt): 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.

    Parameters

    • obj: string | BrowserElement | Node | Group | Port

      Node/Port/Group id, node/port/group, or DOM element.

    • eventName: string

      eg 'click', 'mouseover'

    • evt: any

      Optional, an event you previously created via #makeEvent. Sometimes you want to control the specific location of the event.

    Returns void

triggerEventOnElement

  • triggerEventOnElement(el, eventName, data?): void

  • Trigger the provided event on the given DOM element.

    Parameters

    • el: HTMLElement

      Element to trigger the event on

    • eventName: string

      Name of the event to trigger

    • Optional data: Record<string, any>

      Optional data to set on the created event. Any values in this object are copied into the created event via Object.assign.

    Returns void

updateEdge

  • updateEdge(edge, data): void

  • Updates an Edge.

    Parameters

    • edge: any

      Edge, or edge ID.

    • data: any

      Data to update the edge with.

    Returns void

updateGroup

  • updateGroup(obj, data): void

  • Update a Group in the Toolkit. A convenience wrapper around the same method on the underlying Toolkit.

    Parameters

    • obj: string | Group

      Group, or Group Id.

    • data: ObjectData

      Data for the Group.

    Returns void

updateNode

  • updateNode(obj, data): void

  • Update a Node in to the Toolkit. A convenience wrapper around the same method on the underlying Toolkit.

    Parameters

    • obj: string | Node

      Node, or Node Id.

    • data: ObjectData

      Data for the Node.

    Returns void

updateVertex

  • updateVertex(obj, data): void

  • Update a Vertex in the Toolkit. A convenience wrapper around the same method on the underlying Toolkit.

    Parameters

    • obj: string | Vertex

      vertex, or vertex Id.

    • data: ObjectData

      Data for the Vertex update.

    Returns void

withConsole

  • withConsole(fn): void

  • 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.

    Parameters

    • fn: Function

    Returns void

Settings

Member Visibility

Theme

On This Page

addGroupaddNodeclearclickOnCanvasclickOnEdgeclickOnElementclickOnElementInsideVertexclickOnGroupclickOnNodeclickOnOverlayclickOnPortclickOnVertexconnectcontextmenuOnEdgecontextmenuOnVertexdblClickOnEdgedblClickOnElementInsideVertexdblClickOnVertexdblTapOnEdgedblTapOnElementInsideVertexdblTapOnGroupdblTapOnNodedblTapOnVertexdestroydetachEdgedragANodeArounddragAnElementArounddragConnectiondragElementBydragElementByInStagesdragElementToCanvasdragNodeIntoGroupdragVertexBydragVertexByInStagesdragVertexTogetAllEdgesgetDOMPositiongetEdgegetEdgeCountgetGroupgetNodegetRenderedConnectiongetRenderedElementgetRenderedPortgetToolkitObjectisAtPositionloadmakeEventmakeEventAtmousedownOnEdgemousedownOnVertexmousemoveOnVertexmouseoutOnEdgemouseoutOnVertexmouseoverOnEdgemouseoverOnVertexmouseupOnEdgemouseupOnVertexquerySelectorquerySelectorAllrightClickOnCanvasrightClickOnVertexstartEditingstopEditingtapOnEdgetapOnElementtapOnElementInsideVertextapOnGrouptapOnNodetapOnVertextriggertriggerEventOnElementupdateEdgeupdateGroupupdateNodeupdateVertexwithConsole
Version :