microui-wc 0.1.0 → 0.1.2

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

@@ -1,489 +0,0 @@
-/**
- * @fileoverview Comprehensive E2E Tests for mu-checkbox Component
- * 
- * Tests:
- * - Component registration and basic rendering
- * - Click toggle behavior
- * - Disabled state
- * - Indeterminate state
- * - Keyboard accessibility (Space/Enter)
- * - ARIA attributes
- * - Event emission
- */
-
-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-checkbox 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-checkbox 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_checkbox-${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#checkboxes`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const isRegistered = await page.evaluate(() =>
-            customElements.get('mu-checkbox') !== undefined
-        );
-
-        expect(isRegistered).toBe(true);
-    });
-
-    test('should render with base class', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#checkboxes`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const hasBaseClass = await page.evaluate(() => {
-            const checkbox = document.querySelector('mu-checkbox');
-            return checkbox?.classList.contains('mu-checkbox');
-        });
-
-        expect(hasBaseClass).toBe(true);
-    });
-
-    test('should render checkbox box and label', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#checkboxes`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            const checkbox = document.querySelector('mu-checkbox');
-            return {
-                hasBox: checkbox?.querySelector('.mu-checkbox__box') !== null,
-                hasLabel: checkbox?.querySelector('.mu-checkbox__label') !== null
-            };
-        });
-
-        expect(result.hasBox).toBe(true);
-        expect(result.hasLabel).toBe(true);
-    });
-
-    // ========================================
-    // CLICK TOGGLE BEHAVIOR
-    // ========================================
-
-    test('should toggle checked state on click', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#checkboxes`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            // Find an unchecked checkbox
-            const checkboxes = document.querySelectorAll('mu-checkbox:not([disabled])');
-            let checkbox = null;
-            for (const cb of checkboxes) {
-                if (!cb.hasAttribute('checked') && !cb.hasAttribute('indeterminate')) {
-                    checkbox = cb;
-                    break;
-                }
-            }
-            if (!checkbox) return { error: 'No unchecked checkbox found' };
-
-            const before = checkbox.hasAttribute('checked');
-            checkbox.click();
-            const after = checkbox.hasAttribute('checked');
-            checkbox.click();
-            const afterSecond = checkbox.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#checkboxes`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            return new Promise(resolve => {
-                const checkboxes = document.querySelectorAll('mu-checkbox:not([disabled])');
-                let checkbox = null;
-                for (const cb of checkboxes) {
-                    if (!cb.hasAttribute('checked') && !cb.hasAttribute('indeterminate')) {
-                        checkbox = cb;
-                        break;
-                    }
-                }
-                if (!checkbox) {
-                    resolve({ error: 'No checkbox found' });
-                    return;
-                }
-
-                let eventData = null;
-                checkbox.addEventListener('mu-change', (e) => {
-                    eventData = e.detail;
-                });
-
-                checkbox.click();
-
-                setTimeout(() => {
-                    resolve({
-                        fired: eventData !== null,
-                        checked: eventData?.checked,
-                        indeterminate: eventData?.indeterminate
-                    });
-                }, 100);
-            });
-        });
-
-        expect(result.fired).toBe(true);
-        expect(result.checked).toBe(true);
-        expect(result.indeterminate).toBe(false);
-    });
-
-    // ========================================
-    // DISABLED STATE
-    // ========================================
-
-    test('should not toggle when disabled', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#checkboxes`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            const checkbox = document.querySelector('mu-checkbox[disabled]');
-            if (!checkbox) return { error: 'No disabled checkbox found' };
-
-            const before = checkbox.hasAttribute('checked');
-            checkbox.click();
-            const after = checkbox.hasAttribute('checked');
-            return { before, after };
-        });
-
-        expect(result.before).toBe(result.after); // State should not change
-    });
-
-    test('disabled checkbox should have tabindex=-1', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#checkboxes`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const tabindex = await page.evaluate(() => {
-            const checkbox = document.querySelector('mu-checkbox[disabled]');
-            return checkbox?.getAttribute('tabindex');
-        });
-
-        expect(tabindex).toBe('-1');
-    });
-
-    // ========================================
-    // INDETERMINATE STATE
-    // ========================================
-
-    test('should have indeterminate state rendered', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#checkboxes`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            const checkbox = document.querySelector('mu-checkbox[indeterminate]');
-            if (!checkbox) return { error: 'No indeterminate checkbox found' };
-
-            return {
-                hasAttr: checkbox.hasAttribute('indeterminate'),
-                ariaMixed: checkbox.getAttribute('aria-checked')
-            };
-        });
-
-        expect(result.hasAttr).toBe(true);
-        expect(result.ariaMixed).toBe('mixed');
-    });
-
-    test('click should clear indeterminate and set checked', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#checkboxes`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            const checkbox = document.querySelector('mu-checkbox[indeterminate]');
-            if (!checkbox) return { error: 'No indeterminate checkbox found' };
-
-            const beforeIndeterminate = checkbox.hasAttribute('indeterminate');
-            checkbox.click();
-            return {
-                beforeIndeterminate,
-                afterIndeterminate: checkbox.hasAttribute('indeterminate'),
-                afterChecked: checkbox.hasAttribute('checked')
-            };
-        });
-
-        expect(result.beforeIndeterminate).toBe(true);
-        expect(result.afterIndeterminate).toBe(false);
-        expect(result.afterChecked).toBe(true);
-    });
-
-    // ========================================
-    // ACCESSIBILITY
-    // ========================================
-
-    test('should have role=checkbox', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#checkboxes`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const role = await page.evaluate(() => {
-            const checkbox = document.querySelector('mu-checkbox');
-            return checkbox?.getAttribute('role');
-        });
-
-        expect(role).toBe('checkbox');
-    });
-
-    test('should have aria-checked matching state', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#checkboxes`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            const checked = document.querySelector('mu-checkbox[checked]:not([indeterminate])');
-            const indeterminate = document.querySelector('mu-checkbox[indeterminate]');
-            // Find unchecked
-            const unchecked = Array.from(document.querySelectorAll('mu-checkbox'))
-                .find(cb => !cb.hasAttribute('checked') && !cb.hasAttribute('indeterminate'));
-
-            return {
-                unchecked: unchecked?.getAttribute('aria-checked'),
-                checked: checked?.getAttribute('aria-checked'),
-                indeterminate: indeterminate?.getAttribute('aria-checked')
-            };
-        });
-
-        expect(result.unchecked).toBe('false');
-        expect(result.checked).toBe('true');
-        expect(result.indeterminate).toBe('mixed');
-    });
-
-    test('should have aria-disabled when disabled', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#checkboxes`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const ariaDisabled = await page.evaluate(() => {
-            const checkbox = document.querySelector('mu-checkbox[disabled]');
-            return checkbox?.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#checkboxes`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            const checkboxes = document.querySelectorAll('mu-checkbox:not([disabled])');
-            let checkbox = null;
-            for (const cb of checkboxes) {
-                if (!cb.hasAttribute('checked') && !cb.hasAttribute('indeterminate')) {
-                    checkbox = cb;
-                    break;
-                }
-            }
-            if (!checkbox) return { error: 'No checkbox found' };
-
-            const before = checkbox.hasAttribute('checked');
-
-            // Simulate Space key
-            const event = new KeyboardEvent('keydown', { key: ' ', bubbles: true });
-            checkbox.dispatchEvent(event);
-
-            const after = checkbox.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#checkboxes`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            const checkboxes = document.querySelectorAll('mu-checkbox:not([disabled])');
-            let checkbox = null;
-            for (const cb of checkboxes) {
-                if (!cb.hasAttribute('checked') && !cb.hasAttribute('indeterminate')) {
-                    checkbox = cb;
-                    break;
-                }
-            }
-            if (!checkbox) return { error: 'No checkbox found' };
-
-            const before = checkbox.hasAttribute('checked');
-
-            // Simulate Enter key
-            const event = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true });
-            checkbox.dispatchEvent(event);
-
-            const after = checkbox.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#checkboxes`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            const checkboxes = document.querySelectorAll('mu-checkbox:not([disabled])');
-            let checkbox = null;
-            for (const cb of checkboxes) {
-                if (!cb.hasAttribute('checked') && !cb.hasAttribute('indeterminate')) {
-                    checkbox = cb;
-                    break;
-                }
-            }
-            if (!checkbox) return { error: 'No checkbox found' };
-
-            const initialProp = checkbox.checked;
-            checkbox.checked = true;
-            const afterSet = checkbox.checked;
-            const attrPresent = checkbox.hasAttribute('checked');
-            checkbox.checked = false;
-            const afterUnset = checkbox.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);
-    });
-
-    test('should support indeterminate property getter/setter', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#checkboxes`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            const checkboxes = document.querySelectorAll('mu-checkbox:not([disabled])');
-            let checkbox = null;
-            for (const cb of checkboxes) {
-                if (!cb.hasAttribute('checked') && !cb.hasAttribute('indeterminate')) {
-                    checkbox = cb;
-                    break;
-                }
-            }
-            if (!checkbox) return { error: 'No checkbox found' };
-
-            const initialProp = checkbox.indeterminate;
-            checkbox.indeterminate = true;
-            const afterSet = checkbox.indeterminate;
-            const ariaMixed = checkbox.getAttribute('aria-checked');
-            checkbox.indeterminate = false;
-            const afterUnset = checkbox.indeterminate;
-            return { initialProp, afterSet, ariaMixed, afterUnset };
-        });
-
-        expect(result.initialProp).toBe(false);
-        expect(result.afterSet).toBe(true);
-        expect(result.ariaMixed).toBe('mixed');
-        expect(result.afterUnset).toBe(false);
-    });
-});