Add browser P2P connection check

2026-08-29 14:57:05 +00:00 · 2026-07-31 14:13:34 +00:00
parent e32e3f545e
commit 48c398948a
20 changed files with 2710 additions and 8 deletions
@@ -21,6 +21,12 @@ Deno.test({
                timeout: 30_000,
            });
            await page.getByText("No Connection", { exact: true }).waitFor();
+            assertEquals(
+                await page
+                    .getByRole("link", { name: "Try the P2P connection check", exact: true })
+                    .getAttribute("href"),
+                "./check.html"
+            );

            await page.getByPlaceholder("anything-you-like").fill("browser-e2e-room");
            await page.getByPlaceholder("iphone-16").fill("browser-e2e-peer");
@@ -44,10 +50,7 @@ Deno.test({
            await page.getByText("Optional TURN server settings", { exact: true }).click();
            assertEquals(await page.getByPlaceholder("turn:turn.example.com:3478").inputValue(), "turn:127.0.0.1:3478");
            assertEquals(await page.getByPlaceholder("Enter TURN username").inputValue(), "browser-turn-user");
-            assertEquals(
-                await page.getByPlaceholder("Enter TURN credential").inputValue(),
-                "browser-turn-credential"
-            );
+            assertEquals(await page.getByPlaceholder("Enter TURN credential").inputValue(), "browser-turn-credential");
            assertEquals(await page.getByRole("button", { name: "Connect", exact: true }).isVisible(), true);
            assertNoPageFailures();
        } finally {
@@ -56,3 +59,82 @@ Deno.test({
        }
    },
 });
+
+Deno.test({
+    name: "WebPeer: P2P connection check prepares a local Setup URI and zeroed diagnostics",
+    sanitizeOps: false,
+    sanitizeResources: false,
+    async fn() {
+        const server = await startStaticServer(webPeerDist);
+        const browser = await chromium.launch({ headless: true });
+        try {
+            for (const target of ["desktop", "mobile"] as const) {
+                const page = await browser.newPage();
+                const assertNoPageFailures = observePageFailures(page);
+                try {
+                    await page.goto(`${server.baseUrl}check.html`);
+                    await page.getByRole("heading", { name: "P2P connection check", exact: true }).waitFor({
+                        timeout: 30_000,
+                    });
+                    if (target === "mobile") {
+                        await page.locator('input[type="radio"][value="mobile"]').check();
+                    }
+
+                    await page.getByRole("button", { name: `Prepare ${target} check`, exact: true }).click();
+                    await page.getByAltText(`Setup URI QR code for the ${target} check`, { exact: true }).waitFor({
+                        timeout: 30_000,
+                    });
+
+                    const setupURI = await page.getByLabel("Setup URI", { exact: true }).inputValue();
+                    const passphrase = await page.getByLabel("Setup URI passphrase", { exact: true }).inputValue();
+                    const qrSource = await page
+                        .getByAltText(`Setup URI QR code for the ${target} check`, { exact: true })
+                        .getAttribute("src");
+
+                    assertEquals(setupURI.startsWith("obsidian://setuplivesync?settings="), true);
+                    assertEquals(/^[a-z2-9]{4}(?:-[a-z2-9]{4}){3}$/.test(passphrase), true);
+                    assertEquals(qrSource?.startsWith("data:image/"), true);
+                    for (const label of ["Setup URI", "Setup URI passphrase"] as const) {
+                        const credentialField = page.getByLabel(label, { exact: true });
+                        assertEquals(await credentialField.getAttribute("autocomplete"), "off");
+                        assertEquals(await credentialField.getAttribute("spellcheck"), "false");
+                    }
+                    assertEquals(await page.getByTestId("diag-new").textContent(), "0");
+                    assertEquals(await page.getByTestId("diag-successful").textContent(), "0");
+                    assertEquals(await page.getByTestId("diag-failed").textContent(), "0");
+                    assertEquals(await page.getByTestId("diag-closed").textContent(), "0");
+                    assertEquals(
+                        await page.getByRole("button", { name: "Start connection monitor", exact: true }).isVisible(),
+                        true
+                    );
+                    assertEquals(
+                        await page
+                            .getByRole("button", { name: "Try another device without resetting", exact: true })
+                            .count(),
+                        0
+                    );
+
+                    await page.locator(".results-card").scrollIntoViewIfNeeded();
+                    await page.getByRole("button", { name: "Show the Setup QR again", exact: true }).click();
+                    await waitFor(
+                        async () =>
+                            await page
+                                .getByAltText(`Setup URI QR code for the ${target} check`, { exact: true })
+                                .evaluate((element) => {
+                                    const rect = element.getBoundingClientRect();
+                                    return rect.top >= 0 && rect.bottom <= document.documentElement.clientHeight;
+                                }),
+                        `The ${target} Setup QR did not return to the viewport`
+                    );
+                    assertEquals(await page.getByLabel("Setup URI", { exact: true }).inputValue(), setupURI);
+                    assertNoPageFailures();
+                } finally {
+                    await page.close();
+                }
+            }
+        } finally {
+            await browser.close();
+            await server.close();
+        }
+    },
+});