web: For document embeds test, use asserts instead of DOM appending

Author: danielhjacobs

web/packages/selfhosted/test/polyfill/document_embeds/expected.html

@@ -1,16 +1,25 @@
 import { injectRuffleAndWait, openTest, playAndMonitor } from "../../utils.js";
-import { use, expect } from "chai";
-import chaiHtml from "chai-html";
-import fs from "fs";
-
-use(chaiHtml);
+import { expect } from "chai";
 
 describe("Document embeds", () => {
     it("loads the test", async () => {
         await openTest(browser, `polyfill/document_embeds`);
     });
 
     it("Accesses the right number of elements with ruffle", async () => {
+        async function countDocumentEmbeds() {
+            return await browser.execute(() => {
+                return document.embeds?.length ?? 0;
+            });
+        }
+
+        async function removeEl(selector: string) {
+            const el = await $(selector);
+            await browser.execute((element) => {
+                element.remove();
+            }, el);
+        }
+
         await injectRuffleAndWait(browser);
         await playAndMonitor(
             browser,
@@ -24,32 +33,10 @@ describe("Document embeds", () => {
             browser,
             await browser.$("#test-container").$("ruffle-embed#emb3"),
         );
-        await browser.execute(() => {
-            function countDocumentEmbeds() {
-                const output = document.getElementById("output");
-                const els = document.embeds;
-                const len = document.createElement("li");
-                if (els && "length" in els && els.length) {
-                    len.textContent = `There are ${els.length} embeds for document.embeds`;
-                }
-
-                output?.appendChild(len);
-            }
-
-            countDocumentEmbeds();
-            const emb1 = document.getElementById("emb1");
-            if (emb1) {
-                emb1.remove();
-            }
-            countDocumentEmbeds();
-        });
-        const actual = await browser
-            .$("#output")
-            .getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
-        const expected = fs.readFileSync(
-            `${import.meta.dirname}/expected.html`,
-            "utf8",
-        );
-        expect(actual).html.to.equal(expected);
+        const embeds1 = await countDocumentEmbeds();
+        expect(embeds1).to.equal(3);
+        await removeEl("#emb1");
+        const embeds2 = await countDocumentEmbeds();
+        expect(embeds2).to.equal(2);
     });
 });