@flightdev/ui 2.0.1 → 4.0.0

package/test/errors/error-handling.test.ts

@@ -1,454 +0,0 @@
-/**
- * @flightdev/ui - Error Handling Tests
- *
- * Comprehensive error scenario tests for adapter resilience.
- * Validates graceful degradation, error messages, and edge cases.
- *
- * @module test/errors/error-handling.test.ts
- */
-
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { adapterRegistry, registerBuiltinAdapters } from '../../src/core/registry.js';
-import type { Component, RenderResult, StreamingOptions, RenderContext } from '../../src/core/types.js';
-
-// ============================================================================
-// Error Handling Tests
-// ============================================================================
-
-describe('Error Handling Tests', () => {
-    beforeEach(() => {
-        registerBuiltinAdapters();
-    });
-
-    describe('Missing Framework Installation', () => {
-        it('should provide clear error when React is not installed', async () => {
-            const adapter = await adapterRegistry.get('react');
-            expect(adapter).toBeDefined();
-
-            // Attempting to render with a component that requires React
-            const component: Component = {
-                component: undefined as unknown as () => void,
-                props: {},
-            };
-
-            await expect(adapter!.renderToString(component)).rejects.toThrow();
-        });
-
-        it('should handle missing Vue gracefully', async () => {
-            const adapter = await adapterRegistry.get('vue');
-            expect(adapter).toBeDefined();
-
-            const component: Component = {
-                component: undefined as unknown as () => void,
-                props: {},
-            };
-
-            // Vue adapter handles undefined components gracefully
-            // It may return empty HTML or throw - both are valid
-            try {
-                const result = await adapter!.renderToString(component);
-                expect(result).toBeDefined();
-            } catch {
-                // Throwing is also acceptable behavior
-            }
-        });
-    });
-
-    describe('Component Render Errors', () => {
-        it('should handle component that throws during render', async () => {
-            const adapter = await adapterRegistry.get('react');
-            expect(adapter).toBeDefined();
-
-            const throwingComponent = () => {
-                throw new Error('Component crashed!');
-            };
-
-            const component: Component = {
-                component: throwingComponent,
-                props: {},
-            };
-
-            await expect(adapter!.renderToString(component)).rejects.toThrow();
-        });
-
-        it('should handle async component that rejects', async () => {
-            const adapter = await adapterRegistry.get('react');
-            expect(adapter).toBeDefined();
-
-            const asyncThrowingComponent = async () => {
-                throw new Error('Async component failed!');
-            };
-
-            const component: Component = {
-                component: asyncThrowingComponent,
-                props: {},
-            };
-
-            await expect(adapter!.renderToString(component)).rejects.toThrow();
-        });
-
-        it('should handle component returning invalid type', async () => {
-            const adapter = await adapterRegistry.get('react');
-            expect(adapter).toBeDefined();
-
-            const invalidComponent = () => {
-                return Symbol('invalid') as unknown;
-            };
-
-            const component: Component = {
-                component: invalidComponent,
-                props: {},
-            };
-
-            // Should throw or handle gracefully
-            try {
-                await adapter!.renderToString(component);
-            } catch (error) {
-                expect(error).toBeDefined();
-            }
-        });
-    });
-
-    describe('Invalid Component Type Errors', () => {
-        it('should reject null component', async () => {
-            const adapter = await adapterRegistry.get('react');
-            expect(adapter).toBeDefined();
-
-            const component: Component = {
-                component: null as unknown as () => void,
-                props: {},
-            };
-
-            await expect(adapter!.renderToString(component)).rejects.toThrow();
-        });
-
-        it('should handle string as component gracefully', async () => {
-            const adapter = await adapterRegistry.get('react');
-            expect(adapter).toBeDefined();
-
-            const component: Component = {
-                component: 'div' as unknown as () => void,  // String component names are valid in React
-                props: {},
-            };
-
-            // React treats string components as HTML tags
-            try {
-                const result = await adapter!.renderToString(component);
-                expect(result).toBeDefined();
-            } catch {
-                // Throwing is also acceptable for invalid components
-            }
-        });
-
-        it('should reject number as component', async () => {
-            const adapter = await adapterRegistry.get('react');
-            expect(adapter).toBeDefined();
-
-            const component: Component = {
-                component: 42 as unknown as () => void,
-                props: {},
-            };
-
-            await expect(adapter!.renderToString(component)).rejects.toThrow();
-        });
-
-        it('should reject object as component', async () => {
-            const adapter = await adapterRegistry.get('react');
-            expect(adapter).toBeDefined();
-
-            const component: Component = {
-                component: { render: () => 'html' } as unknown as () => void,
-                props: {},
-            };
-
-            await expect(adapter!.renderToString(component)).rejects.toThrow();
-        });
-    });
-
-    describe('Streaming Timeout Handling', () => {
-        it('should support abort signal in render context', async () => {
-            const adapter = await adapterRegistry.get('react');
-            expect(adapter).toBeDefined();
-
-            if (!adapter!.capabilities.streaming) {
-                return; // Skip for non-streaming adapters
-            }
-
-            const component: Component = {
-                component: () => null,
-                props: {},
-            };
-
-            const abortController = new AbortController();
-            const context: RenderContext = {
-                signal: abortController.signal,
-            };
-
-            const result = adapter!.renderToStream!(component, context);
-            expect(result.stream).toBeDefined();
-
-            // Abort after starting stream
-            abortController.abort();
-        });
-
-        it('should handle already-aborted signal', async () => {
-            const adapter = await adapterRegistry.get('react');
-            expect(adapter).toBeDefined();
-
-            if (!adapter!.capabilities.streaming) {
-                return;
-            }
-
-            const component: Component = {
-                component: () => null,
-                props: {},
-            };
-
-            const abortController = new AbortController();
-            abortController.abort(); // Abort before starting
-
-            const context: RenderContext = {
-                signal: abortController.signal,
-            };
-
-            // Should handle gracefully
-            const result = adapter!.renderToStream!(component, context);
-            expect(result.stream).toBeDefined();
-        });
-
-        it('should support timeout option in streaming', async () => {
-            const adapter = await adapterRegistry.get('react');
-            expect(adapter).toBeDefined();
-
-            if (!adapter!.capabilities.streaming) {
-                return;
-            }
-
-            const component: Component = {
-                component: () => null,
-                props: {},
-            };
-
-            const options: StreamingOptions = {
-                timeout: 5000,
-            };
-
-            const result = adapter!.renderToStream!(component, undefined, options);
-            expect(result.stream).toBeDefined();
-        });
-    });
-
-    describe('Graceful Degradation', () => {
-        it('should return empty HTML string on render failure', async () => {
-            const adapter = await adapterRegistry.get('htmx');
-            expect(adapter).toBeDefined();
-
-            // HTMX adapter should handle empty template gracefully
-            const component: Component = {
-                component: () => '',
-                props: {},
-            };
-
-            const result = await adapter!.renderToString(component);
-            expect(typeof result.html).toBe('string');
-        });
-
-        it('should provide timing even on partial failure', async () => {
-            const adapter = await adapterRegistry.get('htmx');
-            expect(adapter).toBeDefined();
-
-            const component: Component = {
-                component: () => '<div>Test</div>',
-                props: {},
-            };
-
-            const result = await adapter!.renderToString(component);
-            expect(result.timing).toBeDefined();
-        });
-
-        it('should generate valid hydration script even with empty result', async () => {
-            const adapter = await adapterRegistry.get('react');
-            expect(adapter).toBeDefined();
-
-            const emptyResult: RenderResult = {
-                html: '',
-            };
-
-            const script = adapter!.getHydrationScript(emptyResult);
-            expect(typeof script).toBe('string');
-        });
-    });
-
-    describe('Props Validation', () => {
-        it('should handle circular reference in props', async () => {
-            const adapter = await adapterRegistry.get('htmx');
-            expect(adapter).toBeDefined();
-
-            const circularObj: Record<string, unknown> = { name: 'test' };
-            circularObj.self = circularObj; // Circular reference
-
-            const component: Component = {
-                component: () => '<div>Test</div>',
-                props: circularObj,
-            };
-
-            // Should not crash - either handles or throws meaningful error
-            try {
-                await adapter!.renderToString(component);
-            } catch (error) {
-                expect(error).toBeDefined();
-            }
-        });
-
-        it('should handle very large props object', async () => {
-            const adapter = await adapterRegistry.get('htmx');
-            expect(adapter).toBeDefined();
-
-            const largeProps: Record<string, unknown> = {};
-            for (let i = 0; i < 1000; i++) {
-                largeProps[`key_${i}`] = `value_${i}`.repeat(100);
-            }
-
-            const component: Component = {
-                component: () => '<div>Test</div>',
-                props: largeProps,
-            };
-
-            // Should handle large props without crashing
-            const result = await adapter!.renderToString(component);
-            expect(result).toBeDefined();
-        });
-
-        it('should handle undefined values in props', async () => {
-            const adapter = await adapterRegistry.get('htmx');
-            expect(adapter).toBeDefined();
-
-            const component: Component = {
-                component: () => '<div>Test</div>',
-                props: {
-                    defined: 'value',
-                    undefinedProp: undefined,
-                    nullProp: null,
-                },
-            };
-
-            const result = await adapter!.renderToString(component);
-            expect(result).toBeDefined();
-        });
-    });
-
-    describe('Edge Cases', () => {
-        it('should handle emoji and special characters in HTML', async () => {
-            const adapter = await adapterRegistry.get('htmx');
-            expect(adapter).toBeDefined();
-
-            const component: Component = {
-                component: () => '<div>Hello World! <special>&amp;</special></div>',
-                props: {},
-            };
-
-            const result = await adapter!.renderToString(component);
-            expect(result.html).toContain('World');
-        });
-
-        it('should handle very long HTML output', async () => {
-            const adapter = await adapterRegistry.get('htmx');
-            expect(adapter).toBeDefined();
-
-            const longContent = '<p>Lorem ipsum</p>'.repeat(10000);
-            const component: Component = {
-                component: () => `<div>${longContent}</div>`,
-                props: {},
-            };
-
-            const result = await adapter!.renderToString(component);
-            expect(result.html.length).toBeGreaterThan(100000);
-        });
-
-        it('should handle malformed HTML gracefully', async () => {
-            const adapter = await adapterRegistry.get('htmx');
-            expect(adapter).toBeDefined();
-
-            const component: Component = {
-                component: () => '<div><span>Unclosed!',
-                props: {},
-            };
-
-            // Should not crash with malformed HTML
-            const result = await adapter!.renderToString(component);
-            expect(result).toBeDefined();
-        });
-    });
-});
-
-// ============================================================================
-// Registry Error Handling
-// ============================================================================
-
-describe('Registry Error Handling', () => {
-    beforeEach(() => {
-        registerBuiltinAdapters();
-    });
-
-    it('should handle invalid adapter ID types', async () => {
-        const result1 = await adapterRegistry.get('' as string);
-        expect(result1).toBeUndefined();
-
-        const result2 = await adapterRegistry.get('123invalid');
-        expect(result2).toBeUndefined();
-    });
-
-    it('should return empty array for invalid tier', () => {
-        const result = adapterRegistry.listByTier('tier-99' as 'tier-1');
-        expect(result).toEqual([]);
-    });
-
-    it('should return empty array for invalid capability', () => {
-        const result = adapterRegistry.listByCapability('nonExistent' as 'streaming');
-        expect(result).toEqual([]);
-    });
-});
-
-// ============================================================================
-// Concurrent Error Handling
-// ============================================================================
-
-describe('Concurrent Error Handling', () => {
-    beforeEach(() => {
-        registerBuiltinAdapters();
-    });
-
-    it('should handle multiple concurrent adapter loads', async () => {
-        const promises = [
-            adapterRegistry.get('react'),
-            adapterRegistry.get('vue'),
-            adapterRegistry.get('angular'),
-            adapterRegistry.get('svelte'),
-            adapterRegistry.get('solid'),
-            adapterRegistry.get('qwik'),
-        ];
-
-        const results = await Promise.all(promises);
-
-        results.forEach((adapter, index) => {
-            expect(adapter, `Adapter ${index} should be defined`).toBeDefined();
-        });
-    });
-
-    it('should handle concurrent renders without interference', async () => {
-        const adapter = await adapterRegistry.get('htmx');
-        expect(adapter).toBeDefined();
-
-        const components = Array.from({ length: 10 }, (_, i) => ({
-            component: () => `<div>Component ${i}</div>`,
-            props: { id: i },
-        }));
-
-        const promises = components.map((c) => adapter!.renderToString(c));
-        const results = await Promise.all(promises);
-
-        results.forEach((result, i) => {
-            expect(result.html).toContain(`Component ${i}`);
-        });
-    });
-});

package/test/integration/htmx.integration.test.ts

@@ -1,246 +0,0 @@
-/**
- * @flightdev/ui - HTMX Integration Tests
- *
- * Tests for HTMX adapter with HTML-first rendering scenarios.
- * Validates hx-* attribute generation and template rendering.
- *
- * @module test/integration/htmx.integration.test.ts
- */
-
-import { describe, it, expect, beforeEach } from 'vitest';
-import { adapterRegistry, registerBuiltinAdapters } from '../../src/core/registry.js';
-import type { Component, RenderResult } from '../../src/core/types.js';
-
-// ============================================================================
-// HTMX Integration Tests
-// ============================================================================
-
-describe('HTMX Integration Tests', () => {
-    beforeEach(() => {
-        registerBuiltinAdapters();
-    });
-
-    describe('Adapter Retrieval', () => {
-        it('should load HTMX adapter from registry', async () => {
-            const adapter = await adapterRegistry.get('htmx');
-
-            expect(adapter).toBeDefined();
-            expect(adapter?.id).toBe('htmx');
-            expect(adapter?.tier).toBe('tier-3');
-        });
-
-        it('should have correct HTMX capabilities', async () => {
-            const adapter = await adapterRegistry.get('htmx');
-
-            // HTMX is HTML-first, so no client-side JS hydration
-            expect(adapter?.capabilities.streaming).toBe(false);
-            expect(adapter?.capabilities.islands).toBe(false);
-            expect(adapter?.capabilities.resumable).toBe(false);
-            expect(adapter?.capabilities.ssg).toBe(true);
-        });
-
-        it('should be classified as tier-3 (HTML-first)', async () => {
-            const tier3Adapters = adapterRegistry.listByTier('tier-3');
-
-            expect(tier3Adapters).toContain('htmx');
-        });
-    });
-
-    describe('HTML Rendering', () => {
-        it('should render template to HTML string', async () => {
-            const adapter = await adapterRegistry.get('htmx');
-            expect(adapter).toBeDefined();
-
-            const component: Component = {
-                component: () => '<div>Hello HTMX!</div>',
-                props: {},
-            };
-
-            const result = await adapter!.renderToString(component);
-
-            expect(result).toBeDefined();
-            expect(typeof result.html).toBe('string');
-        });
-
-        it('should include timing in render result', async () => {
-            const adapter = await adapterRegistry.get('htmx');
-            expect(adapter).toBeDefined();
-
-            const component: Component = {
-                component: () => '<span>Test</span>',
-                props: {},
-            };
-
-            const result = await adapter!.renderToString(component);
-
-            expect(result.timing).toBeDefined();
-            expect(typeof result.timing?.total).toBe('number');
-        });
-    });
-
-    describe('Hydration Scripts', () => {
-        it('should generate script with HTMX CDN reference', async () => {
-            const adapter = await adapterRegistry.get('htmx');
-            expect(adapter).toBeDefined();
-
-            const mockResult: RenderResult = {
-                html: '<div hx-get="/api/data">Load</div>',
-            };
-
-            const script = adapter!.getHydrationScript(mockResult);
-
-            expect(typeof script).toBe('string');
-            // HTMX hydration should include CDN script or htmx reference
-            expect(script).toMatch(/htmx|unpkg|cdn|script/i);
-        });
-
-        it('should include HTMX configuration in script', async () => {
-            const adapter = await adapterRegistry.get('htmx');
-            expect(adapter).toBeDefined();
-
-            const mockResult: RenderResult = {
-                html: '<button hx-post="/api/submit">Submit</button>',
-            };
-
-            const script = adapter!.getHydrationScript(mockResult);
-
-            // Should contain HTMX initialization or config
-            expect(script.length).toBeGreaterThan(0);
-        });
-    });
-
-    describe('Client Entry', () => {
-        it('should provide minimal client entry for HTMX', async () => {
-            const adapter = await adapterRegistry.get('htmx');
-            expect(adapter).toBeDefined();
-
-            const entry = adapter!.getClientEntry();
-
-            expect(typeof entry).toBe('string');
-            // HTMX is HTML-first, so client entry should be minimal
-        });
-    });
-
-    describe('HX Attribute Patterns', () => {
-        it('should support hx-get pattern in templates', async () => {
-            const adapter = await adapterRegistry.get('htmx');
-            expect(adapter).toBeDefined();
-
-            // Template functions can generate hx-* attributes
-            const template = `<div hx-get="/api/users" hx-target="#results">Load Users</div>`;
-
-            const component: Component = {
-                component: () => template,
-                props: {},
-            };
-
-            const result = await adapter!.renderToString(component);
-            expect(result.html).toContain('hx-get');
-        });
-
-        it('should support hx-post pattern in templates', async () => {
-            const adapter = await adapterRegistry.get('htmx');
-            expect(adapter).toBeDefined();
-
-            const template = `<form hx-post="/api/submit" hx-swap="innerHTML">
-                <input name="email" type="email" />
-                <button type="submit">Submit</button>
-            </form>`;
-
-            const component: Component = {
-                component: () => template,
-                props: {},
-            };
-
-            const result = await adapter!.renderToString(component);
-            expect(result.html).toContain('hx-post');
-            expect(result.html).toContain('hx-swap');
-        });
-
-        it('should support hx-trigger pattern in templates', async () => {
-            const adapter = await adapterRegistry.get('htmx');
-            expect(adapter).toBeDefined();
-
-            const template = `<div hx-get="/updates" hx-trigger="every 5s">Live Updates</div>`;
-
-            const component: Component = {
-                component: () => template,
-                props: {},
-            };
-
-            const result = await adapter!.renderToString(component);
-            expect(result.html).toContain('hx-trigger');
-        });
-    });
-
-    describe('Template Composition', () => {
-        it('should render nested templates', async () => {
-            const adapter = await adapterRegistry.get('htmx');
-            expect(adapter).toBeDefined();
-
-            const template = `
-                <main>
-                    <header hx-get="/header" hx-trigger="load">Loading...</header>
-                    <section id="content">
-                        <article hx-get="/article/1">Loading article...</article>
-                    </section>
-                    <footer>© 2026</footer>
-                </main>
-            `;
-
-            const component: Component = {
-                component: () => template,
-                props: {},
-            };
-
-            const result = await adapter!.renderToString(component);
-            expect(result.html).toContain('<main>');
-            expect(result.html).toContain('<header');
-            expect(result.html).toContain('<footer>');
-        });
-    });
-});
-
-// ============================================================================
-// Alpine.js Integration Tests (Tier 3 comparison)
-// ============================================================================
-
-describe('Alpine.js Integration Tests', () => {
-    beforeEach(() => {
-        registerBuiltinAdapters();
-    });
-
-    it('should load Alpine adapter from registry', async () => {
-        const adapter = await adapterRegistry.get('alpine');
-
-        expect(adapter).toBeDefined();
-        expect(adapter?.id).toBe('alpine');
-        expect(adapter?.tier).toBe('tier-3');
-    });
-
-    it('should be listed alongside HTMX in tier-3', () => {
-        const tier3 = adapterRegistry.listByTier('tier-3');
-
-        expect(tier3).toContain('htmx');
-        expect(tier3).toContain('alpine');
-        expect(tier3).toContain('hotwire');
-    });
-
-    it('should render x-data templates', async () => {
-        const adapter = await adapterRegistry.get('alpine');
-        expect(adapter).toBeDefined();
-
-        const template = `<div x-data="{ count: 0 }">
-            <button @click="count++">Increment</button>
-            <span x-text="count"></span>
-        </div>`;
-
-        const component: Component = {
-            component: () => template,
-            props: {},
-        };
-
-        const result = await adapter!.renderToString(component);
-        expect(result.html).toContain('x-data');
-    });
-});