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

Fix defisland→Component bug in jinja_bridge; add island reactivity test

Browse Source 
jinja_bridge.py was creating Component objects for both defcomp AND
defisland forms. Islands need Island objects so the serializer emits
defisland (not defcomp) in the client component bundle. Without this,
client-side islands don't get data-sx-island attributes, hydration
fails, and all reactive signals (colour cycling, stepper) stop working.

Add Playwright test: islands hydrate, stepper buttons update count,
reactive colour cycling works on click.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
giles
2026-03-24 15:48:19 +00:00
parent 7434de53a6
commit e887c0d978
2 changed files with 61 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
tests/playwright/isomorphic.spec.js
View File

@@ -136,6 +136,28 @@ test.describe('Isomorphic SSR', () => {
await context.close();
});
test('islands hydrate and reactive signals work', async ({ page }) => {
await page.goto(BASE_URL + '/sx/', { waitUntil: 'networkidle' });
await page.waitForSelector('[data-sx-island="layouts/header"]', { timeout: 15000 });
await page.waitForSelector('[data-sx-island="home/stepper"]', { timeout: 5000 });
// Stepper buttons change the count
const stepper = page.locator('[data-sx-island="home/stepper"]');
const textBefore = await stepper.textContent();
await stepper.locator('button').last().click();
await page.waitForTimeout(300);
const textAfter = await stepper.textContent();
expect(textAfter).not.toBe(textBefore);
// Reactive colour cycling on "reactive" word
const reactive = page.locator('[data-sx-island="layouts/header"]').getByText('reactive');
const colourBefore = await reactive.evaluate(el => el.style.color);
await reactive.click();
await page.waitForTimeout(300);
const colourAfter = await reactive.evaluate(el => el.style.color);
expect(colourAfter).not.toBe(colourBefore);
});
test('navigation links have valid URLs (no [object Object])', async ({ page }) => {
await page.goto(BASE_URL + '/sx/', { waitUntil: 'networkidle' });
await page.waitForTimeout(1000);