Skip to content

Commit

Permalink
fix(selection): deselect events not being fired (#1310)
Browse files Browse the repository at this point in the history
  • Loading branch information
Thomaash authored Jan 30, 2021
1 parent 5264761 commit 3df5490
Show file tree
Hide file tree
Showing 9 changed files with 317 additions and 21 deletions.
99 changes: 98 additions & 1 deletion cypress/integration/visual/selection.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ context("Selection", (): void => {
],
physics: false,
},
{ requireNewerVersionThan: "8.5.3" }
{ requireNewerVersionThan: "9.0.0" }
);
});

Expand All @@ -32,12 +32,34 @@ context("Selection", (): void => {
nodes: ["N_1"],
edges: ["E_1-2", "E_1-3", "E_1-4", "E_1-5"],
});
cy.visShiftAndAssertEventFired("select");
cy.visShiftAndAssertEventFired("selectEdge");
cy.visShiftAndAssertEventFired("selectNode");
cy.visShiftAndAssertEventNone(
"deselectEdge",
"deselectNode",
"select",
"selectEdge",
"selectNode"
);

cy.visClickPoint({ x: 500 + 200, y: 500 + 0 });
cy.visAssertSelection({
nodes: ["N_2"],
edges: ["E_5-2", "E_1-2", "E_2-3"],
});
cy.visShiftAndAssertEventFired("deselectEdge");
cy.visShiftAndAssertEventFired("deselectNode");
cy.visShiftAndAssertEventFired("select");
cy.visShiftAndAssertEventFired("selectEdge");
cy.visShiftAndAssertEventFired("selectNode");
cy.visShiftAndAssertEventNone(
"deselectEdge",
"deselectNode",
"select",
"selectEdge",
"selectNode"
);

cy.visSnapshotOpenedPage("select-one-by-click");
});
Expand All @@ -55,6 +77,13 @@ context("Selection", (): void => {
nodes: [],
edges: [],
});
cy.visShiftAndAssertEventNone(
"deselectEdge",
"deselectNode",
"select",
"selectEdge",
"selectNode"
);

cy.visSnapshotOpenedPage("select-none-by-single-drag");
});
Expand All @@ -72,6 +101,16 @@ context("Selection", (): void => {
nodes: ["N_1"],
edges: ["E_1-2", "E_1-3", "E_1-4", "E_1-5"],
});
cy.visShiftAndAssertEventFired("select");
cy.visShiftAndAssertEventFired("selectEdge");
cy.visShiftAndAssertEventFired("selectNode");
cy.visShiftAndAssertEventNone(
"deselectEdge",
"deselectNode",
"select",
"selectEdge",
"selectNode"
);

cy.visSnapshotOpenedPage("select-one-by-single-drag-(TL_to_BR)");
});
Expand All @@ -89,6 +128,16 @@ context("Selection", (): void => {
nodes: ["N_1", "N_2", "N_3"],
edges: ["E_1-2", "E_1-3", "E_1-4", "E_1-5", "E_3-4", "E_2-3", "E_5-2"],
});
cy.visShiftAndAssertEventFired("select");
cy.visShiftAndAssertEventFired("selectEdge");
cy.visShiftAndAssertEventFired("selectNode");
cy.visShiftAndAssertEventNone(
"deselectEdge",
"deselectNode",
"select",
"selectEdge",
"selectNode"
);

cy.visSnapshotOpenedPage("select-three-by-single-drag-(BR_to_TL)");
});
Expand All @@ -106,6 +155,16 @@ context("Selection", (): void => {
nodes: ["N_1", "N_3"],
edges: ["E_1-2", "E_1-3", "E_1-4", "E_1-5", "E_3-4", "E_2-3"],
});
cy.visShiftAndAssertEventFired("select");
cy.visShiftAndAssertEventFired("selectEdge");
cy.visShiftAndAssertEventFired("selectNode");
cy.visShiftAndAssertEventNone(
"deselectEdge",
"deselectNode",
"select",
"selectEdge",
"selectNode"
);

cy.visDrag([
{
Expand All @@ -119,6 +178,16 @@ context("Selection", (): void => {
nodes: ["N_1", "N_2", "N_3"],
edges: ["E_1-2", "E_1-3", "E_1-4", "E_1-5", "E_3-4", "E_2-3", "E_5-2"],
});
cy.visShiftAndAssertEventFired("select");
cy.visShiftAndAssertEventFired("selectEdge");
cy.visShiftAndAssertEventFired("selectNode");
cy.visShiftAndAssertEventNone(
"deselectEdge",
"deselectNode",
"select",
"selectEdge",
"selectNode"
);

cy.visSnapshotOpenedPage(
"select-three-by-two-drags-(TR_to_BL_then_BL_to_TR)"
Expand All @@ -132,6 +201,13 @@ context("Selection", (): void => {
edges: ["E_1-2", "E_1-3", "E_1-4", "E_1-5", "E_3-4", "E_2-3"],
});
});
cy.visShiftAndAssertEventNone(
"deselectEdge",
"deselectNode",
"select",
"selectEdge",
"selectNode"
);

cy.visSnapshotOpenedPage("select-via-method");
});
Expand All @@ -140,6 +216,13 @@ context("Selection", (): void => {
cy.visRun(({ network }): void => {
network.setSelection({ nodes: ["N_1", "N_5"] }, { unselectAll: false });
});
cy.visShiftAndAssertEventNone(
"deselectEdge",
"deselectNode",
"select",
"selectEdge",
"selectNode"
);
cy.visSnapshotOpenedPage("programmatic-select-nodes");

cy.visRun(({ network }): void => {
Expand All @@ -148,11 +231,25 @@ context("Selection", (): void => {
{ unselectAll: false }
);
});
cy.visShiftAndAssertEventNone(
"deselectEdge",
"deselectNode",
"select",
"selectEdge",
"selectNode"
);
cy.visSnapshotOpenedPage("programmatic-select-edges");

cy.visRun(({ network }): void => {
network.unselectAll();
});
cy.visShiftAndAssertEventNone(
"deselectEdge",
"deselectNode",
"select",
"selectEdge",
"selectNode"
);
cy.visSnapshotOpenedPage("programmatic-select-unselect-all");
});
});
61 changes: 53 additions & 8 deletions cypress/pages/standard-cytest-script.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
// These imports are there only for their types. Their values can't be used as
// this will be loaded in a web browser without bundling.
import * as visNetworkStandalone from "../../standalone";
import * as visUtil from "vis-util";
import { Options } from "../../standalone";
import { UniversalConfig } from "../support/commands/types";
import type * as visNetworkStandalone from "../../standalone";
import type * as visUtil from "vis-util";
import type { Options } from "../../standalone";
import type { UniversalConfig, VisWindow } from "../support/commands/types";
type VisNetworkStandalone = typeof visNetworkStandalone;
type VisUtil = typeof visUtil;

Expand Down Expand Up @@ -237,10 +237,55 @@ type VisUtil = typeof visUtil;
});
});

(window as any).visEdges = edges;
(window as any).visLastEvents = {};
(window as any).visNetwork = network;
(window as any).visNodes = nodes;
// Event queue:
const eventQueue: VisWindow["visEventQueue"] = {} as any;
([
"afterDrawing",
"animationFinished",
"beforeDrawing",
"blurEdge",
"blurNode",
"click",
"configChange",
"controlNodeDragEnd",
"controlNodeDragging",
"deselectEdge",
"deselectNode",
"doubleClick",
"dragEnd",
"dragStart",
"dragging",
"hidePopup",
"hold",
"hoverEdge",
"hoverNode",
"initRedraw",
"oncontext",
"release",
"resize",
"select",
"selectEdge",
"selectNode",
"showPopup",
"stabilizationIterationsDone",
"stabilizationProgress",
"stabilized",
"startStabilizing",
"zoom",
] as const).forEach((eventName): void => {
eventQueue[eventName] = [];
network.on(eventName, (params: any): void => {
eventQueue[eventName].push({ params });
});
});

Object.assign<any, VisWindow>(window, {
visEdges: edges,
visEventQueue: eventQueue,
visLastEvents: {},
visNetwork: network,
visNodes: nodes,
});

$status.innerText = "Ready";
})();
1 change: 1 addition & 0 deletions cypress/support/commands/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
export * from "./types";

export * from "./vis-assert-event";
export * from "./vis-assert-selection";
export * from "./vis-check-ids";
export * from "./vis-click-betweek-points";
Expand Down
12 changes: 11 additions & 1 deletion cypress/support/commands/types.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import {
import type {
DataSetEdges,
DataSetNodes,
Network,
NetworkEvents,
Options,
} from "../../../declarations/entry-standalone";

Expand All @@ -11,11 +12,20 @@ export * from "../../../standalone";

export interface VisGlobals {
edges: DataSetEdges;
eventQueue: Record<NetworkEvents, { params: any }[]>;
lastEvents: Record<string, any>;
network: Network;
nodes: DataSetNodes;
}

export type VisWindow = {
visEdges: VisGlobals["edges"];
visEventQueue: VisGlobals["eventQueue"];
visLastEvents: VisGlobals["lastEvents"];
visNetwork: VisGlobals["network"];
visNodes: VisGlobals["nodes"];
};

export interface Point {
x: number;
y: number;
Expand Down
77 changes: 77 additions & 0 deletions cypress/support/commands/vis-assert-event.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { NetworkEvents } from "./types";

declare global {
namespace Cypress {
interface Chainable<Subject> {
/**
* Check that given event was fired.
*
* @param name - The name of the event as used by Network.on().
*/
visShiftAndAssertEventFired(name: NetworkEvents): Chainable<Subject>;
/**
* Check that given event was fired.
*
* @param name - The name of the event as used by Network.on().
* @param params - The params of the event as supplied by Network.on().
*/
visShiftAndAssertEventFiredWithParams(
name: NetworkEvents,
params: any
): Chainable<Subject>;
/**
* Check that given event was not fired.
*
* @param name - The name of the event as used by Network.on().
*/
visShiftAndAssertEventNone(
...names: readonly NetworkEvents[]
): Chainable<Subject>;
}
}
}

export function visShiftAndAssertEventFired(name: NetworkEvents): void {
cy.visRun(
async ({ eventQueue }): Promise<void> => {
expect(eventQueue[name], `${name} event queue`).to.not.be.empty;
eventQueue[name].shift();
}
);
}
Cypress.Commands.add(
"visShiftAndAssertEventFired",
visShiftAndAssertEventFired
);

export function visShiftAndAssertEventFiredWithParams(
name: NetworkEvents,
params: any
): void {
cy.visRun(
async ({ eventQueue }): Promise<void> => {
expect(eventQueue[name], `${name} event queue`).to.not.be.empty;
const event = eventQueue[name].shift();
expect(event, `${name} event`)
.to.have.ownProperty("params")
.that.deep.equals(params);
}
);
}
Cypress.Commands.add(
"visShiftAndAssertEventFiredWithParams",
visShiftAndAssertEventFiredWithParams
);

export function visShiftAndAssertEventNone(
...names: readonly NetworkEvents[]
): void {
cy.visRun(
async ({ eventQueue }): Promise<void> => {
for (const name of names) {
expect(eventQueue[name], `${name} event queue`).to.be.empty;
}
}
);
}
Cypress.Commands.add("visShiftAndAssertEventNone", visShiftAndAssertEventNone);
Loading

0 comments on commit 3df5490

Please sign in to comment.