LayoutTests/inspector/dom/event-listener-add-remove.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <script src="../../http/tests/inspector/resources/inspector-test.js"></script>
 <script>
 let callback1 = (event) => { };
 let callback2 = (event) => { };

 function addListener(name, options) {
     document.addEventListener(name, callback1, options);
 }

 function removeListener(name) {
     document.removeEventListener(name, callback1);
 }

 function addAttribute(name, callbackNumber) {
     if (callbackNumber === 1)
         document[name] = callback1;
     else if (callbackNumber === 2)
         document[name] = callback2;
 }

 function removeAttribute(name) {
     document[name] = null;
 }

 function click() {
     document.body.click();
 }

 function test() {
     let node = null;

     function addListener(name, options = {}) {
         InspectorTest.log(`Adding listener "${name}".`);
         InspectorTest.evaluateInPage(`addListener("${name}", ${JSON.stringify(options)})`);
     }

     function removeListener(name) {
         InspectorTest.log(`Removing listener "${name}".`);
         InspectorTest.evaluateInPage(`removeListener("${name}")`);
     }

     function addAttribute(name, callbackNumber) {
         InspectorTest.log(`Adding attribute "${name}" with callback ${callbackNumber}.`);
         InspectorTest.evaluateInPage(`addAttribute("${name}", ${callbackNumber})`);
     }

     function removeAttribute(name) {
         InspectorTest.log(`Removing attribute "${name}".`);
         InspectorTest.evaluateInPage(`removeAttribute("${name}")`);
     }

     function logListeners(expectedCount) {
         return DOMAgent.getEventListenersForNode(node.id).then(({listeners}) => {
             listeners = listeners.filter((listener) => listener.nodeId === node.id);

             InspectorTest.expectEqual(listeners.length, expectedCount, `There should be ${expectedCount} event listeners.`);

             for (let eventListener of listeners)
                 InspectorTest.log(`  - "${eventListener.type}"`);
         });
     }

     let suite = InspectorTest.createAsyncSuite("DOM.eventListeners");

     suite.addTestCase({
         name: "DOM.eventListeners.Initial",
         description: "Test that the document has no event listeners.",
         test(resolve, reject) {
             DOMAgent.getEventListenersForNode(node.id).then(({listeners}) => {
                 listeners = listeners.filter((listener) => listener.nodeId === node.id);

                 InspectorTest.expectEqual(listeners.length, 0, "There should be no event listeners.");

                 for (let eventListener of listeners)
                     InspectorTest.log(eventListener.type);
             }).then(resolve, reject);
         }
     });

     suite.addTestCase({
         name: "DOM.eventListeners.Add",
         description: "Test that adding an event listener is tracked.",
         test(resolve, reject) {
             WI.DOMNode.awaitEvent(WI.DOMNode.Event.EventListenersChanged).then((event) => {
                 InspectorTest.assert(event.target === node, "Target should be document node.");

                 return logListeners(1);
             }).then(resolve, reject);

             addListener("test");
         }
     });

     suite.addTestCase({
         name: "DOM.eventListeners.Remove",
         description: "Test that adding an event listener is removed.",
         test(resolve, reject) {
             let eventCount = 0;

             WI.DOMNode.addEventListener(WI.DOMNode.Event.EventListenersChanged, (event) => {
                 InspectorTest.assert(event.target === node, "Target should be document node.");

                 eventCount++;
                 if (eventCount === 1)
                     logListeners(0).then(resolve, reject);
                 else
                     reject("Event listeners changed too many times.");
             });

             removeListener("test");
         }
     });

     suite.addTestCase({
         name: "DOM.eventListeners.AddAndRemove",
         description: "Test that a full add-remove cycle is tracked.",
         test(resolve, reject) {
             let eventCount = 0;

             WI.DOMNode.addEventListener(WI.DOMNode.Event.EventListenersChanged, (event) => {
                 InspectorTest.assert(event.target === node, "Target should be document node.");

                 eventCount++;
                 if (eventCount === 1) {
                     logListeners(1).then(() => {
                         InspectorTest.log("");

                         removeListener("test");
                     });
                 } else if (eventCount === 2)
                     logListeners(0).then(resolve, reject);
                 else
                     reject("Event listeners changed too many times.");
             });

             addListener("test");
         }
     });

     suite.addTestCase({
         name: "DOM.eventListeners.Once",
         description: "Test that an event listener that removes itself after firing is tracked.",
         test(resolve, reject) {
             let eventCount = 0;

             WI.DOMNode.addEventListener(WI.DOMNode.Event.EventListenersChanged, (event) => {
                 InspectorTest.assert(event.target === node, "Target should be document node.");

                 eventCount++;
                 if (eventCount === 1) {
                     logListeners(1).then(() => {
                         InspectorTest.log("");
                         InspectorTest.log("Trigger \"click\" event.");

                         InspectorTest.evaluateInPage(`click()`);
                     });
                 } else if (eventCount === 2)
                     logListeners(0).then(resolve, reject);
                 else
                     reject("Event listeners changed too many times.");
             });

             addListener("click", {once: true});
         }
     });

     suite.addTestCase({
         name: "DOM.eventListeners.AttributeAddAndRemove",
         description: "Test that adding/removing an event listener via an attribute is tracked.",
         test(resolve, reject) {
             let eventCount = 0;

             WI.DOMNode.addEventListener(WI.DOMNode.Event.EventListenersChanged, (event) => {
                 InspectorTest.assert(event.target === node, "Target should be document node.");

                 eventCount++;
                 if (eventCount === 1) {
                     logListeners(1).then(() => {
                         InspectorTest.log("");

                         removeAttribute("onload");
                     });
                 } else if (eventCount === 2)
                     logListeners(0).then(resolve, reject);
                 else
                     reject("Event listeners changed too many times.");
             });

             addAttribute("onload", 1);
         }
     });

     suite.addTestCase({
         name: "DOM.eventListeners.AttributeReplace",
         description: "Test that replacing an attribute event listener without removing it is tracked.",
         test(resolve, reject) {
             let eventCount = 0;

             WI.DOMNode.addEventListener(WI.DOMNode.Event.EventListenersChanged, (event) => {
                 InspectorTest.assert(event.target === node, "Target should be document node.");

                 eventCount++;
                 if (eventCount === 1) {
                     logListeners(1).then(() => {
                         InspectorTest.log("");

                         addAttribute("onload", 2);
                     });
                 } else if (eventCount === 2) {
                     InspectorTest.log("Attribute event listener replaced.");

                     logListeners(1).then(() => {
                         InspectorTest.log("");

                         removeAttribute("onload");
                     });
                 } else if (eventCount === 3)
                     logListeners(0).then(resolve, reject);
                 else
                     reject("Event listeners changed too many times.");
             });

             addAttribute("onload", 1);
         }
     });

     WI.domManager.requestDocument(async (documentNode) => {
         node = documentNode;

         InspectorTest.assert(node !== WI.domManager.inspectedNode);
         InspectorTest.log("Changing inspected node to #document...");
         await Promise.all([
             WI.domManager.awaitEvent(WI.DOMManager.Event.InspectedNodeChanged),
             WI.domManager.setInspectedNode(node),
         ]);
         InspectorTest.assert(node === WI.domManager.inspectedNode);

         suite.runTestCasesAndFinish();
     });
 }
 </script>
 </head>
 <body onload="runTest()">
     <p>Testing events for adding and removing event listeners.</p>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
	<script>
	let callback1 = (event) => { };
	let callback2 = (event) => { };

	function addListener(name, options) {
	document.addEventListener(name, callback1, options);
	}

	function removeListener(name) {
	document.removeEventListener(name, callback1);
	}

	function addAttribute(name, callbackNumber) {
	if (callbackNumber === 1)
	document[name] = callback1;
	else if (callbackNumber === 2)
	document[name] = callback2;
	}

	function removeAttribute(name) {
	document[name] = null;
	}

	function click() {
	document.body.click();
	}

	function test() {
	let node = null;

	function addListener(name, options = {}) {
	InspectorTest.log(`Adding listener "${name}".`);
	InspectorTest.evaluateInPage(`addListener("${name}", ${JSON.stringify(options)})`);
	}

	function removeListener(name) {
	InspectorTest.log(`Removing listener "${name}".`);
	InspectorTest.evaluateInPage(`removeListener("${name}")`);
	}

	function addAttribute(name, callbackNumber) {
	InspectorTest.log(`Adding attribute "${name}" with callback ${callbackNumber}.`);
	InspectorTest.evaluateInPage(`addAttribute("${name}", ${callbackNumber})`);
	}

	function removeAttribute(name) {
	InspectorTest.log(`Removing attribute "${name}".`);
	InspectorTest.evaluateInPage(`removeAttribute("${name}")`);
	}

	function logListeners(expectedCount) {
	return DOMAgent.getEventListenersForNode(node.id).then(({listeners}) => {
	listeners = listeners.filter((listener) => listener.nodeId === node.id);

	InspectorTest.expectEqual(listeners.length, expectedCount, `There should be ${expectedCount} event listeners.`);

	for (let eventListener of listeners)
	InspectorTest.log(` - "${eventListener.type}"`);
	});
	}

	let suite = InspectorTest.createAsyncSuite("DOM.eventListeners");

	suite.addTestCase({
	name: "DOM.eventListeners.Initial",
	description: "Test that the document has no event listeners.",
	test(resolve, reject) {
	DOMAgent.getEventListenersForNode(node.id).then(({listeners}) => {
	listeners = listeners.filter((listener) => listener.nodeId === node.id);

	InspectorTest.expectEqual(listeners.length, 0, "There should be no event listeners.");

	for (let eventListener of listeners)
	InspectorTest.log(eventListener.type);
	}).then(resolve, reject);
	}
	});

	suite.addTestCase({
	name: "DOM.eventListeners.Add",
	description: "Test that adding an event listener is tracked.",
	test(resolve, reject) {
	WI.DOMNode.awaitEvent(WI.DOMNode.Event.EventListenersChanged).then((event) => {
	InspectorTest.assert(event.target === node, "Target should be document node.");

	return logListeners(1);
	}).then(resolve, reject);

	addListener("test");
	}
	});

	suite.addTestCase({
	name: "DOM.eventListeners.Remove",
	description: "Test that adding an event listener is removed.",
	test(resolve, reject) {
	let eventCount = 0;

	WI.DOMNode.addEventListener(WI.DOMNode.Event.EventListenersChanged, (event) => {
	InspectorTest.assert(event.target === node, "Target should be document node.");

	eventCount++;
	if (eventCount === 1)
	logListeners(0).then(resolve, reject);
	else
	reject("Event listeners changed too many times.");
	});

	removeListener("test");
	}
	});

	suite.addTestCase({
	name: "DOM.eventListeners.AddAndRemove",
	description: "Test that a full add-remove cycle is tracked.",
	test(resolve, reject) {
	let eventCount = 0;

	WI.DOMNode.addEventListener(WI.DOMNode.Event.EventListenersChanged, (event) => {
	InspectorTest.assert(event.target === node, "Target should be document node.");

	eventCount++;
	if (eventCount === 1) {
	logListeners(1).then(() => {
	InspectorTest.log("");

	removeListener("test");
	});
	} else if (eventCount === 2)
	logListeners(0).then(resolve, reject);
	else
	reject("Event listeners changed too many times.");
	});

	addListener("test");
	}
	});

	suite.addTestCase({
	name: "DOM.eventListeners.Once",
	description: "Test that an event listener that removes itself after firing is tracked.",
	test(resolve, reject) {
	let eventCount = 0;

	WI.DOMNode.addEventListener(WI.DOMNode.Event.EventListenersChanged, (event) => {
	InspectorTest.assert(event.target === node, "Target should be document node.");

	eventCount++;
	if (eventCount === 1) {
	logListeners(1).then(() => {
	InspectorTest.log("");
	InspectorTest.log("Trigger \"click\" event.");

	InspectorTest.evaluateInPage(`click()`);
	});
	} else if (eventCount === 2)
	logListeners(0).then(resolve, reject);
	else
	reject("Event listeners changed too many times.");
	});

	addListener("click", {once: true});
	}
	});

	suite.addTestCase({
	name: "DOM.eventListeners.AttributeAddAndRemove",
	description: "Test that adding/removing an event listener via an attribute is tracked.",
	test(resolve, reject) {
	let eventCount = 0;

	WI.DOMNode.addEventListener(WI.DOMNode.Event.EventListenersChanged, (event) => {
	InspectorTest.assert(event.target === node, "Target should be document node.");

	eventCount++;
	if (eventCount === 1) {
	logListeners(1).then(() => {
	InspectorTest.log("");

	removeAttribute("onload");
	});
	} else if (eventCount === 2)
	logListeners(0).then(resolve, reject);
	else
	reject("Event listeners changed too many times.");
	});

	addAttribute("onload", 1);
	}
	});

	suite.addTestCase({
	name: "DOM.eventListeners.AttributeReplace",
	description: "Test that replacing an attribute event listener without removing it is tracked.",
	test(resolve, reject) {
	let eventCount = 0;

	WI.DOMNode.addEventListener(WI.DOMNode.Event.EventListenersChanged, (event) => {
	InspectorTest.assert(event.target === node, "Target should be document node.");

	eventCount++;
	if (eventCount === 1) {
	logListeners(1).then(() => {
	InspectorTest.log("");

	addAttribute("onload", 2);
	});
	} else if (eventCount === 2) {
	InspectorTest.log("Attribute event listener replaced.");

	logListeners(1).then(() => {
	InspectorTest.log("");

	removeAttribute("onload");
	});
	} else if (eventCount === 3)
	logListeners(0).then(resolve, reject);
	else
	reject("Event listeners changed too many times.");
	});

	addAttribute("onload", 1);
	}
	});

	WI.domManager.requestDocument(async (documentNode) => {
	node = documentNode;

	InspectorTest.assert(node !== WI.domManager.inspectedNode);
	InspectorTest.log("Changing inspected node to #document...");
	await Promise.all([
	WI.domManager.awaitEvent(WI.DOMManager.Event.InspectedNodeChanged),
	WI.domManager.setInspectedNode(node),
	]);
	InspectorTest.assert(node === WI.domManager.inspectedNode);

	suite.runTestCasesAndFinish();
	});
	}
	</script>
	</head>
	<body onload="runTest()">
	<p>Testing events for adding and removing event listeners.</p>
	</body>
	</html>