Not sure what happened here...

2026-05-27 09:53:44 +02:00
parent 648d376a12
commit 7cef6da5f2
33 changed files with 664 additions and 191 deletions
@@ -0,0 +1,59 @@
+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' });
+  });
+});
@@ -0,0 +1,56 @@
+import { test, expect } from '@playwright/test';
+
+const BASE_URL = 'http://localhost:5173';
+
+test.describe('Exhaustive Component Playground Tests', () => {
+  test('every component in playground should render without console errors', async ({ page }) => {
+    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');
+
+    const select = page.locator('select#component-select');
+    await expect(select).toBeVisible();
+
+    const optionCount = await select.locator('option').count();
+    // The first option is '-- Select a Component --', so we iterate from index 1
+     for (let i = 1; i < optionCount; i++) {
+       const optionName = await select.locator('option').nth(i).textContent();
+       if (!optionName) continue;
+
+       console.log(`Testing component: ${optionName}`);
+       
+       // Select the component
+       await select.selectOption({ index: i });
+       
+       // Wait for potential re-renders and data fetching (even if mocked)
+       await page.waitForTimeout(500); 
+       // Allow some time for useEffects and async mock injections to settle
+       await page.waitForLoadState('networkidle').catch(() => {});
+
+       // Log the current HTML to debug why footer is missing
+       const html = await page.content();
+       console.log(`Current HTML length: ${html.length}`);
+       if (!html.includes('id="playground-footer"')) {
+         console.log('CRITICAL: id="playground-footer" not found in HTML');
+       }
+
+       // Check if any errors were logged during the selection and render
+       if (errors.length > 0) {
+         // We check if the errors are actually related to the current component selection
+         // For simplicity in this exhaustive test, any console error is a failure.
+         throw new Error(`Console errors detected while rendering ${optionName}: ${errors.join(', ')}`);
+       }
+
+       // Verify footer updated correctly
+       const footer = page.locator('#playground-footer');
+       await expect(footer).toBeVisible();
+       await expect(footer).toContainText(optionName);
+     }
+
+    expect(errors.length).toBe(0);
+  });
+});