microui-wc 0.1.0

package/tests/e2e/demo-routes.test.js

@@ -0,0 +1,478 @@
+/**
+ * @fileoverview E2E Tests for index-ultra.html demo routes
+ * 
+ * Tests all 20 routes to verify:
+ * 1. Route loads without errors
+ * 2. Components render correctly
+ * 3. Navigation works
+ * 4. No console errors
+ */
+
+import { describe, test, expect, beforeAll, afterAll } from 'bun:test';
+// Set cache dir BEFORE importing puppeteer (it reads env at import time)
+process.env.PUPPETEER_CACHE_DIR = '/tmp/puppeteer';
+import { launchBrowser, puppeteer } from './puppeteer-helper.js';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Helper to replace deprecated page.waitForTimeout
+const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+// All routes from index-ultra.html
+const DEMO_ROUTES = [
+    { hash: 'home', title: 'Home', component: null },
+    { hash: 'installation', title: 'Installation', component: null },
+    { hash: 'buttons', title: 'Buttons', component: 'mu-button' },
+    { hash: 'inputs', title: 'Inputs', component: 'mu-input' },
+    { hash: 'cards', title: 'Cards', component: 'mu-card' },
+    { hash: 'checkboxes', title: 'Checkboxes', component: 'mu-checkbox' },
+    { hash: 'switches', title: 'Switches', component: 'mu-switch' },
+    { hash: 'radios', title: 'Radios', component: 'mu-radio' },
+    { hash: 'dropdowns', title: 'Dropdowns', component: 'mu-dropdown' },
+    { hash: 'tabs', title: 'Tabs', component: 'mu-tabs' },
+    { hash: 'modals', title: 'Modals', component: 'mu-modal' },
+    { hash: 'alerts', title: 'Alerts', component: 'mu-alert' },
+    { hash: 'toasts', title: 'Toasts', component: 'mu-button' },  // Toast page shows buttons to trigger toasts
+    { hash: 'progress', title: 'Progress', component: 'mu-progress' },
+    { hash: 'layout', title: 'Layout', component: null },  // Layout page uses CSS grid utilities
+    { hash: 'navbar', title: 'Navbar', component: 'mu-navbar' },
+    { hash: 'avatars', title: 'Avatars', component: 'mu-avatar' },
+    { hash: 'badges', title: 'Badges', component: 'mu-badge' },
+    { hash: 'chips', title: 'Chips', component: 'mu-chip' },
+    { hash: 'icons', title: 'Icons', component: 'mu-icon' }
+];
+
+describe('Demo Routes E2E Tests', () => {
+    let browser;
+    let page;
+    let server;
+    const consoleErrors = [];
+
+    beforeAll(async () => {
+        const projectRoot = join(__dirname, '../..');
+
+        // Start HTTP server with proper MIME types
+        server = Bun.serve({
+            port: 0,
+            async fetch(req) {
+                const url = new URL(req.url);
+                let filePath = join(projectRoot, url.pathname);
+
+                // Default to index-ultra.html
+                if (url.pathname === '/' || url.pathname === '/index-ultra.html') {
+                    filePath = join(projectRoot, 'index-ultra.html');
+                }
+
+                try {
+                    const file = Bun.file(filePath);
+                    const exists = await file.exists();
+                    if (!exists) {
+                        return new Response('Not Found', { status: 404 });
+                    }
+
+                    const content = await file.arrayBuffer();
+                    const ext = filePath.split('.').pop();
+                    const mimeTypes = {
+                        'html': 'text/html',
+                        'js': 'text/javascript',
+                        'css': 'text/css',
+                        'json': 'application/json',
+                        'svg': 'image/svg+xml',
+                        'png': 'image/png',
+                        'ico': 'image/x-icon'
+                    };
+
+                    return new Response(content, {
+                        headers: { 'Content-Type': mimeTypes[ext] || 'application/octet-stream' }
+                    });
+                } catch (e) {
+                    return new Response('Error: ' + e.message, { status: 500 });
+                }
+            }
+        });
+
+        console.log(`Test server started at http://localhost:${server.port}`);
+
+        browser = await puppeteer.launch({
+            headless: 'shell',
+            executablePath: '/tmp/puppeteer/chrome-headless-shell/mac_arm-144.0.7559.96/chrome-headless-shell-mac-arm64/chrome-headless-shell',
+            args: ['--no-sandbox', '--disable-setuid-sandbox'],
+            userDataDir: `/tmp/puppeteer-demo_routes-${Date.now()}-${Math.random().toString(36).slice(2)}`
+        });
+        page = await browser.newPage();
+
+        // Capture console errors
+        page.on('pageerror', err => {
+            consoleErrors.push(err.message);
+        });
+
+        // Navigate to demo page
+        await page.goto(`http://localhost:${server.port}/demo/shell.html`, {
+            waitUntil: 'networkidle0',
+            timeout: 30000
+        });
+    }, 60000);
+
+    afterAll(async () => {
+        if (browser) await browser.close();
+        if (server) server.stop();
+    });
+
+    // ========================================
+    // ROUTE LOADING TESTS
+    // ========================================
+
+    describe('Route Loading', () => {
+        for (const route of DEMO_ROUTES) {
+            test(`#${route.hash} should load successfully`, async () => {
+                // Navigate to route
+                await page.goto(`http://localhost:${server.port}/demo/shell.html#${route.hash}`, {
+                    waitUntil: 'networkidle0'
+                });
+
+                // Wait for router to process
+                await delay(300);
+
+                // Check that content area has content
+                const hasContent = await page.evaluate(() => {
+                    const main = document.querySelector('.main-content, main, [role="main"]');
+                    return main ? main.innerHTML.length > 50 : false;
+                });
+
+                expect(hasContent).toBe(true);
+            }, 15000);
+        }
+    });
+
+    // ========================================
+    // COMPONENT RENDERING TESTS
+    // ========================================
+
+    describe('Component Rendering', () => {
+        for (const route of DEMO_ROUTES.filter(r => r.component)) {
+            test(`#${route.hash} should render ${route.component}`, async () => {
+                await page.goto(`http://localhost:${server.port}/demo/shell.html#${route.hash}`, {
+                    waitUntil: 'networkidle0'
+                });
+
+                await delay(500);
+
+                // Check component exists
+                const componentExists = await page.evaluate((tag) => {
+                    return document.querySelectorAll(tag).length > 0;
+                }, route.component);
+
+                expect(componentExists).toBe(true);
+            }, 15000);
+        }
+    });
+
+    // ========================================
+    // NAVIGATION TESTS
+    // ========================================
+
+    describe('Navigation', () => {
+        test('sidebar navigation should work', async () => {
+            await page.goto(`http://localhost:${server.port}/demo/shell.html#home`, {
+                waitUntil: 'networkidle0'
+            });
+
+            // Click on Buttons nav item
+            const clicked = await page.evaluate(() => {
+                const navItems = document.querySelectorAll('.sidebar a, mu-nav-item, [href="#buttons"]');
+                for (const item of navItems) {
+                    if (item.textContent.includes('Buttons') || item.href?.includes('#buttons')) {
+                        item.click();
+                        return true;
+                    }
+                }
+                return false;
+            });
+
+            if (clicked) {
+                await delay(500);
+                const hash = await page.evaluate(() => window.location.hash);
+                expect(hash).toBe('#buttons');
+            }
+        }, 15000);
+
+        test('back/forward navigation should work', async () => {
+            // Navigate to two pages
+            await page.goto(`http://localhost:${server.port}/demo/shell.html#buttons`, {
+                waitUntil: 'networkidle0'
+            });
+            await page.goto(`http://localhost:${server.port}/demo/shell.html#cards`, {
+                waitUntil: 'networkidle0'
+            });
+
+            // Go back
+            await page.goBack();
+            await delay(300);
+
+            const hash = await page.evaluate(() => window.location.hash);
+            expect(hash).toBe('#buttons');
+        }, 15000);
+
+        // REGRESSION TEST: Direct URL hash should select matching drawer item
+        // Bug: Opening http://localhost:5001/#buttons showed "Overview" selected instead of "Buttons"
+        test('direct hash URL should select correct drawer item', async () => {
+            // Open directly with hash (simulating user sharing a link)
+            await page.goto(`http://localhost:${server.port}/demo/shell.html#buttons`, {
+                waitUntil: 'networkidle0'
+            });
+            await delay(500);
+
+            // Verify the correct drawer item has the active attribute
+            const activeItems = await page.evaluate(() => {
+                const items = document.querySelectorAll('mu-drawer-item');
+                return Array.from(items)
+                    .filter(item => item.hasAttribute('active'))
+                    .map(item => ({
+                        dataPage: item.getAttribute('data-page'),
+                        label: item.getAttribute('label')
+                    }));
+            });
+
+            // Should have exactly one active item
+            expect(activeItems.length).toBe(1);
+            // The active item should be "buttons", not "home" (Overview)
+            expect(activeItems[0].dataPage).toBe('buttons');
+        }, 15000);
+
+        test('sidebar should update on hash change', async () => {
+            // Start on home
+            await page.goto(`http://localhost:${server.port}/demo/shell.html#home`, {
+                waitUntil: 'networkidle0'
+            });
+            await delay(300);
+
+            // Navigate to a different page via hash
+            await page.evaluate(() => { window.location.hash = 'cards'; });
+            await delay(500);
+
+            // Verify drawer item updated
+            const activeItems = await page.evaluate(() => {
+                return Array.from(document.querySelectorAll('mu-drawer-item'))
+                    .filter(item => item.hasAttribute('active'))
+                    .map(item => item.getAttribute('data-page'));
+            });
+
+            expect(activeItems).toContain('cards');
+            expect(activeItems).not.toContain('home');
+        }, 15000);
+    });
+
+    // ========================================
+    // COMPONENT INTERACTION TESTS
+    // ========================================
+
+    describe('Component Interactions', () => {
+        test('mu-button click should work', async () => {
+            await page.goto(`http://localhost:${server.port}/demo/shell.html#buttons`, {
+                waitUntil: 'networkidle0'
+            });
+            await delay(500);
+
+            const clicked = await page.evaluate(() => {
+                const btn = document.querySelector('mu-button');
+                if (btn) {
+                    btn.click();
+                    return true;
+                }
+                return false;
+            });
+
+            expect(clicked).toBe(true);
+        }, 15000);
+
+        test('mu-checkbox should toggle', async () => {
+            await page.goto(`http://localhost:${server.port}/demo/shell.html#checkboxes`, {
+                waitUntil: 'networkidle0'
+            });
+            await delay(500);
+
+            const toggled = await page.evaluate(() => {
+                const cb = document.querySelector('mu-checkbox');
+                if (cb) {
+                    const before = cb.hasAttribute('checked');
+                    cb.click();
+                    const after = cb.hasAttribute('checked');
+                    return before !== after;
+                }
+                return false;
+            });
+
+            expect(toggled).toBe(true);
+        }, 15000);
+
+        test('mu-switch should toggle', async () => {
+            await page.goto(`http://localhost:${server.port}/demo/shell.html#switches`, {
+                waitUntil: 'networkidle0'
+            });
+            await delay(500);
+
+            const toggled = await page.evaluate(() => {
+                const sw = document.querySelector('mu-switch');
+                if (sw) {
+                    const before = sw.hasAttribute('checked');
+                    sw.click();
+                    const after = sw.hasAttribute('checked');
+                    return before !== after;
+                }
+                return false;
+            });
+
+            expect(toggled).toBe(true);
+        }, 15000);
+
+        test('mu-modal should open and close', async () => {
+            await page.goto(`http://localhost:${server.port}/demo/shell.html#modals`, {
+                waitUntil: 'networkidle0'
+            });
+            await delay(500);
+
+            // Note: modal.close() is async with ~200ms animation delay
+            const result = await page.evaluate(async () => {
+                const modal = document.querySelector('mu-modal');
+                if (modal && typeof modal.open === 'function') {
+                    modal.open();
+                    const wasOpen = modal.hasAttribute('open');
+                    modal.close();
+                    // Wait for close animation (200ms internal timeout)
+                    await new Promise(r => setTimeout(r, 300));
+                    const wasClosed = !modal.hasAttribute('open');
+                    return { opened: wasOpen, closed: wasClosed };
+                }
+                return { opened: false, closed: false };
+            });
+
+            expect(result.opened).toBe(true);
+            expect(result.closed).toBe(true);
+        }, 15000);
+
+        test('mu-tabs should switch panels', async () => {
+            await page.goto(`http://localhost:${server.port}/demo/shell.html#tabs`, {
+                waitUntil: 'networkidle0'
+            });
+            await delay(500);
+
+            const switched = await page.evaluate(() => {
+                const tabs = document.querySelector('mu-tabs');
+                const tabItems = document.querySelectorAll('mu-tab');
+                if (tabs && tabItems.length > 1) {
+                    tabItems[1].click();
+                    return true;
+                }
+                return false;
+            });
+
+            expect(switched).toBe(true);
+        }, 15000);
+    });
+
+    // ========================================
+    // ERROR CHECKING
+    // ========================================
+
+    describe('Error Checking', () => {
+        test('no critical console errors during all route navigation', async () => {
+            const errors = [];
+
+            page.on('pageerror', err => errors.push(err.message));
+
+            // Navigate through all routes
+            for (const route of DEMO_ROUTES) {
+                await page.goto(`http://localhost:${server.port}/demo/shell.html#${route.hash}`, {
+                    waitUntil: 'networkidle0'
+                });
+                await delay(200);
+            }
+
+            // Filter out known non-critical errors
+            const criticalErrors = errors.filter(e =>
+                !e.includes('ResizeObserver') &&
+                !e.includes('Script error')
+            );
+
+            expect(criticalErrors.length).toBe(0);
+        }, 60000);
+    });
+
+    // ========================================
+    // ACCESSIBILITY QUICK CHECKS
+    // ========================================
+
+    describe('Accessibility', () => {
+        test('interactive components should have proper roles', async () => {
+            await page.goto(`http://localhost:${server.port}/demo/shell.html#buttons`, {
+                waitUntil: 'networkidle0'
+            });
+            await delay(500);
+
+            const hasRoles = await page.evaluate(() => {
+                const btn = document.querySelector('mu-button');
+                return btn ? btn.getAttribute('role') === 'button' : false;
+            });
+
+            expect(hasRoles).toBe(true);
+        }, 15000);
+
+        test('checkboxes should have correct aria-checked', async () => {
+            await page.goto(`http://localhost:${server.port}/demo/shell.html#checkboxes`, {
+                waitUntil: 'networkidle0'
+            });
+            await delay(500);
+
+            const hasAria = await page.evaluate(() => {
+                const cb = document.querySelector('mu-checkbox');
+                if (cb) {
+                    const ariaChecked = cb.getAttribute('aria-checked');
+                    return ariaChecked === 'true' || ariaChecked === 'false';
+                }
+                return false;
+            });
+
+            expect(hasAria).toBe(true);
+        }, 15000);
+    });
+
+    // ========================================
+    // PERFORMANCE CHECKS
+    // ========================================
+
+    describe('Performance', () => {
+        test('route transitions should be fast (<500ms)', async () => {
+            await page.goto(`http://localhost:${server.port}/demo/shell.html#home`, {
+                waitUntil: 'networkidle0'
+            });
+
+            const start = Date.now();
+            await page.goto(`http://localhost:${server.port}/demo/shell.html#buttons`, {
+                waitUntil: 'networkidle0'
+            });
+            const duration = Date.now() - start;
+
+            expect(duration).toBeLessThan(2000); // Allow 2s for network
+        }, 15000);
+
+        test('all routes should load within time budget', async () => {
+            const times = [];
+
+            for (const route of DEMO_ROUTES.slice(0, 5)) { // Test first 5 routes
+                const start = Date.now();
+                await page.goto(`http://localhost:${server.port}/demo/shell.html#${route.hash}`, {
+                    waitUntil: 'networkidle0'
+                });
+                times.push(Date.now() - start);
+            }
+
+            const avgTime = times.reduce((a, b) => a + b, 0) / times.length;
+            console.log(`Average route load time: ${avgTime.toFixed(0)}ms`);
+
+            expect(avgTime).toBeLessThan(3000); // Average under 3s
+        }, 45000);
+    });
+});