giles
b21ae05e8f
Some checks failed
Test, Build, and Deploy / test-build-deploy (push) Failing after 34s
The declarative picker markup is now a reusable SX component
(lib/host/sx/relate-picker.sx, defcomp ~relate-picker &key slug kind) instead of
inline markup in the editor. It is a CONTENT-ADDRESSED, CLIENT-EXPANDED component:
- Server: on a full page load render-page expands ~relate-picker server-side
(SEO / no-JS), exactly as before.
- Client: on a boosted SPA nav the edit body serialises to the compact
(~relate-picker :slug … :kind …), and the CLIENT expands it. The component
module is compiled to a content-addressed .sxbc, served immutably from
/sx/h/{hash}, and listed in the page's data-sx-manifest "boot" array so the
client eager-loads it after the web stack — registering its defcomp before any
boosted fragment references it.
Wiring:
- lib/host/sx/relate-picker.sx — the component.
- lib/host/blog.sx — editor emits (~relate-picker :slug s :kind k); the inline
form markup is gone.
- lib/host/static.sx — host/static-manifest-json emits boot:["relate-picker.sxbc"]
(the previously-empty boot array, now used as designed).
- hosts/ocaml/browser/sx-platform.js — loadWebStack eager-loads the page manifest's
boot[] modules (content-addressed) after the web stack.
- bundle.sh + compile-modules.js — copy/compile the component to .sxbc.
- serve.sh + conformance.sh — load the component module server-side.
This gives the host an app-component system: app defcomps shipped to the client by
hash, the same machinery as the kernel modules — the picker is the first, and it's
the model for publishing components externally.
Tests: conformance 272/272 (server expansion); relate-picker.spec.js 6/6 incl. the
boosted-nav populate (proves client-side component load + expansion) and the
error/retry case. WASM stack rebuilt (relate-picker.sxbc @ 6818110a).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
132 lines
7.4 KiB
JavaScript
132 lines
7.4 KiB
JavaScript
// Browser check for the relate picker (lib/host/blog.sx). Runs against an
|
|
// ephemeral host server seeded with a host post + 25 candidates by
|
|
// run-picker-check.sh, which copies this spec into the Playwright env and sets
|
|
// SX_TEST_URL. The picker is a DECLARATIVE SX-htmx form (no client JS): the form
|
|
// GETs /<slug>/relate-options on "load" and on a debounced "input", swapping the
|
|
// results <ul>; a full page carries a "load more" sentinel that pages on reveal.
|
|
// Exercises the login redirect, the initial populate, debounced filter, infinite
|
|
// scroll, click-to-relate, AND populate after a boosted SPA nav (the case the old
|
|
// inline <script> picker silently failed — a script never runs on swapped content).
|
|
const { test, expect } = require('playwright/test');
|
|
|
|
const USER = process.env.SX_ADMIN_USER || 'admin';
|
|
const PASS = process.env.SX_ADMIN_PASSWORD || 'letmein';
|
|
const HOST = 'picker-host'; // the post whose edit page we drive
|
|
const LIMIT = 20; // host/blog--picker-limit (one page)
|
|
// the Related picker box (the edit page now has one picker per kind)
|
|
const REL = '.relate-picker[data-kind="related"]';
|
|
const RELF = `${REL} .rp-filter`;
|
|
const RELR = `${REL} .rp-results`;
|
|
const RELROWS = `${RELR} li:not(.rp-more)`; // candidate rows (exclude the sentinel)
|
|
const MORE = `${RELR} .rp-more`; // the load-more sentinel
|
|
|
|
// boot-init marks <html data-sx-ready="true"> once the WASM kernel + web stack
|
|
// load. WASM compile + asset fetches, so allow generous time.
|
|
async function waitReady(page) {
|
|
await expect(page.locator('html[data-sx-ready="true"]')).toHaveCount(1, { timeout: 45000 });
|
|
}
|
|
|
|
// Navigate to a GUARDED path; the host redirects to /login?next=…, so fill the
|
|
// form and we should land back on the original path (exercises the auth flow).
|
|
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'));
|
|
}
|
|
|
|
// Log in directly (for reaching PUBLIC pages while authenticated).
|
|
async function login(page) {
|
|
await page.goto('/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'));
|
|
}
|
|
|
|
test.describe('relate picker', () => {
|
|
test('edit page has Related + Tags pickers and an is-a-tag toggle', async ({ page }) => {
|
|
await loginTo(page, `/${HOST}/edit`);
|
|
await expect(page).toHaveURL(new RegExp(`/${HOST}/edit`));
|
|
await expect(page.locator(RELF)).toBeVisible(); // Related picker
|
|
await expect(page.locator('.relate-picker[data-kind="tagged"] .rp-filter')).toBeVisible(); // Tags picker
|
|
await expect(page.getByRole('button', { name: 'Make this a tag' })).toBeVisible(); // toggle
|
|
});
|
|
|
|
test('picker populates on load and pages via the load-more sentinel', async ({ page }) => {
|
|
await loginTo(page, `/${HOST}/edit`);
|
|
await waitReady(page); // wait for the WASM kernel before the picker's "load" fires
|
|
const rows = page.locator(RELROWS);
|
|
// the declarative form's "load" trigger fills the first page (the populate fix)
|
|
await expect.poll(() => rows.count(), { timeout: 10000 }).toBeGreaterThanOrEqual(LIMIT);
|
|
// there are more candidates than one page, so reveal the sentinel (if it hasn't
|
|
// already auto-revealed) to page in the rest — robust to the exact total and to
|
|
// the sentinel starting above or below the fold.
|
|
const more = page.locator(MORE);
|
|
if (await more.count()) await more.first().scrollIntoViewIfNeeded();
|
|
await expect.poll(() => rows.count(), { timeout: 10000 }).toBeGreaterThan(LIMIT); // paged in more
|
|
});
|
|
|
|
test('typing in the filter narrows the candidates', async ({ page }) => {
|
|
await loginTo(page, `/${HOST}/edit`);
|
|
await waitReady(page);
|
|
await expect.poll(() => page.locator(RELROWS).count(), { timeout: 10000 }).toBeGreaterThan(0);
|
|
await page.fill(RELF, 'Item 13');
|
|
await expect.poll(() => page.locator(RELROWS).count(), { timeout: 10000 }).toBe(1);
|
|
await expect(page.locator(RELR)).toContainText('Picker Item 13');
|
|
});
|
|
|
|
test('clicking a candidate relates it (and it shows on the post page)', async ({ page }) => {
|
|
// heavier than the others: a full-reload relate (sx-disable) then a goto to the
|
|
// post page — two WASM kernel boots — so it needs more than the 30s default.
|
|
test.setTimeout(75000);
|
|
await loginTo(page, `/${HOST}/edit`);
|
|
await waitReady(page);
|
|
await page.fill(RELF, 'Item 07');
|
|
await expect.poll(() => page.locator(RELROWS).count(), { timeout: 10000 }).toBe(1);
|
|
await page.locator(`${RELROWS} button`).first().click();
|
|
// form POST -> 303 back to the edit page; the related list now links the slug
|
|
await expect(page).toHaveURL(new RegExp(`/${HOST}/edit`));
|
|
await expect(page.locator('a[href="/picker-item-07/"]')).toHaveCount(1);
|
|
// and the public post page shows the Related posts block with the title
|
|
await page.goto(`/${HOST}/`);
|
|
await expect(page.getByRole('heading', { name: 'Related posts' })).toBeVisible();
|
|
await expect(page.locator('body')).toContainText('Picker Item 07');
|
|
});
|
|
|
|
test('picker populates after a boosted SPA nav to the edit page', async ({ page }) => {
|
|
// Reach the edit page by CLICKING its link (a boosted SPA nav), not page.goto.
|
|
// The old inline <script> picker never ran on swapped-in content, so the list
|
|
// stayed empty here. The declarative form's "load" trigger is re-bound by the
|
|
// engine on swap, so it populates — that's the regression this guards.
|
|
await login(page);
|
|
await page.goto(`/${HOST}/`); // public post page, logged in
|
|
await waitReady(page);
|
|
await page.evaluate(() => { window.__noReload = true; });
|
|
await page.locator(`a[href="/${HOST}/edit"]`).first().click();
|
|
await page.waitForURL((u) => u.pathname === `/${HOST}/edit`, { timeout: 15000 });
|
|
expect(await page.evaluate(() => window.__noReload)).toBe(true); // it was a SPA nav, no full reload
|
|
// the picker, brought in by the swap, loaded its first page of candidates
|
|
await expect.poll(() => page.locator(RELROWS).count(), { timeout: 12000 }).toBeGreaterThanOrEqual(1);
|
|
await expect(page.locator(RELR)).toContainText('Picker Item');
|
|
});
|
|
|
|
test('a dropped relate-options fetch shows a visible error/retry state', async ({ page }) => {
|
|
// Simulate the connection dropping for the candidate endpoint. The engine's
|
|
// fetch rejects -> it marks .sx-error on the picker (and keeps retrying), so a
|
|
// stuck/offline picker is VISIBLE instead of an endless silent "Loading…".
|
|
await page.route('**/relate-options*', (route) => route.abort());
|
|
await loginTo(page, `/${HOST}/edit`);
|
|
await waitReady(page);
|
|
// the filter form's "load" fetch fails -> .sx-error lands on the picker form
|
|
await expect(page.locator(`${REL}.sx-error`)).toHaveCount(1, { timeout: 12000 });
|
|
// and recovery: once the endpoint works again, the next retry clears the error
|
|
// and populates (proves the retry loop is live, not a dead end).
|
|
await page.unroute('**/relate-options*');
|
|
await expect(page.locator(`${REL}.sx-error`)).toHaveCount(0, { timeout: 35000 });
|
|
await expect.poll(() => page.locator(RELROWS).count(), { timeout: 12000 }).toBeGreaterThan(0);
|
|
});
|
|
});
|