129 lines
3.8 KiB
TypeScript
129 lines
3.8 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
/**
|
|
* Hydration Tests
|
|
* Ensures React hydration works correctly without errors
|
|
*/
|
|
test.describe('Hydration Tests', () => {
|
|
test('No hydration errors in console', async ({ page }) => {
|
|
const consoleErrors: string[] = [];
|
|
const consoleWarnings: string[] = [];
|
|
|
|
// Capture console messages
|
|
page.on('console', (msg) => {
|
|
const text = msg.text();
|
|
if (msg.type() === 'error') {
|
|
consoleErrors.push(text);
|
|
} else if (msg.type() === 'warning') {
|
|
consoleWarnings.push(text);
|
|
}
|
|
});
|
|
|
|
// Navigate to home page
|
|
await page.goto('/', { waitUntil: 'networkidle' });
|
|
await page.waitForLoadState('domcontentloaded');
|
|
|
|
// Check for hydration errors
|
|
const hydrationErrors = consoleErrors.filter(error =>
|
|
error.includes('Hydration') ||
|
|
error.includes('hydration') ||
|
|
error.includes('Text content does not match') ||
|
|
error.includes('Expected server HTML')
|
|
);
|
|
|
|
expect(hydrationErrors.length).toBe(0);
|
|
|
|
// Log warnings for review (but don't fail)
|
|
if (consoleWarnings.length > 0) {
|
|
console.log('Console warnings:', consoleWarnings);
|
|
}
|
|
});
|
|
|
|
test('No duplicate React key warnings', async ({ page }) => {
|
|
const consoleWarnings: string[] = [];
|
|
|
|
page.on('console', (msg) => {
|
|
if (msg.type() === 'warning') {
|
|
const text = msg.text();
|
|
if (text.includes('key') || text.includes('duplicate')) {
|
|
consoleWarnings.push(text);
|
|
}
|
|
}
|
|
});
|
|
|
|
await page.goto('/');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Check for duplicate key warnings
|
|
const keyWarnings = consoleWarnings.filter(warning =>
|
|
warning.includes('key') && warning.includes('duplicate')
|
|
);
|
|
|
|
expect(keyWarnings.length).toBe(0);
|
|
});
|
|
|
|
test('Client-side navigation works without hydration errors', async ({ page }) => {
|
|
const consoleErrors: string[] = [];
|
|
|
|
page.on('console', (msg) => {
|
|
if (msg.type() === 'error') {
|
|
consoleErrors.push(msg.text());
|
|
}
|
|
});
|
|
|
|
await page.goto('/', { waitUntil: 'networkidle' });
|
|
await page.waitForLoadState('domcontentloaded');
|
|
|
|
// Navigate to projects page via link
|
|
const projectsLink = page.locator('a[href="/projects"], a[href*="projects"]').first();
|
|
if (await projectsLink.count() > 0) {
|
|
await projectsLink.click();
|
|
await page.waitForLoadState('domcontentloaded');
|
|
|
|
// Check for errors after navigation
|
|
const hydrationErrors = consoleErrors.filter(error =>
|
|
error.includes('Hydration') || error.includes('hydration')
|
|
);
|
|
|
|
expect(hydrationErrors.length).toBe(0);
|
|
}
|
|
});
|
|
|
|
test('Server and client HTML match', async ({ page }) => {
|
|
await page.goto('/');
|
|
|
|
// Get initial HTML
|
|
const initialHTML = await page.content();
|
|
|
|
// Wait for React to hydrate
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Get HTML after hydration
|
|
const hydratedHTML = await page.content();
|
|
|
|
// Basic check: main structure should be similar
|
|
// (exact match is hard due to dynamic content)
|
|
expect(hydratedHTML.length).toBeGreaterThan(0);
|
|
expect(initialHTML.length).toBeGreaterThan(0);
|
|
});
|
|
|
|
test('Interactive elements work after hydration', async ({ page }) => {
|
|
await page.goto('/');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Try to find and click interactive elements
|
|
const buttons = page.locator('button, a[role="button"]');
|
|
const buttonCount = await buttons.count();
|
|
|
|
if (buttonCount > 0) {
|
|
const firstButton = buttons.first();
|
|
await expect(firstButton).toBeVisible();
|
|
|
|
// Try clicking (should not throw)
|
|
await firstButton.click().catch(() => {
|
|
// Some buttons might be disabled, that's OK
|
|
});
|
|
}
|
|
});
|
|
});
|