giles
5c8b05a66f
The stepper SSR output IS correct (273 bytes, identical to Quart, no raw ~cssx/tw). The test was checking textContent which included text outside the island boundary (the code-view documentation text). Fixed to check innerHTML for HTML elements and class attributes. 5/5 island SSR tests pass. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
106 lines
4.0 KiB
JavaScript
106 lines
4.0 KiB
JavaScript
// Island SSR tests — verify islands render content server-side
|
|
// These tests disable JavaScript to verify pure SSR output.
|
|
|
|
const { test, expect } = require('playwright/test');
|
|
const BASE_URL = process.env.SX_TEST_URL || 'http://localhost:8013';
|
|
|
|
test.describe('Island SSR', () => {
|
|
|
|
test('header island renders logo and tagline without JavaScript', async ({ browser }) => {
|
|
const context = await browser.newContext({ javaScriptEnabled: false });
|
|
const page = await context.newPage();
|
|
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'domcontentloaded' });
|
|
|
|
// The header island should contain rendered HTML, not empty
|
|
const header = page.locator('[data-sx-island="layouts/header"]');
|
|
await expect(header).not.toBeEmpty();
|
|
|
|
// Should contain the logo text
|
|
const headerText = await header.textContent();
|
|
expect(headerText).toContain('sx');
|
|
|
|
// Should contain the tagline
|
|
expect(headerText).toContain('reactive');
|
|
|
|
// Should contain copyright
|
|
expect(headerText).toContain('Giles Bradshaw');
|
|
|
|
await context.close();
|
|
});
|
|
|
|
test('header island has styled elements without JavaScript', async ({ browser }) => {
|
|
const context = await browser.newContext({ javaScriptEnabled: false });
|
|
const page = await context.newPage();
|
|
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'domcontentloaded' });
|
|
|
|
// The header should have actual HTML elements, not raw SX text
|
|
const header = page.locator('[data-sx-island="layouts/header"]');
|
|
const links = await header.locator('a').count();
|
|
expect(links).toBeGreaterThan(0);
|
|
|
|
// Should NOT contain raw SX calls
|
|
const text = await header.textContent();
|
|
expect(text).not.toContain('(~');
|
|
expect(text).not.toContain(':tokens');
|
|
|
|
await context.close();
|
|
});
|
|
|
|
test('home stepper island renders content without JavaScript', async ({ browser }) => {
|
|
const context = await browser.newContext({ javaScriptEnabled: false });
|
|
const page = await context.newPage();
|
|
await page.goto(BASE_URL + '/sx/', { waitUntil: 'domcontentloaded' });
|
|
|
|
// The stepper island should contain rendered HTML
|
|
const stepper = page.locator('[data-sx-island="home/stepper"]');
|
|
await expect(stepper).not.toBeEmpty();
|
|
|
|
// Should have actual content — not be 0 bytes
|
|
const html = await stepper.innerHTML();
|
|
expect(html.length).toBeGreaterThan(10);
|
|
|
|
// SSR should produce actual HTML elements, not raw SX
|
|
// The stepper has a code-view div with styled spans
|
|
expect(html).toContain('<div');
|
|
expect(html).toContain('class=');
|
|
|
|
await context.close();
|
|
});
|
|
|
|
test('island SSR includes navigation buttons', async ({ browser }) => {
|
|
const context = await browser.newContext({ javaScriptEnabled: false });
|
|
const page = await context.newPage();
|
|
await page.goto(BASE_URL + '/sx/', { waitUntil: 'domcontentloaded' });
|
|
|
|
// Navigation buttons should be rendered server-side
|
|
const navLinks = page.locator('a[href*="/sx/("]');
|
|
const count = await navLinks.count();
|
|
expect(count).toBeGreaterThan(3);
|
|
|
|
// At least Geography, Language, Applications should be visible
|
|
const bodyText = await page.textContent('body');
|
|
expect(bodyText).toContain('Geography');
|
|
expect(bodyText).toContain('Language');
|
|
expect(bodyText).toContain('Applications');
|
|
|
|
await context.close();
|
|
});
|
|
|
|
test('geography page renders full content without JavaScript', async ({ browser }) => {
|
|
const context = await browser.newContext({ javaScriptEnabled: false });
|
|
const page = await context.newPage();
|
|
await page.goto(BASE_URL + '/sx/(geography)', { waitUntil: 'domcontentloaded' });
|
|
|
|
// Main content should have the Geography heading
|
|
const heading = page.locator('h1, h2');
|
|
await expect(heading.first()).toContainText('Geography');
|
|
|
|
// Should have the Rendering Pipeline section
|
|
const body = await page.textContent('body');
|
|
expect(body).toContain('Rendering Pipeline');
|
|
expect(body).toContain('OCaml');
|
|
|
|
await context.close();
|
|
});
|
|
});
|