From 4ae64fc93e261ca83c734f13fb508fafef0321ce Mon Sep 17 00:00:00 2001
From: Sheen Tian <sheentianshen@gmail.com>
Date: Wed, 4 Sep 2024 16:14:55 +0800
Subject: [PATCH] feat: add test cases for add/remove event listener

---
 example/QCefViewTest/index.in.html    | 202 +++++++++++++++-----------
 example/QCefViewTest/tutorial.in.html | 145 ++++++++++--------
 2 files changed, 199 insertions(+), 148 deletions(-)
diff --git a/example/QCefViewTest/index.in.html b/example/QCefViewTest/index.in.html
index e6769cfe..cb61d092 100644
--- a/example/QCefViewTest/index.in.html
+++ b/example/QCefViewTest/index.in.html
@@ -1,97 +1,129 @@
 <html>
-  <head>
-    <script>
-      console.log("page script starts.....");
-
-      window.onwheel = e => console.log(`wheel event: altKey=${e.altKey} ctrlKey=${e.ctrlKey}`);
-      
-      function onLoad() {
-        if (typeof CallBridge == "undefined") {
-          alert("Not in CefView context");
-          return;
-        }
-
-        CallBridge.addEventListener("colorChange", function (color) {
-          document.getElementById("main").style.backgroundColor = color;
-        });
-      }
 
-      function onInvokeMethodClicked(name, ...arg) {
-        CallBridge.invokeMethod(name, ...arg);
-      }
+<head>
+  <script>
+    console.log("page script starts.....");
+
+    window.onwheel = e => console.log(`wheel event: altKey=${e.altKey} ctrlKey=${e.ctrlKey}`);
 
-      function onCallBridgeQueryClicked() {
-        var query = {
-          request: document.getElementById("message").value,
-          onSuccess: function (response) {
-            alert(response);
-          },
-          onFailure: function (error_code, error_message) {
-            alert(error_message);
-          },
-        };
-        window.CefViewQuery(query);
+    function onLoad() {
+      if (typeof CallBridge == "undefined") {
+        alert("Not in CefView context");
+        return;
       }
+    }
+
+    function onChangeColorEvent(color) {
+      console.log("request change background color to: ", color);
+      // change the background color
+      document.getElementById("main").style.backgroundColor = color;
+    }
+
+    function onAddEventListener() {
+      // Add a event listener to handle the event named 'colorChange'
+      CallBridge.addEventListener(
+        // event name
+        "colorChange",
+        // event handler
+        onChangeColorEvent
+      );
+    }
 
-      function testInvokeMethod() {
-        let d = {
+    function onRemoveEventListener() {
+      // Add a event listener to handle the event named 'colorChange'
+      CallBridge.removeEventListener(
+        // event name
+        "colorChange",
+        // event handler
+        onChangeColorEvent
+      );
+    }
+
+    function onInvokeMethodClicked(name, ...arg) {
+      CallBridge.invokeMethod(name, ...arg);
+    }
+
+    function onCallBridgeQueryClicked() {
+      var query = {
+        request: document.getElementById("message").value,
+        onSuccess: function (response) {
+          alert(response);
+        },
+        onFailure: function (error_code, error_message) {
+          alert(error_message);
+        },
+      };
+      window.CefViewQuery(query);
+    }
+
+    function testInvokeMethod() {
+      let d = {
+        d1: true,
+        d2: 5678,
+        d3: "test object",
+        d4: [1, "2", false],
+        d5: {
           d1: true,
           d2: 5678,
-          d3: "test object",
-          d4: [1, "2", false],
-          d5: {
-            d1: true,
-            d2: 5678,
-            d3: "nested object",
-            d4: [1, "2", true],
-          },
-        };
-        onInvokeMethodClicked("TestMethod", 1, false, "arg3", d);
-      }
-    </script>
-    <style>
-      .noselect {
-        user-select: none;
-        /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
-      }
-    </style>
-  </head>
-
-  <body onload="onLoad()" id="main" class="noselect">
-    <h1 align="center" style="font-size: 12pt">Web Area</h1>
-    <div align="center">
-        <div style="background-color: green; -webkit-app-region: drag">
-            <h1>Dragging area</h1>
-        </div>
-        <br />
-
-        <label> Test Case for InvokeMethod </label>
-        <br />
-        <input type="button" value="Invoke Method" onclick="testInvokeMethod()" />
-        <br />
-        <br />
-
-        <label> Test Case for QCefQuery </label>
-        <br />
-        <textarea id="message" style="width: 320px; height: 120px">
+          d3: "nested object",
+          d4: [1, "2", true],
+        },
+      };
+      onInvokeMethodClicked("TestMethod", 1, false, "arg3", d);
+    }
+  </script>
+  <style>
+    .noselect {
+      user-select: none;
+      /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
+    }
+  </style>
+</head>
+
+<body onload="onLoad()" id="main" class="noselect">
+  <h1 align="center" style="font-size: 12pt">Web Area</h1>
+  <div align="center">
+    <div style="background-color: green; -webkit-app-region: drag">
+      <h1>Dragging area</h1>
+    </div>
+    <br />
+
+    <label> Test Case for EventListener</label>
+    <br />
+    <input type="button" value="AddEventListener" onclick="onAddEventListener()" />
+    <input type="button" value="RemoveEventListener" onclick="onRemoveEventListener()" />
+    <br />
+    <br />
+
+    <label> Test Case for InvokeMethod </label>
+    <br />
+    <input type="button" value="Invoke Method" onclick="testInvokeMethod()" />
+    <br />
+    <br />
+
+    <label> Test Case for QCefQuery </label>
+    <br />
+    <textarea id="message" style="width: 320px; height: 120px">
 this message will be processed by native code.</textarea>
-        <br />
-        <input type="button" value="Query" onclick="onCallBridgeQueryClicked()" />
-        <br />
-        <br />
+    <br />
+    <input type="button" value="Query" onclick="onCallBridgeQueryClicked()" />
+    <br />
+    <br />
 
-        <label> Test Case for Popup Browser </label>
-        <br />
-        <a href="#" target="_blank">Popup Browser By HTML</a>
-        <br />
-        <a href="#" onClick="window.open('#','QCefView Popup','width=800, height=600'); return false;">Popup Browser By Script</a>
+    <label> Test Case for Popup Browser </label>
+    <br />
+    <a href="#" target="_blank">Popup Browser By HTML</a>
+    <br />
+    <a href="#" onClick="window.open('#','QCefView Popup','width=800, height=600'); return false;">Popup Browser By
+      Script</a>
 
-        <br />
-        <a href="#" onClick="window.close();">Close Current Window</a>
+    <br />
+    <a href="#" onClick="window.close();">Close Current Window</a>
 
 
-        <p>An iframe with default borders:</p>
-        <iframe src="/tutorial.html" width="100%" height="300"> </iframe>
-    </div>
-  </body>
-</html>
+    <p>An iframe with default borders:</p>
+    <iframe src="/tutorial.html" width="100%" height="300"> </iframe>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/example/QCefViewTest/tutorial.in.html b/example/QCefViewTest/tutorial.in.html
index 428ec351..b6e3207c 100644
--- a/example/QCefViewTest/tutorial.in.html
+++ b/example/QCefViewTest/tutorial.in.html
@@ -1,76 +1,95 @@
 <html>
-  <head>
-    <script>
-      function onLoad() {
-        // Add a event listener to handle the event named 'colorChange'
-        CallBridge.addEventListener(
-          // event name
-          "colorChange",
 
-          // event handler
-          function (color) {
-            console.log("request change background color to: ", color);
-            // change the background color
-            document.getElementById("main").style.backgroundColor = color;
-          }
-        );
-      }
+<head>
+  <script>
+    function onLoad() {
 
-      function onInvokeMethodClicked(name, ...arg) {
-        CallBridge.invokeMethod(name, ...arg);
-      }
+    }
 
-      function onCallBridgeQueryClicked() {
-        var query = {
-          request: document.getElementById("message").value,
-          onSuccess: function (response) {
-            alert(response);
-          },
-          onFailure: function (error_code, error_message) {
-            alert(error_message);
-          },
-        };
-        window.CefViewQuery(query);
-      }
-    </script>
-    <style>
-      .noselect {
-        user-select: none;
-        /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
-      }
-    </style>
-  </head>
+    function onChangeColorEvent(color) {
+      console.log("request change background color to: ", color);
+      // change the background color
+      document.getElementById("main").style.backgroundColor = color;
+    }
 
-  <body onload="onLoad()" id="main" class="noselect">
-    <h1 align="center" style="font-size: 12pt">Web Area</h1>
-    <div align="center">
-      <label> Test Case for InvokeMethod </label>
-      <br />
-      <input
-        type="button"
-        value="Invoke Method"
-        onclick="onInvokeMethodClicked('TestMethod', 1, false, 'arg3')"
-      />
-      <br />
-      <br />
+    function onAddEventListener() {
+      // Add a event listener to handle the event named 'colorChange'
+      CallBridge.addEventListener(
+        // event name
+        "colorChange",
+        // event handler
+        onChangeColorEvent
+      );
+    }
 
-      <label> Test Case for QCefQuery </label>
-      <br />
-      <textarea id="message" style="width: 320px; height: 120px">
-this message will be processed by native code.</textarea
-      >
-      <br />
-      <input type="button" value="Query" onclick="onCallBridgeQueryClicked()" />
-      <br />
-      <br />
+    function onRemoveEventListener() {
+      // Add a event listener to handle the event named 'colorChange'
+      CallBridge.removeEventListener(
+        // event name
+        "colorChange",
+        // event handler
+        onChangeColorEvent
+      );
+    }
 
-      <!--
+    function onInvokeMethodClicked(name, ...arg) {
+      CallBridge.invokeMethod(name, ...arg);
+    }
+
+    function onCallBridgeQueryClicked() {
+      var query = {
+        request: document.getElementById("message").value,
+        onSuccess: function (response) {
+          alert(response);
+        },
+        onFailure: function (error_code, error_message) {
+          alert(error_message);
+        },
+      };
+      window.CefViewQuery(query);
+    }
+  </script>
+  <style>
+    .noselect {
+      user-select: none;
+      /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
+    }
+  </style>
+</head>
+
+<body onload="onLoad()" id="main" class="noselect">
+  <h1 align="center" style="font-size: 12pt">Web Area</h1>
+  <div align="center">
+    <label> Test Case for EventListener</label>
+    <br />
+    <input type="button" value="AddEventListener" onclick="onAddEventListener()" />
+    <input type="button" value="RemoveEventListener" onclick="onRemoveEventListener()" />
+    <br />
+    <br />
+
+    <label> Test Case for InvokeMethod </label>
+    <br />
+    <input type="button" value="Invoke Method" onclick="onInvokeMethodClicked('TestMethod', 1, false, 'arg3')" />
+    <br />
+    <br />
+
+    <label> Test Case for QCefQuery </label>
+    <br />
+    <textarea id="message" style="width: 320px; height: 120px">
+this message will be processed by native code.</textarea>
+    <br />
+    <input type="button" value="Query" onclick="onCallBridgeQueryClicked()" />
+    <br />
+    <br />
+
+    <!--
       <div style="background-color: green; -webkit-app-region: drag">
         <h1>Dragging area</h1>
       </div>
       <br />
       <br /> 
       -->
-    </div>
-  </body>
-</html>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
