[SOLVED] How to test a value is rendered in Go.js

How to test a value is rendered in Go.js

In Jest, after loading in the data into the nodeDataArray, how to I test that go.TextBlock is returning the right value?

Solution

You'll need a way to identify the particular TextBlock in the Node that you want to check. This is especially true if there are multiple TextBlocks. In the example below I've given the TextBlock the name "TB".

This is a complete stand-alone example. Instead of depending on Jest specifically, I have put the testing code into a function called later by setTimeout.

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv",
    { "undoManager.isEnabled": true });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape,
      { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { name: "TB", margin: 8 },
      new go.Binding("text"))
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
  { key: 4, text: "Delta", color: "pink" }
],
[
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 2, to: 2 },
  { from: 3, to: 4 },
  { from: 4, to: 1 }
]);

setTimeout(() => {
  myDiagram.nodes.each(node => {
    const textblock = node.findObject("TB");
    if (textblock && textblock.text !== node.data.text) {
      alert(`Node ${node.key}'s TextBlock has wrong text: "${textblock.text}" instead of "${node.data.text}"`);
    }
  })
})
  </script>
</body>
</html>