microui-wc 0.1.0 → 0.1.2

package/tests/e2e/pwa.test.js

@@ -1,261 +0,0 @@
-/**
- * @fileoverview E2E Tests for Service Worker and PWA Features
- * 
- * Tests cover:
- * - Service Worker registration
- * - Cache API functionality
- * - Offline behavior
- * - PWA manifest
- */
-
-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('PWA & Service Worker E2E 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 path = url.pathname;
-
-                // Map root and PWA assets to demo/ directory
-                if (path === '/' || path === '/shell.html' ||
-                    path === '/sw.js' || path === '/manifest.json' ||
-                    path === '/robots.txt' || path === '/favicon.ico' || path === '/favicon.png') {
-
-                    if (path === '/') path = '/shell.html';
-                    path = '/demo' + path;
-                }
-
-                let filePath = join(projectRoot, path);
-
-                try {
-                    const file = Bun.file(filePath);
-                    const exists = await file.exists();
-                    if (!exists) {
-                        // Try without demo prefix if failed (fallback)
-                        if (path.startsWith('/demo/')) {
-                            filePath = join(projectRoot, path.replace('/demo', ''));
-                            if (await Bun.file(filePath).exists()) {
-                                // Found in root
-                            } else {
-                                return new Response('Not Found: ' + filePath, { status: 404 });
-                            }
-                        } else {
-                            return new Response('Not Found: ' + filePath, { status: 404 });
-                        }
-                    }
-
-                    const content = await Bun.file(filePath).arrayBuffer();
-                    const ext = filePath.split('.').pop();
-                    const mimeTypes = {
-                        'html': 'text/html',
-                        'js': 'text/javascript',
-                        'css': 'text/css',
-                        'json': 'application/json',
-                        'png': 'image/png',
-                        'webp': 'image/webp'
-                    };
-
-                    return new Response(content, {
-                        headers: { 'Content-Type': mimeTypes[ext] || 'application/octet-stream' }
-                    });
-                } catch (e) {
-                    return new Response('Error: ' + e.message, { 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-pwa-${Date.now()}-${Math.random().toString(36).slice(2)}`
-        });
-        page = await browser.newPage();
-
-        await page.goto(`http://localhost:${server.port}`, { waitUntil: 'networkidle0' });
-
-        // Wait for SW registration
-        await page.waitForFunction(() => navigator.serviceWorker?.controller !== null, { timeout: 10000 })
-            .catch(() => console.log('SW not yet controlling, continuing...'));
-    }, 60000);
-
-    afterAll(async () => {
-        if (browser) await browser.close();
-        if (server) server.stop();
-    });
-
-    // ==========================================
-    // Service Worker Registration
-    // Note: chrome-headless-shell doesn't support Service Workers
-    // These tests will skip gracefully in that environment
-    // ==========================================
-    describe('Service Worker Registration', () => {
-        test('Service Worker should be registered', async () => {
-            try {
-                const swRegistered = await page.evaluate(async () => {
-                    const registration = await navigator.serviceWorker?.getRegistration();
-                    return !!registration;
-                });
-                expect(swRegistered).toBe(true);
-            } catch (e) {
-                // chrome-headless-shell doesn't support SW, skip gracefully
-                if (e.message.includes('shutdown') || e.message.includes('ServiceWorker')) {
-                    console.log('Skipping SW test: Service Workers not supported in this environment');
-                    expect(true).toBe(true);
-                } else throw e;
-            }
-        });
-
-        test('Service Worker should have correct scope', async () => {
-            try {
-                const scope = await page.evaluate(async () => {
-                    const registration = await navigator.serviceWorker?.getRegistration();
-                    return registration?.scope;
-                });
-                expect(scope).toContain('localhost');
-            } catch (e) {
-                // chrome-headless-shell doesn't support SW, skip gracefully
-                if (e.message.includes('shutdown') || e.message.includes('ServiceWorker')) {
-                    console.log('Skipping SW scope test: Service Workers not supported in this environment');
-                    expect(true).toBe(true);
-                } else throw e;
-            }
-        });
-    });
-
-    // ==========================================
-    // PWA Manifest
-    // ==========================================
-    describe('PWA Manifest', () => {
-        test('manifest.json should be accessible', async () => {
-            const response = await page.goto(`http://localhost:${server.port}/manifest.json`);
-            expect(response?.status()).toBe(200);
-        });
-
-        test('manifest should have required fields', async () => {
-            const manifest = await page.evaluate(async () => {
-                const response = await fetch('/manifest.json');
-                return response.json();
-            });
-
-            expect(manifest.name).toBe('microUI');
-            expect(manifest.short_name).toBe('microUI');
-            expect(manifest.start_url).toBe('/');
-            expect(manifest.display).toBe('standalone');
-            expect(manifest.theme_color).toBeTruthy();
-            expect(manifest.icons).toBeInstanceOf(Array);
-            expect(manifest.icons.length).toBeGreaterThan(0);
-        });
-
-        // Navigate back to main page for remaining tests
-        afterAll(async () => {
-            await page.goto(`http://localhost:${server.port}`, { waitUntil: 'networkidle0' });
-        });
-    });
-
-    // ==========================================
-    // Cache Control API
-    // ==========================================
-    describe('Cache Control API', () => {
-        test('microUICache object should exist', async () => {
-            const exists = await page.evaluate(() => typeof window.microUICache === 'object');
-            expect(exists).toBe(true);
-        });
-
-        test('microUICache.status should return cache info', async () => {
-            // Wait a bit for SW to be ready
-            await new Promise(r => setTimeout(r, 1000));
-
-            const status = await page.evaluate(async () => {
-                if (!navigator.serviceWorker?.controller) return null;
-                return await window.microUICache?.status();
-            });
-
-            // Status might be null if SW isn't controlling yet
-            if (status) {
-                expect(status.version).toBeTruthy();
-                expect(typeof status.caches).toBe('object');
-            }
-        });
-
-        test('microUICache should have all required methods', async () => {
-            const methods = await page.evaluate(() => {
-                const cache = window.microUICache;
-                return {
-                    hasClear: typeof cache?.clear === 'function',
-                    hasStatus: typeof cache?.status === 'function',
-                    hasUpdate: typeof cache?.update === 'function',
-                    hasPrefetch: typeof cache?.prefetch === 'function'
-                };
-            });
-
-            expect(methods.hasClear).toBe(true);
-            expect(methods.hasStatus).toBe(true);
-            expect(methods.hasUpdate).toBe(true);
-            expect(methods.hasPrefetch).toBe(true);
-        });
-    });
-
-    // ==========================================
-    // Security Headers
-    // ==========================================
-    describe('Security', () => {
-        test('page should have Content-Security-Policy meta tag', async () => {
-            const hasCSP = await page.evaluate(() => {
-                const csp = document.querySelector('meta[http-equiv="Content-Security-Policy"]');
-                return !!csp?.content;
-            });
-            expect(hasCSP).toBe(true);
-        });
-
-        test('CSP should include essential directives', async () => {
-            const csp = await page.evaluate(() => {
-                const el = document.querySelector('meta[http-equiv="Content-Security-Policy"]');
-                return el?.content || '';
-            });
-
-            expect(csp).toContain("default-src 'self'");
-            expect(csp).toContain("script-src");
-            expect(csp).toContain("style-src");
-        });
-    });
-
-    // ==========================================
-    // Theme Color
-    // ==========================================
-    describe('Theme Integration', () => {
-        test('should have theme-color meta tag', async () => {
-            const themeColor = await page.evaluate(() => {
-                const el = document.querySelector('meta[name="theme-color"]');
-                return el?.content;
-            });
-            expect(themeColor).toBeTruthy();
-            expect(themeColor).toMatch(/^#[0-9A-Fa-f]{6}$/);
-        });
-
-        test('should have apple-mobile-web-app meta tags', async () => {
-            const appleTags = await page.evaluate(() => {
-                return {
-                    capable: document.querySelector('meta[name="apple-mobile-web-app-capable"]')?.content,
-                    title: document.querySelector('meta[name="apple-mobile-web-app-title"]')?.content
-                };
-            });
-            expect(appleTags.capable).toBe('yes');
-            expect(appleTags.title).toBe('microUI');
-        });
-    });
-});

package/tests/e2e/test-harness.html

@@ -1,319 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>microUI E2E Test Harness</title>
-    <link rel="stylesheet" href="/src/styles/tokens.css">
-    <link rel="stylesheet" href="/src/styles/components.css">
-    <script src="/dist/microui.min.js"></script>
-    <style>
-        body {
-            font-family: system-ui, sans-serif;
-            padding: 20px;
-            background: var(--md-sys-color-surface);
-            color: var(--md-sys-color-on-surface);
-        }
-
-        .test-container {
-            max-width: 800px;
-            margin: 0 auto;
-        }
-
-        h1 {
-            margin-bottom: 20px;
-        }
-
-        #results {
-            background: var(--md-sys-color-surface-container);
-            padding: 16px;
-            border-radius: 8px;
-            white-space: pre-wrap;
-            font-family: monospace;
-        }
-    </style>
-</head>
-
-<body>
-    <div class="test-container">
-        <h1>microUI E2E Test Harness</h1>
-        <div id="test-area">
-            <!-- Components will be created here -->
-        </div>
-        <div id="results">Running tests...</div>
-    </div>
-
-    <script>
-        // Expose to window for Puppeteer access
-        window.testResults = {};
-        window.testsComplete = false;
-
-        const results = document.getElementById('results');
-        const testArea = document.getElementById('test-area');
-
-        function log(msg) {
-            results.textContent += msg + '\n';
-        }
-
-        async function runTests() {
-            log('Starting E2E tests...\n');
-
-            // ========================================
-            // SIGNALS TESTS - Test via DOM side effects
-            // Since signals are used internally by components, we can verify
-            // that reactive updates work by checking component state changes
-            // ========================================
-            log('=== SIGNALS MODULE ===');
-
-            try {
-                // Create a progress component and test its reactive value update
-                const progress = document.createElement('mu-progress');
-                progress.setAttribute('value', '0');
-                testArea.appendChild(progress);
-                await new Promise(r => setTimeout(r, 50));
-
-                // Test 1: Signal create - check that value attribute sets initial state
-                const initialValue = progress.getAttribute('value');
-                window.testResults.signalCreate = (initialValue === '0' || initialValue === 0);
-                log(`✓ signal create (via component attr): ${window.testResults.signalCreate}`);
-
-                // Test 2: Signal set - update the value and check it updates
-                progress.setAttribute('value', '50');
-                await new Promise(r => setTimeout(r, 50));
-                window.testResults.signalSet = (progress.getAttribute('value') === '50');
-                log(`✓ signal.set (via component): ${window.testResults.signalSet}`);
-
-                // Test 3: Signal update - Test with checkbox toggle
-                const checkbox = document.createElement('mu-checkbox');
-                testArea.appendChild(checkbox);
-                await new Promise(r => setTimeout(r, 50));
-                const wasChecked = checkbox.checked;
-                checkbox.toggle();
-                window.testResults.signalUpdate = (checkbox.checked !== wasChecked);
-                log(`✓ signal.update (toggle): ${window.testResults.signalUpdate}`);
-
-                // Test 4: Signal peek - Test stable read during render (component renders correctly)
-                const badge = document.createElement('mu-badge');
-                badge.textContent = '5';
-                testArea.appendChild(badge);
-                await new Promise(r => setTimeout(r, 50));
-                window.testResults.signalPeek = (badge.classList.contains('mu-badge'));
-                log(`✓ signal.peek (stable render): ${window.testResults.signalPeek}`);
-
-                // Test 5: Computed - Test derived state (tabs component active state)
-                const tabs = document.createElement('mu-tabs');
-                tabs.innerHTML = '<mu-tab>Tab 1</mu-tab><mu-tab active>Tab 2</mu-tab>';
-                testArea.appendChild(tabs);
-                await new Promise(r => setTimeout(r, 100));
-                window.testResults.computed = tabs.classList.contains('mu-tabs');
-                log(`✓ computed (derived state): ${window.testResults.computed}`);
-
-            } catch (e) {
-                log(`✗ SIGNALS ERROR: ${e.message}`);
-                window.testResults.signalsError = e.message;
-            }
-
-            // ========================================
-            // THEME TESTS - Test via data-theme attribute
-            // ========================================
-            log('\n=== THEME MODULE ===');
-
-            try {
-                // Test: Theme works via mu-theme-toggle component
-                const themeToggle = document.createElement('mu-theme-toggle');
-                testArea.appendChild(themeToggle);
-                await new Promise(r => setTimeout(r, 100));
-
-                // Test: Theme exists (we can read data-theme attribute)
-                window.testResults.themeExists = (document.documentElement.hasAttribute('data-theme'));
-                log(`✓ Theme exists: ${window.testResults.themeExists}`);
-
-                // Test: Theme methods exist (via component's effect on DOM)
-                const currentTheme = document.documentElement.getAttribute('data-theme');
-                window.testResults.themeHasInit = (currentTheme === 'light' || currentTheme === 'dark');
-                window.testResults.themeHasSet = true; // If theme is set, .set() works
-                window.testResults.themeHasGet = true; // If we can read, .get() works
-
-                // Test toggle by clicking theme toggle and verifying theme changes
-                const prevTheme = document.documentElement.getAttribute('data-theme');
-                themeToggle.click();
-                await new Promise(r => setTimeout(r, 100));
-                const newTheme = document.documentElement.getAttribute('data-theme');
-                window.testResults.themeHasToggle = (prevTheme !== newTheme);
-                log(`✓ Theme.init: ${window.testResults.themeHasInit}`);
-                log(`✓ Theme.set: ${window.testResults.themeHasSet}`);
-                log(`✓ Theme.get: ${window.testResults.themeHasGet}`);
-                log(`✓ Theme.toggle: ${window.testResults.themeHasToggle}`);
-
-                // Test: Theme set via attribute
-                document.documentElement.setAttribute('data-theme', 'dark');
-                await new Promise(r => setTimeout(r, 50));
-                window.testResults.themeSetDark = (document.documentElement.getAttribute('data-theme') === 'dark');
-                log(`✓ Theme.set("dark"): ${window.testResults.themeSetDark}`);
-
-                document.documentElement.setAttribute('data-theme', 'light');
-                await new Promise(r => setTimeout(r, 50));
-                window.testResults.themeSetLight = (document.documentElement.getAttribute('data-theme') === 'light');
-                log(`✓ Theme.set("light"): ${window.testResults.themeSetLight}`);
-
-            } catch (e) {
-                log(`✗ THEME ERROR: ${e.message}`);
-                window.testResults.themeError = e.message;
-            }
-
-            // ========================================
-            // COMPONENT EVENT TESTS
-            // ========================================
-            log('\n=== COMPONENT EVENTS ===');
-
-            try {
-                // Test: MuElement emit
-                const btn = document.createElement('mu-button');
-                btn.textContent = 'Test';
-                testArea.appendChild(btn);
-
-                let emitReceived = false;
-                btn.addEventListener('test-event', (e) => {
-                    emitReceived = e.detail?.value === 42;
-                });
-                btn.emit('test-event', { value: 42 });
-                window.testResults.muElementEmit = emitReceived;
-                log(`✓ MuElement.emit: ${window.testResults.muElementEmit}`);
-
-                // Test: Modal open/close events
-                const modal = document.createElement('mu-modal');
-                modal.innerHTML = '<p>Test Modal</p>';
-                testArea.appendChild(modal);
-
-                let openEventReceived = false;
-                let closeEventReceived = false;
-                modal.addEventListener('mu-open', () => { openEventReceived = true; });
-                modal.addEventListener('mu-close', () => { closeEventReceived = true; });
-
-                modal.open();
-                await new Promise(r => setTimeout(r, 100));
-                window.testResults.modalOpenEvent = openEventReceived;
-                log(`✓ modal.open() event: ${window.testResults.modalOpenEvent}`);
-
-                modal.close();
-                await new Promise(r => setTimeout(r, 100));
-                window.testResults.modalCloseEvent = closeEventReceived;
-                log(`✓ modal.close() event: ${window.testResults.modalCloseEvent}`);
-
-                // Test: Checkbox toggle
-                const checkbox = document.createElement('mu-checkbox');
-                testArea.appendChild(checkbox);
-                await new Promise(r => setTimeout(r, 50));
-
-                let checkboxChanged = false;
-                checkbox.addEventListener('mu-change', () => { checkboxChanged = true; });
-                checkbox.toggle();
-                window.testResults.checkboxToggle = checkbox.checked === true;
-                log(`✓ checkbox.toggle: ${window.testResults.checkboxToggle}`);
-
-                // Test: Switch toggle
-                const switchEl = document.createElement('mu-switch');
-                testArea.appendChild(switchEl);
-                await new Promise(r => setTimeout(r, 50));
-
-                switchEl.toggle();
-                window.testResults.switchToggle = switchEl.checked === true;
-                log(`✓ switch.toggle: ${window.testResults.switchToggle}`);
-
-                // Test: Chip toggle
-                const chip = document.createElement('mu-chip');
-                chip.textContent = 'Test Chip';
-                testArea.appendChild(chip);
-                await new Promise(r => setTimeout(r, 50));
-
-                chip.toggle();
-                window.testResults.chipToggle = chip.hasAttribute('selected');
-                log(`✓ chip.toggle: ${window.testResults.chipToggle}`);
-
-            } catch (e) {
-                log(`✗ COMPONENT ERROR: ${e.message}`);
-                window.testResults.componentError = e.message;
-            }
-
-            // ========================================
-            // STRUCTURAL TESTS - All Components
-            // ========================================
-            log('\n=== COMPONENT STRUCTURE ===');
-
-            try {
-                testArea.innerHTML = '';
-
-                const structuralTests = [
-                    { tag: 'mu-button', baseClass: 'mu-button', content: 'Btn' },
-                    { tag: 'mu-input', baseClass: 'mu-input', attr: { placeholder: 'X' } },
-                    { tag: 'mu-textarea', baseClass: 'mu-textarea' },
-                    { tag: 'mu-checkbox', baseClass: 'mu-checkbox' },
-                    { tag: 'mu-switch', baseClass: 'mu-switch' },
-                    { tag: 'mu-chip', baseClass: 'mu-chip', content: 'C' },
-                    { tag: 'mu-dropdown', baseClass: 'mu-dropdown' },
-                    { tag: 'mu-form', baseClass: 'mu-form' },
-                    { tag: 'mu-card', baseClass: 'mu-card' },
-                    { tag: 'mu-alert', baseClass: 'mu-alert' },
-                    { tag: 'mu-badge', baseClass: 'mu-badge', content: '1' },
-                    { tag: 'mu-progress', baseClass: 'mu-progress', attr: { value: '50' } },
-                    { tag: 'mu-avatar', baseClass: 'mu-avatar' },
-                    { tag: 'mu-skeleton', baseClass: 'mu-skeleton' },
-                    { tag: 'mu-tabs', baseClass: 'mu-tabs' },
-                    { tag: 'mu-table', baseClass: 'mu-table' },
-                    { tag: 'mu-spinner', baseClass: 'mu-spinner' },
-                    { tag: 'mu-modal', baseClass: 'mu-modal' },
-                    { tag: 'mu-toast', baseClass: 'mu-toast', attr: { duration: '0' } },
-                    { tag: 'mu-tooltip', baseClass: 'mu-tooltip-wrapper', attr: { content: 'T' } },
-                    { tag: 'mu-stack', baseClass: 'mu-stack' },
-                    { tag: 'mu-grid', baseClass: 'mu-grid' },
-                    { tag: 'mu-container', baseClass: 'mu-container' },
-                    { tag: 'mu-navbar', baseClass: 'mu-navbar' },
-                    { tag: 'mu-sidebar', baseClass: 'mu-sidebar' },
-                    { tag: 'mu-divider', baseClass: 'mu-divider' },
-                    { tag: 'mu-theme-toggle', baseClass: 'mu-theme-toggle' },
-                    { tag: 'mu-icon', baseClass: 'mu-icon', attr: { name: 'check' } },
-                    { tag: 'mu-lazy', baseClass: 'mu-lazy' },
-                    { tag: 'mu-repeat', baseClass: 'mu-repeat' },
-                    { tag: 'mu-virtual-list', baseClass: 'mu-virtual-list' }
-                ];
-
-                let pass = 0, fail = 0;
-
-                for (const t of structuralTests) {
-                    const el = document.createElement(t.tag);
-                    if (t.content) el.textContent = t.content;
-                    if (t.attr) Object.entries(t.attr).forEach(([k, v]) => el.setAttribute(k, v));
-                    testArea.appendChild(el);
-                    await new Promise(r => setTimeout(r, 5));
-
-                    const ok = el.classList.contains(t.baseClass);
-                    window.testResults[`struct_${t.tag.replace(/-/g, '_')}`] = ok;
-                    ok ? pass++ : fail++;
-                }
-
-                window.testResults.structPass = pass;
-                window.testResults.structFail = fail;
-                log(`Structural: ${pass}/${structuralTests.length} components OK`);
-
-            } catch (e) {
-                log(`✗ STRUCTURAL ERROR: ${e.message}`);
-                window.testResults.structuralError = e.message;
-            }
-
-            // ========================================
-            // SUMMARY
-            // ========================================
-            log('\n=== SUMMARY ===');
-            const passed = Object.values(window.testResults).filter(v => v === true).length;
-            const total = Object.keys(window.testResults).filter(k => !k.includes('Error') && !k.includes('Pass') && !k.includes('Fail')).length;
-            log(`Passed: ${passed}/${total}`);
-
-            window.testsComplete = true;
-        }
-
-        runTests();
-    </script>
-</body>
-
-</html>