Testing GoJS apps
Testing with Jest
Testing with Jest depends on installing: jest, puppeteer, and jest-puppeteer.
// jest.config.js module.exports = { preset: "jest-puppeteer" };
// An example Jest test script for testing the unmodified Minimal sample, // which is available at https://gojs.net/latest/samples/minimal.html. // Copyright 1998-2021 by Northwoods Software Corporation describe("minimal", () => { beforeAll(async () => { await page.goto('https://gojs.net/latest/samples/minimal.html'); }); it('should show 4 nodes and 5 links', async () => { expect(await page.$("#myDiagramDiv")).not.toBeNull(); expect(await page.waitForFunction(() => { const myDiagram = document.getElementById("myDiagramDiv").goDiagram; return myDiagram.nodes.count === 4 && myDiagram.links.count === 5; })).toBeTruthy(); }); it('show that the Beta node is orange', async () => { expect(await page.waitForFunction(() => { const myDiagram = document.getElementById("myDiagramDiv").goDiagram; const beta = myDiagram.findNodeForKey("Beta"); return beta !== null && beta.data.color === "orange"; })).toBeTruthy(); }); it('demonstrates deleting a node', async () => { expect(await page.waitForFunction(() => { const myDiagram = document.getElementById("myDiagramDiv").goDiagram; const beta = myDiagram.findNodeForKey("Beta"); myDiagram.select(beta); myDiagram.commandHandler.deleteSelection(); return true; })).toBeTruthy(); expect(await page.waitForFunction(() => { const myDiagram = document.getElementById("myDiagramDiv").goDiagram; return myDiagram.nodes.count === 3 && myDiagram.links.count === 3 && myDiagram.findNodeForKey("Beta") === null; })).toBeTruthy(); }); });
Testing with Cypress
// An example Cypress test script for testing the unmodified Minimal sample, // which is available at https://gojs.net/latest/samples/minimal.html. // Copyright 1998-2021 by Northwoods Software Corporation describe("minimal", () => { let myDiagram = null let myRobot = null beforeEach(() => { // more likely you would be running the sample locally, // say at http://localhost:5500/samples/minimal.html cy.visit("https://gojs.net/latest/samples/minimal.html") // make sure the HTMLDivElement exists holding the Diagram cy.get("#myDiagramDiv") // load extensions/Robot.js dynamically cy.window().then(win => { const scr = win.document.createElement("script"); scr.src = "https://unpkg.com/gojs/extensions/Robot.js"; win.document.body.appendChild(scr); }) // make sure it's loaded cy.window().should("have.property", "Robot") // save these references for each test, which simplifies each test code cy.window().then(win => { myDiagram = win.go.Diagram.fromDiv(win.document.getElementById("myDiagramDiv")); myRobot = new win.Robot(myDiagram); }) // wait for the Diagram to finish initializing; is there a better way? cy.wait(1) }) // A minimal test to make sure the Diagram got set up OK. it("has nodes and links", () => { cy.window().then(win => { expect(myDiagram.nodes.count).to.equal(4) expect(myDiagram.links.count).to.equal(5) const delta = myDiagram.findNodeForKey("Delta"); expect(delta).to.not.equal(null) expect(delta.elt(0).fill).to.equal("pink") }) }) // A test that uses Robot to simulate input by producing InputEvents. it("copies a node with Robot", () => { cy.window().then(win => { // Find the center of the Delta node in document coordinates. const delta = myDiagram.findNodeForKey("Delta"); const loc = delta.actualBounds.center; // Simulate a mouse drag to move the Delta node: const options = { control: true, alt: true }; myRobot.mouseDown(loc.x, loc.y, 0, options); myRobot.mouseMove(loc.x + 80, loc.y + 50, 50, options); myRobot.mouseMove(loc.x + 20, loc.y + 100, 100, options); myRobot.mouseUp(loc.x + 20, loc.y + 100, 150, options); // If successful, this will have made a copy of the "Delta" node below it. // Check that the new node is at the drop point, // and that it is a copy, different from the original node. const newloc = new win.go.Point(loc.x + 20, loc.y + 100); const newnode = myDiagram.findPartAt(newloc); expect(newnode).to.not.equal(delta) expect(newnode.key).to.equal("Delta2") expect(newnode.isSelected).to.equal(true) }) }) })