test_inspector-mutations-events.html (7079B)
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>