microui-wc 0.1.1 → 0.1.2

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

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

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

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