host/tests: Phase 2 — trim Playwright to a boot smoke
The picker's per-behaviour browser tests are now SX engine tests
(web/tests/test-relate-picker.sx) + SX conformance (lib/host/tests/blog.sx), so
delete them from Playwright and keep only what needs a real boosted-SPA browser:
spa-check.spec.js (3): WASM kernel boots + loads modules CONTENT-ADDRESSED
(/sx/h/{hash} fetches, zero path-.sxbc fallback — new assertion) + marks
ready; a boosted nav fragment-swaps #content (raw! HTML path); back/re-boost.
relate-picker.spec.js (2): the bind-boost-form remove button; the picker
re-binds its load trigger on content brought in by a boosted SPA nav.
Net: 11 browser tests -> 5. Both ephemeral-host suites verified green
(run-spa-check.sh 3/3, run-picker-check.sh 2/2).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,24 +1,27 @@
|
|||||||
// Browser check for the relate picker (lib/host/blog.sx). Runs against an
|
// Browser check for the relate picker (lib/host/blog.sx). Runs against an
|
||||||
// ephemeral host server seeded with a host post + 25 candidates by
|
// 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
|
// 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
|
// SX_TEST_URL.
|
||||||
// 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.
|
// TRIMMED to the irreducibly-real-browser cases. The picker's interactive
|
||||||
// Exercises the login redirect, the initial populate, debounced filter, infinite
|
// behaviours — populate-on-load, debounced filter, sentinel paging, relate→delete
|
||||||
// scroll, click-to-relate, AND populate after a boosted SPA nav (the case the old
|
// row, error/retry visible state — are now SX engine tests in
|
||||||
// inline <script> picker silently failed — a script never runs on swapped content).
|
// web/tests/test-relate-picker.sx (they drive the SAME engine against a mock DOM,
|
||||||
|
// no Chromium). Its server contract + persistence are SX conformance tests in
|
||||||
|
// lib/host/tests/blog.sx. What remains here needs a live boosted-SPA browser:
|
||||||
|
// 1. a boosted form POST swaps in place (bind-boost-form regression), and
|
||||||
|
// 2. the picker re-binds its triggers on content brought in by a boosted SPA
|
||||||
|
// nav (the case an inline <script> picker silently failed).
|
||||||
const { test, expect } = require('playwright/test');
|
const { test, expect } = require('playwright/test');
|
||||||
|
|
||||||
const USER = process.env.SX_ADMIN_USER || 'admin';
|
const USER = process.env.SX_ADMIN_USER || 'admin';
|
||||||
const PASS = process.env.SX_ADMIN_PASSWORD || 'letmein';
|
const PASS = process.env.SX_ADMIN_PASSWORD || 'letmein';
|
||||||
const HOST = 'picker-host'; // the post whose edit page we drive
|
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)
|
// the Related picker box (the edit page now has one picker per kind)
|
||||||
const REL = '.relate-picker[data-kind="related"]';
|
const REL = '.relate-picker[data-kind="related"]';
|
||||||
const RELF = `${REL} .rp-filter`;
|
const RELF = `${REL} .rp-filter`;
|
||||||
const RELR = `${REL} .rp-results`;
|
const RELR = `${REL} .rp-results`;
|
||||||
const RELROWS = `${RELR} li:not(.rp-more)`; // candidate rows (exclude the sentinel)
|
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
|
// boot-init marks <html data-sx-ready="true"> once the WASM kernel + web stack
|
||||||
// load. WASM compile + asset fetches, so allow generous time.
|
// load. WASM compile + asset fetches, so allow generous time.
|
||||||
@@ -46,57 +49,7 @@ async function login(page) {
|
|||||||
await page.waitForURL((u) => !u.pathname.startsWith('/login'));
|
await page.waitForURL((u) => !u.pathname.startsWith('/login'));
|
||||||
}
|
}
|
||||||
|
|
||||||
test.describe('relate picker', () => {
|
test.describe('relate picker (browser-only)', () => {
|
||||||
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 removes just that row (no reload)', async ({ page }) => {
|
|
||||||
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);
|
|
||||||
// sentinel survives ONLY if there is no full-page reload
|
|
||||||
await page.evaluate(() => { window.__noReload = true; });
|
|
||||||
await page.locator(`${RELROWS} button`).first().click();
|
|
||||||
// the AJAX relate deletes just that candidate row in place — no reload, no
|
|
||||||
// candidate-list refetch
|
|
||||||
await expect.poll(() => page.locator(RELROWS).count(), { timeout: 10000 }).toBe(0);
|
|
||||||
expect(await page.evaluate(() => window.__noReload)).toBe(true);
|
|
||||||
// and the relation actually persisted (shows on the public post page)
|
|
||||||
await page.goto(`/${HOST}/`);
|
|
||||||
await expect(page.getByRole('heading', { name: 'Related posts' })).toBeVisible();
|
|
||||||
await expect(page.locator('body')).toContainText('Picker Item 07');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('the remove button on a current relation actually unrelates it', async ({ page }) => {
|
test('the remove button on a current relation actually unrelates it', async ({ page }) => {
|
||||||
test.setTimeout(75000);
|
test.setTimeout(75000);
|
||||||
await loginTo(page, `/${HOST}/edit`);
|
await loginTo(page, `/${HOST}/edit`);
|
||||||
@@ -132,20 +85,4 @@ test.describe('relate picker', () => {
|
|||||||
await expect.poll(() => page.locator(RELROWS).count(), { timeout: 12000 }).toBeGreaterThanOrEqual(1);
|
await expect.poll(() => page.locator(RELROWS).count(), { timeout: 12000 }).toBeGreaterThanOrEqual(1);
|
||||||
await expect(page.locator(RELR)).toContainText('Picker Item');
|
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);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -17,8 +17,18 @@ async function waitReady(page) {
|
|||||||
const POSTLINK = '#content a[href$="/"]';
|
const POSTLINK = '#content a[href$="/"]';
|
||||||
|
|
||||||
test.describe('blog SPA', () => {
|
test.describe('blog SPA', () => {
|
||||||
test('WASM kernel boots and marks the document ready', async ({ page }) => {
|
test('WASM kernel boots, loads modules content-addressed, marks ready', async ({ page }) => {
|
||||||
const errors = [];
|
const errors = [];
|
||||||
|
// Track web-stack module fetches: content-addressed (/sx/h/{hash}) vs the
|
||||||
|
// path-based .sxbc fallback. A correctly-booting client takes ONLY the
|
||||||
|
// content-addressed branch (immutable, localStorage-cached).
|
||||||
|
const caFetches = []; // /sx/h/{hash}
|
||||||
|
const pathSxbc = []; // *.sxbc by path (the fallback — should not happen)
|
||||||
|
page.on('request', (r) => {
|
||||||
|
const u = r.url();
|
||||||
|
if (u.includes('/sx/h/')) caFetches.push(u);
|
||||||
|
else if (/\.sxbc(\?|$)/.test(u)) pathSxbc.push(u);
|
||||||
|
});
|
||||||
page.on('console', (m) => { if (m.type() === 'error') errors.push(m.text()); });
|
page.on('console', (m) => { if (m.type() === 'error') errors.push(m.text()); });
|
||||||
page.on('pageerror', (e) => errors.push(String(e)));
|
page.on('pageerror', (e) => errors.push(String(e)));
|
||||||
await page.goto('/');
|
await page.goto('/');
|
||||||
@@ -26,19 +36,13 @@ test.describe('blog SPA', () => {
|
|||||||
// the shell shipped the WASM loaders
|
// the shell shipped the WASM loaders
|
||||||
expect(await page.locator('script[src*="sx_browser.bc.wasm.js"]').count()).toBe(1);
|
expect(await page.locator('script[src*="sx_browser.bc.wasm.js"]').count()).toBe(1);
|
||||||
expect(await page.locator('script[src*="sx-platform.js"]').count()).toBe(1);
|
expect(await page.locator('script[src*="sx-platform.js"]').count()).toBe(1);
|
||||||
|
// modules loaded by content hash, with no path-.sxbc fallback fetches
|
||||||
|
expect(caFetches.length, 'expected content-addressed /sx/h/ module fetches').toBeGreaterThan(0);
|
||||||
|
expect(pathSxbc, `path-based .sxbc fallback fetched:\n${pathSxbc.join('\n')}`).toEqual([]);
|
||||||
// no boot-time JS errors
|
// no boot-time JS errors
|
||||||
expect(errors, errors.join('\n')).toEqual([]);
|
expect(errors, errors.join('\n')).toEqual([]);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('links inside #content get boosted', async ({ page }) => {
|
|
||||||
await page.goto('/');
|
|
||||||
await waitReady(page);
|
|
||||||
// the engine marks a boosted link with the _sxBoundboost JS property
|
|
||||||
await expect
|
|
||||||
.poll(() => page.locator(POSTLINK).first().evaluate((a) => !!a._sxBoundboost), { timeout: 15000 })
|
|
||||||
.toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('clicking a link does a fragment swap — no full reload, URL updates', async ({ page }) => {
|
test('clicking a link does a fragment swap — no full reload, URL updates', async ({ page }) => {
|
||||||
await page.goto('/');
|
await page.goto('/');
|
||||||
await waitReady(page);
|
await waitReady(page);
|
||||||
|
|||||||
Reference in New Issue
Block a user