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

function addListener(selector) {
    document.querySelector(selector).addEventListener("click", callback);
    TestPage.dispatchEventToFrontend("addListener");
}

function removeListener(selector) {
    document.querySelector(selector).removeEventListener("click", callback);
    TestPage.dispatchEventToFrontend("removeListener");
}

function test() {
    let parentNode = null;
    let childNode = null;
    let siblingNode = null;

    async function addListener(node) {
        let promise = new WI.WrappedPromise;
        let listener = node.addEventListener(WI.DOMNode.Event.EventListenersChanged, (event) => {
            if (!promise.settled)
                promise.resolve(true);
        });
        InspectorTest.singleFireEventListener("addListener", (event) => {
            node.removeEventListener(WI.DOMNode.Event.EventListenersChanged, listener);

            if (!promise.settled)
                promise.resolve(false);
        });

        let selector = node.escapedIdSelector;
        InspectorTest.log(`Adding listener to ${selector}...`);
        await InspectorTest.evaluateInPage(`addListener("${selector}")`);

        return promise.promise;
    }

    async function removeListener(node) {
        let promise = new WI.WrappedPromise;
        let listener = node.addEventListener(WI.DOMNode.Event.EventListenersChanged, (event) => {
            if (!promise.settled)
                promise.resolve(true);
        });
        InspectorTest.singleFireEventListener("removeListener", (event) => {
            node.removeEventListener(WI.DOMNode.Event.EventListenersChanged, listener);

            if (!promise.settled)
                promise.resolve(false);
        });

        let selector = node.escapedIdSelector;
        InspectorTest.log(`Removing listener from ${selector}...`);
        await InspectorTest.evaluateInPage(`removeListener("${selector}")`);

        return promise.promise;
    }

    async function checkTestEventListener(node, expected) {
        let {listeners} = await DOMAgent.getEventListenersForNode(node.id);
        listeners = listeners.map((listener) => listener.type);

        let selector = node.escapedIdSelector;
        if (expected)
            InspectorTest.expectThat(listeners.includes("click"), `There should be an event listener for ${selector}.`);
        else
            InspectorTest.expectFalse(listeners.includes("click"), `There should not be an event listener for ${selector}.`);
    }

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

    suite.addTestCase({
        name: "DOM.eventListeners.InspectedNode",
        description: "Test that event listener add/remove events for the inspected node are sent to the frontend.",
        async test() {
            await checkTestEventListener(childNode, false);
            await checkTestEventListener(parentNode, false);

            InspectorTest.expectThat(await addListener(childNode), "Adding an event listener to the inspected node should notify the frontend.");
            await checkTestEventListener(childNode, true);
            await checkTestEventListener(parentNode, false);

            InspectorTest.expectThat(await removeListener(childNode), "Removing an event listener from the inspected node should notify the frontend.");
            await checkTestEventListener(childNode, false);
            await checkTestEventListener(parentNode, false);
        },
    });

    suite.addTestCase({
        name: "DOM.eventListeners.InspectedNode.ancestor",
        description: "Test that event listener add/remove events for ancestors of the inspected node are sent to the frontend.",
        async test() {
            await checkTestEventListener(childNode, false);
            await checkTestEventListener(parentNode, false);

            InspectorTest.expectThat(await addListener(parentNode), "Adding an event listener to an ancestor of the inspected node should notify the frontend.");
            await checkTestEventListener(childNode, true);
            await checkTestEventListener(parentNode, true);

            InspectorTest.expectThat(await removeListener(parentNode), "Removing an event listener from an ancestor of the inspected node should notify the frontend.");
            await checkTestEventListener(childNode, false);
            await checkTestEventListener(parentNode, false);
        },
    });

    suite.addTestCase({
        name: "DOM.eventListeners.NotInspectedNode",
        description: "Test that event listener add/remove events for nodes other than the inspected node are not sent to the frontend.",
        async test() {
            await checkTestEventListener(childNode, false);
            await checkTestEventListener(parentNode, false);

            InspectorTest.expectFalse(await addListener(siblingNode), "Adding an event listener to a node other than the inspected node should not notify the frontend.");
            await checkTestEventListener(childNode, false);
            await checkTestEventListener(parentNode, false);

            InspectorTest.expectFalse(await removeListener(siblingNode), "Removing an event listener from a node other than the inspected node should not notify the frontend.");
            await checkTestEventListener(childNode, false);
            await checkTestEventListener(parentNode, false);
        },
    });

    suite.addTestCase({
        name: "DOM.eventListeners.SubsequentBeforeGet",
        description: "Test that subsequent event listener add/remove events are not sent to the frontend if the frontend hasn't requested the new list since the last update.",
        async test() {
            await checkTestEventListener(childNode, false);
            await checkTestEventListener(parentNode, false);

            InspectorTest.expectThat(await addListener(childNode), "Adding an event listener to the inspected node should notify the frontend.");
            InspectorTest.expectFalse(await addListener(parentNode), "Adding an event listener to an ancestor of the inspected node should not notify the frontend if the frontend hasn't requested the new list since the last update.");

            InspectorTest.log("Requesting event listeners...");
            await checkTestEventListener(childNode, true);
            await checkTestEventListener(parentNode, true);

            InspectorTest.expectThat(await removeListener(childNode), "Removing an event listener from the inspected node should notify the frontend.");
            InspectorTest.expectFalse(await removeListener(parentNode), "Removing an event listener from an ancestor of the inspected node should not notify the frontend if the frontend hasn't requested the new list since the last update.");
        },
    });

    WI.domManager.requestDocument(async (documentNode) => {
        let [parentNodeId, childNodeId, siblingNodeId] = await Promise.all([
            documentNode.querySelector("#parent"),
            documentNode.querySelector("#child"),
            documentNode.querySelector("#sibling"),
        ]);

        parentNode = WI.domManager.nodeForId(parentNodeId);
        childNode = WI.domManager.nodeForId(childNodeId);
        siblingNode = WI.domManager.nodeForId(siblingNodeId);

        InspectorTest.assert(childNode !== WI.domManager.inspectedNode);
        InspectorTest.log(`Changing inspected node to ${childNode.escapedIdSelector}...`);
        await Promise.all([
            WI.domManager.awaitEvent(WI.DOMManager.Event.InspectedNodeChanged),
            WI.domManager.setInspectedNode(childNode),
        ]);
        InspectorTest.assert(childNode === WI.domManager.inspectedNode);

        suite.runTestCasesAndFinish();
    });
}
</script>
</head>
<body onload="runTest()">
    <p>Testing that event listener add/remove events are only fired for the inspected node and its ancestors.</p>
    <div id="parent">
        <div id="child"></div>
    </div>
    <div id="sibling"></div>
</body>
</html>