statement-store: Add browser sanity check zombienet test

.github/workflows/zombienet.yml

@@ -68,6 +68,9 @@ jobs:
           - job-name: "zombienet-smoldot-0003-statement_store_peer_connection"
             test: "statement_store_peer_connection"
             runner-type: "default"
+          - job-name: "zombienet-smoldot-0004-statement_store_browser"
+            test: "statement_store_browser"
+            runner-type: "default"
           - job-name: "zombienet-smoldot-0007-bulletin_fetch"
             test: "bulletin_fetch"
             runner-type: "default"
@@ -104,6 +107,20 @@ jobs:
           path: e2e-tests/js/node_modules
           key: e2e-js-nm-${{ hashFiles('e2e-tests/js/package-lock.json') }}
 
+      - name: Cache e2e-tests browser node_modules
+        if: matrix.test.test == 'statement_store_browser'
+        uses: actions/cache@v4
+        with:
+          path: e2e-tests/browser/node_modules
+          key: e2e-browser-nm-${{ hashFiles('e2e-tests/browser/package-lock.json') }}
+
+      - name: Cache Playwright browsers
+        if: matrix.test.test == 'statement_store_browser'
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ hashFiles('e2e-tests/browser/package-lock.json') }}
+
       - name: Install smoldot JS deps
         shell: bash
         run: npm ci
@@ -114,6 +131,15 @@ jobs:
         run: npm ci
         working-directory: e2e-tests/js
 
+      - name: Install browser test deps and Chromium
+        if: matrix.test.test == 'statement_store_browser'
+        shell: bash
+        working-directory: e2e-tests/browser
+        run: |
+          set -euo pipefail
+          npm ci
+          npx playwright install --with-deps chromium
+
       # Pull binaries from the polkadot-sdk release
       - name: Download polkadot binaries
         shell: bash

.gitignore

@@ -1,5 +1,6 @@
 /target
 /e2e-tests/target
 /e2e-tests/js/node_modules
+/e2e-tests/browser/node_modules
 /benchmarks/target
 /benchmarks/js/node_modules

e2e-tests/browser/helpers.js

@@ -0,0 +1,108 @@
+// Smoldot
+// Copyright (C) 2019-2026  Parity Technologies (UK) Ltd.
+// SPDX-License-Identifier: GPL-3.0-or-later WITH Classpath-exception-2.0
+
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// Node-side helpers for the browser tests.
+
+import http from "node:http";
+import path from "node:path";
+import fs from "node:fs/promises";
+
+export function report(name, passed, detail) {
+  const suffix = detail ? `: ${detail}` : "";
+  if (passed) {
+    console.log(`PASS: ${name}${suffix}`);
+  } else {
+    console.log(`FAIL: ${name}${suffix}`);
+    process.exitCode = 1;
+  }
+}
+
+export function requireEnv(names) {
+  const missing = names.filter((n) => !process.env[n]);
+  if (missing.length > 0) {
+    console.error(`Required env vars: ${missing.join(", ")}`);
+    process.exit(1);
+  }
+}
+
+/// Polls `path` until a line equals `expected`. Pair with `SyncFile` on the Rust side.
+export async function waitForSyncMessage(filePath, expected, timeoutMs = 120_000) {
+  const deadline = Date.now() + timeoutMs;
+  while (Date.now() < deadline) {
+    const contents = await fs.readFile(filePath, "utf8").catch(() => "");
+    if (contents.split("\n").some((line) => line.trim() === expected)) {
+      return;
+    }
+    await new Promise((r) => setTimeout(r, 100));
+  }
+  throw new Error(
+    `Timed out waiting for sync message "${expected}" at ${filePath}`,
+  );
+}
+
+/// Starts a tiny HTTP server that serves files from `pageDir` at `/` and from
+/// `smoldotPkgDir` at `/smoldot/`. Returns the server (already listening on a
+/// random local port).
+export function startStaticServer(pageDir, smoldotPkgDir) {
+  const server = http.createServer(async (req, res) => {
+    try {
+      const reqPath = decodeURIComponent(req.url.split("?")[0]);
+      let filePath;
+      if (reqPath === "/" || reqPath === "/index.html") {
+        filePath = path.join(pageDir, "index.html");
+      } else if (reqPath.startsWith("/smoldot/")) {
+        filePath = path.join(smoldotPkgDir, reqPath.slice("/smoldot/".length));
+      } else {
+        res.statusCode = 404;
+        res.end("not found");
+        return;
+      }
+      const resolved = path.resolve(filePath);
+      if (
+        !resolved.startsWith(path.resolve(pageDir)) &&
+        !resolved.startsWith(path.resolve(smoldotPkgDir))
+      ) {
+        res.statusCode = 403;
+        res.end("forbidden");
+        return;
+      }
+      const data = await fs.readFile(resolved);
+      res.setHeader("Content-Type", contentTypeFor(resolved));
+      res.end(data);
+    } catch (e) {
+      res.statusCode = 500;
+      res.end(String(e));
+    }
+  });
+  return new Promise((resolve) => {
+    server.listen(0, "127.0.0.1", () => resolve(server));
+  });
+}
+
+function contentTypeFor(filePath) {
+  switch (path.extname(filePath)) {
+    case ".html":
+      return "text/html; charset=utf-8";
+    case ".js":
+    case ".mjs":
+      return "application/javascript; charset=utf-8";
+    case ".wasm":
+      return "application/wasm";
+    default:
+      return "application/octet-stream";
+  }
+}

e2e-tests/browser/package.json

@@ -0,0 +1,8 @@
+{
+  "type": "module",
+  "private": true,
+  "dependencies": {
+    "playwright": "^1.49.0",
+    "smoldot": "file:../../wasm-node/javascript"
+  }
+}

e2e-tests/browser/page/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head><meta charset="utf-8"><title>smoldot browser tests</title></head>
+  <body>
+    <script type="module">
+      import * as smoldot from '/smoldot/dist/mjs/index-browser.js';
+      window.__smoldot = smoldot;
+      window.__ready = true;
+    </script>
+  </body>
+</html>