microui-wc 0.1.0

package/tests/e2e/mu-radio.test.js

@@ -0,0 +1,113 @@
+/**
+ * @fileoverview E2E Tests for mu-radio Component
+ * Covers: outer circle, inner circle rendering
+ */
+
+import { describe, test, expect, beforeAll, afterEach, afterAll } from 'bun:test';
+import { launchBrowser, puppeteer } from './puppeteer-helper.js';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+describe('mu-radio E2E Tests', () => {
+    let browser, page, server;
+
+    beforeAll(async () => {
+        const projectRoot = join(__dirname, '../..');
+        server = Bun.serve({
+            port: 0,
+            async fetch(req) {
+                const url = new URL(req.url);
+                let filePath = url.pathname === '/' ? join(projectRoot, 'demo/shell.html') : join(projectRoot, url.pathname);
+                try {
+                    const file = Bun.file(filePath);
+                    if (!await file.exists()) return new Response('Not Found', { status: 404 });
+                    const ext = filePath.split('.').pop();
+                    const types = { 'html': 'text/html', 'js': 'text/javascript', 'css': 'text/css', 'json': 'application/json', 'svg': 'image/svg+xml' };
+                    return new Response(await file.arrayBuffer(), { headers: { 'Content-Type': types[ext] || 'application/octet-stream' } });
+                } catch (e) { return new Response('Error', { status: 500 }); }
+            }
+        });
+        console.log(`[mu-radio test] Server at http://localhost:${server.port}`);
+        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-mu_radio-${Date.now()}`
+        });
+        page = await browser.newPage();
+    }, 60000);
+
+    afterEach(async () => { await page.goto('about:blank'); });
+    afterAll(async () => { if (browser) await browser.close(); if (server) server.stop(); });
+
+    test('should be registered as custom element', async () => {
+        await page.goto(`http://localhost:${server.port}/demo/shell.html#radios`, { waitUntil: 'networkidle0' });
+        await delay(500);
+        const isRegistered = await page.evaluate(() => customElements.get('mu-radio') !== undefined);
+        expect(isRegistered).toBe(true);
+    });
+
+    test('should render with base class', async () => {
+        await page.goto(`http://localhost:${server.port}/demo/shell.html#radios`, { waitUntil: 'networkidle0' });
+        await delay(500);
+        const hasClass = await page.evaluate(() => document.querySelector('mu-radio')?.classList.contains('mu-radio'));
+        expect(hasClass).toBe(true);
+    });
+
+    // Covers: test.skip('mu-radio should render outer circle (E2E only)')
+    test('should render circle element', async () => {
+        await page.goto(`http://localhost:${server.port}/demo/shell.html#radios`, { waitUntil: 'networkidle0' });
+        await delay(500);
+        const result = await page.evaluate(() => {
+            const radio = document.querySelector('mu-radio');
+            const circle = radio.querySelector('.mu-radio__circle');
+            return { hasCircle: circle !== null };
+        });
+        expect(result.hasCircle).toBe(true);
+    });
+
+    // Covers: test.skip('mu-radio should render inner circle (E2E only)')
+    test('should render dot element', async () => {
+        await page.goto(`http://localhost:${server.port}/demo/shell.html#radios`, { waitUntil: 'networkidle0' });
+        await delay(500);
+        const result = await page.evaluate(() => {
+            const radio = document.querySelector('mu-radio');
+            const dot = radio.querySelector('.mu-radio__dot');
+            return { hasDot: dot !== null };
+        });
+        expect(result.hasDot).toBe(true);
+    });
+
+    test('should have role radio', async () => {
+        await page.goto(`http://localhost:${server.port}/demo/shell.html#radios`, { waitUntil: 'networkidle0' });
+        await delay(500);
+        const role = await page.evaluate(() => document.querySelector('mu-radio')?.getAttribute('role'));
+        expect(role).toBe('radio');
+    });
+
+    test('should have aria-checked attribute', async () => {
+        await page.goto(`http://localhost:${server.port}/demo/shell.html#radios`, { waitUntil: 'networkidle0' });
+        await delay(500);
+        const ariaChecked = await page.evaluate(() => document.querySelector('mu-radio')?.getAttribute('aria-checked'));
+        expect(['true', 'false']).toContain(ariaChecked);
+    });
+
+    test('should toggle selection on click', async () => {
+        await page.goto(`http://localhost:${server.port}/demo/shell.html#radios`, { waitUntil: 'networkidle0' });
+        await delay(500);
+        const result = await page.evaluate(async () => {
+            const radio = document.querySelector('mu-radio:not([checked])');
+            if (!radio) return { toggled: false };
+            const beforeChecked = radio.getAttribute('aria-checked');
+            radio.click();
+            await new Promise(r => setTimeout(r, 100));
+            const afterChecked = radio.getAttribute('aria-checked');
+            return { toggled: beforeChecked !== afterChecked };
+        });
+        expect(result.toggled).toBe(true);
+    });
+});

package/tests/e2e/mu-skeleton.test.js

@@ -0,0 +1,140 @@
+/**
+ * @fileoverview Comprehensive E2E Tests for mu-skeleton Component
+ */
+
+import { describe, test, expect, beforeAll, afterEach, afterAll } from 'bun:test';
+import { launchBrowser, puppeteer } from './puppeteer-helper.js';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+describe.skip('mu-skeleton E2E Tests', () => {
+    let browser, page, server;
+
+    beforeAll(async () => {
+        const projectRoot = join(__dirname, '../..');
+        server = Bun.serve({
+            port: 0,
+            async fetch(req) {
+                const url = new URL(req.url);
+
+                // Serve test harness with skeleton elements
+                if (url.pathname === '/test-skeleton') {
+                    return new Response(`
+                        <!DOCTYPE html>
+                        <html>
+                        <head>
+                            <link rel="stylesheet" href="/src/styles/main.css">
+                        </head>
+                        <body>
+                            <div id="test-container">
+                                <mu-skeleton id="default"></mu-skeleton>
+                                <mu-skeleton id="sized" width="200px" height="30px"></mu-skeleton>
+                                <mu-skeleton id="circle" variant="circle" size="50px"></mu-skeleton>
+                                <mu-skeleton id="text" variant="text" lines="3"></mu-skeleton>
+                            </div>
+                            <script type="module" src="/src/index.js"></script>
+                        </body>
+                        </html>
+                    `, { headers: { 'Content-Type': 'text/html' } });
+                }
+
+                let filePath = url.pathname === '/' ? join(projectRoot, 'demo/shell.html') : join(projectRoot, url.pathname);
+                try {
+                    const file = Bun.file(filePath);
+                    if (!await file.exists()) return new Response('Not Found', { status: 404 });
+                    const ext = filePath.split('.').pop();
+                    const types = { 'html': 'text/html', 'js': 'text/javascript', 'css': 'text/css', 'json': 'application/json', 'svg': 'image/svg+xml' };
+                    return new Response(await file.arrayBuffer(), { headers: { 'Content-Type': types[ext] || 'application/octet-stream' } });
+                } catch (e) { return new Response('Error', { status: 500 }); }
+            }
+        });
+        console.log(`[mu-skeleton test] Server at http://localhost:${server.port}`);
+        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-mu_skeleton-${Date.now()}`
+        });
+        page = await browser.newPage();
+    }, 60000);
+
+    afterEach(async () => { await page.goto('about:blank'); });
+    afterAll(async () => { if (browser) await browser.close(); if (server) server.stop(); });
+
+    test('should be registered as custom element', async () => {
+        await page.goto(`http://localhost:${server.port}/test-skeleton`, { waitUntil: 'networkidle0' });
+        await delay(500);
+        const isRegistered = await page.evaluate(() => customElements.get('mu-skeleton') !== undefined);
+        expect(isRegistered).toBe(true);
+    });
+
+    test('should render with base class', async () => {
+        await page.goto(`http://localhost:${server.port}/test-skeleton`, { waitUntil: 'networkidle0' });
+        await delay(500);
+        const hasClass = await page.evaluate(() => document.querySelector('mu-skeleton')?.classList.contains('mu-skeleton'));
+        expect(hasClass).toBe(true);
+    });
+
+    test('should have display block', async () => {
+        await page.goto(`http://localhost:${server.port}/test-skeleton`, { waitUntil: 'networkidle0' });
+        await delay(500);
+        const display = await page.evaluate(() => getComputedStyle(document.querySelector('mu-skeleton')).display);
+        expect(display).toBe('block');
+    });
+
+    test('should have animation', async () => {
+        await page.goto(`http://localhost:${server.port}/test-skeleton`, { waitUntil: 'networkidle0' });
+        await delay(500);
+        const hasAnimation = await page.evaluate(() => {
+            const skeleton = document.querySelector('#default');
+            const style = getComputedStyle(skeleton);
+            return style.animationName !== 'none';
+        });
+        expect(hasAnimation).toBe(true);
+    });
+
+    test('should support width and height attributes', async () => {
+        await page.goto(`http://localhost:${server.port}/test-skeleton`, { waitUntil: 'networkidle0' });
+        await delay(500);
+        const result = await page.evaluate(() => {
+            const skeleton = document.querySelector('#sized');
+            return {
+                width: skeleton.style.width,
+                height: skeleton.style.height
+            };
+        });
+        expect(result.width).toBe('200px');
+        expect(result.height).toBe('30px');
+    });
+
+    test('should support circle variant with 50% border-radius', async () => {
+        await page.goto(`http://localhost:${server.port}/test-skeleton`, { waitUntil: 'networkidle0' });
+        await delay(500);
+        const borderRadius = await page.evaluate(() => {
+            const skeleton = document.querySelector('#circle');
+            return skeleton.style.borderRadius;
+        });
+        expect(borderRadius).toBe('50%');
+    });
+
+    test('should inject keyframes style', async () => {
+        await page.goto(`http://localhost:${server.port}/test-skeleton`, { waitUntil: 'networkidle0' });
+        await delay(500);
+        const hasKeyframes = await page.evaluate(() => document.getElementById('mu-skeleton-styles') !== null);
+        expect(hasKeyframes).toBe(true);
+    });
+
+    test('should support text variant with multiple lines', async () => {
+        await page.goto(`http://localhost:${server.port}/test-skeleton`, { waitUntil: 'networkidle0' });
+        await delay(500);
+        const lineCount = await page.evaluate(() => {
+            const skeleton = document.querySelector('#text');
+            return skeleton.querySelectorAll('.mu-skeleton__line').length;
+        });
+        expect(lineCount).toBe(3);
+    });
+});

package/tests/e2e/mu-switch.test.js

@@ -0,0 +1,415 @@
+/**
+ * @fileoverview Comprehensive E2E Tests for mu-switch Component
+ * 
+ * Tests:
+ * - Component registration and basic rendering
+ * - Click toggle behavior
+ * - Disabled state
+ * - Keyboard accessibility (Space/Enter)
+ * - ARIA attributes
+ * - Event emission
+ * - Property accessors
+ */
+
+import { describe, test, expect, beforeAll, afterEach, 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);
+
+const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+describe('mu-switch 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 filePath = join(projectRoot, url.pathname);
+
+                if (url.pathname === '/') {
+                    filePath = join(projectRoot, 'demo/shell.html');
+                }
+
+                try {
+                    const file = Bun.file(filePath);
+                    if (!await file.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'
+                    };
+
+                    return new Response(content, {
+                        headers: { 'Content-Type': mimeTypes[ext] || 'application/octet-stream' }
+                    });
+                } catch (e) {
+                    return new Response('Error: ' + e.message, { status: 500 });
+                }
+            }
+        });
+
+        console.log(`[mu-switch test] Server started at http://localhost:${server.port}`);
+
+        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-mu_switch-${Date.now()}-${Math.random().toString(36).slice(2)}`
+        });
+        page = await browser.newPage();
+    }, 60000);
+
+    afterEach(async () => {
+        await page.goto('about:blank');
+    });
+
+    afterAll(async () => {
+        if (browser) await browser.close();
+        if (server) server.stop();
+    });
+
+    // ========================================
+    // COMPONENT REGISTRATION
+    // ========================================
+
+    test('should be registered as custom element', async () => {
+        await page.goto(`http://localhost:${server.port}/demo/shell.html#switches`, {
+            waitUntil: 'networkidle0'
+        });
+        await delay(500);
+
+        const isRegistered = await page.evaluate(() =>
+            customElements.get('mu-switch') !== undefined
+        );
+
+        expect(isRegistered).toBe(true);
+    });
+
+    test('should render with base class', async () => {
+        await page.goto(`http://localhost:${server.port}/demo/shell.html#switches`, {
+            waitUntil: 'networkidle0'
+        });
+        await delay(500);
+
+        const hasBaseClass = await page.evaluate(() => {
+            const el = document.querySelector('mu-switch');
+            return el?.classList.contains('mu-switch');
+        });
+
+        expect(hasBaseClass).toBe(true);
+    });
+
+    test('should render track and thumb', async () => {
+        await page.goto(`http://localhost:${server.port}/demo/shell.html#switches`, {
+            waitUntil: 'networkidle0'
+        });
+        await delay(500);
+
+        const result = await page.evaluate(() => {
+            const el = document.querySelector('mu-switch');
+            return {
+                hasTrack: el?.querySelector('.mu-switch__track') !== null,
+                hasThumb: el?.querySelector('.mu-switch__thumb') !== null
+            };
+        });
+
+        expect(result.hasTrack).toBe(true);
+        expect(result.hasThumb).toBe(true);
+    });
+
+    // ========================================
+    // CLICK TOGGLE BEHAVIOR
+    // ========================================
+
+    test('should toggle checked state on click', async () => {
+        await page.goto(`http://localhost:${server.port}/demo/shell.html#switches`, {
+            waitUntil: 'networkidle0'
+        });
+        await delay(500);
+
+        // Wait for custom element to be defined and upgraded
+        await page.evaluate(() => customElements.whenDefined('mu-switch'));
+
+        const result = await page.evaluate(async () => {
+            const switches = document.querySelectorAll('mu-switch:not([disabled])');
+            let sw = null;
+            for (const s of switches) {
+                if (!s.hasAttribute('checked')) {
+                    sw = s;
+                    break;
+                }
+            }
+            if (!sw) return { error: 'No unchecked switch found' };
+
+            const before = sw.hasAttribute('checked');
+            sw.click();
+            await new Promise(r => setTimeout(r, 50)); // Let the click handler execute
+            const after = sw.hasAttribute('checked');
+            sw.click();
+            await new Promise(r => setTimeout(r, 50));
+            const afterSecond = sw.hasAttribute('checked');
+            return { before, after, afterSecond };
+        });
+
+        expect(result.before).toBe(false);
+        expect(result.after).toBe(true);
+        expect(result.afterSecond).toBe(false);
+    });
+
+    test('should emit mu-change event on toggle', async () => {
+        await page.goto(`http://localhost:${server.port}/demo/shell.html#switches`, {
+            waitUntil: 'networkidle0'
+        });
+        await delay(500);
+
+        const result = await page.evaluate(() => {
+            return new Promise(resolve => {
+                const switches = document.querySelectorAll('mu-switch:not([disabled])');
+                let sw = null;
+                for (const s of switches) {
+                    if (!s.hasAttribute('checked')) {
+                        sw = s;
+                        break;
+                    }
+                }
+                if (!sw) {
+                    resolve({ error: 'No switch found' });
+                    return;
+                }
+
+                let eventData = null;
+                sw.addEventListener('mu-change', (e) => {
+                    eventData = e.detail;
+                });
+
+                sw.click();
+
+                setTimeout(() => {
+                    resolve({
+                        fired: eventData !== null,
+                        checked: eventData?.checked
+                    });
+                }, 100);
+            });
+        });
+
+        expect(result.fired).toBe(true);
+        expect(result.checked).toBe(true);
+    });
+
+    // ========================================
+    // DISABLED STATE
+    // ========================================
+
+    test('should not toggle when disabled', async () => {
+        await page.goto(`http://localhost:${server.port}/demo/shell.html#switches`, {
+            waitUntil: 'networkidle0'
+        });
+        await delay(500);
+
+        const result = await page.evaluate(() => {
+            const sw = document.querySelector('mu-switch[disabled]');
+            if (!sw) return { error: 'No disabled switch found' };
+
+            const before = sw.hasAttribute('checked');
+            sw.click();
+            const after = sw.hasAttribute('checked');
+            return { before, after };
+        });
+
+        expect(result.before).toBe(result.after);
+    });
+
+    test('disabled switch should have tabindex=-1', async () => {
+        await page.goto(`http://localhost:${server.port}/demo/shell.html#switches`, {
+            waitUntil: 'networkidle0'
+        });
+        await delay(500);
+
+        const tabindex = await page.evaluate(() => {
+            const sw = document.querySelector('mu-switch[disabled]');
+            return sw?.getAttribute('tabindex');
+        });
+
+        expect(tabindex).toBe('-1');
+    });
+
+    // ========================================
+    // ACCESSIBILITY
+    // ========================================
+
+    test('should have role=switch', async () => {
+        await page.goto(`http://localhost:${server.port}/demo/shell.html#switches`, {
+            waitUntil: 'networkidle0'
+        });
+        await delay(500);
+
+        const role = await page.evaluate(() => {
+            const sw = document.querySelector('mu-switch');
+            return sw?.getAttribute('role');
+        });
+
+        expect(role).toBe('switch');
+    });
+
+    test('should have aria-checked matching state', async () => {
+        await page.goto(`http://localhost:${server.port}/demo/shell.html#switches`, {
+            waitUntil: 'networkidle0'
+        });
+        await delay(500);
+        await page.evaluate(() => customElements.whenDefined('mu-switch'));
+
+        const result = await page.evaluate(async () => {
+            // Find any non-disabled switch and test both states  
+            const sw = document.querySelector('mu-switch:not([disabled])');
+            if (!sw) return { error: 'No switch found' };
+
+            // Ensure it starts unchecked
+            if (sw.hasAttribute('checked')) {
+                sw.click();
+                await new Promise(r => setTimeout(r, 50));
+            }
+
+            const beforeClick = sw.getAttribute('aria-checked');
+            sw.click();
+            await new Promise(r => setTimeout(r, 50));
+            const afterClick = sw.getAttribute('aria-checked');
+
+            return { beforeClick, afterClick };
+        });
+
+        expect(result.beforeClick).toBe('false');
+        expect(result.afterClick).toBe('true');
+    });
+
+    test('should have aria-disabled when disabled', async () => {
+        await page.goto(`http://localhost:${server.port}/demo/shell.html#switches`, {
+            waitUntil: 'networkidle0'
+        });
+        await delay(500);
+
+        const ariaDisabled = await page.evaluate(() => {
+            const sw = document.querySelector('mu-switch[disabled]');
+            return sw?.getAttribute('aria-disabled');
+        });
+
+        expect(ariaDisabled).toBe('true');
+    });
+
+    // ========================================
+    // KEYBOARD ACCESSIBILITY
+    // ========================================
+
+    test('should toggle on Space key', async () => {
+        await page.goto(`http://localhost:${server.port}/demo/shell.html#switches`, {
+            waitUntil: 'networkidle0'
+        });
+        await delay(500);
+        await page.evaluate(() => customElements.whenDefined('mu-switch'));
+
+        const result = await page.evaluate(async () => {
+            const switches = document.querySelectorAll('mu-switch:not([disabled])');
+            let sw = null;
+            for (const s of switches) {
+                if (!s.hasAttribute('checked')) {
+                    sw = s;
+                    break;
+                }
+            }
+            if (!sw) return { error: 'No switch found' };
+
+            const before = sw.hasAttribute('checked');
+            const event = new KeyboardEvent('keydown', { key: ' ', bubbles: true });
+            sw.dispatchEvent(event);
+            await new Promise(r => setTimeout(r, 50));
+            const after = sw.hasAttribute('checked');
+            return { before, after };
+        });
+
+        expect(result.before).toBe(false);
+        expect(result.after).toBe(true);
+    });
+
+    test('should toggle on Enter key', async () => {
+        await page.goto(`http://localhost:${server.port}/demo/shell.html#switches`, {
+            waitUntil: 'networkidle0'
+        });
+        await delay(500);
+
+        await page.evaluate(() => customElements.whenDefined('mu-switch'));
+
+        const result = await page.evaluate(async () => {
+            const switches = document.querySelectorAll('mu-switch:not([disabled])');
+            let sw = null;
+            for (const s of switches) {
+                if (!s.hasAttribute('checked')) {
+                    sw = s;
+                    break;
+                }
+            }
+            if (!sw) return { error: 'No switch found' };
+
+            const before = sw.hasAttribute('checked');
+            const event = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true });
+            sw.dispatchEvent(event);
+            await new Promise(r => setTimeout(r, 50));
+            const after = sw.hasAttribute('checked');
+            return { before, after };
+        });
+
+        expect(result.before).toBe(false);
+        expect(result.after).toBe(true);
+    });
+
+    // ========================================
+    // PROPERTY ACCESSORS
+    // ========================================
+
+    test('should support checked property getter/setter', async () => {
+        await page.goto(`http://localhost:${server.port}/demo/shell.html#switches`, {
+            waitUntil: 'networkidle0'
+        });
+        await delay(500);
+
+        const result = await page.evaluate(() => {
+            const switches = document.querySelectorAll('mu-switch:not([disabled])');
+            let sw = null;
+            for (const s of switches) {
+                if (!s.hasAttribute('checked')) {
+                    sw = s;
+                    break;
+                }
+            }
+            if (!sw) return { error: 'No switch found' };
+
+            const initialProp = sw.checked;
+            sw.checked = true;
+            const afterSet = sw.checked;
+            const attrPresent = sw.hasAttribute('checked');
+            sw.checked = false;
+            const afterUnset = sw.checked;
+            return { initialProp, afterSet, attrPresent, afterUnset };
+        });
+
+        expect(result.initialProp).toBe(false);
+        expect(result.afterSet).toBe(true);
+        expect(result.attrPresent).toBe(true);
+        expect(result.afterUnset).toBe(false);
+    });
+});