microui-wc 0.1.0

package/tests/e2e/perf-memory.test.js

@@ -0,0 +1,161 @@
+/**
+ * @fileoverview Performance and Memory Tests
+ * 
+ * Uses test-harness.html which has microUI properly loaded.
+ */
+
+import { describe, test, expect, beforeAll, afterAll } from 'bun:test';
+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);
+
+describe('Performance & Memory Tests', () => {
+    let browser;
+    let page;
+    let server;
+
+    beforeAll(async () => {
+        const projectRoot = join(__dirname, '../..');
+
+        server = Bun.serve({
+            port: 0,
+            async fetch(req) {
+                const url = new URL(req.url);
+                let filePath = join(projectRoot, url.pathname);
+
+                if (url.pathname === '/') {
+                    filePath = join(__dirname, 'test-harness.html');
+                }
+
+                try {
+                    const file = Bun.file(filePath);
+                    if (!await file.exists()) {
+                        return new Response('Not Found', { status: 404 });
+                    }
+
+                    const content = await file.text();
+                    const ext = filePath.split('.').pop();
+                    const mimeTypes = {
+                        'html': 'text/html',
+                        'js': 'text/javascript',
+                        'css': 'text/css'
+                    };
+
+                    return new Response(content, {
+                        headers: { 'Content-Type': mimeTypes[ext] || 'text/plain' }
+                    });
+                } catch (e) {
+                    return new Response('Error', { status: 500 });
+                }
+            }
+        });
+
+        browser = await puppeteer.launch({
+            headless: true,
+            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-perf_memory-${Date.now()}-${Math.random().toString(36).slice(2)}`
+        });
+        page = await browser.newPage();
+
+        // Navigate to test harness first
+        await page.goto(`http://localhost:${server.port}`, { waitUntil: 'networkidle0' });
+        await page.waitForFunction(() => window.testsComplete === true, { timeout: 30000 });
+    }, 60000);
+
+    afterAll(async () => {
+        if (browser) await browser.close();
+        if (server) server.stop();
+    });
+
+    describe('Performance', () => {
+        test('component creation: 500 components < 300ms', async () => {
+            const result = await page.evaluate(() => {
+                const testArea = document.getElementById('test-area');
+                testArea.innerHTML = '';
+
+                const start = performance.now();
+                for (let i = 0; i < 500; i++) {
+                    const btn = document.createElement('mu-button');
+                    btn.textContent = `B${i}`;
+                    testArea.appendChild(btn);
+                }
+                const end = performance.now();
+
+                testArea.innerHTML = '';
+                return { total: end - start };
+            });
+
+            expect(result.total).toBeLessThan(300);
+        });
+
+        test('DOM updates: 500 updates < 50ms', async () => {
+            const result = await page.evaluate(() => {
+                const testArea = document.getElementById('test-area');
+                testArea.innerHTML = '';
+
+                const buttons = [];
+                for (let i = 0; i < 50; i++) {
+                    const btn = document.createElement('mu-button');
+                    testArea.appendChild(btn);
+                    buttons.push(btn);
+                }
+
+                const start = performance.now();
+                for (let i = 0; i < 500; i++) {
+                    buttons[i % 50].setAttribute('variant', i % 2 === 0 ? 'filled' : 'outlined');
+                }
+                const end = performance.now();
+
+                testArea.innerHTML = '';
+                return { total: end - start };
+            });
+
+            expect(result.total).toBeLessThan(50);
+        });
+    });
+
+    describe('Memory Stability', () => {
+        test('component lifecycle: 300 create/destroy cycles', async () => {
+            const result = await page.evaluate(async () => {
+                const testArea = document.getElementById('test-area');
+
+                for (let i = 0; i < 300; i++) {
+                    const btn = document.createElement('mu-button');
+                    btn.textContent = `B${i}`;
+                    testArea.appendChild(btn);
+                }
+
+                testArea.innerHTML = '';
+                await new Promise(r => setTimeout(r, 50));
+
+                return { passed: true };
+            });
+
+            expect(result.passed).toBe(true);
+        });
+
+        test('stress test: 3 cycles of 500 components', async () => {
+            const result = await page.evaluate(async () => {
+                const testArea = document.getElementById('test-area');
+
+                for (let cycle = 0; cycle < 3; cycle++) {
+                    for (let i = 0; i < 500; i++) {
+                        const btn = document.createElement('mu-button');
+                        btn.textContent = `${cycle}-${i}`;
+                        testArea.appendChild(btn);
+                    }
+                    testArea.innerHTML = '';
+                }
+
+                await new Promise(r => setTimeout(r, 20));
+                return { passed: true };
+            });
+
+            expect(result.passed).toBe(true);
+        });
+    });
+});

package/tests/e2e/puppeteer-helper.js

@@ -0,0 +1,137 @@
+/**
+ * @fileoverview Shared Puppeteer helper for E2E tests
+ * 
+ * Uses puppeteer-core with globally installed Chrome:
+ * - puppeteer-core: NO automatic Chrome download
+ * - Chrome: Installed via `npx puppeteer browsers install chrome-headless-shell`
+ *   Location: ~/.cache/puppeteer/ (persistent) or /tmp/puppeteer/ (sandbox fallback)
+ * 
+ * This eliminates:
+ * - Hardcoded paths scattered across 19+ test files
+ * - macOS sandbox EPERM issues (userDataDir in /tmp)
+ * - Version drift between test files
+ * - Automatic Chrome downloads per-project
+ */
+
+import puppeteer from 'puppeteer-core';
+import { execSync } from 'child_process';
+import { existsSync, readdirSync } from 'fs';
+import { join } from 'path';
+
+/**
+ * Find chrome-headless-shell in various cache locations
+ * Searches: /tmp/puppeteer, ~/.cache/puppeteer
+ * @returns {string|null} Path to Chrome executable
+ */
+export function findGlobalChrome() {
+    const cachePaths = [
+        '/tmp/puppeteer',  // macOS sandbox-friendly location
+        join(process.env.HOME, '.cache', 'puppeteer')  // Standard puppeteer cache
+    ];
+
+    for (const cachePath of cachePaths) {
+        if (!existsSync(cachePath)) continue;
+
+        const dirs = readdirSync(cachePath);
+
+        // Look for chrome-headless-shell first (preferred), then chrome
+        for (const browserType of ['chrome-headless-shell', 'chrome']) {
+            for (const dir of dirs) {
+                if (dir.startsWith(browserType)) {
+                    const chromeDir = join(cachePath, dir);
+
+                    // Check if it's a directory with versions
+                    try {
+                        const versions = readdirSync(chromeDir).sort().reverse(); // Latest first
+
+                        for (const version of versions) {
+                            // Check for mac_arm first, then mac x64
+                            const armPath = join(chromeDir, version, `${browserType}-mac-arm64`, browserType);
+                            const x64Path = join(chromeDir, version, `${browserType}-mac-x64`, browserType);
+
+                            if (existsSync(armPath)) return armPath;
+                            if (existsSync(x64Path)) return x64Path;
+                        }
+                    } catch (e) {
+                        // Not a directory with versions, skip
+                    }
+                }
+            }
+        }
+    }
+
+    return null;
+}
+
+/**
+ * Generate a unique userDataDir in /tmp to avoid macOS sandbox issues
+ * @param {string} testName - Name of the test for identification
+ * @returns {string} Path to userDataDir
+ */
+export function getTmpUserDataDir(testName = 'e2e') {
+    const sanitized = testName.replace(/[^a-z0-9_-]/gi, '_');
+    return `/tmp/puppeteer-${sanitized}-${Date.now()}`;
+}
+
+/**
+ * Launch Puppeteer browser with standardized configuration
+ * Uses global Chrome from ~/.cache/puppeteer
+ * 
+ * @param {Object} options - Optional overrides
+ * @param {string} options.testName - Test name for userDataDir
+ * @param {boolean} options.headless - Default: true
+ * @param {string[]} options.args - Additional browser args
+ * @returns {Promise<Browser>} Puppeteer browser instance
+ */
+export async function launchBrowser(options = {}) {
+    const {
+        testName = 'test',
+        headless = true,
+        args = []
+    } = options;
+
+    const executablePath = findGlobalChrome();
+
+    if (!executablePath) {
+        throw new Error(
+            '[puppeteer-helper] Chrome not found in ~/.cache/puppeteer.\n' +
+            'Install with: PUPPETEER_CACHE_DIR=~/.cache/puppeteer npx puppeteer browsers install chrome-headless-shell'
+        );
+    }
+
+    const browser = await puppeteer.launch({
+        headless,
+        executablePath,
+        args: [
+            '--no-sandbox',
+            '--disable-setuid-sandbox',
+            '--disable-dev-shm-usage',
+            ...args
+        ],
+        userDataDir: getTmpUserDataDir(testName)
+    });
+
+    return browser;
+}
+
+/**
+ * Launch browser with remote debugging port (for Lighthouse)
+ * @param {number} port - Debugging port (default: 9222)
+ * @returns {Promise<Browser>} Puppeteer browser instance
+ */
+export async function launchBrowserForLighthouse(port = 9222) {
+    return launchBrowser({
+        testName: `lighthouse-${port}`,
+        args: [`--remote-debugging-port=${port}`]
+    });
+}
+
+export default {
+    findGlobalChrome,
+    getTmpUserDataDir,
+    launchBrowser,
+    launchBrowserForLighthouse
+};
+
+// Re-export puppeteer-core for tests that need direct access
+export { default as puppeteer } from 'puppeteer-core';

package/tests/e2e/puppeteer.test.js

@@ -0,0 +1,226 @@
+/**
+ * @fileoverview Puppeteer E2E Tests for microUI features that require real browser
+ * 
+ * Tests: signals, theme (matchMedia), component events (CustomEvent bubbling)
+ * These tests cover functionality that cannot run in linkedom environment.
+ */
+
+import { describe, test, expect, beforeAll, afterAll } from 'bun:test';
+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);
+
+describe('Puppeteer E2E Tests', () => {
+    let browser;
+    let page;
+    let server;
+    let testResults;
+
+    beforeAll(async () => {
+        // Start a simple HTTP server using Bun
+        const projectRoot = join(__dirname, '../..');
+
+        server = Bun.serve({
+            port: 0, // Random available port
+            async fetch(req) {
+                const url = new URL(req.url);
+                let filePath = join(projectRoot, url.pathname);
+
+                // Default to test harness
+                if (url.pathname === '/') {
+                    filePath = join(__dirname, 'test-harness.html');
+                }
+
+                try {
+                    const file = Bun.file(filePath);
+                    const exists = await file.exists();
+                    if (!exists) {
+                        console.error(`[404] ${url.pathname} -> ${filePath}`);
+                        return new Response('Not Found', { status: 404 });
+                    }
+
+                    const content = await file.text();
+                    const ext = filePath.split('.').pop();
+                    const mimeTypes = {
+                        'html': 'text/html',
+                        'js': 'text/javascript',
+                        'css': 'text/css',
+                        'json': 'application/json'
+                    };
+
+                    return new Response(content, {
+                        headers: { 'Content-Type': mimeTypes[ext] || 'text/plain' }
+                    });
+                } catch (e) {
+                    console.error(`[500] ${url.pathname}: ${e.message}`);
+                    return new Response('Error: ' + e.message, { status: 500 });
+                }
+            }
+        });
+
+        const serverUrl = `http://localhost:${server.port}`;
+        console.log(`Test server started at ${serverUrl}`);
+
+        browser = await puppeteer.launch({
+            headless: true,
+            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-puppeteer-${Date.now()}-${Math.random().toString(36).slice(2)}`
+        });
+        page = await browser.newPage();
+
+        // Enable console logging for debugging
+        page.on('console', msg => {
+            console.log('BROWSER:', msg.text());
+        });
+        page.on('pageerror', err => {
+            console.error('PAGE ERROR:', err.message);
+        });
+
+        // Navigate to test harness
+        console.log('Navigating to test harness...');
+        await page.goto(serverUrl, { waitUntil: 'domcontentloaded' });
+
+        // Give some time for module loading
+        console.log('Waiting for tests to complete...');
+
+        try {
+            await page.waitForFunction(() => window.testsComplete === true, {
+                timeout: 30000
+            });
+            console.log('Tests completed!');
+        } catch (e) {
+            // If timeout, try to get partial results
+            console.log('Timeout - checking what happened...');
+            const pageContent = await page.content();
+            console.log('Page has content:', pageContent.length, 'chars');
+
+            const hasTestResults = await page.evaluate(() => !!window.testResults);
+            console.log('Has testResults:', hasTestResults);
+
+            const testsComplete = await page.evaluate(() => window.testsComplete);
+            console.log('testsComplete:', testsComplete);
+
+            if (!hasTestResults) {
+                throw new Error('Page failed to load or execute tests');
+            }
+        }
+
+        // Get results
+        testResults = await page.evaluate(() => window.testResults);
+        console.log('Test results:', JSON.stringify(testResults, null, 2));
+    }, 60000);
+
+    afterAll(async () => {
+        if (browser) {
+            await browser.close();
+        }
+        if (server) {
+            server.stop();
+        }
+    });
+
+    // ========================================
+    // SIGNALS TESTS (require Function.name assignment)
+    // ========================================
+
+    describe('signals Module (Browser)', () => {
+        test('signal should create reactive value with functional accessor', () => {
+            expect(testResults?.signalCreate).toBe(true);
+        });
+
+        test('signal.set should update value', () => {
+            expect(testResults?.signalSet).toBe(true);
+        });
+
+        test('signal.update should work with function', () => {
+            expect(testResults?.signalUpdate).toBe(true);
+        });
+
+        test('signal.peek should return value without tracking', () => {
+            expect(testResults?.signalPeek).toBe(true);
+        });
+
+        test('computed should derive value', () => {
+            expect(testResults?.computed).toBe(true);
+        });
+    });
+
+    // ========================================
+    // THEME TESTS (require matchMedia)
+    // ========================================
+
+    describe('theme Module (Browser)', () => {
+        test('Theme object should exist', () => {
+            expect(testResults?.themeExists).toBe(true);
+        });
+
+        test('Theme.init should be a function', () => {
+            expect(testResults?.themeHasInit).toBe(true);
+        });
+
+        test('Theme.set should be a function', () => {
+            expect(testResults?.themeHasSet).toBe(true);
+        });
+
+        test('Theme.get should be a function', () => {
+            expect(testResults?.themeHasGet).toBe(true);
+        });
+
+        test('Theme.toggle should be a function', () => {
+            expect(testResults?.themeHasToggle).toBe(true);
+        });
+
+        test('Theme.set("dark") should set dark theme', () => {
+            expect(testResults?.themeSetDark).toBe(true);
+        });
+
+        test('Theme.set("light") should set light theme', () => {
+            expect(testResults?.themeSetLight).toBe(true);
+        });
+    });
+
+    // ========================================
+    // COMPONENT EVENT TESTS (require CustomEvent)
+    // ========================================
+
+    describe('Component Events (Browser)', () => {
+        test('MuElement.emit() should dispatch custom event', () => {
+            expect(testResults?.muElementEmit).toBe(true);
+        });
+
+        test('mu-modal.open() should emit mu-open event', () => {
+            expect(testResults?.modalOpenEvent).toBe(true);
+        });
+
+        test('mu-modal.close() should emit mu-close event', () => {
+            expect(testResults?.modalCloseEvent).toBe(true);
+        });
+
+        test('mu-checkbox.toggle() should toggle checked state', () => {
+            expect(testResults?.checkboxToggle).toBe(true);
+        });
+
+        test('mu-switch.toggle() should toggle state', () => {
+            expect(testResults?.switchToggle).toBe(true);
+        });
+
+        test('mu-chip.toggle() should toggle selection', () => {
+            expect(testResults?.chipToggle).toBe(true);
+        });
+    });
+
+    // ========================================
+    // STRUCTURAL TESTS (verify all components render with baseClass)
+    // ========================================
+
+    describe('Component Structure (Browser)', () => {
+        test('all 31 components should have correct baseClass', () => {
+            expect(testResults?.structPass).toBe(31);
+            expect(testResults?.structFail).toBe(0);
+        });
+    });
+});