<!DOCTYPE HTML>
<html>
<!--
Test that the ShortestPaths component properly renders a graph of the merged shortest paths.
-->
<head>
    <meta charset="utf-8">
    <title>Tree component test</title>
    <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
    <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">

    <script type="application/javascript"
            src="chrome://global/content/third_party/d3/d3.js">
    </script>
    <script type="application/javascript"
            src="chrome://devtools/content/shared/vendor/dagre-d3.js">
    </script>
</head>
<body>
    <!-- Give the container height so that the whole tree is rendered. -->
    <div id="container" style="height: 900px;"></div>

    <pre id="test">
        <script src="head.js" type="application/javascript"></script>
        <script type="application/javascript">
         "use strict";
         window.onload = async function() {
           try {
             const container = document.getElementById("container");

             await renderComponent(ShortestPaths(TEST_SHORTEST_PATHS_PROPS), container);

             let found1 = false;
             let found2 = false;
             let found3 = false;

             let found1to2 = false;
             let found1to3 = false;
             let found2to3 = false;

             const tspans = [...container.querySelectorAll("tspan")];
             for (const el of tspans) {
               const text = el.textContent.trim();
               dumpn("tspan's text = " + text);

               switch (text) {
                 // Nodes

                 case "other › SomeType @ 0x1": {
                   ok(!found1, "Should only find node 1 once");
                   found1 = true;
                   break;
                 }

                 case "other › SomeType @ 0x2": {
                   ok(!found2, "Should only find node 2 once");
                   found2 = true;
                   break;
                 }

                 case "other › SomeType @ 0x3": {
                   ok(!found3, "Should only find node 3 once");
                   found3 = true;
                   break;
                 }

                 // Edges

                 case "1->2": {
                   ok(!found1to2, "Should only find edge 1->2 once");
                   found1to2 = true;
                   break;
                 }

                 case "1->3": {
                   ok(!found1to3, "Should only find edge 1->3 once");
                   found1to3 = true;
                   break;
                 }

                 case "2->3": {
                   ok(!found2to3, "Should only find edge 2->3 once");
                   found2to3 = true;
                   break;
                 }

                 // Unexpected

                 default: {
                   ok(false, `Unexpected tspan: ${text}`);
                   break;
                 }
               }
             }

             ok(found1, "Should have rendered node 1");
             ok(found2, "Should have rendered node 2");
             ok(found3, "Should have rendered node 3");

             ok(found1to2, "Should have rendered edge 1->2");
             ok(found1to3, "Should have rendered edge 1->3");
             ok(found2to3, "Should have rendered edge 2->3");
           } catch (e) {
             ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
           } finally {
             SimpleTest.finish();
           }
         };
        </script>
    </pre>
</body>
</html>
