microui-wc 0.1.1 → 0.1.2

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

@@ -1,242 +0,0 @@
-/**
- * @fileoverview Comprehensive E2E Tests for mu-textarea 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('mu-textarea 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-textarea 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_textarea-${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#inputs`, { waitUntil: 'networkidle0' });
-        await delay(500);
-        const isRegistered = await page.evaluate(() => customElements.get('mu-textarea') !== undefined);
-        expect(isRegistered).toBe(true);
-    });
-
-    test('should render with base class', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#inputs`, { waitUntil: 'networkidle0' });
-        await delay(500);
-        const hasClass = await page.evaluate(() => document.querySelector('mu-textarea')?.classList.contains('mu-textarea'));
-        expect(hasClass).toBe(true);
-    });
-
-    test('should render native textarea element', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#inputs`, { waitUntil: 'networkidle0' });
-        await delay(500);
-        const hasTextarea = await page.evaluate(() => document.querySelector('mu-textarea textarea') !== null);
-        expect(hasTextarea).toBe(true);
-    });
-
-    test('should have placeholder attribute forwarded', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#inputs`, { waitUntil: 'networkidle0' });
-        await delay(500);
-        const placeholder = await page.evaluate(() => {
-            const ta = document.querySelector('mu-textarea[placeholder] textarea');
-            return ta?.placeholder;
-        });
-        expect(placeholder).toBeTruthy();
-    });
-
-    test('should support value getter/setter', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#inputs`, { waitUntil: 'networkidle0' });
-        await delay(500);
-        const result = await page.evaluate(() => {
-            const ta = document.querySelector('mu-textarea');
-            const initial = ta.value;
-            ta.value = 'Test content';
-            const afterSet = ta.value;
-            return { initial, afterSet };
-        });
-        expect(result.afterSet).toBe('Test content');
-    });
-
-    test('should emit mu-input event on input', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#inputs`, { waitUntil: 'networkidle0' });
-        await delay(500);
-        const result = await page.evaluate(() => {
-            return new Promise(resolve => {
-                const ta = document.querySelector('mu-textarea');
-                let fired = false;
-                ta.addEventListener('mu-input', () => { fired = true; });
-                const native = ta.querySelector('textarea');
-                native.value = 'test';
-                native.dispatchEvent(new Event('input', { bubbles: true }));
-                setTimeout(() => resolve({ fired }), 100);
-            });
-        });
-        expect(result.fired).toBe(true);
-    });
-
-    test('should emit mu-change event on change', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#inputs`, { waitUntil: 'networkidle0' });
-        await delay(500);
-        const result = await page.evaluate(() => {
-            return new Promise(resolve => {
-                const ta = document.querySelector('mu-textarea');
-                let fired = false;
-                ta.addEventListener('mu-change', () => { fired = true; });
-                const native = ta.querySelector('textarea');
-                native.value = 'test';
-                native.dispatchEvent(new Event('change', { bubbles: true }));
-                setTimeout(() => resolve({ fired }), 100);
-            });
-        });
-        expect(result.fired).toBe(true);
-    });
-
-    test('should have display block', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#inputs`, { waitUntil: 'networkidle0' });
-        await delay(500);
-        const display = await page.evaluate(() => getComputedStyle(document.querySelector('mu-textarea')).display);
-        expect(display).toBe('block');
-    });
-
-    test('should have focus method', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#inputs`, { waitUntil: 'networkidle0' });
-        await delay(500);
-        const hasFocus = await page.evaluate(() => typeof document.querySelector('mu-textarea').focus === 'function');
-        expect(hasFocus).toBe(true);
-    });
-
-    // ========================================
-    // ROWS ATTRIBUTE (was skipped in unit tests)
-    // Note: mu-textarea applies rows at render time only
-    // ========================================
-
-    test('should support rows attribute at render time', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#inputs`, { waitUntil: 'networkidle0' });
-        await delay(500);
-        const result = await page.evaluate(() => {
-            // Create a new mu-textarea with rows attribute
-            const container = document.createElement('div');
-            container.innerHTML = '<mu-textarea rows="8" placeholder="Test rows"></mu-textarea>';
-            document.body.appendChild(container);
-
-            // Wait for render
-            return new Promise(resolve => {
-                setTimeout(() => {
-                    const ta = container.querySelector('mu-textarea');
-                    const native = ta?.querySelector('textarea');
-                    resolve({
-                        hasAttr: ta?.getAttribute('rows') === '8',
-                        nativeRows: native?.rows || native?.getAttribute('rows'),
-                        rowsApplied: native?.rows === 8 || native?.getAttribute('rows') === '8'
-                    });
-                }, 200);
-            });
-        });
-        expect(result.hasAttr).toBe(true);
-        expect(result.rowsApplied).toBe(true);
-    });
-
-    test('should reflect rows attribute to native textarea', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#inputs`, { waitUntil: 'networkidle0' });
-        await delay(500);
-        const result = await page.evaluate(() => {
-            const ta = document.querySelector('mu-textarea');
-            const native = ta.querySelector('textarea');
-            return {
-                hasTextarea: native !== null,
-                defaultRows: native?.rows || null
-            };
-        });
-        expect(result.hasTextarea).toBe(true);
-        // Default rows should be a number > 0
-        expect(result.defaultRows).toBeGreaterThan(0);
-    });
-
-    // ========================================
-    // READONLY ATTRIBUTE (was skipped in unit tests)
-    // Note: mu-textarea applies readonly at render time only
-    // ========================================
-
-    test('should support readonly attribute at render time', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#inputs`, { waitUntil: 'networkidle0' });
-        await delay(500);
-        const result = await page.evaluate(() => {
-            // Create a new mu-textarea with readonly attribute
-            const container = document.createElement('div');
-            container.innerHTML = '<mu-textarea readonly placeholder="Readonly test"></mu-textarea>';
-            document.body.appendChild(container);
-
-            // Wait for render
-            return new Promise(resolve => {
-                setTimeout(() => {
-                    const ta = container.querySelector('mu-textarea');
-                    const native = ta?.querySelector('textarea');
-                    resolve({
-                        hasAttr: ta?.hasAttribute('readonly'),
-                        isReadOnly: native?.readOnly || native?.hasAttribute('readonly')
-                    });
-                }, 200);
-            });
-        });
-        expect(result.hasAttr).toBe(true);
-        expect(result.isReadOnly).toBe(true);
-    });
-
-    test('readonly textarea should have readonly native element', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#inputs`, { waitUntil: 'networkidle0' });
-        await delay(500);
-        const result = await page.evaluate(() => {
-            // Find existing textarea with readonly or create one
-            let ta = document.querySelector('mu-textarea[readonly]');
-            if (!ta) {
-                const container = document.createElement('div');
-                container.innerHTML = '<mu-textarea readonly placeholder="Test readonly"></mu-textarea>';
-                document.body.appendChild(container);
-                ta = container.querySelector('mu-textarea');
-            }
-
-            return new Promise(resolve => {
-                setTimeout(() => {
-                    const native = ta?.querySelector('textarea');
-                    resolve({
-                        hasNative: native !== null,
-                        isReadOnly: native?.readOnly || native?.hasAttribute('readonly'),
-                        hasAttr: ta?.hasAttribute('readonly')
-                    });
-                }, 200);
-            });
-        });
-        expect(result.hasNative).toBe(true);
-        expect(result.hasAttr).toBe(true);
-    });
-});

package/tests/e2e/mu-virtual-list.test.js

@@ -1,427 +0,0 @@
-/**
- * @fileoverview Comprehensive E2E Tests for mu-virtual-list Component
- * 
- * Tests:
- * - Component registration and basic rendering
- * - Virtual scrolling with large datasets
- * - Item rendering and visibility
- * - scrollToIndex method
- * - Performance with large lists
- */
-
-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-virtual-list 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');
-                }
-
-                // Serve the virtual-list test harness
-                if (url.pathname === '/test-virtual-list.html') {
-                    return new Response(`
-                        <!DOCTYPE html>
-                        <html>
-                        <head>
-                            <title>Virtual List Test</title>
-                            <script type="module" src="/dist/microui.esm.js"></script>
-                            <style>
-                                #test-list {
-                                    height: 400px;
-                                    border: 1px solid #ccc;
-                                }
-                            </style>
-                        </head>
-                        <body>
-                            <mu-virtual-list id="test-list" item-height="50" buffer="5"></mu-virtual-list>
-                            <script type="module">
-                                const list = document.getElementById('test-list');
-                                // Create 1000 items
-                                const items = Array.from({ length: 1000 }, (_, i) => ({
-                                    id: i,
-                                    name: 'Item ' + i
-                                }));
-                                list.items = items;
-                                list.renderItem = (item) => '<div class="item">Item ' + item.id + ': ' + item.name + '</div>';
-                            </script>
-                        </body>
-                        </html>
-                    `, { headers: { 'Content-Type': 'text/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-virtual-list 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_virtual_list-${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}/test-virtual-list.html`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const isRegistered = await page.evaluate(() =>
-            customElements.get('mu-virtual-list') !== undefined
-        );
-
-        expect(isRegistered).toBe(true);
-    });
-
-    test('should render with base class', async () => {
-        await page.goto(`http://localhost:${server.port}/test-virtual-list.html`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const hasBaseClass = await page.evaluate(() => {
-            const el = document.querySelector('mu-virtual-list');
-            return el?.classList.contains('mu-virtual-list');
-        });
-
-        expect(hasBaseClass).toBe(true);
-    });
-
-    // ========================================
-    // VIEWPORT AND CONTAINER STRUCTURE
-    // ========================================
-
-    test('should render viewport container', async () => {
-        await page.goto(`http://localhost:${server.port}/test-virtual-list.html`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            const el = document.querySelector('mu-virtual-list');
-            const viewport = el?.querySelector('.mu-virtual-list__viewport');
-            return {
-                hasViewport: viewport !== null,
-                overflowY: viewport ? getComputedStyle(viewport).overflowY : null
-            };
-        });
-
-        expect(result.hasViewport).toBe(true);
-        expect(result.overflowY).toBe('auto');
-    });
-
-    test('should render content container with correct total height', async () => {
-        await page.goto(`http://localhost:${server.port}/test-virtual-list.html`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            const el = document.querySelector('mu-virtual-list');
-            const content = el?.querySelector('.mu-virtual-list__content');
-            const height = content ? parseInt(content.style.height) : 0;
-            // 1000 items * 50px = 50000px
-            return { height, expected: 1000 * 50 };
-        });
-
-        expect(result.height).toBe(result.expected);
-    });
-
-    // ========================================
-    // VIRTUAL RENDERING
-    // ========================================
-
-    test('should only render visible items (virtual scrolling)', async () => {
-        await page.goto(`http://localhost:${server.port}/test-virtual-list.html`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            const el = document.querySelector('mu-virtual-list');
-            const items = el?.querySelectorAll('.mu-virtual-list__item');
-            // With 400px height, 50px items, and buffer of 5, should have ~18-20 items
-            return {
-                renderedCount: items?.length || 0,
-                totalItems: 1000
-            };
-        });
-
-        // Should NOT render all 1000 items
-        expect(result.renderedCount).toBeLessThan(50);
-        expect(result.renderedCount).toBeGreaterThan(0);
-    });
-
-    test('should render items with correct positioning', async () => {
-        await page.goto(`http://localhost:${server.port}/test-virtual-list.html`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            const el = document.querySelector('mu-virtual-list');
-            const items = el?.querySelectorAll('.mu-virtual-list__item');
-            if (!items || items.length === 0) return { error: 'No items' };
-
-            const firstItem = items[0];
-            const top = parseInt(firstItem.style.top);
-            const height = parseInt(firstItem.style.height);
-            const position = getComputedStyle(firstItem).position;
-
-            return { top, height, position };
-        });
-
-        expect(result.position).toBe('absolute');
-        expect(result.height).toBe(50);
-        expect(result.top).toBe(0); // First visible item starts at 0
-    });
-
-    // ========================================
-    // SCROLL BEHAVIOR
-    // ========================================
-
-    test('should update visible items on scroll', async () => {
-        await page.goto(`http://localhost:${server.port}/test-virtual-list.html`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(async () => {
-            const el = document.querySelector('mu-virtual-list');
-            const viewport = el.querySelector('.mu-virtual-list__viewport');
-
-            // Get first visible item before scroll
-            const beforeItems = el.querySelectorAll('.mu-virtual-list__item');
-            const beforeIndex = parseInt(beforeItems[0]?.getAttribute('data-index') || '0');
-
-            // Scroll down 500px (10 items)
-            viewport.scrollTop = 500;
-
-            // Wait for throttled scroll handler (16ms) + render time
-            await new Promise(r => setTimeout(r, 150));
-
-            const afterItems = el.querySelectorAll('.mu-virtual-list__item');
-            const afterIndex = parseInt(afterItems[0]?.getAttribute('data-index') || '0');
-
-            return { beforeIndex, afterIndex, scrolled: afterIndex > beforeIndex };
-        });
-
-        expect(result.scrolled).toBe(true);
-        expect(result.afterIndex).toBeGreaterThan(result.beforeIndex);
-    });
-
-    // ========================================
-    // scrollToIndex METHOD
-    // ========================================
-
-    test('should have scrollToIndex method', async () => {
-        await page.goto(`http://localhost:${server.port}/test-virtual-list.html`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const hasMethod = await page.evaluate(() => {
-            const el = document.querySelector('mu-virtual-list');
-            return typeof el?.scrollToIndex === 'function';
-        });
-
-        expect(hasMethod).toBe(true);
-    });
-
-    test('scrollToIndex should scroll to correct position', async () => {
-        await page.goto(`http://localhost:${server.port}/test-virtual-list.html`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(async () => {
-            const el = document.querySelector('mu-virtual-list');
-            const viewport = el.querySelector('.mu-virtual-list__viewport');
-
-            el.scrollToIndex(100);
-
-            // Wait for scroll
-            await new Promise(r => setTimeout(r, 100));
-
-            const scrollTop = viewport.scrollTop;
-            const expectedScrollTop = 100 * 50; // index * itemHeight
-
-            return { scrollTop, expectedScrollTop };
-        });
-
-        expect(result.scrollTop).toBe(result.expectedScrollTop);
-    });
-
-    // ========================================
-    // ITEMS PROPERTY
-    // ========================================
-
-    test('should have items getter and setter', async () => {
-        await page.goto(`http://localhost:${server.port}/test-virtual-list.html`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            const el = document.querySelector('mu-virtual-list');
-            const items = el.items;
-            return {
-                isArray: Array.isArray(items),
-                length: items?.length
-            };
-        });
-
-        expect(result.isArray).toBe(true);
-        expect(result.length).toBe(1000);
-    });
-
-    test('should update when items are changed', async () => {
-        await page.goto(`http://localhost:${server.port}/test-virtual-list.html`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(async () => {
-            const el = document.querySelector('mu-virtual-list');
-            const content = el.querySelector('.mu-virtual-list__content');
-
-            const heightBefore = parseInt(content.style.height);
-
-            // Set new items array
-            el.items = Array.from({ length: 500 }, (_, i) => ({ id: i, name: 'New Item ' + i }));
-
-            // Wait for render
-            await new Promise(r => setTimeout(r, 100));
-
-            const heightAfter = parseInt(content.style.height);
-
-            return { heightBefore, heightAfter, changed: heightBefore !== heightAfter };
-        });
-
-        expect(result.changed).toBe(true);
-        expect(result.heightAfter).toBe(500 * 50); // 500 items * 50px
-    });
-
-    // ========================================
-    // RENDER ITEM CALLBACK
-    // ========================================
-
-    test('should use custom renderItem callback', async () => {
-        await page.goto(`http://localhost:${server.port}/test-virtual-list.html`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            const el = document.querySelector('mu-virtual-list');
-            const item = el.querySelector('.mu-virtual-list__item');
-            return {
-                hasCustomContent: item !== null,
-                text: item?.textContent?.trim()
-            };
-        });
-
-        expect(result.hasCustomContent).toBe(true);
-        // The item renders the content from renderItem callback
-        expect(result.text).toBeTruthy();
-    });
-
-    // ========================================
-    // DATA ATTRIBUTES
-    // ========================================
-
-    test('should have data-index attribute on items', async () => {
-        await page.goto(`http://localhost:${server.port}/test-virtual-list.html`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            const el = document.querySelector('mu-virtual-list');
-            const items = el.querySelectorAll('.mu-virtual-list__item');
-            const indices = Array.from(items).map(i => parseInt(i.getAttribute('data-index')));
-            return {
-                hasIndices: indices.length > 0,
-                firstIndex: indices[0],
-                allHaveIndex: indices.every(i => !isNaN(i))
-            };
-        });
-
-        expect(result.hasIndices).toBe(true);
-        expect(result.firstIndex).toBe(0);
-        expect(result.allHaveIndex).toBe(true);
-    });
-
-    test('should have data-mu-state=visible on rendered items', async () => {
-        await page.goto(`http://localhost:${server.port}/test-virtual-list.html`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            const el = document.querySelector('mu-virtual-list');
-            const items = el.querySelectorAll('.mu-virtual-list__item[data-mu-state="visible"]');
-            return { count: items.length };
-        });
-
-        expect(result.count).toBeGreaterThan(0);
-    });
-});