devtools/server/tests/chrome/test_inspector-mutations-value.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=
   5 -->
   6 <head>
   7   <meta charset="utf-8">
   8   <title>Test for Bug </title>
   9
  10   <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
  11   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
  12   <script type="application/javascript" src="inspector-helpers.js"></script>
  13   <script type="application/javascript">
  14 "use strict";
  15
  16 const WalkerActor = require("devtools/server/actors/inspector/walker");
  17
  18 window.onload = function() {
  19   SimpleTest.waitForExplicitFinish();
  20   runNextTest();
  21 };
  22
  23 const testSummaryLength = 10;
  24 WalkerActor.setValueSummaryLength(testSummaryLength);
  25 SimpleTest.registerCleanupFunction(function() {
  26   WalkerActor.setValueSummaryLength(WalkerActor.DEFAULT_VALUE_SUMMARY_LENGTH);
  27 });
  28
  29 let gInspectee = null;
  30 let gWalker = null;
  31 let valueNode;
  32 var valueFront;
  33 var longStringFront;
  34 var longString = "stringstringstringstringstringstringstringstringstringstringstring";
  35 var shortString = "str";
  36 var shortString2 = "str2";
  37
  38 addTest(async function setup() {
  39   const url = document.getElementById("inspectorContent").href;
  40   const { target, doc } = await attachURL(url);
  41   const inspector = await target.getFront("inspector");
  42   gInspectee = doc;
  43   gWalker = inspector.walker;
  44   runNextTest();
  45 });
  46
  47 addTest(setupValueTest);
  48 addTest(testKeepLongValue);
  49 addTest(testSetShortValue);
  50 addTest(testKeepShortValue);
  51 addTest(testSetLongValue);
  52 addTest(setupFrameValueTest);
  53 addTest(testKeepLongValue);
  54 addTest(testSetShortValue);
  55 addTest(testKeepShortValue);
  56 addTest(testSetLongValue);
  57
  58 function setupValueTest() {
  59   valueNode = gInspectee.querySelector("#longstring").firstChild;
  60   promiseDone(gWalker.querySelector(gWalker.rootNode, "#longstring").then(node => {
  61     longStringFront = node;
  62     return gWalker.children(node);
  63   }).then(children => {
  64     valueFront = children.nodes[0];
  65   }).then(runNextTest));
  66 }
  67
  68 function setupFrameValueTest() {
  69   const frame = gInspectee.querySelector("#childFrame");
  70   valueNode = frame.contentDocument.querySelector("#longstring").firstChild;
  71
  72   promiseDone(gWalker.querySelector(gWalker.rootNode, "#childFrame").then(childFrame => {
  73     return gWalker.children(childFrame);
  74   }).then(children => {
  75     const nodes = children.nodes;
  76     is(nodes.length, 1, "There should be only one child of the iframe");
  77     const [node] =nodes;
  78     is(node.nodeType, Node.DOCUMENT_NODE, "iframe child should be a document node");
  79     return node.walkerFront.querySelector(node, "#longstring");
  80   }).then(node => {
  81     longStringFront = node;
  82     return longStringFront.walkerFront.children(node);
  83   }).then(children => {
  84     valueFront = children.nodes[0];
  85   }).then(runNextTest));
  86 }
  87
  88 function checkNodeFrontValue(front, expectedValue) {
  89   return front.getNodeValue().then(longstring => {
  90     return longstring.string();
  91   }).then(str => {
  92     is(str, expectedValue, "Node value is as expected");
  93   });
  94 }
  95
  96 function testKeepLongValue() {
  97   // After first setup we should have a long string in the node
  98   ok(!longStringFront.inlineTextChild, "Text node is too long to be inlined.");
  99
 100   valueNode.nodeValue = longString;
 101   valueFront.walkerFront.once("mutations", (changes) => {
 102     ok(!longStringFront.inlineTextChild, "Text node is too long to be inlined.");
 103     ok(!changes.some(change => change.type === "inlineTextChild"),
 104       "No inline text child mutation was fired.");
 105     checkNodeFrontValue(valueFront, longString).then(runNextTest);
 106   });
 107 }
 108
 109 function testSetShortValue() {
 110   ok(!longStringFront.inlineTextChild, "Text node is too long to be inlined.");
 111
 112   valueNode.nodeValue = shortString;
 113   valueFront.walkerFront.once("mutations", (changes) => {
 114     ok(!!longStringFront.inlineTextChild, "Text node is short enough to be inlined.");
 115     ok(changes.some(change => change.type === "inlineTextChild"),
 116       "An inlineTextChild mutation was fired.");
 117     checkNodeFrontValue(valueFront, shortString).then(runNextTest);
 118   });
 119 }
 120
 121 function testKeepShortValue() {
 122   ok(!!longStringFront.inlineTextChild, "Text node is short enough to be inlined.");
 123
 124   valueNode.nodeValue = shortString2;
 125   valueFront.walkerFront.once("mutations", (changes) => {
 126     ok(!!longStringFront.inlineTextChild, "Text node is short enough to be inlined.");
 127     ok(!changes.some(change => change.type === "inlineTextChild"),
 128       "No inline text child mutation was fired.");
 129     checkNodeFrontValue(valueFront, shortString2).then(runNextTest);
 130   });
 131 }
 132
 133 function testSetLongValue() {
 134   ok(!!longStringFront.inlineTextChild, "Text node is short enough to be inlined.");
 135
 136   valueNode.nodeValue = longString;
 137   valueFront.walkerFront.once("mutations", (changes) => {
 138     ok(!longStringFront.inlineTextChild, "Text node is too long to be inlined.");
 139     ok(changes.some(change => change.type === "inlineTextChild"),
 140       "An inlineTextChild mutation was fired.");
 141     checkNodeFrontValue(valueFront, longString).then(runNextTest);
 142   });
 143 }
 144
 145 addTest(function cleanup() {
 146   gInspectee = null;
 147   gWalker = null;
 148   runNextTest();
 149 });
 150
 151   </script>
 152 </head>
 153 <body>
 154 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a>
 155 <a id="inspectorContent" target="_blank" href="inspector-traversal-data.html">Test Document</a>
 156 <p id="display"></p>
 157 <div id="content" style="display: none">
 158
 159 </div>
 160 <pre id="test">
 161 </pre>
 162 </body>
 163 </html>