60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
const BASE_URL = 'http://localhost:5173';
|
|
|
|
test.describe('Component Playground', () => {
|
|
test('playground route loads and shows component selector', async ({ page }) => {
|
|
// Listen for console errors
|
|
const errors: string[] = [];
|
|
page.on('console', msg => {
|
|
if (msg.type() === 'error') errors.push(msg.text());
|
|
});
|
|
|
|
await page.goto(`${BASE_URL}/playground`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Take screenshot immediately after load to see what is actually there
|
|
await page.screenshot({ path: 'playground_debug_load.png' });
|
|
|
|
if (errors.length > 0) {
|
|
console.log('Console errors detected:', errors);
|
|
}
|
|
|
|
// Check heading using a more flexible approach
|
|
const heading = page.getByRole('heading', { name: /Component Playground/i });
|
|
await expect(heading).toBeVisible();
|
|
|
|
// Check if dropdown exists and is visible
|
|
const select = page.locator('select#component-select');
|
|
await expect(select).toBeVisible();
|
|
|
|
// Check if it has options (besides the placeholder)
|
|
const optionCount = await select.locator('option').count();
|
|
expect(optionCount).toBeGreaterThan(1);
|
|
|
|
// Take screenshot for visual confirmation
|
|
await page.screenshot({ path: 'playground_loaded.png' });
|
|
});
|
|
|
|
test('selecting a component renders it', async ({ page }) => {
|
|
await page.goto(`${BASE_URL}/playground`);
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
const select = page.locator('select#component-select');
|
|
|
|
// Select 'StatusBanner' (assuming it is the first one in registry after placeholder)
|
|
await select.selectOption({ label: 'StatusBanner' });
|
|
|
|
// Check if the main area is no longer showing "No component selected"
|
|
const emptyState = page.locator('text=No component selected');
|
|
await expect(emptyState).not.toBeVisible();
|
|
|
|
// Verify footer shows correct component name
|
|
const footer = page.locator('footer');
|
|
await expect(footer).toContainText('StatusBanner');
|
|
|
|
// Take screenshot of rendered component
|
|
await page.screenshot({ path: 'playground_component_rendered.png' });
|
|
});
|
|
});
|