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)
|
(fn (slug cslug action dir label)
|
||||||
(let ((url (str "/" slug "/blocks/" cslug "/" action)))
|
(let ((url (str "/" slug "/blocks/" cslug "/" action)))
|
||||||
(quasiquote
|
(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"
|
(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)))))
|
(unquote (if (= dir "") "" (quasiquote (input :type "hidden" :name "dir" :value (unquote dir)))))
|
||||||
(button :type "submit" (unquote label)))))))
|
(button :type "submit" (unquote label)))))))
|
||||||
(define host/blog--block-row
|
(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