microui-wc 0.1.0 → 0.1.2

package/tests/core/keyboard.test.js

@@ -1,319 +0,0 @@
-/**
- * @fileoverview Unit tests for core/keyboard.js
- * Tests the centralized ESC Key Handler Stack
- */
-
-import { describe, expect, it, beforeEach, afterEach, mock } from 'bun:test';
-import { keyboard, KeyboardManager } from '../../src/core/keyboard.js';
-
-// Polyfill KeyboardEvent for happy-dom
-if (typeof globalThis.KeyboardEvent === 'undefined') {
-    globalThis.KeyboardEvent = class KeyboardEvent extends Event {
-        constructor(type, init = {}) {
-            super(type, init);
-            this.key = init.key || '';
-            this.code = init.code || '';
-            this.ctrlKey = init.ctrlKey || false;
-            this.shiftKey = init.shiftKey || false;
-            this.altKey = init.altKey || false;
-            this.metaKey = init.metaKey || false;
-        }
-    };
-}
-
-describe('KeyboardManager Singleton', () => {
-    it('should export keyboard singleton', () => {
-        expect(keyboard).toBeDefined();
-        expect(keyboard).toBeInstanceOf(KeyboardManager);
-    });
-
-    it('should export KeyboardManager class', () => {
-        expect(KeyboardManager).toBeDefined();
-        expect(typeof KeyboardManager).toBe('function');
-    });
-});
-
-describe('KeyboardManager.pushEscapeHandler', () => {
-    let unsubscribers = [];
-
-    afterEach(() => {
-        // Clean up all handlers after each test
-        unsubscribers.forEach(unsub => unsub?.());
-        unsubscribers = [];
-    });
-
-    it('should be a function', () => {
-        expect(typeof keyboard.pushEscapeHandler).toBe('function');
-    });
-
-    it('should return an unsubscribe function', () => {
-        const element = document.createElement('div');
-        const callback = mock(() => { });
-
-        const unsub = keyboard.pushEscapeHandler(element, callback);
-        unsubscribers.push(unsub);
-
-        expect(typeof unsub).toBe('function');
-    });
-
-    it('should increase stack depth when handler is added', () => {
-        const initialDepth = keyboard.stackDepth;
-
-        const element = document.createElement('div');
-        const callback = mock(() => { });
-        const unsub = keyboard.pushEscapeHandler(element, callback);
-        unsubscribers.push(unsub);
-
-        expect(keyboard.stackDepth).toBe(initialDepth + 1);
-    });
-
-    it('should decrease stack depth when unsubscribed', () => {
-        const element = document.createElement('div');
-        const callback = mock(() => { });
-
-        const unsub = keyboard.pushEscapeHandler(element, callback);
-        const depthAfterAdd = keyboard.stackDepth;
-
-        unsub();
-
-        expect(keyboard.stackDepth).toBe(depthAfterAdd - 1);
-    });
-
-    // NOTE: Event dispatching tests are skipped in unit tests due to linkedom limitations
-    // ESC key behavior is verified in E2E tests (tests/e2e/)
-    it.skip('should call topmost handler on ESC key (E2E only)', () => {
-        const element = document.createElement('div');
-        const callback = mock(() => { });
-
-        const unsub = keyboard.pushEscapeHandler(element, callback);
-        unsubscribers.push(unsub);
-
-        // Simulate ESC key press
-        const event = new KeyboardEvent('keydown', { key: 'Escape' });
-        document.dispatchEvent(event);
-
-        expect(callback).toHaveBeenCalled();
-    });
-
-    it.skip('should only call topmost handler in stack (LIFO) (E2E only)', () => {
-        const element1 = document.createElement('div');
-        const element2 = document.createElement('div');
-        const callback1 = mock(() => { });
-        const callback2 = mock(() => { });
-
-        const unsub1 = keyboard.pushEscapeHandler(element1, callback1);
-        const unsub2 = keyboard.pushEscapeHandler(element2, callback2);
-        unsubscribers.push(unsub1, unsub2);
-
-        // Simulate ESC key press
-        const event = new KeyboardEvent('keydown', { key: 'Escape' });
-        document.dispatchEvent(event);
-
-        // Only the second (topmost) handler should be called
-        expect(callback2).toHaveBeenCalled();
-        expect(callback1).not.toHaveBeenCalled();
-    });
-
-    it.skip('should call next handler after topmost is removed (E2E only)', () => {
-        const element1 = document.createElement('div');
-        const element2 = document.createElement('div');
-        const callback1 = mock(() => { });
-        const callback2 = mock(() => { });
-
-        const unsub1 = keyboard.pushEscapeHandler(element1, callback1);
-        const unsub2 = keyboard.pushEscapeHandler(element2, callback2);
-        unsubscribers.push(unsub1);
-
-        // Remove the topmost handler
-        unsub2();
-
-        // Simulate ESC key press
-        const event = new KeyboardEvent('keydown', { key: 'Escape' });
-        document.dispatchEvent(event);
-
-        // Now the first handler should be called
-        expect(callback1).toHaveBeenCalled();
-    });
-
-    it.skip('should not call handler for other keys (E2E only)', () => {
-        const element = document.createElement('div');
-        const callback = mock(() => { });
-
-        const unsub = keyboard.pushEscapeHandler(element, callback);
-        unsubscribers.push(unsub);
-
-        // Simulate Enter key press
-        const event = new KeyboardEvent('keydown', { key: 'Enter' });
-        document.dispatchEvent(event);
-
-        expect(callback).not.toHaveBeenCalled();
-    });
-
-    it('should handle unsubscribe being called multiple times', () => {
-        const element = document.createElement('div');
-        const callback = mock(() => { });
-
-        const unsub = keyboard.pushEscapeHandler(element, callback);
-        const depthBefore = keyboard.stackDepth;
-
-        // Call unsubscribe multiple times
-        unsub();
-        unsub();
-        unsub();
-
-        // Stack depth should only decrease once
-        expect(keyboard.stackDepth).toBe(depthBefore - 1);
-    });
-});
-
-describe('KeyboardManager.isTopmost', () => {
-    let unsubscribers = [];
-
-    afterEach(() => {
-        unsubscribers.forEach(unsub => unsub?.());
-        unsubscribers = [];
-    });
-
-    it('should be a function', () => {
-        expect(typeof keyboard.isTopmost).toBe('function');
-    });
-
-    it('should return false when stack is empty', () => {
-        // Clear stack first
-        const element = document.createElement('div');
-        expect(keyboard.isTopmost(element)).toBe(false);
-    });
-
-    it('should return true for topmost element', () => {
-        const element1 = document.createElement('div');
-        const element2 = document.createElement('div');
-
-        const unsub1 = keyboard.pushEscapeHandler(element1, () => { });
-        const unsub2 = keyboard.pushEscapeHandler(element2, () => { });
-        unsubscribers.push(unsub1, unsub2);
-
-        expect(keyboard.isTopmost(element2)).toBe(true);
-        expect(keyboard.isTopmost(element1)).toBe(false);
-    });
-
-    it('should update after handler is removed', () => {
-        const element1 = document.createElement('div');
-        const element2 = document.createElement('div');
-
-        const unsub1 = keyboard.pushEscapeHandler(element1, () => { });
-        const unsub2 = keyboard.pushEscapeHandler(element2, () => { });
-        unsubscribers.push(unsub1);
-
-        // Remove topmost
-        unsub2();
-
-        expect(keyboard.isTopmost(element1)).toBe(true);
-    });
-});
-
-describe('KeyboardManager.stackDepth', () => {
-    let unsubscribers = [];
-
-    afterEach(() => {
-        unsubscribers.forEach(unsub => unsub?.());
-        unsubscribers = [];
-    });
-
-    it('should be a number', () => {
-        expect(typeof keyboard.stackDepth).toBe('number');
-    });
-
-    it('should start at 0 or greater', () => {
-        expect(keyboard.stackDepth).toBeGreaterThanOrEqual(0);
-    });
-
-    it('should track multiple handlers correctly', () => {
-        const initialDepth = keyboard.stackDepth;
-
-        const unsub1 = keyboard.pushEscapeHandler(document.createElement('div'), () => { });
-        const unsub2 = keyboard.pushEscapeHandler(document.createElement('div'), () => { });
-        const unsub3 = keyboard.pushEscapeHandler(document.createElement('div'), () => { });
-        unsubscribers.push(unsub1, unsub2, unsub3);
-
-        expect(keyboard.stackDepth).toBe(initialDepth + 3);
-    });
-});
-
-describe('KeyboardManager Event Handling', () => {
-    let unsubscribers = [];
-
-    afterEach(() => {
-        unsubscribers.forEach(unsub => unsub?.());
-        unsubscribers = [];
-    });
-
-    it.skip('should prevent default on ESC when handlers exist (E2E only)', () => {
-        const element = document.createElement('div');
-        const callback = mock(() => { });
-
-        const unsub = keyboard.pushEscapeHandler(element, callback);
-        unsubscribers.push(unsub);
-
-        const event = new KeyboardEvent('keydown', { key: 'Escape', cancelable: true });
-        const preventDefaultSpy = mock(() => { });
-        event.preventDefault = preventDefaultSpy;
-
-        document.dispatchEvent(event);
-
-        expect(preventDefaultSpy).toHaveBeenCalled();
-    });
-
-    it.skip('should stop propagation on ESC when handlers exist (E2E only)', () => {
-        const element = document.createElement('div');
-        const callback = mock(() => { });
-
-        const unsub = keyboard.pushEscapeHandler(element, callback);
-        unsubscribers.push(unsub);
-
-        const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
-        const stopPropagationSpy = mock(() => { });
-        event.stopPropagation = stopPropagationSpy;
-
-        document.dispatchEvent(event);
-
-        expect(stopPropagationSpy).toHaveBeenCalled();
-    });
-});
-
-describe('KeyboardManager Edge Cases', () => {
-    it.skip('should handle empty callback gracefully (E2E only)', () => {
-        const element = document.createElement('div');
-        const unsub = keyboard.pushEscapeHandler(element, () => { });
-
-        // Should not throw
-        const event = new KeyboardEvent('keydown', { key: 'Escape' });
-        expect(() => document.dispatchEvent(event)).not.toThrow();
-
-        unsub();
-    });
-
-    it.skip('should preserve order after middle element is removed (E2E only)', () => {
-        const element1 = document.createElement('div');
-        const element2 = document.createElement('div');
-        const element3 = document.createElement('div');
-        const callback1 = mock(() => { });
-        const callback3 = mock(() => { });
-
-        const unsub1 = keyboard.pushEscapeHandler(element1, callback1);
-        const unsub2 = keyboard.pushEscapeHandler(element2, () => { });
-        const unsub3 = keyboard.pushEscapeHandler(element3, callback3);
-
-        // Remove middle element
-        unsub2();
-
-        // Send ESC - should call callback3 (still topmost)
-        const event = new KeyboardEvent('keydown', { key: 'Escape' });
-        document.dispatchEvent(event);
-
-        expect(callback3).toHaveBeenCalled();
-        expect(callback1).not.toHaveBeenCalled();
-
-        unsub1();
-        unsub3();
-    });
-});

package/tests/core/layers.test.js

@@ -1,129 +0,0 @@
-/**
- * @fileoverview Unit tests for core/layers.js
- * Tests the centralized Z-Index Layer System
- */
-
-import { describe, expect, it, beforeEach } from 'bun:test';
-import { Z_INDEX, injectLayerTokens } from '../../src/core/layers.js';
-
-describe('Z_INDEX Constants', () => {
-    it('should export Z_INDEX object', () => {
-        expect(Z_INDEX).toBeDefined();
-        expect(typeof Z_INDEX).toBe('object');
-    });
-
-    it('should have all required layer levels', () => {
-        expect(Z_INDEX.base).toBeDefined();
-        expect(Z_INDEX.sticky).toBeDefined();
-        expect(Z_INDEX.dropdown).toBeDefined();
-        expect(Z_INDEX.drawer).toBeDefined();
-        expect(Z_INDEX.modal).toBeDefined();
-        expect(Z_INDEX.toast).toBeDefined();
-        expect(Z_INDEX.tooltip).toBeDefined();
-        expect(Z_INDEX.overlay).toBeDefined();
-        expect(Z_INDEX.devtools).toBeDefined();
-    });
-
-    it('should have correct numerical values', () => {
-        expect(Z_INDEX.base).toBe(1);
-        expect(Z_INDEX.sticky).toBe(100);
-        expect(Z_INDEX.dropdown).toBe(1000);
-        expect(Z_INDEX.drawer).toBe(1100);
-        expect(Z_INDEX.modal).toBe(1200);
-        expect(Z_INDEX.toast).toBe(1300);
-        expect(Z_INDEX.tooltip).toBe(1400);
-        expect(Z_INDEX.overlay).toBe(9999);
-        expect(Z_INDEX.devtools).toBe(999999);
-    });
-
-    it('should have layers in ascending order', () => {
-        expect(Z_INDEX.base).toBeLessThan(Z_INDEX.sticky);
-        expect(Z_INDEX.sticky).toBeLessThan(Z_INDEX.dropdown);
-        expect(Z_INDEX.dropdown).toBeLessThan(Z_INDEX.drawer);
-        expect(Z_INDEX.drawer).toBeLessThan(Z_INDEX.modal);
-        expect(Z_INDEX.modal).toBeLessThan(Z_INDEX.toast);
-        expect(Z_INDEX.toast).toBeLessThan(Z_INDEX.tooltip);
-        expect(Z_INDEX.tooltip).toBeLessThan(Z_INDEX.overlay);
-        expect(Z_INDEX.overlay).toBeLessThan(Z_INDEX.devtools);
-    });
-
-    it('should be frozen (immutable)', () => {
-        expect(Object.isFrozen(Z_INDEX)).toBe(true);
-    });
-
-    it('should not allow modifications', () => {
-        // Attempt to modify should fail silently in strict mode
-        const originalValue = Z_INDEX.modal;
-        try {
-            // @ts-ignore - intentionally testing immutability
-            Z_INDEX.modal = 999;
-        } catch (e) {
-            // Expected in strict mode
-        }
-        expect(Z_INDEX.modal).toBe(originalValue);
-    });
-});
-
-describe('injectLayerTokens', () => {
-    beforeEach(() => {
-        // Remove any existing layer tokens style element
-        const existing = document.getElementById('mu-layer-tokens');
-        if (existing) {
-            existing.remove();
-        }
-    });
-
-    it('should be a function', () => {
-        expect(typeof injectLayerTokens).toBe('function');
-    });
-
-    it('should inject style element into document head', () => {
-        injectLayerTokens();
-        const styleEl = document.getElementById('mu-layer-tokens');
-        expect(styleEl).toBeDefined();
-        expect(styleEl?.tagName.toLowerCase()).toBe('style');
-    });
-
-    it('should be idempotent (only inject once)', () => {
-        injectLayerTokens();
-        injectLayerTokens();
-        injectLayerTokens();
-
-        const elements = document.querySelectorAll('#mu-layer-tokens');
-        expect(elements.length).toBe(1);
-    });
-
-    it('should inject CSS custom properties for all layers', () => {
-        injectLayerTokens();
-        const styleEl = document.getElementById('mu-layer-tokens');
-        const content = styleEl?.textContent || '';
-
-        expect(content).toContain('--z-base');
-        expect(content).toContain('--z-sticky');
-        expect(content).toContain('--z-dropdown');
-        expect(content).toContain('--z-drawer');
-        expect(content).toContain('--z-modal');
-        expect(content).toContain('--z-toast');
-        expect(content).toContain('--z-tooltip');
-        expect(content).toContain('--z-overlay');
-        expect(content).toContain('--z-devtools');
-    });
-
-    it('should inject correct values in CSS', () => {
-        injectLayerTokens();
-        const styleEl = document.getElementById('mu-layer-tokens');
-        const content = styleEl?.textContent || '';
-
-        expect(content).toContain('--z-base: 1');
-        expect(content).toContain('--z-modal: 1200');
-        expect(content).toContain('--z-overlay: 9999');
-    });
-
-    it('should inject into :root selector', () => {
-        injectLayerTokens();
-        const styleEl = document.getElementById('mu-layer-tokens');
-        const content = styleEl?.textContent || '';
-
-        expect(content).toContain(':root');
-    });
-});

package/tests/core/namespaced-stores.test.js

@@ -1,114 +0,0 @@
-/**
- * @fileoverview Tests for Namespaced Stores (Enterprise Features)
- * Tests createNamespacedStore, getStore, getAllStores, captureAppState, restoreAppState
- */
-
-import { describe, test, expect } from 'bun:test';
-
-describe('Namespaced Stores', () => {
-    describe('Module Exports', () => {
-        test('should export createNamespacedStore function', async () => {
-            const module = await import('../../src/core/store.js');
-            expect(typeof module.createNamespacedStore).toBe('function');
-        });
-
-        test('should export getStore function', async () => {
-            const module = await import('../../src/core/store.js');
-            expect(typeof module.getStore).toBe('function');
-        });
-
-        test('should export getAllStores function', async () => {
-            const module = await import('../../src/core/store.js');
-            expect(typeof module.getAllStores).toBe('function');
-        });
-
-        test('should export captureAppState function', async () => {
-            const module = await import('../../src/core/store.js');
-            expect(typeof module.captureAppState).toBe('function');
-        });
-
-        test('should export restoreAppState function', async () => {
-            const module = await import('../../src/core/store.js');
-            expect(typeof module.restoreAppState).toBe('function');
-        });
-
-        test('should export enableObservability function', async () => {
-            const module = await import('../../src/core/store.js');
-            expect(typeof module.enableObservability).toBe('function');
-        });
-
-        test('should export disableObservability function', async () => {
-            const module = await import('../../src/core/store.js');
-            expect(typeof module.disableObservability).toBe('function');
-        });
-
-        test('should export getStateHistory function', async () => {
-            const module = await import('../../src/core/store.js');
-            expect(typeof module.getStateHistory).toBe('function');
-        });
-    });
-
-    describe('createNamespacedStore Integration', () => {
-        test('should create a store and retrieve it', async () => {
-            const { createNamespacedStore, getStore } = await import('../../src/core/store.js');
-
-            // Use unique namespace to avoid conflicts
-            const ns = 'test-' + Date.now();
-            const store = createNamespacedStore(ns, { count: 0 });
-
-            expect(store).toBeDefined();
-            expect(store.namespace).toBe(ns);
-
-            const retrieved = getStore(ns);
-            expect(retrieved).toBe(store);
-        });
-
-        test('should initialize with provided state', async () => {
-            const { createNamespacedStore } = await import('../../src/core/store.js');
-
-            const ns = 'init-test-' + Date.now();
-            const store = createNamespacedStore(ns, { items: ['a', 'b'], total: 100 });
-
-            const state = store.get();
-            expect(state.items).toEqual(['a', 'b']);
-            expect(state.total).toBe(100);
-        });
-    });
-
-    describe('getAllStores', () => {
-        test('should return object with stores', async () => {
-            const { getAllStores } = await import('../../src/core/store.js');
-
-            const stores = getAllStores();
-            expect(typeof stores).toBe('object');
-        });
-    });
-
-    describe('getStore', () => {
-        test('should return undefined for non-existent store', async () => {
-            const { getStore } = await import('../../src/core/store.js');
-            const store = getStore('definitely-not-existing-' + Date.now());
-            expect(store).toBeUndefined();
-        });
-    });
-
-    describe('Observability', () => {
-        test('should enable and disable observability', async () => {
-            const { enableObservability, disableObservability } = await import('../../src/core/store.js');
-
-            // Should not throw
-            enableObservability();
-            expect(true).toBe(true);
-
-            disableObservability();
-            expect(true).toBe(true);
-        });
-
-        test('should return history array', async () => {
-            const { getStateHistory } = await import('../../src/core/store.js');
-
-            const history = getStateHistory('any');
-            expect(Array.isArray(history)).toBe(true);
-        });
-    });
-});

package/tests/core/render.test.js

@@ -1,121 +0,0 @@
-/**
- * @fileoverview Unit Tests for render.js Module
- * Target: 82% → 95% coverage
- */
-
-import { describe, test, expect, beforeAll, beforeEach } from 'bun:test';
-import { scheduler, memo, debounce, throttle, domBatch, processInChunks } from '../../src/core/render.js';
-
-describe('render Module Unit Tests', () => {
-
-    // Mock requestAnimationFrame
-    beforeAll(() => {
-        globalThis.requestAnimationFrame = (cb) => { cb(Date.now()); return 0; };
-    });
-
-    // SCHEDULER
-    test('scheduler should exist', () => {
-        expect(scheduler).toBeDefined();
-    });
-
-    test('scheduler.schedule should be a function', () => {
-        expect(typeof scheduler.schedule).toBe('function');
-    });
-
-    test('scheduler should execute callbacks', () => {
-        let called = false;
-        scheduler.schedule(() => { called = true; });
-        expect(called).toBe(true);
-    });
-
-    test('scheduler should batch multiple callbacks', () => {
-        let count = 0;
-        scheduler.schedule(() => { count++; });
-        scheduler.schedule(() => { count++; });
-        scheduler.schedule(() => { count++; });
-        expect(count).toBe(3);
-    });
-
-    // MEMO
-    test('memo should be a function', () => {
-        expect(typeof memo).toBe('function');
-    });
-
-    test('memo should cache results', () => {
-        let callCount = 0;
-        const expensive = memo((x) => { callCount++; return x * 2; });
-        expect(expensive(5)).toBe(10);
-        expect(expensive(5)).toBe(10);
-        expect(callCount).toBe(1); // Only called once
-    });
-
-    test('memo should compute for different args', () => {
-        const fn = memo((x) => x * 2);
-        expect(fn(2)).toBe(4);
-        expect(fn(3)).toBe(6);
-    });
-
-    // DEBOUNCE
-    test('debounce should be a function', () => {
-        expect(typeof debounce).toBe('function');
-    });
-
-    test('debounce should return a function', () => {
-        const debounced = debounce(() => { }, 100);
-        expect(typeof debounced).toBe('function');
-    });
-
-    // THROTTLE
-    test('throttle should be a function', () => {
-        expect(typeof throttle).toBe('function');
-    });
-
-    test('throttle should return a function', () => {
-        const throttled = throttle(() => { }, 100);
-        expect(typeof throttled).toBe('function');
-    });
-
-    test('throttle should call function immediately', () => {
-        let called = false;
-        const throttled = throttle(() => { called = true; }, 100);
-        throttled();
-        expect(called).toBe(true);
-    });
-
-    // DOM BATCH
-    test('domBatch should exist', () => {
-        expect(domBatch).toBeDefined();
-    });
-
-    test('domBatch.read should be a function', () => {
-        expect(typeof domBatch.read).toBe('function');
-    });
-
-    test('domBatch.write should be a function', () => {
-        expect(typeof domBatch.write).toBe('function');
-    });
-
-    test('domBatch should execute reads', () => {
-        let readCalled = false;
-        domBatch.read(() => { readCalled = true; });
-        expect(readCalled).toBe(true);
-    });
-
-    test('domBatch should execute writes', () => {
-        let writeCalled = false;
-        domBatch.write(() => { writeCalled = true; });
-        expect(writeCalled).toBe(true);
-    });
-
-    // PROCESS IN CHUNKS
-    test('processInChunks should be a function', () => {
-        expect(typeof processInChunks).toBe('function');
-    });
-
-    test('processInChunks should process all items', async () => {
-        const items = [1, 2, 3, 4, 5];
-        const processed = [];
-        await processInChunks(items, (item) => processed.push(item), 2);
-        expect(processed).toEqual([1, 2, 3, 4, 5]);
-    });
-});