microui-wc 0.1.0 → 0.1.2

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

@@ -1,161 +0,0 @@
-/**
- * @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

@@ -1,137 +0,0 @@
-/**
- * @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

@@ -1,226 +0,0 @@
-/**
- * @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);
-        });
-    });
-});