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

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=1157469
   5 -->
   6 <head>
   7   <meta charset="utf-8">
   8   <title>Test for Bug 1157469</title>
   9   <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
  10   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
  11   <script type="application/javascript" src="inspector-helpers.js"></script>
  12   <script type="application/javascript">
  13 "use strict";
  14
  15 window.onload = function() {
  16   SimpleTest.waitForExplicitFinish();
  17
  18   const prevPrefValue = Services.prefs.getBoolPref("devtools.chrome.enabled");
  19   Services.prefs.setBoolPref("devtools.chrome.enabled", true);
  20
  21   let inspectee = null;
  22   let inspector = null;
  23   let walker = null;
  24   const eventListener1 = function() {};
  25   const eventListener2 = function() {};
  26   let eventNode1;
  27   let eventNode2;
  28   let eventFront1;
  29   let eventFront2;
  30
  31   addAsyncTest(async function setup() {
  32     info("Setting up inspector and walker actors.");
  33     const url = document.getElementById("inspectorContent").href;
  34     const { target, doc } = await attachURL(url);
  35     inspectee = doc;
  36     inspector = await target.getFront("inspector");
  37     walker = inspector.walker;
  38
  39     runNextTest();
  40   });
  41
  42   addAsyncTest(async function setupEventTest() {
  43     eventNode1 = inspectee.querySelector("#a");
  44     eventNode2 = inspectee.querySelector("#b");
  45
  46     eventFront1 = await walker.querySelector(walker.rootNode, "#a");
  47     eventFront2 = await walker.querySelector(walker.rootNode, "#b");
  48
  49     runNextTest();
  50   });
  51
  52   addAsyncTest(async function testChangeEventListenerOnSingleNode() {
  53     checkNodesHaveNoEventListener();
  54
  55     info("add event listener on a single node");
  56     eventNode1.addEventListener("click", eventListener1);
  57
  58     let mutations = await waitForMutations();
  59     is(mutations.length, 1, "one mutation expected");
  60     is(mutations[0].target, eventFront1, "mutation targets eventFront1");
  61     is(mutations[0].type, "events", "mutation type is events");
  62     is(mutations[0].hasEventListeners, true,
  63        "mutation target should have event listeners");
  64     is(eventFront1.hasEventListeners, true, "eventFront1 should have event listeners");
  65
  66     info("remove event listener on a single node");
  67     eventNode1.removeEventListener("click", eventListener1);
  68
  69     mutations = await waitForMutations();
  70     is(mutations.length, 1, "one mutation expected");
  71     is(mutations[0].target, eventFront1, "mutation targets eventFront1");
  72     is(mutations[0].type, "events", "mutation type is events");
  73     is(mutations[0].hasEventListeners, false,
  74        "mutation target should have no event listeners");
  75     is(eventFront1.hasEventListeners, false,
  76        "eventFront1 should have no event listeners");
  77
  78     info("perform several event listener changes on a single node");
  79     eventNode1.addEventListener("click", eventListener1);
  80     eventNode1.addEventListener("click", eventListener2);
  81     eventNode1.removeEventListener("click", eventListener1);
  82     eventNode1.removeEventListener("click", eventListener2);
  83
  84     mutations = await waitForMutations();
  85     is(mutations.length, 1, "one mutation expected");
  86     is(mutations[0].target, eventFront1, "mutation targets eventFront1");
  87     is(mutations[0].type, "events", "mutation type is events");
  88     is(mutations[0].hasEventListeners, false,
  89        "no event listener expected on mutation target");
  90     is(eventFront1.hasEventListeners, false, "no event listener expected on node");
  91
  92     runNextTest();
  93   });
  94
  95   addAsyncTest(async function testChangeEventsOnSeveralNodes() {
  96     checkNodesHaveNoEventListener();
  97
  98     info("add event listeners on both nodes");
  99     eventNode1.addEventListener("click", eventListener1);
 100     eventNode2.addEventListener("click", eventListener2);
 101
 102     let mutations = await waitForMutations();
 103     is(mutations.length, 2, "two mutations expected, one for each modified node");
 104     // first mutation
 105     is(mutations[0].target, eventFront1, "first mutation targets eventFront1");
 106     is(mutations[0].type, "events", "mutation type is events");
 107     is(mutations[0].hasEventListeners, true,
 108        "mutation target should have event listeners");
 109     is(eventFront1.hasEventListeners, true, "eventFront1 should have event listeners");
 110     // second mutation
 111     is(mutations[1].target, eventFront2, "second mutation targets eventFront2");
 112     is(mutations[1].type, "events", "mutation type is events");
 113     is(mutations[1].hasEventListeners, true,
 114        "mutation target should have event listeners");
 115     is(eventFront2.hasEventListeners, true, "eventFront1 should have event listeners");
 116
 117     info("remove event listeners on both nodes");
 118     eventNode1.removeEventListener("click", eventListener1);
 119     eventNode2.removeEventListener("click", eventListener2);
 120
 121     mutations = await waitForMutations();
 122     is(mutations.length, 2, "one mutation registered for event listener change");
 123     // first mutation
 124     is(mutations[0].target, eventFront1, "first mutation targets eventFront1");
 125     is(mutations[0].type, "events", "mutation type is events");
 126     is(mutations[0].hasEventListeners, false,
 127        "mutation target should have no event listeners");
 128     is(eventFront1.hasEventListeners, false,
 129        "eventFront2 should have no event listeners");
 130     // second mutation
 131     is(mutations[1].target, eventFront2, "second mutation targets eventFront2");
 132     is(mutations[1].type, "events", "mutation type is events");
 133     is(mutations[1].hasEventListeners, false,
 134        "mutation target should have no event listeners");
 135     is(eventFront2.hasEventListeners, false,
 136        "eventFront2 should have no event listeners");
 137
 138     runNextTest();
 139   });
 140
 141   addAsyncTest(async function testRemoveMissingEvent() {
 142     checkNodesHaveNoEventListener();
 143
 144     info("try to remove an event listener not previously added");
 145     eventNode1.removeEventListener("click", eventListener1);
 146
 147     info("set any attribute on the node to trigger a mutation");
 148     eventNode1.setAttribute("data-attr", "somevalue");
 149
 150     const mutations = await waitForMutations();
 151     is(mutations.length, 1, "expect only one mutation");
 152     isnot(mutations.type, "events", "mutation type should not be events");
 153
 154     Services.prefs.setBoolPref("devtools.chrome.enabled", prevPrefValue);
 155     runNextTest();
 156   });
 157
 158   function checkNodesHaveNoEventListener() {
 159     is(eventFront1.hasEventListeners, false,
 160        "eventFront1 hasEventListeners should be false");
 161     is(eventFront2.hasEventListeners, false,
 162        "eventFront2 hasEventListeners should be false");
 163   }
 164
 165   function waitForMutations() {
 166     return new Promise(resolve => {
 167       walker.once("mutations", mutations => {
 168         resolve(mutations);
 169       });
 170     });
 171   }
 172
 173   runNextTest();
 174 };
 175   </script>
 176 </head>
 177 <body>
 178 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1157469">Mozilla Bug 1157469</a>
 179 <a id="inspectorContent" target="_blank" href="inspector-traversal-data.html">Test Document</a>
 180 <p id="display"></p>
 181 <div id="content" style="display: none">
 182
 183 </div>
 184 <pre id="test">
 185 </pre>
 186 </body>
 187 </html>