UNPKG

gojs/intro/testing.html

Version:

1<!DOCTYPE html>
2<html lang="en">
<head>
4<meta charset="utf-8"/>
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>

7<link rel="stylesheet" href="../assets/css/style.css"/> 
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->    <title> Testing GoJS apps -- Northwoods Software </title>
  <link rel="stylesheet" href="../assets/css/prism.css"  />
</head>
<script>
  
  window.diagrams = [];
  window.goCode = function(pre, w, h, parentid, animation) {
    window.diagrams.push([pre, w, h, parentid, animation]);
  }
</script>
<body>
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
  <div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
    <div class="md:pl-4">
      <a class="text-white hover:text-white no-underline hover:no-underline
      font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
        <h1 class="mb-0 p-1 ">GoJS</h1>
      </a>
    </div>
    <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
      <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
        <path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
        <path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </button>
    <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
      <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
      </ul>
    </div>
  </div>
  <hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
  
  <div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
    
  <div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0">
    <div class="flex-shrink-0 px-8 py-4">
      <button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation">
        <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
          <path id="navOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
          <path id="navClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
    <nav id="navList" class="min-h-screen hidden md:block sidebar-nav flex-grow px-1 lg:px-4 pb-4 md:pb-0 md:overflow-y-auto break-words">
<a href="index.html">Basics</a>
<a href="buildingObjects.html">Building Parts</a>
<a href="usingModels.html">Using Models</a>
<a href="dataBinding.html">Data Binding</a>
<a href="react.html">GoJS with React</a>
<a href="angular.html">GoJS with Angular</a>
<a href="textBlocks.html">TextBlocks</a>
<a href="shapes.html">Shapes</a>
<a href="pictures.html">Pictures</a>
<a href="panels.html">Panels</a>
<a href="tablePanels.html">Table Panels</a>
<a href="brush.html">Brushes</a>
<a href="sizing.html">Sizing Objects</a>
<a href="itemArrays.html">Item Arrays</a>
<a href="changedEvents.html">Changed Events</a>
<a href="transactions.html">Transactions</a>
<a href="viewport.html">Coordinates</a>
<a href="initialView.html">Initial View</a>
<a href="collections.html">Collections</a>
<a href="links.html">Links</a>
<a href="linkLabels.html">Link Labels</a>
<a href="connectionPoints.html">Link Points</a>
<a href="ports.html">Ports</a>
<a href="nodes.html">Nodes</a>
<a href="debugging.html">Debugging</a>
<a href="layouts.html">Layouts</a>
<a href="trees.html">Trees</a>
<a href="subtrees.html">SubTrees</a>
<a href="groups.html">Groups</a>
<a href="subgraphs.html">SubGraphs</a>
<a href="sizedGroups.html">Sized Groups</a>
<a href="selection.html">Selection</a>
<a href="highlighting.html">Highlighting</a>
<a href="animation.html">Animation</a>
<a href="toolTips.html">ToolTips</a>
<a href="contextmenus.html">Context Menus</a>
<a href="events.html">Diagram Events</a>
<a href="tools.html">Tools</a>
<a href="commands.html">Commands</a>
<a href="permissions.html">Permissions</a>
<a href="validation.html">Validation</a>
<a href="HTMLInteraction.html">HTML Interaction</a>
<a href="layers.html">Layers &amp; Z-ordering</a>
<a href="palette.html">Palette</a>
<a href="overview.html">Overview</a>
<a href="resizing.html">Resizing Diagrams</a>
<a href="replacingDeleting.html">Replacing and Deleting</a>
<a href="buttons.html">Buttons</a>
<a href="templateMaps.html">Template Maps</a>
<a href="legends.html">Legends and Titles</a>
<a href="extensions.html">Extensions</a>
<a href="geometry.html">Geometry Strings</a>
<a href="grids.html">Grid Patterns</a>
<a href="graduatedPanels.html">Graduated Panels</a>
<a href="makingImages.html">Diagram Images</a>
<a href="makingSVG.html">Diagram SVG</a>
<a href="printing.html">Printing</a>
<a href="serverSideImages.html">Server-side Images</a>
<a href="nodeScript.html">GoJS in Node.js</a>
<a href="testing.html">Testing</a>
<a href="storage.html">Storage</a>
<a href="performance.html">Performance</a>
<a href="source.html">Building from Source</a>
<a href="platforms.html">Platforms</a>
<a href="deployment.html">Deployment</a>
    </nav>
  </div>      
    <div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden">
132
133
134
135<h1>Testing GoJS apps</h1>
136
137<h2 id="TestingwithJest">Testing with Jest</h2>
138
139<p>
Testing with Jest depends on installing: <code>jest</code>, <code>puppeteer</code>, and <code>jest-puppeteer</code>.
141</p>
142
143<pre class="lang-js"><code>
144// jest.config.js
145module.exports = {
preset: "jest-puppeteer"
147};</code></pre>
148
149<pre class="lang-js"><code>
150// An example Jest test script for testing the unmodified Minimal sample,
151// which is available at https://gojs.net/latest/samples/minimal.html.
152// Copyright 1998-2021 by Northwoods Software Corporation
153
154describe("minimal", () => {
beforeAll(async () => {
  await page.goto('https://gojs.net/latest/samples/minimal.html');
});
158
it('should show 4 nodes and 5 links', async () => {
  expect(await page.$("#myDiagramDiv")).not.toBeNull();
161
  expect(await page.waitForFunction(() => {
    const myDiagram = document.getElementById("myDiagramDiv").goDiagram;
    return myDiagram.nodes.count === 4 &&
            myDiagram.links.count === 5;
  })).toBeTruthy();
});
168
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();
});
176
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();
185
  expect(await page.waitForFunction(() => {
    const myDiagram = document.getElementById("myDiagramDiv").goDiagram;
    return myDiagram.nodes.count === 3 &&
            myDiagram.links.count === 3 &&
            myDiagram.findNodeForKey("Beta") === null;
  })).toBeTruthy();
});
193
194});</code></pre>
195
196
197<h2 id="TestingwithJestInReact">Testing with Jest in React</h2>
198
199<p>
In our
<a href="https://github.com/NorthwoodsSoftware/gojs-react-samples/tree/main/gojs-react-jest">GoJS React samples</a>,
we have an example of using the gojs-react component with Jest:
<a href="https://github.com/NorthwoodsSoftware/gojs-react-samples/tree/main/gojs-react-jest">gojs-react-jest</a>.
204</p>
205
206
207<h2 id="TestingwithCypress">Testing with Cypress</h2>
208
209<pre class="lang-js"><code>
210// An example Cypress test script for testing the unmodified Minimal sample,
211// which is available at https://gojs.net/latest/samples/minimal.html.
212// Copyright 1998-2021 by Northwoods Software Corporation
213
214describe("minimal", () => {
let myDiagram = null
let myRobot = null
217
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")
222
  // make sure the HTMLDivElement exists holding the Diagram
  cy.get("#myDiagramDiv")
225
  // 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);
  })
232
  // make sure it's loaded
  cy.window().should("have.property", "Robot")
235
  // 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);
  })
241
  // wait for the Diagram to finish initializing; is there a better way?
  cy.wait(1)
})
245
// 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")
  })
})
256
// 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;
263
    // 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.
271
    // 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)
  })
})
281
282})</code></pre>
283
284
285
    </div>
  </div>

<div class="bg-nwoods-primary">
  <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
    <p id="version" class="leading-none mb-2 my-4">GoJS</p>
  </section>
</div><footer class="bg-nwoods-primary text-white">
<div class="container max-w-screen-lg mx-auto  px-8">
  <div class="w-full py-6">
296
      <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
        <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="../samples/index.html">Samples</a>
              </li>
              <li>
                <a href="../learn/index.html">Learn</a>
              </li>
              <li>
                <a href="../intro/index.html">Intro</a>
              </li>
              <li>
                <a href="../api/index.html">API</a>
              </li>
              <li>
                <a href="../changelog.html">Changelog</a>
              </li>
              <li>
                <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Support</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com/contact.html"
                target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
              </li>
              <li>
                <a href="https://forum.nwoods.com/c/gojs">Forum</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/sales/index.html"
                target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
              </li>
              <li>
                <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Company</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com">Northwoods</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/about.html">About Us</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/contact.html">Contact Us</a>
              </li>
              <li>
                <a href="https://twitter.com/northwoodsgo">Twitter</a>
              </li>
359
            </ul>
          </li>
        </ul>
363
364
    <p class="text-sm text-gray-100 md:mb-6">
      Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
    </p>
  </div>
</div>
370</footer>  </body>
371
372<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script> 
373<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'UA-1506307-5');
var getOutboundLink = function(url, label) {
  gtag('event', 'click', {
    'event_category': 'outbound',
    'event_label': label,
    'transport_type': 'beacon'
  });
}
384
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
topButton.addEventListener("click", function() {
  this.classList.toggle("active");
  topnavList.classList.toggle("hidden");
  document.getElementById("topnavOpen").classList.toggle("hidden");
  document.getElementById("topnavClosed").classList.toggle("hidden");
});
394</script>
<script src="../assets/js/prism.js"></script>
<script src="../release/go.js"></script>
<script src="../assets/js/goDoc.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
    if (window.goDoc) window.goDoc();
    var d = window.diagrams;
    for (var i = 0; i < d.length; i++) {
      var dargs = d[i];
      goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
    }
    if (window.extra) window.extra();
  });
</script>
410</html>

1	`<!DOCTYPE html>`
2	`<html lang="en">`
3	`<head>`
4	`<meta charset="utf-8"/>`
5	`<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>`
6
7	`<link rel="stylesheet" href="../assets/css/style.css"/>`
8	`<!-- Copyright 1998-2021 by Northwoods Software Corporation. --> <title> Testing GoJS apps -- Northwoods Software </title>`
9	`<link rel="stylesheet" href="../assets/css/prism.css" />`
10	`</head>`
11	`<script>`
12
13	`window.diagrams = [];`
14	`window.goCode = function(pre, w, h, parentid, animation) {`
15	`window.diagrams.push([pre, w, h, parentid, animation]);`
16	`}`
17	`</script>`
18	`<body>`
19	`<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">`
20	`<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">`
21	`<div class="md:pl-4">`
22	`<a class="text-white hover:text-white no-underline hover:no-underline`
23	`font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">`
24	`<h1 class="mb-0 p-1 ">GoJS</h1>`
25	`</a>`
26	`</div>`
27	`<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">`
28	`<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">`
29	`<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>`
30	`<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>`
31	`</svg>`
32	`</button>`
33	`<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">`
34	`<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">`
35	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>`
36	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>`
37	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>`
38	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>`
39	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>`
40	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>`
41	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>`
42	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"`
43	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>`
44	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"`
45	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>`
46	`</ul>`
47	`</div>`
48	`</div>`
49	`<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />`
50	`</nav>`
51
52	`<div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">`
53
54	`<div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0">`
55	`<div class="flex-shrink-0 px-8 py-4">`
56	`<button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation">`
57	`<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">`
58	`<path id="navOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>`
59	`<path id="navClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>`
60	`</svg>`
61	`</button>`
62	`</div>`
63	`<nav id="navList" class="min-h-screen hidden md:block sidebar-nav flex-grow px-1 lg:px-4 pb-4 md:pb-0 md:overflow-y-auto break-words">`
64	`<a href="index.html">Basics</a>`
65	`<a href="buildingObjects.html">Building Parts</a>`
66	`<a href="usingModels.html">Using Models</a>`
67	`<a href="dataBinding.html">Data Binding</a>`
68	`<a href="react.html">GoJS with React</a>`
69	`<a href="angular.html">GoJS with Angular</a>`
70	`<a href="textBlocks.html">TextBlocks</a>`
71	`<a href="shapes.html">Shapes</a>`
72	`<a href="pictures.html">Pictures</a>`
73	`<a href="panels.html">Panels</a>`
74	`<a href="tablePanels.html">Table Panels</a>`
75	`<a href="brush.html">Brushes</a>`
76	`<a href="sizing.html">Sizing Objects</a>`
77	`<a href="itemArrays.html">Item Arrays</a>`
78	`<a href="changedEvents.html">Changed Events</a>`
79	`<a href="transactions.html">Transactions</a>`
80	`<a href="viewport.html">Coordinates</a>`
81	`<a href="initialView.html">Initial View</a>`
82	`<a href="collections.html">Collections</a>`
83	`<a href="links.html">Links</a>`
84	`<a href="linkLabels.html">Link Labels</a>`
85	`<a href="connectionPoints.html">Link Points</a>`
86	`<a href="ports.html">Ports</a>`
87	`<a href="nodes.html">Nodes</a>`
88	`<a href="debugging.html">Debugging</a>`
89	`<a href="layouts.html">Layouts</a>`
90	`<a href="trees.html">Trees</a>`
91	`<a href="subtrees.html">SubTrees</a>`
92	`<a href="groups.html">Groups</a>`
93	`<a href="subgraphs.html">SubGraphs</a>`
94	`<a href="sizedGroups.html">Sized Groups</a>`
95	`<a href="selection.html">Selection</a>`
96	`<a href="highlighting.html">Highlighting</a>`
97	`<a href="animation.html">Animation</a>`
98	`<a href="toolTips.html">ToolTips</a>`
99	`<a href="contextmenus.html">Context Menus</a>`
100	`<a href="events.html">Diagram Events</a>`
101	`<a href="tools.html">Tools</a>`
102	`<a href="commands.html">Commands</a>`
103	`<a href="permissions.html">Permissions</a>`
104	`<a href="validation.html">Validation</a>`
105	`<a href="HTMLInteraction.html">HTML Interaction</a>`
106	`<a href="layers.html">Layers & Z-ordering</a>`
107	`<a href="palette.html">Palette</a>`
108	`<a href="overview.html">Overview</a>`
109	`<a href="resizing.html">Resizing Diagrams</a>`
110	`<a href="replacingDeleting.html">Replacing and Deleting</a>`
111	`<a href="buttons.html">Buttons</a>`
112	`<a href="templateMaps.html">Template Maps</a>`
113	`<a href="legends.html">Legends and Titles</a>`
114	`<a href="extensions.html">Extensions</a>`
115	`<a href="geometry.html">Geometry Strings</a>`
116	`<a href="grids.html">Grid Patterns</a>`
117	`<a href="graduatedPanels.html">Graduated Panels</a>`
118	`<a href="makingImages.html">Diagram Images</a>`
119	`<a href="makingSVG.html">Diagram SVG</a>`
120	`<a href="printing.html">Printing</a>`
121	`<a href="serverSideImages.html">Server-side Images</a>`
122	`<a href="nodeScript.html">GoJS in Node.js</a>`
123	`<a href="testing.html">Testing</a>`
124	`<a href="storage.html">Storage</a>`
125	`<a href="performance.html">Performance</a>`
126	`<a href="source.html">Building from Source</a>`
127	`<a href="platforms.html">Platforms</a>`
128	`<a href="deployment.html">Deployment</a>`
129	`</nav>`
130	`</div>`
131	`<div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden">`
132
133
134
135	`<h1>Testing GoJS apps</h1>`
136
137	`<h2 id="TestingwithJest">Testing with Jest</h2>`
138
139	`<p>`
140	`Testing with Jest depends on installing: <code>jest</code>, <code>puppeteer</code>, and <code>jest-puppeteer</code>.`
141	`</p>`
142
143	`<pre class="lang-js"><code>`
144	`// jest.config.js`
145	`module.exports = {`
146	`preset: "jest-puppeteer"`
147	`};</code></pre>`
148
149	`<pre class="lang-js"><code>`
150	`// An example Jest test script for testing the unmodified Minimal sample,`
151	`// which is available at https://gojs.net/latest/samples/minimal.html.`
152	`// Copyright 1998-2021 by Northwoods Software Corporation`
153
154	`describe("minimal", () => {`
155	`beforeAll(async () => {`
156	`await page.goto('https://gojs.net/latest/samples/minimal.html');`
157	`});`
158
159	`it('should show 4 nodes and 5 links', async () => {`
160	`expect(await page.$("#myDiagramDiv")).not.toBeNull();`
161
162	`expect(await page.waitForFunction(() => {`
163	`const myDiagram = document.getElementById("myDiagramDiv").goDiagram;`
164	`return myDiagram.nodes.count === 4 &&`
165	`myDiagram.links.count === 5;`
166	`})).toBeTruthy();`
167	`});`
168
169	`it('show that the Beta node is orange', async () => {`
170	`expect(await page.waitForFunction(() => {`
171	`const myDiagram = document.getElementById("myDiagramDiv").goDiagram;`
172	`const beta = myDiagram.findNodeForKey("Beta");`
173	`return beta !== null && beta.data.color === "orange";`
174	`})).toBeTruthy();`
175	`});`
176
177	`it('demonstrates deleting a node', async () => {`
178	`expect(await page.waitForFunction(() => {`
179	`const myDiagram = document.getElementById("myDiagramDiv").goDiagram;`
180	`const beta = myDiagram.findNodeForKey("Beta");`
181	`myDiagram.select(beta);`
182	`myDiagram.commandHandler.deleteSelection();`
183	`return true;`
184	`})).toBeTruthy();`
185
186	`expect(await page.waitForFunction(() => {`
187	`const myDiagram = document.getElementById("myDiagramDiv").goDiagram;`
188	`return myDiagram.nodes.count === 3 &&`
189	`myDiagram.links.count === 3 &&`
190	`myDiagram.findNodeForKey("Beta") === null;`
191	`})).toBeTruthy();`
192	`});`
193
194	`});</code></pre>`
195
196
197	`<h2 id="TestingwithJestInReact">Testing with Jest in React</h2>`
198
199	`<p>`
200	`In our`
201	`<a href="https://github.com/NorthwoodsSoftware/gojs-react-samples/tree/main/gojs-react-jest">GoJS React samples</a>,`
202	`we have an example of using the gojs-react component with Jest:`
203	`<a href="https://github.com/NorthwoodsSoftware/gojs-react-samples/tree/main/gojs-react-jest">gojs-react-jest</a>.`
204	`</p>`
205
206
207	`<h2 id="TestingwithCypress">Testing with Cypress</h2>`
208
209	`<pre class="lang-js"><code>`
210	`// An example Cypress test script for testing the unmodified Minimal sample,`
211	`// which is available at https://gojs.net/latest/samples/minimal.html.`
212	`// Copyright 1998-2021 by Northwoods Software Corporation`
213
214	`describe("minimal", () => {`
215	`let myDiagram = null`
216	`let myRobot = null`
217
218	`beforeEach(() => {`
219	`// more likely you would be running the sample locally,`
220	`// say at http://localhost:5500/samples/minimal.html`
221	`cy.visit("https://gojs.net/latest/samples/minimal.html")`
222
223	`// make sure the HTMLDivElement exists holding the Diagram`
224	`cy.get("#myDiagramDiv")`
225
226	`// load extensions/Robot.js dynamically`
227	`cy.window().then(win => {`
228	`const scr = win.document.createElement("script");`
229	`scr.src = "https://unpkg.com/gojs/extensions/Robot.js";`
230	`win.document.body.appendChild(scr);`
231	`})`
232
233	`// make sure it's loaded`
234	`cy.window().should("have.property", "Robot")`
235
236	`// save these references for each test, which simplifies each test code`
237	`cy.window().then(win => {`
238	`myDiagram = win.go.Diagram.fromDiv(win.document.getElementById("myDiagramDiv"));`
239	`myRobot = new win.Robot(myDiagram);`
240	`})`
241
242	`// wait for the Diagram to finish initializing; is there a better way?`
243	`cy.wait(1)`
244	`})`
245
246	`// A minimal test to make sure the Diagram got set up OK.`
247	`it("has nodes and links", () => {`
248	`cy.window().then(win => {`
249	`expect(myDiagram.nodes.count).to.equal(4)`
250	`expect(myDiagram.links.count).to.equal(5)`
251	`const delta = myDiagram.findNodeForKey("Delta");`
252	`expect(delta).to.not.equal(null)`
253	`expect(delta.elt(0).fill).to.equal("pink")`
254	`})`
255	`})`
256
257	`// A test that uses Robot to simulate input by producing InputEvents.`
258	`it("copies a node with Robot", () => {`
259	`cy.window().then(win => {`
260	`// Find the center of the Delta node in document coordinates.`
261	`const delta = myDiagram.findNodeForKey("Delta");`
262	`const loc = delta.actualBounds.center;`
263
264	`// Simulate a mouse drag to move the Delta node:`
265	`const options = { control: true, alt: true };`
266	`myRobot.mouseDown(loc.x, loc.y, 0, options);`
267	`myRobot.mouseMove(loc.x + 80, loc.y + 50, 50, options);`
268	`myRobot.mouseMove(loc.x + 20, loc.y + 100, 100, options);`
269	`myRobot.mouseUp(loc.x + 20, loc.y + 100, 150, options);`
270	`// If successful, this will have made a copy of the "Delta" node below it.`
271
272	`// Check that the new node is at the drop point,`
273	`// and that it is a copy, different from the original node.`
274	`const newloc = new win.go.Point(loc.x + 20, loc.y + 100);`
275	`const newnode = myDiagram.findPartAt(newloc);`
276	`expect(newnode).to.not.equal(delta)`
277	`expect(newnode.key).to.equal("Delta2")`
278	`expect(newnode.isSelected).to.equal(true)`
279	`})`
280	`})`
281
282	`})</code></pre>`
283
284
285
286	`</div>`
287	`</div>`
288
289	`<div class="bg-nwoods-primary">`
290	`<section class="max-w-screen-lg text-white container mx-auto py-2 px-12">`
291	`<p id="version" class="leading-none mb-2 my-4">GoJS</p>`
292	`</section>`
293	`</div><footer class="bg-nwoods-primary text-white">`
294	`<div class="container max-w-screen-lg mx-auto px-8">`
295	`<div class="w-full py-6">`
296
297	`<div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">`
298	`<ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">`
299	`<li class="list-none row-span-2">`
300	`<h2 class="text-base font-semibold tracking-wide">GoJS</h2>`
301	`<ul class="list-none space-y-4 md:space-y-1 px-0">`
302	`<li>`
303	`<a href="../samples/index.html">Samples</a>`
304	`</li>`
305	`<li>`
306	`<a href="../learn/index.html">Learn</a>`
307	`</li>`
308	`<li>`
309	`<a href="../intro/index.html">Intro</a>`
310	`</li>`
311	`<li>`
312	`<a href="../api/index.html">API</a>`
313	`</li>`
314	`<li>`
315	`<a href="../changelog.html">Changelog</a>`
316	`</li>`
317	`<li>`
318	`<a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>`
319	`</li>`
320	`</ul>`
321	`</li>`
322	`<li class="list-none row-span-2">`
323	`<h2 class="text-base font-semibold tracking-wide">Support</h2>`
324	`<ul class="list-none space-y-4 md:space-y-1 px-0">`
325	`<li>`
326	`<a href="https://www.nwoods.com/contact.html"`
327	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>`
328	`</li>`
329	`<li>`
330	`<a href="https://forum.nwoods.com/c/gojs">Forum</a>`
331	`</li>`
332	`<li>`
333	`<a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>`
334	`</li>`
335	`<li>`
336	`<a href="https://www.nwoods.com/sales/index.html"`
337	`target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>`
338	`</li>`
339	`<li>`
340	`<a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>`
341	`</li>`
342	`</ul>`
343	`</li>`
344	`<li class="list-none row-span-2">`
345	`<h2 class="text-base font-semibold tracking-wide">Company</h2>`
346	`<ul class="list-none space-y-4 md:space-y-1 px-0">`
347	`<li>`
348	`<a href="https://www.nwoods.com">Northwoods</a>`
349	`</li>`
350	`<li>`
351	`<a href="https://www.nwoods.com/about.html">About Us</a>`
352	`</li>`
353	`<li>`
354	`<a href="https://www.nwoods.com/contact.html">Contact Us</a>`
355	`</li>`
356	`<li>`
357	`<a href="https://twitter.com/northwoodsgo">Twitter</a>`
358	`</li>`
359
360	`</ul>`
361	`</li>`
362	`</ul>`
363
364
365	`<p class="text-sm text-gray-100 md:mb-6">`
366	`Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>`
367	`</p>`
368	`</div>`
369	`</div>`
370	`</footer> </body>`
371
372	`<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>`
373	`<script>`
374	`window.dataLayer = window.dataLayer \|\| [];`
375	`function gtag(){dataLayer.push(arguments);}`
376	`gtag('js', new Date()); gtag('config', 'UA-1506307-5');`
377	`var getOutboundLink = function(url, label) {`
378	`gtag('event', 'click', {`
379	`'event_category': 'outbound',`
380	`'event_label': label,`
381	`'transport_type': 'beacon'`
382	`});`
383	`}`
384
385	`// topnav`
386	`var topButton = document.getElementById("topnavButton");`
387	`var topnavList = document.getElementById("topnavList");`
388	`topButton.addEventListener("click", function() {`
389	`this.classList.toggle("active");`
390	`topnavList.classList.toggle("hidden");`
391	`document.getElementById("topnavOpen").classList.toggle("hidden");`
392	`document.getElementById("topnavClosed").classList.toggle("hidden");`
393	`});`
394	`</script>`
395	`<script src="../assets/js/prism.js"></script>`
396	`<script src="../release/go.js"></script>`
397	`<script src="../assets/js/goDoc.js"></script>`
398	`<script>`
399	`document.addEventListener("DOMContentLoaded", function() {`
400	`if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;`
401	`if (window.goDoc) window.goDoc();`
402	`var d = window.diagrams;`
403	`for (var i = 0; i < d.length; i++) {`
404	`var dargs = d[i];`
405	`goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);`
406	`}`
407	`if (window.extra) window.extra();`
408	`});`
409	`</script>`
410	`</html>`