TestHarness

Data for the Group.

Returns

Group

addNode()

addNode(data): Node

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

Parameters

data

Data for the Node.

Returns

Node

clear()

clear(): VisuallyJsModel

Shortcut to the underlying clear method of the model.

Returns

VisuallyJsModel

clickOnCanvas()

clickOnCanvas(clickCount, button): void

Simulates a click on the canvas

Parameters

clickCount

number = 1

How any clicks to simulate. Defaults to 1.

button

number = 1

Which button to simulate. Defaults to 1 - the left button. 2 is right button.

Returns

void

clickOnCanvasAt()

clickOnCanvasAt(x, y, button): void

Simulates a click on the canvas at the given x,y

Parameters

x

number

X location to click at

y

number

Y location to click at

button

number = 1

Which button to simulate. Defaults to 1 - the left button. 2 is right button.

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

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.

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?, reason?): Edge

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.

Parameters

source

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

string | Node | Group | Port | BrowserElement

target

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

string | Node | Group | Port | BrowserElement

data?

Optional data for the edge.

reason?

ConnectReason

Returns

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, locationOnTarget?): 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.

locationOnTarget?

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(edgeOrEdgeId): void

Double taps on the given edge

Parameters

edgeOrEdgeId

string | 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, pointToDropAt?): PointXY

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

Parameters

detachEdgeByTarget()

detachEdgeByTarget(edge, pointToDropAt?): PointXY

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

Parameters

edge

pointToDropAt?

Returns

dragAndAbortConnection()

dragAndAbortConnection(source): void

Drags a connection from the given source and then aborts the drag by releasing the pointer button at a distant location.

Parameters

source

string | BrowserElement

Returns

void

dragAnElementAround()

dragAnElementAround(el): void

Randomly drag a DOM element around.

Parameters

el

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

Returns

void

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

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

string | Element | Node | Group

callbacks?

Optional set of event handlers to invoke during the drag.

Returns

void

void

dragConnection()

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

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.

Parameters

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.

string | [string, string] | BrowserElement

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.

string | [string, string] | BrowserElement

callbacks?

Optional callbacks to invoke during the connection drag

locationOnTarget?

Connection<BrowserElement>

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.

mouseUpContinuer?

Function

Returns

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. This is PAGE coordinates.

Parameters

el

DOM element to drag.

x

number

Amount to move in X axis

y

number

Amount to move in Y axis

eventHandlers?

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

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. This is PAGE coordinates.

Parameters

el

DOM element to drag.

x

number

Amount to move in X axis

y

number

Amount to move in Y axis

stages?

number

How many stages to break the drag up into.

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.

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

Element to drop onto the canvas.

x

number

Optional, defaults to 250.

y

number

Optional, defaults to 250.

Returns

void

dragSnapConnection()

dragSnapConnection(source, target, xMargin, yMargin, callbacks?): 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.

Parameters

source

string | [string, string] | BrowserElement

target

string | [string, string] | BrowserElement

xMargin

number

yMargin

number

callbacks?

Connection<BrowserElement>

Returns

dragVertexBy()

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

Drag the given Node/Group by the given x/y amounts. This is CANVAS coordinates.

Parameters

obj

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

string | Element | Node | Group

x

number

Amount to move in X axis

y

number

Amount to move in Y axis

eventHandlers?

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

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

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

string | Node | Group | BrowserElement

x

number

Amount to move in X axis

y

number

Amount to move in Y axis

stages?

number

How many stages to break the drag up into.

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.

metaKeys?

Record<string, boolean>

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

Returns

void

dragVertexByPageDelta()

dragVertexByPageDelta(obj, x, y, eventHandlers?, metaKeys?): void

Drag the given Node/Group by the given x/y amounts. This is PAGE coordinates.

Parameters

obj

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

string | Element | Node | Group

x

number

Amount to move in X axis

y

number

Amount to move in Y axis

eventHandlers?

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

metaKeys?

Record<string, boolean>

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

Returns

void

dragVertexIntoGroup()

dragVertexIntoGroup(vertex, group): void

Drag the given vertex into the given group.

Parameters

vertex

Vertex id, Node, Group, or DOM element.

string | Element | Node | Group

group

Group id, Group, or DOM element.

string | Element | Group

Returns

void

dragVertexOutOfGroup()

dragVertexOutOfGroup(vertex, dragFarFarAway?): void

Drag the given vertex out of its current group. The element is placed [50,50] to the left and above

Parameters

vertex

Vertex id, Node, Group, or DOM element

string | Element | Node | Group

dragFarFarAway?

boolean

Returns

void

dragVertexTo()

dragVertexTo(obj, x, y, eventHandlers?): void

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

Parameters

obj

Node id, group, node, or DOM element.

string | Element | Node | Group

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.

eventHandlers?

Returns

void

dragVertexToPageLocation()

dragVertexToPageLocation(obj, x, y, eventHandlers?): void

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

Parameters

obj

Node id, node, group, or DOM element.

string | Element | Node | Group

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.

eventHandlers?

Returns

void

getAllEdges()

getAllEdges(): Edge[]

Gets all edges in the underlying model.

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

getEdge()

getEdge(obj): Edge

Gets an Edge.

Parameters

obj

any

Edge ID, or Edge object.

Returns

getEdgeCount()

getEdgeCount(): number

Returns the count of Edges in the underlying model.

Returns

number

getGroup()

getGroup(obj): ObjectInfo<Group>

Gets a Group from the underlying model.

Parameters

obj

Group Id or DOM element representing the Group

string | Element

Returns

ObjectInfo<Group>

getModelObject()

getModelObject<T>(obj): ObjectInfo<T>

Find the corresponding model object for the given input.

Type Parameters

T

T = any

Parameters

obj

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

Returns

ObjectInfo<T>

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

getNode()

getNode(obj): ObjectInfo<Node>

Gets a Node from the underlying model.

Parameters

obj

Node Id or DOM element representing the node.

string | Element

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

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

string | Element | Node | Group | ObjectData

Returns

Element

getRenderedPort()

getRenderedPort(obj): Element

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

Parameters

obj

string

Port, or port ID.

Returns

Element

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

node/group or id of node/group

string | Node | Group

x

number

x location to test

y

number

y location to test

Returns

boolean

keyEvent()

keyEvent(el, type, key, modifiers?): void

Dispatch a keyboard event of the given type on the given element, with the given key code.

Parameters

el

Element

Element to dispatch the event on.

type

string

Type of event, e.g. "keydown", "keyup", "keypress".

key

string

modifiers?

Record<string, boolean>

Optional modifiers for the event.

Returns

void

lasso()

lasso(start, end, callbacks?): 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.

Parameters

start

end

callbacks?

Returns

void

lassoOnElement()

lassoOnElement(el, start, end, callbacks?): 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.

Parameters

el

start

end

callbacks?

Returns

void

load()

load(options): VisuallyJsModel

Shortcut to the underlying load method of the model.

Parameters

options

LoadOptions

Returns

VisuallyJsModel

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

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

string | Node | Group | Port | BrowserElement

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()

makeEventAt(x, y): SynthesizedEvent

Make an event at the given page location.

Parameters

x

number

y

number

Returns

SynthesizedEvent

mousedownOnEdge()

mousedownOnEdge(edgeId): void

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

Parameters

edgeId

string

Returns

void

mousedownOnElement()

mousedownOnElement(el): void

Creates a mousedown event on the given element and dispatches it.

Parameters

el

Returns

void

mousemoveOnCanvasAt()

mousemoveOnCanvasAt(x, y): void

Simulates a mouse move event on the canvas at the given x,y

Parameters

x

number

y

number

Returns

void

mousemoveOnVertex()

mousemoveOnVertex(nodeOrGroupId, locationOnTarget?): 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.

locationOnTarget?

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, locationOnTarget?): 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.

locationOnTarget?

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, locationOnTarget?): 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.

locationOnTarget?

Returns

void

mouseupOnEdge()

mouseupOnEdge(edgeId): void

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

Parameters

edgeId

string

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.

relocateEdgeSource()

relocateEdgeSource(edge, source, callbacks?, locationOnTarget?, mouseUpContinuation?): void

Drag the given edge's source relocator and drop it on some other vertex/element.

Parameters

edge

source

string | Node | Group | Port | BrowserElement

callbacks?

locationOnTarget?

mouseUpContinuation?

Function

Returns

void

relocateEdgeTarget()

relocateEdgeTarget(edge, target, callbacks?, locationOnTarget?, mouseUpContinuation?): void

Drag the given edge's target relocator and drop it on some other vertex/element.

Parameters

edge

target

string | Node | Group | Port | BrowserElement

callbacks?

locationOnTarget?

mouseUpContinuation?

Function

Returns

void

rightClickOnCanvas()

rightClickOnCanvas(clickCount): void

Right-clicks on the canvas.

Parameters

clickCount

number = 1

How any clicks to simulate. Defaults to 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 to edit

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(edgeOrEdgeId): void

Taps on the given edge

Parameters

edgeOrEdgeId

Edge, or ID of the edge

string | Edge

Returns

void

tapOnElement()

tapOnElement(el): void

Taps on a DOM element (mousedown followed by mouseup)

Parameters

el

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

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

string | Node | Group | Port | BrowserElement

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

triggerEvent()

triggerEvent(el, eventName, data?, x?, y?): 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

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.

x?

number

y?

number

Returns

void

triggerEventAt()

triggerEventAt(el, eventName, x, y, data?): void

Triggers the given event at the given offset from the origin of the given element.

Parameters

el

HTMLElement

eventName

string

x

number

y

number

data?

Record<string, any>

Returns

void

triggerEventOnElement()

triggerEventOnElement(el, eventName, data?, x?, y?): 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

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.

x?

number

y?

number

Returns

void

Deprecated

Use triggerEvent instead

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 model. A convenience wrapper around the same method on the underlying model.

Parameters

obj

Group, or Group Id.

string | Group

data

Data for the Group.

Returns

void

updateNode()

updateNode(obj, data): void

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

Parameters

obj

Node, or Node Id.

string | Node

data

Data for the Node.

Returns

void

updateVertex()

updateVertex(obj, data): void

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

Parameters

obj

vertex, or vertex Id.

string | Vertex

data