From f804a71726de08d997fec2f9d3176ca14df03b45 Mon Sep 17 00:00:00 2001 From: giles Date: Wed, 1 Jul 2026 05:20:52 +0000 Subject: [PATCH] =?UTF-8?q?host:=20block=20editor=20live-swap=20=E2=80=94?= =?UTF-8?q?=20:sx-post=20(not=20sx-disable)=20+=20a=20Playwright=20check?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- lib/host/blog.sx | 5 +- lib/host/playwright/block-editor.spec.js | 70 ++++++++++++++++++++++++ lib/host/playwright/run-block-check.sh | 65 ++++++++++++++++++++++ 3 files changed, 139 insertions(+), 1 deletion(-) create mode 100644 lib/host/playwright/block-editor.spec.js create mode 100755 lib/host/playwright/run-block-check.sh diff --git a/lib/host/blog.sx b/lib/host/blog.sx index 401db6ad..82d08658 100644 --- a/lib/host/blog.sx +++ b/lib/host/blog.sx @@ -1352,8 +1352,11 @@ (fn (slug cslug action dir label) (let ((url (str "/" slug "/blocks/" cslug "/" action))) (quasiquote + ;; :sx-post (NOT sx-disable) so the click is a text/sx form round-trip through the + ;; engine — the handler returns the re-rendered #block-editor and sx-swap="outerHTML" + ;; replaces it live (no reload). The explicit :sx-post overrides any boost target. (form :method "post" :action (unquote url) :style "display:inline;margin:0" - :sx-post (unquote url) :sx-target "#block-editor" :sx-swap "outerHTML" :sx-disable "true" + :sx-post (unquote url) :sx-target "#block-editor" :sx-swap "outerHTML" (unquote (if (= dir "") "" (quasiquote (input :type "hidden" :name "dir" :value (unquote dir))))) (button :type "submit" (unquote label))))))) (define host/blog--block-row diff --git a/lib/host/playwright/block-editor.spec.js b/lib/host/playwright/block-editor.spec.js new file mode 100644 index 00000000..ea337041 --- /dev/null +++ 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'); + }); +}); diff --git a/lib/host/playwright/run-block-check.sh b/lib/host/playwright/run-block-check.sh new file mode 100755 index 00000000..06aa82d3 --- /dev/null +++ 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