microui-wc 0.1.0 → 0.1.2

package/tests/e2e/layout-css-fallback.test.js

@@ -1,334 +0,0 @@
-/**
- * @fileoverview Layout CSS Fallback Tests
- * 
- * Tests to ensure mu-stack and mu-grid elements have CSS fallback styles
- * that work BEFORE JavaScript custom element upgrade.
- * 
- * This prevents the "flash of unstyled content" (FOUC) issue where
- * layout elements have no gap/flex/grid until JS loads.
- */
-
-import { describe, test, expect, beforeAll, 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));
-
-// MD3 spacing tokens
-const MD3_SPACING = { xs: 4, sm: 8, md: 16, lg: 24, xl: 32 };
-
-describe('Layout CSS Fallback 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 === '/' || url.pathname === '/shell.html') {
-                    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'
-                    };
-
-                    return new Response(content, {
-                        headers: { 'Content-Type': mimeTypes[ext] || 'application/octet-stream' }
-                    });
-                } catch (e) {
-                    return new Response('Error: ' + e.message, { status: 500 });
-                }
-            }
-        });
-
-        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-layout_css_fallback-${Date.now()}-${Math.random().toString(36).slice(2)}`
-        });
-        page = await browser.newPage();
-    }, 60000);
-
-    afterAll(async () => {
-        if (browser) await browser.close();
-        if (server) server.stop();
-    });
-
-    // ========================================
-    // MU-STACK CSS FALLBACK TESTS
-    // ========================================
-
-    describe('mu-stack CSS Fallback', () => {
-        test('mu-stack should have display:flex from CSS', async () => {
-            await page.goto(`http://localhost:${server.port}/demo/shell.html#cards`, {
-                waitUntil: 'networkidle0'
-            });
-            await delay(500);
-
-            const display = await page.evaluate(() => {
-                const stack = document.querySelector('mu-stack');
-                if (!stack) return null;
-                return window.getComputedStyle(stack).display;
-            });
-
-            expect(display).toBe('flex');
-        }, 15000);
-
-        test('mu-stack[gap="md"] should have 16px gap from CSS', async () => {
-            await page.goto(`http://localhost:${server.port}/demo/shell.html#cards`, {
-                waitUntil: 'networkidle0'
-            });
-            await delay(500);
-
-            const gap = await page.evaluate(() => {
-                const stack = document.querySelector('mu-stack[gap="md"]');
-                if (!stack) return null;
-                return window.getComputedStyle(stack).gap;
-            });
-
-            expect(gap).toBe('16px');
-        }, 15000);
-
-        test('mu-stack[gap="lg"] should have 24px gap', async () => {
-            await page.goto(`http://localhost:${server.port}/demo/shell.html#cards`, {
-                waitUntil: 'networkidle0'
-            });
-            await delay(500);
-
-            const gap = await page.evaluate(() => {
-                const stack = document.querySelector('mu-stack[gap="lg"]');
-                if (!stack) return null;
-                return window.getComputedStyle(stack).gap;
-            });
-
-            // May not exist on all pages
-            if (gap) {
-                expect(gap).toBe('24px');
-            }
-        }, 15000);
-
-        test('mu-stack[direction="row"] should have flex-direction:row', async () => {
-            await page.goto(`http://localhost:${server.port}/demo/shell.html#cards`, {
-                waitUntil: 'networkidle0'
-            });
-            await delay(500);
-
-            const direction = await page.evaluate(() => {
-                const stack = document.querySelector('mu-stack[direction="row"]');
-                if (!stack) return null;
-                return window.getComputedStyle(stack).flexDirection;
-            });
-
-            expect(direction).toBe('row');
-        }, 15000);
-    });
-
-    // ========================================
-    // MU-GRID CSS FALLBACK TESTS
-    // ========================================
-
-    describe('mu-grid CSS Fallback', () => {
-        test('mu-grid should have display:grid from CSS', async () => {
-            await page.goto(`http://localhost:${server.port}/demo/shell.html#cards`, {
-                waitUntil: 'networkidle0'
-            });
-            await delay(500);
-
-            const display = await page.evaluate(() => {
-                const grid = document.querySelector('mu-grid');
-                if (!grid) return null;
-                return window.getComputedStyle(grid).display;
-            });
-
-            expect(display).toBe('grid');
-        }, 15000);
-
-        test('mu-grid[gap="md"] should have 16px gap from CSS', async () => {
-            await page.goto(`http://localhost:${server.port}/demo/shell.html#cards`, {
-                waitUntil: 'networkidle0'
-            });
-            await delay(500);
-
-            const gap = await page.evaluate(() => {
-                const grid = document.querySelector('mu-grid[gap="md"]');
-                if (!grid) return null;
-                return window.getComputedStyle(grid).gap;
-            });
-
-            expect(gap).toBe('16px');
-        }, 15000);
-
-        test('mu-grid[cols="3"] should have 3 column template', async () => {
-            await page.goto(`http://localhost:${server.port}/demo/shell.html#cards`, {
-                waitUntil: 'networkidle0'
-            });
-            await delay(500);
-
-            const cols = await page.evaluate(() => {
-                const grid = document.querySelector('mu-grid[cols="3"]');
-                if (!grid) return null;
-                return window.getComputedStyle(grid).gridTemplateColumns;
-            });
-
-            // Should contain 3 columns (exact value may vary based on viewport)
-            expect(cols).not.toBeNull();
-            // On wide screens: "repeat(3, 1fr)" or computed pixel values
-            // On narrow screens: "1fr" (collapsed)
-        }, 15000);
-    });
-
-    // ========================================
-    // VISUAL GAP TESTS
-    // ========================================
-
-    describe('Visual Gap Verification', () => {
-        test('cards in mu-grid should have visible gap between them', async () => {
-            // Use wide viewport to ensure 3-column grid
-            await page.setViewport({ width: 1200, height: 800 });
-            await page.goto(`http://localhost:${server.port}/demo/shell.html#cards`, {
-                waitUntil: 'networkidle0'
-            });
-            await delay(800);
-
-            const spacing = await page.evaluate(() => {
-                const grid = document.querySelector('mu-grid[cols="3"][gap="md"]');
-                if (!grid) return { found: false, reason: 'no_grid' };
-
-                const cards = grid.querySelectorAll('mu-card');
-                if (cards.length < 2) return { found: false, reason: 'not_enough_cards' };
-
-                // Measure horizontal gap between first two cards
-                const rect1 = cards[0].getBoundingClientRect();
-                const rect2 = cards[1].getBoundingClientRect();
-
-                // If on same row, check horizontal gap
-                if (Math.abs(rect1.top - rect2.top) < 5) {
-                    const horizontalGap = rect2.left - rect1.right;
-                    return { found: true, gap: Math.round(horizontalGap), type: 'horizontal' };
-                }
-
-                // If stacked, check vertical gap
-                const verticalGap = rect2.top - rect1.bottom;
-                return { found: true, gap: Math.round(verticalGap), type: 'vertical' };
-            });
-
-            expect(spacing.found).toBe(true);
-            expect(spacing.gap).toBeGreaterThanOrEqual(MD3_SPACING.sm);
-        }, 15000);
-
-        test('cards in mu-stack should have visible gap between them', async () => {
-            await page.goto(`http://localhost:${server.port}/demo/shell.html#cards`, {
-                waitUntil: 'networkidle0'
-            });
-            await delay(800);
-
-            const spacing = await page.evaluate(() => {
-                // Find a vertical mu-stack with cards
-                const stacks = document.querySelectorAll('mu-stack[gap]');
-                for (const stack of stacks) {
-                    // Skip horizontal stacks
-                    if (stack.getAttribute('direction') === 'row') continue;
-
-                    const cards = stack.querySelectorAll(':scope > mu-card');
-                    if (cards.length >= 2) {
-                        const rect1 = cards[0].getBoundingClientRect();
-                        const rect2 = cards[1].getBoundingClientRect();
-                        const gap = rect2.top - rect1.bottom;
-                        return { found: true, gap: Math.round(gap) };
-                    }
-                }
-                return { found: false };
-            });
-
-            if (spacing.found && spacing.gap > 0) {
-                // Structure found with positive gap - verify MD3 compliance
-                expect(spacing.gap).toBeGreaterThanOrEqual(MD3_SPACING.sm);
-            } else if (spacing.found && spacing.gap <= 0) {
-                // Structure found but gap=0 or negative (cards overlapping/touching)
-                // This can happen if cards are adjacent but not siblings, or measurement error
-                console.log('Skipping: mu-stack with cards found but gap measurement is', spacing.gap);
-                expect(true).toBe(true);
-            } else {
-                // Structure not found on page - test cannot verify, skip gracefully
-                console.log('Skipping gap test: no vertical mu-stack with card children found');
-                expect(true).toBe(true);
-            }
-        }, 15000);
-    });
-
-    // ========================================
-    // RESPONSIVE TESTS
-    // ========================================
-
-    describe('Responsive Behavior', () => {
-        test('mu-grid[cols="3"] should collapse to 1 column on mobile', async () => {
-            // Set mobile viewport BEFORE navigating
-            await page.setViewport({ width: 375, height: 667 });
-            await page.goto(`http://localhost:${server.port}/demo/shell.html#cards`, {
-                waitUntil: 'networkidle0'
-            });
-
-            // Reload page to ensure JS modules initialize with correct viewport
-            // This is necessary because Chrome headless may not reflect viewport
-            // correctly during initial module evaluation
-            await page.reload({ waitUntil: 'networkidle0' });
-            await delay(500);
-
-            const result = await page.evaluate(() => {
-                const grid = document.querySelector('mu-grid[cols="3"]');
-                if (!grid) return { found: false, reason: 'no_grid' };
-
-                const cards = grid.querySelectorAll('mu-card');
-                if (cards.length < 2) return { found: false, reason: 'not_enough_cards' };
-
-                const rect1 = cards[0].getBoundingClientRect();
-                const rect2 = cards[1].getBoundingClientRect();
-                const computed = window.getComputedStyle(grid);
-
-                // Cards should be stacked (rect2 below rect1)
-                return {
-                    found: true,
-                    stacked: rect2.top > rect1.bottom - 5,
-                    windowWidth: window.innerWidth,
-                    gridTemplateColumns: computed.gridTemplateColumns,
-                    inlineStyle: grid.style.gridTemplateColumns,
-                    rect1: { top: rect1.top, bottom: rect1.bottom },
-                    rect2: { top: rect2.top, bottom: rect2.bottom }
-                };
-            });
-
-            // On compact (< 600px), should be 1fr (stacked)
-            if (result.found) {
-                expect(result.stacked).toBe(true);
-            } else {
-                // Test structure not found - skip gracefully
-                console.log('Skipping: grid structure not found -', result.reason);
-                expect(true).toBe(true);
-            }
-        }, 15000);
-    });
-});
-

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

@@ -1,111 +0,0 @@
-/**
- * @fileoverview E2E Tests for mu-alert Component
- * Covers: role=alert, dismiss method
- */
-
-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-alert 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-alert 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_alert-${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#alerts`, { waitUntil: 'networkidle0' });
-        await delay(500);
-        const isRegistered = await page.evaluate(() => customElements.get('mu-alert') !== undefined);
-        expect(isRegistered).toBe(true);
-    });
-
-    test('should render with base class', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#alerts`, { waitUntil: 'networkidle0' });
-        await delay(500);
-        const hasClass = await page.evaluate(() => document.querySelector('mu-alert')?.classList.contains('mu-alert'));
-        expect(hasClass).toBe(true);
-    });
-
-    // Covers: test.skip('should set role alert (E2E only)')
-    test('should set role alert', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#alerts`, { waitUntil: 'networkidle0' });
-        await delay(500);
-        const role = await page.evaluate(() => document.querySelector('mu-alert')?.getAttribute('role'));
-        expect(role).toBe('alert');
-    });
-
-    // Covers: test.skip('should have dismiss method (E2E only)')
-    test('should have dismiss method', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#alerts`, { waitUntil: 'networkidle0' });
-        await delay(500);
-        const hasDismiss = await page.evaluate(() => typeof document.querySelector('mu-alert')?.dismiss === 'function');
-        expect(hasDismiss).toBe(true);
-    });
-
-    test('dismiss should remove alert from DOM', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#alerts`, { waitUntil: 'networkidle0' });
-        await delay(500);
-        const result = await page.evaluate(async () => {
-            const alerts = document.querySelectorAll('mu-alert');
-            const countBefore = alerts.length;
-            if (countBefore === 0) return { removed: false };
-
-            const alert = alerts[0];
-            alert.dismiss?.();
-            await new Promise(r => setTimeout(r, 500)); // Wait for animation
-
-            const countAfter = document.querySelectorAll('mu-alert').length;
-            return { removed: countAfter < countBefore };
-        });
-        expect(result.removed).toBe(true);
-    });
-
-    test('should support severity attribute', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#alerts`, { waitUntil: 'networkidle0' });
-        await delay(500);
-        const result = await page.evaluate(() => {
-            const alertWithSeverity = document.querySelector('mu-alert[severity]');
-            return { hasSeverity: alertWithSeverity !== null };
-        });
-        expect(result.hasSeverity).toBe(true);
-    });
-
-    test('should have aria-live polite', async () => {
-        await page.goto(`http://localhost:${server.port}/demo/shell.html#alerts`, { waitUntil: 'networkidle0' });
-        await delay(500);
-        const ariaLive = await page.evaluate(() => document.querySelector('mu-alert')?.getAttribute('aria-live'));
-        expect(['polite', 'assertive']).toContain(ariaLive);
-    });
-});