@flightdev/ui 2.0.0 → 4.0.0

package/test/adapters/tier-3.test.ts

@@ -1,284 +0,0 @@
-/**
- * @flightdev/ui - Tier 3 Adapter Tests
- *
- * Tests for HTML-first adapters: HTMX, Alpine.js, Hotwire, Stimulus, Petite-vue, Vanilla.
- * These adapters work differently - they render HTML templates, not components.
- */
-
-import { describe, it, expect } from 'vitest';
-import { runAdapterContractTests } from '../contracts/adapter.contract.js';
-
-// ============================================================================
-// Tier 3 Adapter Imports
-// ============================================================================
-
-import { htmx, HTMXAdapter, hxGet, hxPost, hx } from '../../src/adapters/tier-3/htmx.js';
-import { alpine, AlpineAdapter, xData, xFor, xIf } from '../../src/adapters/tier-3/alpine.js';
-import { hotwire, HotwireAdapter, turboFrame, turboStream } from '../../src/adapters/tier-3/hotwire.js';
-import { stimulus, StimulusAdapter } from '../../src/adapters/tier-3/stimulus.js';
-import { petiteVue, PetiteVueAdapter, vScope } from '../../src/adapters/tier-3/petite-vue.js';
-import { vanilla, VanillaAdapter } from '../../src/adapters/tier-3/vanilla.js';
-
-// ============================================================================
-// Contract Tests
-// ============================================================================
-
-describe('Tier 3 Adapters', () => {
-    // Tier 3 adapters can render HTML templates directly
-    runAdapterContractTests(() => htmx(), 'HTMX', { useHtmlComponent: true });
-    runAdapterContractTests(() => alpine(), 'Alpine', { useHtmlComponent: true });
-    runAdapterContractTests(() => hotwire(), 'Hotwire', { useHtmlComponent: true });
-    runAdapterContractTests(() => stimulus(), 'Stimulus', { useHtmlComponent: true });
-    runAdapterContractTests(() => petiteVue(), 'Petite-vue', { useHtmlComponent: true });
-    runAdapterContractTests(() => vanilla(), 'Vanilla', { useHtmlComponent: true });
-});
-
-// ============================================================================
-// HTMX Specific Tests
-// ============================================================================
-
-describe('HTMX Adapter - Specific', () => {
-    it('creates adapter with default options', () => {
-        const adapter = htmx();
-        expect(adapter).toBeInstanceOf(HTMXAdapter);
-        expect(adapter.id).toBe('htmx');
-        expect(adapter.tier).toBe('tier-3');
-    });
-
-    it('does not support CSR (server-driven)', () => {
-        const adapter = htmx();
-        expect(adapter.capabilities.csr).toBe(false);
-    });
-
-    it('accepts extensions option', () => {
-        const adapter = htmx({ extensions: ['json-enc', 'loading-states'] });
-        expect(adapter).toBeDefined();
-    });
-
-    it('accepts version option', () => {
-        const adapter = htmx({ version: '2.0.0' });
-        expect(adapter).toBeDefined();
-    });
-});
-
-describe('HTMX Template Helpers', () => {
-    it('hxGet generates correct attributes', () => {
-        const attrs = hxGet('/api/data');
-        expect(attrs['hx-get']).toBe('/api/data');
-    });
-
-    it('hxGet accepts options', () => {
-        const attrs = hxGet('/api/data', {
-            target: '#results',
-            swap: 'innerHTML',
-            trigger: 'click',
-        });
-        expect(attrs['hx-get']).toBe('/api/data');
-        expect(attrs['hx-target']).toBe('#results');
-        expect(attrs['hx-swap']).toBe('innerHTML');
-        expect(attrs['hx-trigger']).toBe('click');
-    });
-
-    it('hxPost generates correct attributes', () => {
-        const attrs = hxPost('/api/submit');
-        expect(attrs['hx-post']).toBe('/api/submit');
-    });
-
-    it('hx creates element string', () => {
-        const element = hx('button', { 'hx-get': '/api' }, 'Click me');
-        expect(element).toContain('<button');
-        expect(element).toContain('hx-get="/api"');
-        expect(element).toContain('Click me');
-        expect(element).toContain('</button>');
-    });
-});
-
-// ============================================================================
-// Alpine.js Specific Tests
-// ============================================================================
-
-describe('Alpine Adapter - Specific', () => {
-    it('creates adapter with default options', () => {
-        const adapter = alpine();
-        expect(adapter).toBeInstanceOf(AlpineAdapter);
-        expect(adapter.id).toBe('alpine');
-        expect(adapter.tier).toBe('tier-3');
-    });
-
-    it('accepts plugins option', () => {
-        const adapter = alpine({ plugins: ['intersect', 'persist', 'collapse'] });
-        expect(adapter).toBeDefined();
-    });
-
-    it('accepts version option', () => {
-        const adapter = alpine({ version: '3.14.0' });
-        expect(adapter).toBeDefined();
-    });
-
-    it('supports CSR (Alpine hydrates on client)', () => {
-        const adapter = alpine();
-        expect(adapter.capabilities.csr).toBe(true);
-    });
-});
-
-describe('Alpine Template Helpers', () => {
-    it('xData generates div with x-data attribute', () => {
-        const html = xData({ count: 0 }, '<span x-text="count"></span>');
-        expect(html).toContain('x-data=');
-        expect(html).toContain('count');
-        expect(html).toContain('<span x-text="count"></span>');
-    });
-
-    it('xFor generates template with x-for', () => {
-        const html = xFor('item in items', '<li x-text="item"></li>');
-        expect(html).toContain('<template x-for="item in items">');
-        expect(html).toContain('</template>');
-    });
-
-    it('xIf generates template with x-if', () => {
-        const html = xIf('show', '<span>Visible</span>');
-        expect(html).toContain('<template x-if="show">');
-        expect(html).toContain('</template>');
-    });
-});
-
-// ============================================================================
-// Hotwire Specific Tests
-// ============================================================================
-
-describe('Hotwire Adapter - Specific', () => {
-    it('creates adapter with default options', () => {
-        const adapter = hotwire();
-        expect(adapter).toBeInstanceOf(HotwireAdapter);
-        expect(adapter.id).toBe('hotwire');
-        expect(adapter.tier).toBe('tier-3');
-    });
-
-    it('accepts turboVersion option', () => {
-        const adapter = hotwire({ turboVersion: '8.0.0' });
-        expect(adapter).toBeDefined();
-    });
-
-    it('accepts stimulusVersion option', () => {
-        const adapter = hotwire({ stimulusVersion: '3.2.0' });
-        expect(adapter).toBeDefined();
-    });
-});
-
-describe('Hotwire Template Helpers', () => {
-    it('turboFrame generates turbo-frame element', () => {
-        const html = turboFrame('user-list', '<ul><li>User 1</li></ul>');
-        expect(html).toContain('<turbo-frame id="user-list"');
-        expect(html).toContain('</turbo-frame>');
-        expect(html).toContain('<ul><li>User 1</li></ul>');
-    });
-
-    it('turboFrame accepts options', () => {
-        const html = turboFrame('comments', '<div>Comments</div>', {
-            src: '/comments',
-            loading: 'lazy',
-        });
-        expect(html).toContain('src="/comments"');
-        expect(html).toContain('loading="lazy"');
-    });
-
-    it('turboStream generates turbo-stream element', () => {
-        // turboStream takes: action, target, content
-        const html = turboStream('append', 'messages', '<div>New message</div>');
-        expect(html).toContain('<turbo-stream');
-        expect(html).toContain('action="append"');
-        expect(html).toContain('target="messages"');
-    });
-});
-
-// ============================================================================
-// Stimulus Specific Tests
-// ============================================================================
-
-describe('Stimulus Adapter - Specific', () => {
-    it('creates adapter with default options', () => {
-        const adapter = stimulus();
-        expect(adapter).toBeInstanceOf(StimulusAdapter);
-        expect(adapter.id).toBe('stimulus');
-        expect(adapter.tier).toBe('tier-3');
-    });
-
-    it('supports CSR (Stimulus controllers run on client)', () => {
-        const adapter = stimulus();
-        expect(adapter.capabilities.csr).toBe(true);
-    });
-
-    it('accepts version option', () => {
-        const adapter = stimulus({ version: '3.2.0' });
-        expect(adapter).toBeDefined();
-    });
-});
-
-// ============================================================================
-// Petite-vue Specific Tests
-// ============================================================================
-
-describe('Petite-vue Adapter - Specific', () => {
-    it('creates adapter with default options', () => {
-        const adapter = petiteVue();
-        expect(adapter).toBeInstanceOf(PetiteVueAdapter);
-        expect(adapter.id).toBe('petite-vue');
-        expect(adapter.tier).toBe('tier-3');
-    });
-
-    it('supports CSR (client-side hydration)', () => {
-        const adapter = petiteVue();
-        expect(adapter.capabilities.csr).toBe(true);
-    });
-
-    it('accepts version option', () => {
-        const adapter = petiteVue({ version: '0.4.0' });
-        expect(adapter).toBeDefined();
-    });
-});
-
-describe('Petite-vue Template Helpers', () => {
-    it('vScope generates div with v-scope', () => {
-        const html = vScope({ count: 0 }, '<button @click="count++">{{ count }}</button>');
-        expect(html).toContain('v-scope=');
-        expect(html).toContain('count');
-    });
-});
-
-// ============================================================================
-// Vanilla Web Components Specific Tests
-// ============================================================================
-
-describe('Vanilla Adapter - Specific', () => {
-    it('creates adapter with default options', () => {
-        const adapter = vanilla();
-        expect(adapter).toBeInstanceOf(VanillaAdapter);
-        expect(adapter.id).toBe('vanilla');
-        expect(adapter.tier).toBe('tier-3');
-    });
-
-    it('supports islands (Web Components are natural islands)', () => {
-        const adapter = vanilla();
-        expect(adapter.capabilities.islands).toBe(true);
-    });
-
-    it('accepts declarativeShadowDom option', () => {
-        const adapter = vanilla({ declarativeShadowDom: true });
-        expect(adapter).toBeDefined();
-    });
-
-    it('supports createIsland method', () => {
-        const adapter = vanilla();
-        expect(typeof adapter.createIsland).toBe('function');
-    });
-
-    it('createIsland returns valid island', () => {
-        const adapter = vanilla();
-        const island = adapter.createIsland('my-counter', { start: 5 });
-
-        expect(island.id).toBeDefined();
-        expect(island.component).toBe('my-counter');
-        expect(island.props).toEqual({ start: 5 });
-        expect(island.placeholder).toContain('<my-counter');
-    });
-});

package/test/contracts/adapter.contract.ts

@@ -1,293 +0,0 @@
-/**
- * @flightdev/ui - Contract Tests
- *
- * These tests verify that all UI adapters conform to the UIAdapterV2 contract.
- * Contract testing ensures consistent behavior across all 18 adapters.
- *
- * @module @flightdev/ui/tests
- */
-
-import { describe, it, expect, beforeAll } from 'vitest';
-import type { UIAdapterV2, AdapterCapabilities, RenderResult } from '../../src/core/types.js';
-
-// ============================================================================
-// Test Utilities
-// ============================================================================
-
-/**
- * Mock component for testing adapters.
- * Each adapter handles this differently based on its framework.
- */
-const createMockComponent = () => ({
-    component: () => '<div>Test Component</div>',
-    props: { message: 'Hello, Flight!' },
-    id: 'test-component-1',
-});
-
-/**
- * Mock HTML template function for HTML-first adapters.
- */
-const createHtmlComponent = () => ({
-    component: (props: { message: string }) => `<div>${props.message}</div>`,
-    props: { message: 'Hello, Flight!' },
-    id: 'test-html-1',
-});
-
-// ============================================================================
-// Contract Test Suite
-// ============================================================================
-
-/**
- * Runs the standard contract tests for any UIAdapterV2 implementation.
- * This ensures all adapters behave consistently.
- */
-export function runAdapterContractTests(
-    adapterFactory: () => UIAdapterV2,
-    adapterName: string,
-    options: {
-        /** Use HTML component instead of framework component */
-        useHtmlComponent?: boolean;
-        /** Skip renderToString test (for adapters that need special setup) */
-        skipRenderTest?: boolean;
-    } = {}
-): void {
-    describe(`${adapterName} Adapter - Contract Tests`, () => {
-        let adapter: UIAdapterV2;
-
-        beforeAll(() => {
-            adapter = adapterFactory();
-        });
-
-        // ====================================================================
-        // Identity Tests
-        // ====================================================================
-
-        describe('Identity', () => {
-            it('has a valid id (lowercase, no spaces)', () => {
-                expect(adapter.id).toBeDefined();
-                expect(typeof adapter.id).toBe('string');
-                expect(adapter.id).toMatch(/^[a-z][a-z0-9-]*$/);
-            });
-
-            it('has a human-readable name', () => {
-                expect(adapter.name).toBeDefined();
-                expect(typeof adapter.name).toBe('string');
-                expect(adapter.name.length).toBeGreaterThan(0);
-            });
-
-            it('has a framework identifier', () => {
-                expect(adapter.framework).toBeDefined();
-                expect(typeof adapter.framework).toBe('string');
-            });
-
-            it('has a valid tier', () => {
-                expect(adapter.tier).toBeDefined();
-                expect(['tier-1', 'tier-2', 'tier-3']).toContain(adapter.tier);
-            });
-        });
-
-        // ====================================================================
-        // Capabilities Tests
-        // ====================================================================
-
-        describe('Capabilities', () => {
-            it('has a capabilities object', () => {
-                expect(adapter.capabilities).toBeDefined();
-                expect(typeof adapter.capabilities).toBe('object');
-            });
-
-            it('has all required capability flags as booleans', () => {
-                const requiredCapabilities: (keyof AdapterCapabilities)[] = [
-                    'streaming',
-                    'partialHydration',
-                    'islands',
-                    'resumable',
-                    'ssg',
-                    'csr',
-                    'serverComponents',
-                ];
-
-                for (const cap of requiredCapabilities) {
-                    expect(
-                        typeof adapter.capabilities[cap],
-                        `capability '${String(cap)}' should be a boolean`
-                    ).toBe('boolean');
-                }
-            });
-
-            it('tier-1 adapters should support SSG', () => {
-                if (adapter.tier === 'tier-1') {
-                    expect(adapter.capabilities.ssg).toBe(true);
-                }
-            });
-
-            it('tier-3 adapters typically do not support CSR', () => {
-                // This is a soft check - some tier-3 adapters may support CSR
-                if (adapter.tier === 'tier-3' && adapter.id !== 'alpine' && adapter.id !== 'petite-vue') {
-                    // HTMX, Hotwire are server-driven
-                }
-            });
-        });
-
-        // ====================================================================
-        // Render Contract Tests
-        // ====================================================================
-
-        describe('Render Contract', () => {
-            it('renderToString is a function', () => {
-                expect(typeof adapter.renderToString).toBe('function');
-            });
-
-            if (!options.skipRenderTest) {
-                it('renderToString returns a Promise', async () => {
-                    const component = options.useHtmlComponent
-                        ? createHtmlComponent()
-                        : createMockComponent();
-
-                    const resultPromise = adapter.renderToString(component);
-                    expect(resultPromise).toBeInstanceOf(Promise);
-                });
-
-                it('renderToString result has html property', async () => {
-                    const component = options.useHtmlComponent
-                        ? createHtmlComponent()
-                        : createMockComponent();
-
-                    const result = await adapter.renderToString(component);
-
-                    expect(result).toBeDefined();
-                    expect(typeof result.html).toBe('string');
-                });
-
-                it('renderToString result may have timing info', async () => {
-                    const component = options.useHtmlComponent
-                        ? createHtmlComponent()
-                        : createMockComponent();
-
-                    const result = await adapter.renderToString(component);
-
-                    if (result.timing) {
-                        expect(typeof result.timing.total).toBe('number');
-                        expect(result.timing.total).toBeGreaterThanOrEqual(0);
-                    }
-                });
-            }
-        });
-
-        // ====================================================================
-        // Streaming Contract Tests
-        // ====================================================================
-
-        describe('Streaming Contract', () => {
-            it('renderToStream is defined if streaming capability is true (advisory)', () => {
-                // Note: This is an advisory check. Some adapters may declare
-                // streaming capability but delegate to renderToString internally.
-                if (adapter.capabilities.streaming && adapter.renderToStream) {
-                    expect(typeof adapter.renderToStream).toBe('function');
-                }
-            });
-
-            // Only run actual streaming test if not skipping render tests
-            // (some adapters need real framework components to stream)
-            if (!options.skipRenderTest) {
-                it('renderToStream returns stream, done, and abort when available', () => {
-                    if (adapter.renderToStream) {
-                        const component = options.useHtmlComponent
-                            ? createHtmlComponent()
-                            : createMockComponent();
-
-                        const result = adapter.renderToStream(component);
-
-                        expect(result.stream).toBeInstanceOf(ReadableStream);
-                        expect(result.done).toBeInstanceOf(Promise);
-                        expect(typeof result.abort).toBe('function');
-                    }
-                });
-            }
-        });
-
-        // ====================================================================
-        // Hydration Contract Tests
-        // ====================================================================
-
-        describe('Hydration Contract', () => {
-            it('getHydrationScript is a function', () => {
-                expect(typeof adapter.getHydrationScript).toBe('function');
-            });
-
-            it('getHydrationScript returns a string', () => {
-                const mockResult: RenderResult = {
-                    html: '<div>Test</div>',
-                    hydrationData: { props: {} },
-                };
-
-                const script = adapter.getHydrationScript(mockResult);
-
-                expect(typeof script).toBe('string');
-            });
-
-            it('getHydrationScript contains script tag or is valid JS', () => {
-                const mockResult: RenderResult = {
-                    html: '<div>Test</div>',
-                    hydrationData: { props: {} },
-                };
-
-                const script = adapter.getHydrationScript(mockResult);
-
-                // Should be either a script tag or module code
-                const hasScriptTag = script.includes('<script');
-                const hasModuleCode = script.includes('export') || script.includes('window.');
-                const isEmpty = script.trim().length === 0;
-
-                expect(hasScriptTag || hasModuleCode || isEmpty).toBe(true);
-            });
-
-            it('getClientEntry is a function', () => {
-                expect(typeof adapter.getClientEntry).toBe('function');
-            });
-
-            it('getClientEntry returns client-side code', () => {
-                const entry = adapter.getClientEntry();
-
-                expect(typeof entry).toBe('string');
-                // Should export a hydrate function or be client code
-                const isClientCode =
-                    entry.includes('hydrate') ||
-                    entry.includes('mount') ||
-                    entry.includes('render') ||
-                    entry.includes('console.log');
-
-                expect(isClientCode).toBe(true);
-            });
-        });
-
-        // ====================================================================
-        // Islands Contract Tests
-        // ====================================================================
-
-        describe('Islands Contract', () => {
-            it('createIsland is available (all adapters have default implementation)', () => {
-                // BaseUIAdapter provides a default createIsland implementation
-                expect(typeof adapter.createIsland).toBe('function');
-            });
-
-            it('createIsland returns valid island object', () => {
-                if (adapter.createIsland) {
-                    const island = adapter.createIsland('my-component', { prop: 'value' });
-
-                    expect(island.id).toBeDefined();
-                    expect(typeof island.id).toBe('string');
-                    expect(island.component).toBe('my-component');
-                    expect(island.props).toEqual({ prop: 'value' });
-                    expect(typeof island.placeholder).toBe('string');
-                }
-            });
-        });
-    });
-}
-
-// ============================================================================
-// Export for direct usage
-// ============================================================================
-
-export { createMockComponent, createHtmlComponent };