coop/rose-ash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add sx:ready hydration signal, eliminate test sleeps

Browse Source 
boot-init now sets data-sx-ready on <html> and dispatches an sx:ready
CustomEvent after all islands are hydrated. Playwright tests use this
instead of networkidle + hard-coded sleeps (50+ seconds eliminated).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
giles
2026-03-30 12:47:52 +00:00
parent fffb5ab0b5
commit e14947cedc
12 changed files with 131 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
tests/playwright/handler-responses.spec.js
View File

@@ -1,11 +1,10 @@
const { test, expect } = require('playwright/test');
const BASE_URL = process.env.SX_TEST_URL || 'http://localhost:8013';
const { loadPage } = require('./helpers');
test.describe('Handler responses render correctly', () => {
test('bulk-update: deactivate renders proper HTML attributes', async ({ page }) => {
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example.bulk-update)))', { waitUntil: 'networkidle' });
await page.waitForTimeout(2000);
await loadPage(page, '(geography.(hypermedia.(example.bulk-update)))');
// Check first row, note its status
const firstCheckbox = page.locator('input[type="checkbox"]').first();
@@ -13,7 +12,7 @@ test.describe('Handler responses render correctly', () => {
// Click Deactivate
await page.locator('button:has-text("Deactivate")').first().click();
await page.waitForTimeout(3000);
await page.waitForTimeout(2000);
// The table should still have proper HTML — no raw "class" text visible
const tableText = await page.locator('table').first().textContent();
@@ -28,8 +27,7 @@ test.describe('Handler responses render correctly', () => {
});
test('delete-row: response renders with proper HTML classes', async ({ page }) => {
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example.delete-row)))', { waitUntil: 'networkidle' });
await page.waitForTimeout(2000);
await loadPage(page, '(geography.(hypermedia.(example.delete-row)))');
// Table should have proper class attrs, not text
const tableText = await page.locator('table').first().textContent();
@@ -38,7 +36,7 @@ test.describe('Handler responses render correctly', () => {
// Click delete and check response doesn't corrupt
await page.locator('button:has-text("Delete")').first().click();
await page.waitForTimeout(3000);
await page.waitForTimeout(2000);
const afterText = await page.locator('table').first().textContent();
expect(afterText).not.toContain('classpx');
@@ -46,14 +44,13 @@ test.describe('Handler responses render correctly', () => {
});
test('click-to-load: loaded rows have proper HTML', async ({ page }) => {
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example.click-to-load)))', { waitUntil: 'networkidle' });
await page.waitForTimeout(2000);
await loadPage(page, '(geography.(hypermedia.(example.click-to-load)))');
const rowsBefore = await page.locator('table tbody tr').count();
const loadBtn = page.locator('button:has-text("Load More")').first();
if (await loadBtn.count() > 0) {
await loadBtn.click();
await page.waitForTimeout(3000);
await page.waitForTimeout(2000);
const rowsAfter = await page.locator('table tbody tr').count();
expect(rowsAfter).toBeGreaterThan(rowsBefore);
@@ -66,12 +63,11 @@ test.describe('Handler responses render correctly', () => {
});
test('active-search: results render as proper HTML', async ({ page }) => {
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example.active-search)))', { waitUntil: 'networkidle' });
await page.waitForTimeout(2000);
await loadPage(page, '(geography.(hypermedia.(example.active-search)))');
const input = page.locator('input[placeholder*="earch"], input[name="q"]').first();
await input.fill('python');
await page.waitForTimeout(3000);
await page.waitForTimeout(2000);
const results = page.locator('#search-results');
const text = await results.textContent();
@@ -81,8 +77,7 @@ test.describe('Handler responses render correctly', () => {
});
test('form-submission: response renders as HTML not SX text', async ({ page }) => {
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example.form-submission)))', { waitUntil: 'networkidle' });
await page.waitForTimeout(2000);
await loadPage(page, '(geography.(hypermedia.(example.form-submission)))');
const form = page.locator('form').first();
const inputs = form.locator('input[type="text"], input:not([type])');
@@ -92,7 +87,7 @@ test.describe('Handler responses render correctly', () => {
const submit = form.locator('button[type="submit"], button').first();
await submit.click();
await page.waitForTimeout(3000);
await page.waitForTimeout(2000);
// Response should not have raw SX class text
const root = page.locator('#sx-root');
@@ -102,13 +97,12 @@ test.describe('Handler responses render correctly', () => {
});
test('edit-row: edited row renders with proper classes', async ({ page }) => {
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example.edit-row)))', { waitUntil: 'networkidle' });
await page.waitForTimeout(2000);
await loadPage(page, '(geography.(hypermedia.(example.edit-row)))');
const editBtn = page.locator('button:has-text("Edit")').first();
if (await editBtn.count() > 0) {
await editBtn.click();
await page.waitForTimeout(2000);
await page.waitForTimeout(1000);
// Edit form or inline edit should not show raw class text
const root = page.locator('#sx-root');
@@ -118,14 +112,13 @@ test.describe('Handler responses render correctly', () => {
});
test('tabs: tab content renders as proper HTML', async ({ page }) => {
await page.goto(BASE_URL + '/sx/(geography.(hypermedia.(example.tabs)))', { waitUntil: 'networkidle' });
await page.waitForTimeout(2000);
await loadPage(page, '(geography.(hypermedia.(example.tabs)))');
// Click a tab
const tabs = page.locator('[sx-get*="tab"]');
if (await tabs.count() >= 2) {
await tabs.nth(1).click();
await page.waitForTimeout(2000);
await page.waitForTimeout(1000);
const root = page.locator('#sx-root');
const text = await root.textContent();