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>
This commit is contained in:
@@ -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
|
||||
|
||||
70
lib/host/playwright/block-editor.spec.js
Normal file
70
lib/host/playwright/block-editor.spec.js
Normal file
@@ -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');
|
||||
});
|
||||
});
|
||||
65
lib/host/playwright/run-block-check.sh
Executable file
65
lib/host/playwright/run-block-check.sh
Executable file
@@ -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
|
||||
Reference in New Issue
Block a user