migrate more tests to htmlRunner

src/browser/dom/MessageChannel.zig

@@ -286,76 +286,6 @@ pub const MessageEvent = struct {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser.MessageChannel" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{
-        .html = "",
-    });
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "const mc1 = new MessageChannel()", null },
-        .{ "mc1.port1 == mc1.port1", "true" },
-        .{ "mc1.port2 == mc1.port2", "true" },
-        .{ "mc1.port1 != mc1.port2", "true" },
-        .{ "mc1.port1.postMessage('msg1');", "undefined" },
-        .{
-            \\ let message = null;
-            \\ let target = null;
-            \\ let currentTarget = null;
-            \\ mc1.port2.onmessage = (e) => {
-            \\   message = e.data;
-            \\   target = e.target;
-            \\   currentTarget = e.currentTarget;
-            \\ };
-            ,
-            null,
-        },
-        //  as soon as onmessage is called, queued messages are delivered
-        .{ "message", "msg1" },
-        .{ "target == mc1.port2", "true" },
-        .{ "currentTarget == mc1.port2", "true" },
-
-        .{ "mc1.port1.postMessage('msg2');", "undefined" },
-        .{ "message", "msg2" },
-        .{ "target == mc1.port2", "true" },
-        .{ "currentTarget == mc1.port2", "true" },
-
-        .{ "message = null", null },
-        .{ "mc1.port1.close();", null },
-        .{ "mc1.port1.postMessage('msg3');", "undefined" },
-        .{ "message", "null" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "const mc2 = new MessageChannel()", null },
-        .{ "mc2.port2.postMessage('msg1');", "undefined" },
-        .{ "mc2.port1.postMessage('msg2');", "undefined" },
-        .{
-            \\ let message1 = null;
-            \\ mc2.port1.addEventListener('message', (e) => {
-            \\   message1 = e.data;
-            \\ });
-            ,
-            null,
-        },
-        .{
-            \\ let message2 = null;
-            \\ mc2.port2.addEventListener('message', (e) => {
-            \\   message2 = e.data;
-            \\ });
-            ,
-            null,
-        },
-        .{ "message1", "null" },
-        .{ "message2", "null" },
-        .{ "mc2.port2.start()", null },
-
-        .{ "message1", "null" },
-        .{ "message2", "msg2" },
-        .{ "message2 = null", null },
-
-        .{ "mc2.port1.start()", null },
-        .{ "message1", "msg1" },
-        .{ "message2", "null" },
-    }, .{});
+test "Browser: DOM.MessageChannel" {
+    try testing.htmlRunner("dom/message_channel.html");
 }

src/browser/dom/implementation.zig

@@ -50,23 +50,7 @@ pub const DOMImplementation = struct {
     }
 };
 
-// Tests
-// -----
-
 const testing = @import("../../testing.zig");
-test "Browser.DOM.Implementation" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "let impl = document.implementation", "undefined" },
-        .{ "impl.createHTMLDocument();", "[object HTMLDocument]" },
-        .{ "const doc = impl.createHTMLDocument('foo');", "undefined" },
-        .{ "doc", "[object HTMLDocument]" },
-        .{ "doc.title", "foo" },
-        .{ "doc.body", "[object HTMLBodyElement]" },
-        .{ "impl.createDocument(null, 'foo');", "[object Document]" },
-        .{ "impl.createDocumentType('foo', 'bar', 'baz')", "[object DocumentType]" },
-        .{ "impl.hasFeature()", "true" },
-    }, .{});
+test "Browser: DOM.Implementation" {
+    try testing.htmlRunner("dom/implementation.html");
 }

src/browser/dom/intersection_observer.zig

@@ -181,110 +181,6 @@ pub const IntersectionObserverEntry = struct {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser.DOM.IntersectionObserver" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "new IntersectionObserver(() => {}).observe(document.documentElement);", "undefined" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let count_a = 0;", "undefined" },
-        .{ "const a1 = document.createElement('div');", "undefined" },
-        .{ "new IntersectionObserver(entries => {count_a += 1;}).observe(a1);", "undefined" },
-        .{ "count_a;", "1" },
-    }, .{});
-
-    // This test is documenting current behavior, not correct behavior.
-    // Currently every time observe is called, the callback is called with all entries.
-    try runner.testCases(&.{
-        .{ "let count_b = 0;", "undefined" },
-        .{ "let observer_b = new IntersectionObserver(entries => {count_b = entries.length;});", "undefined" },
-        .{ "const b1 = document.createElement('div');", "undefined" },
-        .{ "observer_b.observe(b1);", "undefined" },
-        .{ "count_b;", "1" },
-        .{ "const b2 = document.createElement('div');", "undefined" },
-        .{ "observer_b.observe(b2);", "undefined" },
-        .{ "count_b;", "2" },
-    }, .{});
-
-    // Re-observing is a no-op
-    try runner.testCases(&.{
-        .{ "let count_bb = 0;", "undefined" },
-        .{ "let observer_bb = new IntersectionObserver(entries => {count_bb = entries.length;});", "undefined" },
-        .{ "const bb1 = document.createElement('div');", "undefined" },
-        .{ "observer_bb.observe(bb1);", "undefined" },
-        .{ "count_bb;", "1" },
-        .{ "observer_bb.observe(bb1);", "undefined" },
-        .{ "count_bb;", "1" }, // Still 1, not 2
-    }, .{});
-
-    // Unobserve
-    try runner.testCases(&.{
-        .{ "let count_c = 0;", "undefined" },
-        .{ "let observer_c = new IntersectionObserver(entries => { count_c = entries.length;});", "undefined" },
-        .{ "const c1 = document.createElement('div');", "undefined" },
-        .{ "observer_c.observe(c1);", "undefined" },
-        .{ "count_c;", "1" },
-        .{ "observer_c.unobserve(c1);", "undefined" },
-        .{ "const c2 = document.createElement('div');", "undefined" },
-        .{ "observer_c.observe(c2);", "undefined" },
-        .{ "count_c;", "1" },
-    }, .{});
-
-    // Disconnect
-    try runner.testCases(&.{
-        .{ "let observer_d = new IntersectionObserver(entries => {});", "undefined" },
-        .{ "let d1 = document.createElement('div');", "undefined" },
-        .{ "observer_d.observe(d1);", "undefined" },
-        .{ "observer_d.disconnect();", "undefined" },
-        .{ "observer_d.takeRecords().length;", "0" },
-    }, .{});
-
-    // takeRecords
-    try runner.testCases(&.{
-        .{ "let observer_e = new IntersectionObserver(entries => {});", "undefined" },
-        .{ "let e1 = document.createElement('div');", "undefined" },
-        .{ "observer_e.observe(e1);", "undefined" },
-        .{ "const e2 = document.createElement('div');", "undefined" },
-        .{ "observer_e.observe(e2);", "undefined" },
-        .{ "observer_e.takeRecords().length;", "2" },
-    }, .{});
-
-    // Entry
-    try runner.testCases(&.{
-        .{ "let entry;", "undefined" },
-        .{ "let div1 = document.createElement('div')", null },
-        .{ "document.body.appendChild(div1);", null },
-        .{ "new IntersectionObserver(entries => { entry = entries[0]; }).observe(div1);", null },
-        .{ "entry.boundingClientRect.x;", "0" },
-        .{ "entry.intersectionRatio;", "1" },
-        .{ "entry.intersectionRect.x;", "0" },
-        .{ "entry.intersectionRect.y;", "0" },
-        .{ "entry.intersectionRect.width;", "1" },
-        .{ "entry.intersectionRect.height;", "1" },
-        .{ "entry.isIntersecting;", "true" },
-        .{ "entry.rootBounds.x;", "0" },
-        .{ "entry.rootBounds.y;", "0" },
-        .{ "entry.rootBounds.width;", "1" },
-        .{ "entry.rootBounds.height;", "1" },
-        .{ "entry.target;", "[object HTMLDivElement]" },
-    }, .{});
-
-    // Options
-    try runner.testCases(&.{
-        .{ "const new_root = document.createElement('span');", null },
-        .{ "document.body.appendChild(new_root);", null },
-        .{ "let new_entry;", "undefined" },
-        .{
-            \\ const new_observer = new IntersectionObserver(
-            \\ entries => { new_entry = entries[0]; },
-            \\ {root: new_root, rootMargin: '0px 0px 0px 0px', threshold: [0]});
-            ,
-            "undefined",
-        },
-        .{ "new_observer.observe(document.createElement('div'));", "undefined" },
-        .{ "new_entry.rootBounds.x;", "1" },
-    }, .{});
+test "Browser: DOM.IntersectionObserver" {
+    try testing.htmlRunner("dom/intersection_observer.html");
 }

src/browser/dom/mutation_observer.zig

@@ -353,85 +353,6 @@ const MutationEventType = enum {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser.DOM.MutationObserver" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "new MutationObserver(() => {}).observe(document, { childList: true });", "undefined" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{
-            \\ var nb = 0;
-            \\ var mrs;
-            \\ new MutationObserver((mu) => {
-            \\    mrs = mu;
-            \\    nb++;
-            \\ }).observe(document.firstElementChild, { attributes: true, attributeOldValue: true });
-            \\ document.firstElementChild.setAttribute("foo", "bar");
-            \\ // ignored b/c it's about another target.
-            \\ document.firstElementChild.firstChild.setAttribute("foo", "bar");
-            ,
-            null,
-        },
-        .{ "nb", "1" },
-        .{ "mrs[0].type", "attributes" },
-        .{ "mrs[0].target == document.firstElementChild", "true" },
-        .{ "mrs[0].target.getAttribute('foo')", "bar" },
-        .{ "mrs[0].attributeName", "foo" },
-        .{ "mrs[0].oldValue", "null" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{
-            \\ var node = document.getElementById("para").firstChild;
-            \\ var nb2 = 0;
-            \\ var mrs2;
-            \\ new MutationObserver((mu) => {
-            \\     mrs2 = mu;
-            \\     nb2++;
-            \\ }).observe(node, { characterData: true, characterDataOldValue: true });
-            \\ node.data = "foo";
-            ,
-            null,
-        },
-        .{ "nb2", "1" },
-        .{ "mrs2[0].type", "characterData" },
-        .{ "mrs2[0].target == node", "true" },
-        .{ "mrs2[0].target.data", "foo" },
-        .{ "mrs2[0].oldValue", " And" },
-    }, .{});
-
-    // tests that mutation observers that have a callback which trigger the
-    // mutation observer don't crash.
-    // https://github.com/lightpanda-io/browser/issues/550
-    try runner.testCases(&.{
-        .{
-            \\ var node = document.getElementById("para");
-            \\ new MutationObserver(() => {
-            \\     node.innerText = 'a';
-            \\ }).observe(document, { subtree:true,childList:true });
-            \\ node.innerText = "2";
-            ,
-            null,
-        },
-        .{ "node.innerText", "a" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{
-            \\ var node = document.getElementById("para");
-            \\ var attrWatch = 0;
-            \\ new MutationObserver(() => {
-            \\     attrWatch++;
-            \\ }).observe(document, { attributeFilter: ["name"], subtree: true });
-            \\ node.setAttribute("id", "1");
-            ,
-            null,
-        },
-        .{ "attrWatch", "0" },
-        .{ "node.setAttribute('name', 'other');", null },
-        .{ "attrWatch", "1" },
-    }, .{});
+test "Browser: DOM.MutationObserver" {
+    try testing.htmlRunner("dom/mutation_observer.html");
 }

src/browser/dom/namednodemap.zig

@@ -115,26 +115,7 @@ pub const NamedNodeMapIterator = struct {
     }
 };
 
-// Tests
-// -----
-
 const testing = @import("../../testing.zig");
-test "Browser.DOM.NamedNodeMap" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "let a = document.getElementById('content').attributes", "undefined" },
-        .{ "a.length", "1" },
-        .{ "a.item(0)", "[object Attr]" },
-        .{ "a.item(1)", "null" },
-        .{ "a.getNamedItem('id')", "[object Attr]" },
-        .{ "a.getNamedItem('foo')", "null" },
-        .{ "a.setNamedItem(a.getNamedItem('id'))", "[object Attr]" },
-        .{ "a['id'].name", "id" },
-        .{ "a['id'].value", "content" },
-        .{ "a['other']", "undefined" },
-        .{ "a[0].value = 'abc123'", null },
-        .{ "a[0].value", "abc123" },
-    }, .{});
+test "Browser: DOM.NamedNodeMap" {
+    try testing.htmlRunner("dom/named_node_map.html");
 }

src/tests/dom/implementation.html

@@ -0,0 +1,13 @@
+<script src="../testing.js"></script>
+<script id=implementation>
+  let impl = document.implementation;
+  testing.expectEqual("[object HTMLDocument]", impl.createHTMLDocument().toString());;
+
+  const doc = impl.createHTMLDocument('foo');
+  testing.expectEqual("[object HTMLDocument]", doc.toString());
+  testing.expectEqual("foo", doc.title);
+  testing.expectEqual("[object HTMLBodyElement]", doc.body.toString());
+  testing.expectEqual("[object Document]", impl.createDocument(null, 'foo').toString());
+  testing.expectEqual("[object DocumentType]", impl.createDocumentType('foo', 'bar', 'baz').toString());
+  testing.expectEqual(true, impl.hasFeature());
+</script>