host: block editor live-swap — :sx-post (not sx-disable) + a Playwright check

The block-editor move/remove controls used :sx-disable "true" (the OLD relate-picker pattern = plain POST → 303 → full reload). Switched to :sx-post + :sx-target #block-editor + :sx-swap outerHTML (the current pattern): the click is a text/sx form round-trip through the WASM engine, the handler returns the re-rendered #block-editor, and it swaps IN PLACE — no reload. Added lib/host/playwright/{block-editor.spec.js, run-block-check.sh} (the run-picker-check harness pattern: ephemeral host server + one editable post + the main worktree's chromium). Verifies the irreducibly-browser behaviour the SX conformance can't see: adding, reordering (↑), and removing blocks re-render #block-editor live, and the controls RE-BIND on the content each swap brings in. PASSES (1/1, 16s). blog conformance still 165/165. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-01 05:20:52 +00:00
parent af3d81d108
commit f804a71726
3 changed files with 139 additions and 1 deletions
--- a/lib/host/playwright/block-editor.spec.js
+++ b/lib/host/playwright/block-editor.spec.js
@@ -0,0 +1,70 @@
+// Browser check for the BLOCK EDITOR (lib/host/blog.sx, composition step 6). Runs against
+// an ephemeral host server seeded with one editable host post by run-block-check.sh, which
+// copies this spec into the Playwright env and sets SX_TEST_URL.
+//
+// What needs a real boosted-SPA browser (the SX conformance tests cover the model ops +
+// server routes; this covers the live SX-htmx swap the engine drives): adding, reordering,
+// and removing blocks re-renders #block-editor IN PLACE (sx-post → outerHTML swap), and the
+// controls RE-BIND on the content brought in by each swap (the case an inline script fails).
+const { test, expect } = require('playwright/test');
+
+const USER = process.env.SX_ADMIN_USER || 'admin';
+const PASS = process.env.SX_ADMIN_PASSWORD || 'letmein';
+const HOST = 'block-host';                 // the post whose edit page we drive
+const BE = '#block-editor';
+const ROWS = `${BE} > ul > li`;            // block rows (exclude the add form)
+
+async function waitReady(page) {
+  await expect(page.locator('html[data-sx-ready="true"]')).toHaveCount(1, { timeout: 45000 });
+}
+async function loginTo(page, path) {
+  await page.goto(path);
+  await page.waitForURL(/\/login/);
+  await page.fill('input[name="username"]', USER);
+  await page.fill('input[name="password"]', PASS);
+  await page.click('button[type="submit"]');
+  await page.waitForURL((u) => !u.pathname.startsWith('/login'));
+}
+
+// add a block via the add-block form (select a card type, type text, submit).
+async function addBlock(page, ctype, text) {
+  await page.selectOption(`${BE} select[name="ctype"]`, ctype);
+  await page.fill(`${BE} input[name="text"]`, text);
+  await page.click(`${BE} form[sx-post$="/blocks/add"] button`);
+}
+
+test.describe('block editor (browser-only, live SX-htmx swap)', () => {
+  test('add, reorder, and remove blocks re-render #block-editor in place', async ({ page }) => {
+    test.setTimeout(90000);
+    await loginTo(page, `/${HOST}/edit`);
+    await waitReady(page);
+    await page.evaluate(() => { window.__noReload = true; });
+
+    // a fresh post has no :body -> no blocks yet
+    await expect(page.locator(ROWS)).toHaveCount(0);
+
+    // ADD #1 (text) -> one row appears live, showing its preview
+    await addBlock(page, 'card-text', 'First block');
+    await expect.poll(() => page.locator(ROWS).count(), { timeout: 15000 }).toBe(1);
+    await expect(page.locator(BE)).toContainText('First block');
+
+    // ADD #2 (heading) -> a second row on the swapped-in editor (controls re-bound)
+    await addBlock(page, 'card-heading', 'A Heading');
+    await expect.poll(() => page.locator(ROWS).count(), { timeout: 15000 }).toBe(2);
+    // order is add-order: block 0 = First block, block 1 = A Heading
+    await expect(page.locator(`${ROWS}`).first()).toContainText('First block');
+
+    // REORDER: move the 2nd block (A Heading) UP -> it becomes the first row
+    await page.locator(`${ROWS}`).nth(1).locator('button', { hasText: '↑' }).click();
+    await expect.poll(
+      () => page.locator(`${ROWS}`).first().innerText(), { timeout: 15000 }
+    ).toContain('A Heading');
+    await expect(page.locator(ROWS)).toHaveCount(2);
+
+    // REMOVE the first row (A Heading) -> one row remains (First block)
+    await page.locator(`${ROWS}`).first().locator('button', { hasText: 'remove' }).click();
+    await expect.poll(() => page.locator(ROWS).count(), { timeout: 15000 }).toBe(1);
+    await expect(page.locator(BE)).toContainText('First block');
+    await expect(page.locator(BE)).not.toContainText('A Heading');
+  });
+});
--- a/lib/host/playwright/run-block-check.sh
+++ b/lib/host/playwright/run-block-check.sh
@@ -0,0 +1,65 @@
+#!/usr/bin/env bash
+# Browser check for the BLOCK EDITOR (composition step 6). Spins up an EPHEMERAL host
+# server (this worktree's binary + lib, a temp persist dir), seeds ONE editable host post,
+# runs lib/host/playwright/block-editor.spec.js in the main worktree's Playwright, then
+# tears everything down. No live-site dependency, no live-data pollution.
+#
+#   bash lib/host/playwright/run-block-check.sh
+#
+# Requires: the OCaml binary built (hosts/ocaml/_build/default/bin/sx_server.exe)
+# and Playwright + chromium in /root/rose-ash (the architecture worktree).
+set -uo pipefail
+cd "$(git rev-parse --show-toplevel)"
+ROOT=$(pwd)
+
+PORT="${BLOCK_PORT:-8913}"
+PW_DIR="${PW_DIR:-/root/rose-ash}"          # worktree that has node_modules + chromium
+USER="admin"
+PASS="block-check-pw"
+SECRET="block-check-secret"
+PDIR=$(mktemp -d)
+JAR=$(mktemp)
+SPEC_SRC="lib/host/playwright/block-editor.spec.js"
+SPEC_DST="$PW_DIR/tests/playwright/_block-check.spec.js"
+SERVE_LOG=$(mktemp)
+
+cleanup() {
+  [ -n "${SVPID:-}" ] && kill "$SVPID" 2>/dev/null
+  local pid
+  pid=$(ss -lptn "sport = :$PORT" 2>/dev/null | grep -oE 'pid=[0-9]+' | head -1 | cut -d= -f2)
+  [ -n "$pid" ] && kill "$pid" 2>/dev/null
+  rm -f "$SPEC_DST" "$JAR" "$SERVE_LOG"
+  rm -rf "$PDIR"
+}
+trap cleanup EXIT
+
+echo "== starting ephemeral host server on :$PORT (persist=$PDIR) =="
+# SX_SERVING_JIT=1 matches the live container (gates the http-listen IO resolver).
+SX_SERVING_JIT=1 HOST_PORT="$PORT" SX_PERSIST_DIR="$PDIR" \
+  SX_ADMIN_USER="$USER" SX_ADMIN_PASSWORD="$PASS" SX_SESSION_SECRET="$SECRET" \
+  bash lib/host/serve.sh >"$SERVE_LOG" 2>&1 &
+SVPID=$!
+
+for i in $(seq 1 60); do
+  curl -sf -o /dev/null "http://127.0.0.1:$PORT/health" 2>/dev/null && break
+  sleep 1
+  [ "$i" = "60" ] && { echo "server never came up:"; cat "$SERVE_LOG"; exit 1; }
+done
+echo "== server up =="
+
+echo "== seeding 1 editable host post (block-host) =="
+curl -s -c "$JAR" -o /dev/null -X POST "http://127.0.0.1:$PORT/login" \
+  --data "username=$USER&password=$PASS"
+curl -s -b "$JAR" -o /dev/null -X POST "http://127.0.0.1:$PORT/new" \
+  --data 'title=Block Host&sx_content=(p "host")&status=published'
+
+echo "== running Playwright =="
+cp "$ROOT/$SPEC_SRC" "$SPEC_DST"
+cd "$PW_DIR"
+SX_TEST_URL="http://127.0.0.1:$PORT" SX_ADMIN_USER="$USER" SX_ADMIN_PASSWORD="$PASS" \
+  node_modules/.bin/playwright test _block-check.spec.js --workers=1 \
+  --config tests/playwright/playwright.config.js
+RC=$?
+
+echo "== done (exit $RC) =="
+exit $RC