microui-wc 0.1.1 → 0.1.2

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

@@ -1,494 +0,0 @@
-/**
- * @fileoverview Comprehensive Unit Tests for mu-tabs Component
- * 
- * Tests:
- * - Component registration and basic rendering
- * - Tab click handling and active state switching
- * - Event emission (mu-tab-change)
- * - Indicator positioning
- * - Accessibility attributes
- */
-
-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);
-
-// Helper to wait
-const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
-
-describe('mu-tabs Component E2E Tests', () => {
-    let browser;
-    let page;
-    let server;
-
-    beforeAll(async () => {
-        const projectRoot = join(__dirname, '../..');
-
-        // Start HTTP server
-        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);
-                    const exists = await file.exists();
-                    if (!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-tabs 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_tabs-${Date.now()}-${Math.random().toString(36).slice(2)}`
-        });
-        page = await browser.newPage();
-    }, 60000);
-
-    afterEach(async () => {
-        // Navigate to blank page to reset state between tests
-        await page.goto('about:blank');
-    });
-
-    afterAll(async () => {
-        if (browser) await browser.close();
-        if (server) server.stop();
-    });
-
-    // ========================================
-    // COMPONENT REGISTRATION
-    // ========================================
-
-    test('mu-tabs should be registered as custom element', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#tabs`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const isRegistered = await page.evaluate(() => {
-            return customElements.get('mu-tabs') !== undefined;
-        });
-
-        expect(isRegistered).toBe(true);
-    });
-
-    test('mu-tab should be registered as custom element', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#tabs`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const isRegistered = await page.evaluate(() => {
-            return customElements.get('mu-tab') !== undefined;
-        });
-
-        expect(isRegistered).toBe(true);
-    });
-
-    // ========================================
-    // BASIC RENDERING
-    // ========================================
-
-    test('mu-tabs should render with base class', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#tabs`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const hasBaseClass = await page.evaluate(() => {
-            const tabs = document.querySelector('mu-tabs');
-            return tabs ? tabs.classList.contains('mu-tabs') : false;
-        });
-
-        expect(hasBaseClass).toBe(true);
-    });
-
-    test('mu-tabs should create tabs list wrapper', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#tabs`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const hasList = await page.evaluate(() => {
-            const tabs = document.querySelector('mu-tabs');
-            return tabs ? tabs.querySelector('.mu-tabs__list') !== null : false;
-        });
-
-        expect(hasList).toBe(true);
-    });
-
-    // ========================================
-    // ACCESSIBILITY
-    // ========================================
-
-    test('mu-tabs list should have role=tablist', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#tabs`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const hasRole = await page.evaluate(() => {
-            const tabs = document.querySelector('mu-tabs');
-            if (!tabs) return false;
-            const list = tabs.querySelector('.mu-tabs__list');
-            return list ? list.getAttribute('role') === 'tablist' : false;
-        });
-
-        expect(hasRole).toBe(true);
-    });
-
-    test('mu-tab should have role=tab', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#tabs`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const hasRole = await page.evaluate(() => {
-            const tab = document.querySelector('mu-tab');
-            return tab ? tab.getAttribute('role') === 'tab' : false;
-        });
-
-        expect(hasRole).toBe(true);
-    });
-
-    test('active tab should have aria-selected=true', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#tabs`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const ariaSelected = await page.evaluate(() => {
-            const tabs = document.querySelectorAll('mu-tab');
-            if (tabs.length === 0) return null;
-            // First tab should be active by default
-            return tabs[0].getAttribute('aria-selected');
-        });
-
-        expect(ariaSelected).toBe('true');
-    });
-
-    test('inactive tabs should have aria-selected=false', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#tabs`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const ariaSelected = await page.evaluate(() => {
-            const tabs = document.querySelectorAll('mu-tab');
-            if (tabs.length < 2) return null;
-            // Second tab should be inactive by default
-            return tabs[1].getAttribute('aria-selected');
-        });
-
-        expect(ariaSelected).toBe('false');
-    });
-
-    // ========================================
-    // TAB SWITCHING
-    // ========================================
-
-    test('clicking a tab should update active attribute', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#tabs`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            const tabsContainer = document.querySelector('mu-tabs');
-            const tabs = document.querySelectorAll('mu-tab');
-            if (!tabsContainer || tabs.length < 2) {
-                return { before: null, after: null, clicked: false };
-            }
-
-            const before = tabsContainer.getAttribute('active');
-            tabs[1].click();
-            const after = tabsContainer.getAttribute('active');
-
-            return { before, after, clicked: true };
-        });
-
-        expect(result.clicked).toBe(true);
-        expect(result.before).toBe('0');
-        expect(result.after).toBe('1');
-    });
-
-    test('clicking a tab should add is-active class to that tab', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#tabs`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            const tabs = document.querySelectorAll('mu-tab');
-            if (tabs.length < 2) return { tab1Active: false, tab2Active: false };
-
-            // Click second tab
-            tabs[1].click();
-
-            return {
-                tab1Active: tabs[0].classList.contains('is-active'),
-                tab2Active: tabs[1].classList.contains('is-active')
-            };
-        });
-
-        expect(result.tab1Active).toBe(false);
-        expect(result.tab2Active).toBe(true);
-    });
-
-    test('clicking a tab should update aria-selected on all tabs', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#tabs`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            const tabs = document.querySelectorAll('mu-tab');
-            if (tabs.length < 2) return null;
-
-            // Click second tab
-            tabs[1].click();
-
-            return {
-                tab1AriaSelected: tabs[0].getAttribute('aria-selected'),
-                tab2AriaSelected: tabs[1].getAttribute('aria-selected')
-            };
-        });
-
-        expect(result.tab1AriaSelected).toBe('false');
-        expect(result.tab2AriaSelected).toBe('true');
-    });
-
-    // ========================================
-    // EVENT EMISSION
-    // ========================================
-
-    test('clicking a tab should emit mu-tab-change event', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#tabs`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const eventFired = await page.evaluate(() => {
-            return new Promise(resolve => {
-                const tabsContainer = document.querySelector('mu-tabs');
-                const tabs = document.querySelectorAll('mu-tab');
-                if (!tabsContainer || tabs.length < 2) {
-                    resolve({ fired: false, reason: 'No tabs found' });
-                    return;
-                }
-
-                let eventData = null;
-                tabsContainer.addEventListener('mu-tab-change', (e) => {
-                    eventData = e.detail;
-                });
-
-                tabs[1].click();
-
-                // Check immediately
-                setTimeout(() => {
-                    resolve({ fired: eventData !== null, index: eventData?.index });
-                }, 100);
-            });
-        });
-
-        expect(eventFired.fired).toBe(true);
-        expect(eventFired.index).toBe(1);
-    });
-
-    test('mu-tab-change event should have correct index in detail', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#tabs`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            return new Promise(resolve => {
-                const tabsContainer = document.querySelector('mu-tabs');
-                const tabs = document.querySelectorAll('mu-tab');
-                if (!tabsContainer || tabs.length < 3) {
-                    resolve({ success: false });
-                    return;
-                }
-
-                const indices = [];
-                tabsContainer.addEventListener('mu-tab-change', (e) => {
-                    indices.push(e.detail.index);
-                });
-
-                // Click each tab
-                tabs[0].click();
-                tabs[1].click();
-                tabs[2].click();
-
-                setTimeout(() => {
-                    resolve({ success: true, indices });
-                }, 100);
-            });
-        });
-
-        expect(result.success).toBe(true);
-        // Note: First click might not emit if already active
-        expect(result.indices).toContain(1);
-        expect(result.indices).toContain(2);
-    });
-
-    // ========================================
-    // INDICATOR POSITIONING
-    // ========================================
-
-    test('indicator should update position on tab switch', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#tabs`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(500);
-
-        const result = await page.evaluate(() => {
-            const tabsContainer = document.querySelector('mu-tabs');
-            const tabs = document.querySelectorAll('mu-tab');
-            const list = tabsContainer?.querySelector('.mu-tabs__list');
-            if (!list || tabs.length < 2) return null;
-
-            const beforeLeft = list.style.getPropertyValue('--indicator-left');
-            tabs[1].click();
-            const afterLeft = list.style.getPropertyValue('--indicator-left');
-
-            return { beforeLeft, afterLeft };
-        });
-
-        expect(result).not.toBeNull();
-        expect(result.beforeLeft).not.toBe(result.afterLeft);
-    });
-
-    // ========================================
-    // ENTERPRISE DEMO TABS
-    // ========================================
-
-    test('Enterprise section tabs should work correctly', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#enterprise`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(1000);
-
-        const result = await page.evaluate(() => {
-            const tabsContainer = document.getElementById('enterprise-doc-tabs');
-            if (!tabsContainer) return { found: false, issue: 'enterprise-doc-tabs not found' };
-
-            const tabs = tabsContainer.querySelectorAll('mu-tab');
-            if (tabs.length < 3) return { found: false, issue: `Only ${tabs.length} tabs found` };
-
-            // Store initial state
-            const initialActive = tabsContainer.getAttribute('active');
-
-            let eventFired = false;
-            let eventIndex = null;
-
-            tabsContainer.addEventListener('mu-tab-change', (e) => {
-                eventFired = true;
-                eventIndex = e.detail.index;
-            });
-
-            // Click EXAMPLES tab (index 2)
-            tabs[2].click();
-
-            const afterActive = tabsContainer.getAttribute('active');
-
-            return {
-                found: true,
-                tabCount: tabs.length,
-                initialActive,
-                afterActive,
-                eventFired,
-                eventIndex,
-                tab2HasIsActive: tabs[2].classList.contains('is-active')
-            };
-        });
-
-        expect(result.found).toBe(true);
-        expect(result.tabCount).toBe(3);
-        expect(result.afterActive).toBe('2');
-        expect(result.eventFired).toBe(true);
-        expect(result.eventIndex).toBe(2);
-        expect(result.tab2HasIsActive).toBe(true);
-    });
-
-    test('Enterprise section tab content should switch when tabs are clicked', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#enterprise`, {
-            waitUntil: 'networkidle0'
-        });
-        await delay(1000);
-
-        const result = await page.evaluate(() => {
-            const tabsContainer = document.getElementById('enterprise-doc-tabs');
-            const overview = document.getElementById('enterprise-overview');
-            const api = document.getElementById('enterprise-api');
-            const examples = document.getElementById('enterprise-examples');
-
-            if (!tabsContainer || !overview || !api || !examples) {
-                return { success: false, issue: 'Elements not found' };
-            }
-
-            // Setup listener to switch content (simulate setupDocTabs)
-            tabsContainer.addEventListener('mu-tab-change', (e) => {
-                const index = e.detail.index;
-                overview.style.display = index === 0 ? 'block' : 'none';
-                api.style.display = index === 1 ? 'block' : 'none';
-                examples.style.display = index === 2 ? 'block' : 'none';
-            });
-
-            // Initial state
-            const initialOverview = overview.style.display !== 'none';
-            const initialExamples = examples.style.display !== 'none';
-
-            // Click EXAMPLES tab
-            const tabs = tabsContainer.querySelectorAll('mu-tab');
-            tabs[2].click();
-
-            // After switching
-            const afterOverview = overview.style.display !== 'none';
-            const afterExamples = examples.style.display !== 'none';
-
-            return {
-                success: true,
-                initialOverview,
-                initialExamples,
-                afterOverview,
-                afterExamples
-            };
-        });
-
-        expect(result.success).toBe(true);
-        expect(result.afterOverview).toBe(false);
-        expect(result.afterExamples).toBe(true);
-    });
-});