@useavalon/avalon 0.1.5 → 0.1.6

package/src/client/tests/hydration-option-parsing.test.ts

@@ -1,107 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-// Test the enhanced hydration option parsing functionality
-
-describe('Hydration Option Parsing - validateRootMargin patterns', () => {
-  it('should validate valid rootMargin patterns', () => {
-    const validPatterns = ['10px', '10px 20px', '10px 20px 30px 40px', '10%', '-10px', '0px', '100px 50px'];
-    const rootMarginRegex = /^(-?\d+(?:\.\d+)?(?:px|%)?(?:\s+-?\d+(?:\.\d+)?(?:px|%)?){0,3})$/;
-
-    validPatterns.forEach(pattern => {
-      expect(rootMarginRegex.test(pattern.trim())).toBe(true);
-    });
-  });
-
-  it('should reject invalid rootMargin patterns', () => {
-    const invalidPatterns = ['invalid', '', '10px 20px 30px 40px 50px', 'abc', '10px invalid 20px'];
-    const rootMarginRegex = /^(-?\d+(?:\.\d+)?(?:px|%)?(?:\s+-?\d+(?:\.\d+)?(?:px|%)?){0,3})$/;
-
-    invalidPatterns.forEach(pattern => {
-      expect(rootMarginRegex.test(pattern.trim())).toBe(false);
-    });
-  });
-});
-
-describe('Hydration Option Parsing - directive parsing patterns', () => {
-  it('should parse directives correctly', () => {
-    const testCases = [
-      { input: 'on:client', expectedDirective: 'on:client' },
-      { input: 'on:visible={{rootMargin: "100px"}}', expectedDirective: 'on:visible' },
-      { input: 'on:idle={{timeout: 10000}}', expectedDirective: 'on:idle' },
-      { input: 'media:screen', expectedDirective: 'media:screen' },
-    ];
-
-    testCases.forEach(testCase => {
-      const directiveMatch = testCase.input.match(/^([^=\s]+)/);
-      const directive = directiveMatch ? directiveMatch[1] : 'on:client';
-      expect(directive).toBe(testCase.expectedDirective);
-    });
-  });
-});
-
-describe('Hydration Option Parsing - option extraction patterns', () => {
-  it('should extract options correctly', () => {
-    const testCases = [
-      { input: 'on:visible={{rootMargin: "100px"}}', expectedOptions: 'rootMargin: "100px"' },
-      { input: 'on:visible={{rootMargin: "50px", threshold: 0.5}}', expectedOptions: 'rootMargin: "50px", threshold: 0.5' },
-      { input: 'on:idle={{timeout: 10000}}', expectedOptions: 'timeout: 10000' },
-    ];
-
-    testCases.forEach(testCase => {
-      const optionsMatch = testCase.input.match(/=\s*\{\{(.+?)\}\}/);
-      const extractedOptions = optionsMatch ? optionsMatch[1] : '';
-      expect(extractedOptions).toBe(testCase.expectedOptions);
-    });
-  });
-});
-
-describe('Hydration Option Parsing - JSON parsing preparation', () => {
-  it('should normalize options strings for JSON parsing', () => {
-    const testCases = [
-      { input: 'rootMargin: "100px"', expected: '"rootMargin": "100px"' },
-      { input: "rootMargin: '100px'", expected: '"rootMargin": "100px"' },
-      { input: 'timeout: 5000', expected: '"timeout": 5000' },
-    ];
-
-    testCases.forEach(testCase => {
-      const normalized = testCase.input
-        .replace(/(\w+):/g, '"$1":')
-        .replace(/'/g, '"');
-      expect(normalized).toBe(testCase.expected);
-      const parsed = JSON.parse('{' + normalized + '}');
-      expect(parsed).toBeDefined();
-    });
-  });
-});
-
-describe('Hydration Option Parsing - validation ranges', () => {
-  it('should validate threshold values (0-1 range)', () => {
-    const validThresholds = [0, 0.5, 1, 0.25, 0.75];
-    const invalidThresholds = [-0.1, 1.1, 2, -1, '0.5', null, undefined];
-
-    validThresholds.forEach(threshold => {
-      const isValid = typeof threshold === 'number' && threshold >= 0 && threshold <= 1;
-      expect(isValid).toBe(true);
-    });
-
-    invalidThresholds.forEach(threshold => {
-      const isValid = typeof threshold === 'number' && threshold >= 0 && threshold <= 1;
-      expect(isValid).toBe(false);
-    });
-  });
-
-  it('should validate timeout values (positive numbers up to 60 seconds)', () => {
-    const validTimeouts = [1000, 5000, 30000, 60000];
-    const invalidTimeouts = [0, -1000, 70000, '5000', null, undefined];
-
-    validTimeouts.forEach(timeout => {
-      const isValid = typeof timeout === 'number' && timeout > 0 && timeout <= 60000;
-      expect(isValid).toBe(true);
-    });
-
-    invalidTimeouts.forEach(timeout => {
-      const isValid = typeof timeout === 'number' && timeout > 0 && timeout <= 60000;
-      expect(isValid).toBe(false);
-    });
-  });
-});

package/src/client/tests/lit-adapter.test.ts

@@ -1,427 +0,0 @@
-/**
- * Tests for Lit HMR Adapter
- * 
- * Verifies Lit-specific HMR functionality including:
- * - Component detection
- * - State preservation
- * - Custom element re-registration
- * - Property and attribute preservation
- */
-
-import { describe, it, expect } from 'vitest';
-import { LitHMRAdapter } from '../adapters/lit-adapter.ts';
-
-// Mock HTMLElement for testing
-class MockHTMLElement {
-  private _attributes: Map<string, string> = new Map();
-  private _children: MockHTMLElement[] = [];
-  public scrollTop = 0;
-  public scrollLeft = 0;
-  public style: Record<string, string> = {};
-  public tagName = 'DIV';
-  public textContent: string | null = null;
-  public innerHTML = '';
-  public className = '';
-  
-  getAttribute(name: string): string | null {
-    return this._attributes.get(name) || null;
-  }
-  
-  setAttribute(name: string, value: string): void {
-    this._attributes.set(name, value);
-    if (name === 'class') {
-      this.className = value;
-    }
-  }
-  
-  removeAttribute(name: string): void {
-    this._attributes.delete(name);
-  }
-  
-  hasAttribute(name: string): boolean {
-    return this._attributes.has(name);
-  }
-  
-  querySelector(selector: string): MockHTMLElement | null {
-    // Simple mock - check if selector matches class or tag
-    if (selector.startsWith('.')) {
-      const className = selector.substring(1);
-      for (const child of this._children) {
-        if (child.className === className) {
-          return child;
-        }
-      }
-    }
-    // Return first child for other selectors
-    if (this._children.length > 0) {
-      return this._children[0];
-    }
-    return null;
-  }
-  
-  querySelectorAll(selector: string): MockHTMLElement[] {
-    return this._children;
-  }
-  
-  appendChild(child: MockHTMLElement): MockHTMLElement {
-    this._children.push(child);
-    return child;
-  }
-  
-  insertBefore(newChild: MockHTMLElement, referenceChild: MockHTMLElement | null): MockHTMLElement {
-    if (referenceChild === null || !this._children.includes(referenceChild)) {
-      this._children.push(newChild);
-    } else {
-      const index = this._children.indexOf(referenceChild);
-      this._children.splice(index, 0, newChild);
-    }
-    return newChild;
-  }
-  
-  remove(): void {
-    this._children = [];
-  }
-  
-  get children(): MockHTMLElement[] {
-    return this._children;
-  }
-  
-  get firstChild(): MockHTMLElement | null {
-    return this._children[0] || null;
-  }
-  
-  get attributes(): Array<{ name: string; value: string }> & { length: number } {
-    const attrs = Array.from(this._attributes.entries()).map(([name, value]) => ({ name, value }));
-    const result = attrs as Array<{ name: string; value: string }> & { length: number };
-    return result;
-  }
-  
-  contains(element: unknown): boolean {
-    return false;
-  }
-}
-
-// Mock Lit component class
-class MockLitElement {
-  static elementName = 'mock-counter';
-  
-  // Lit-specific properties
-  count = 0;
-  label = 'Counter';
-  
-  // Lit-specific methods
-  render() {
-    return `<div>${this.label}: ${this.count}</div>`;
-  }
-  
-  requestUpdate() {
-    // Mock update
-  }
-  
-  get updateComplete(): Promise<boolean> {
-    return Promise.resolve(true);
-  }
-}
-
-// Mock Lit component with decorators
-class MockDecoratedLitElement {
-  static elementName = 'decorated-counter';
-  
-  __litElement = true;
-  
-  count = 0;
-  
-  render() {
-    return `<div>Count: ${this.count}</div>`;
-  }
-  
-  requestUpdate() {
-    // Mock update
-  }
-  
-  get updateComplete(): Promise<boolean> {
-    return Promise.resolve(true);
-  }
-}
-
-// Mock Lit component module (default export)
-const MockLitModule = {
-  default: MockLitElement,
-};
-
-describe('LitHMRAdapter - name', () => {
-  it('should have correct name', () => {
-    const adapter = new LitHMRAdapter();
-    expect(adapter.name).toBe('lit');
-  });
-});
-
-describe('LitHMRAdapter - canHandle', () => {
-  it('should detect Lit components', () => {
-    const adapter = new LitHMRAdapter();
-    
-    // Should handle Lit element class
-    expect(adapter.canHandle(MockLitElement)).toBe(true);
-    
-    // Should handle decorated Lit element
-    expect(adapter.canHandle(MockDecoratedLitElement)).toBe(true);
-    
-    // Should handle module with default export
-    expect(adapter.canHandle(MockLitModule)).toBe(true);
-    
-    // Should not handle non-Lit components
-    expect(adapter.canHandle(null)).toBe(false);
-    expect(adapter.canHandle(undefined)).toBe(false);
-    expect(adapter.canHandle({})).toBe(false);
-    expect(adapter.canHandle('string')).toBe(false);
-    expect(adapter.canHandle(123)).toBe(false);
-  });
-
-  it('should detect Lit by prototype methods', () => {
-    const adapter = new LitHMRAdapter();
-    
-    // Create a class with Lit-like methods
-    class LitLikeElement {
-      render() { return ''; }
-      requestUpdate() {}
-      get updateComplete() { return Promise.resolve(true); }
-    }
-    
-    expect(adapter.canHandle(LitLikeElement)).toBe(true);
-  });
-
-  it('should detect Lit by function signature', () => {
-    const adapter = new LitHMRAdapter();
-    
-    // Create a class that looks like a Lit component in its string representation
-    class LitLikeComponent {
-      render() {
-        // This will show up in toString()
-        return 'html`<div>Hello</div>`';
-      }
-    }
-    
-    // The adapter should be able to detect Lit patterns
-    // We just verify the method exists and works
-    expect(adapter.canHandle).toBeDefined();
-    
-    // Test with a class that has LitElement in its code
-    const hasLitPattern = adapter.canHandle(LitLikeComponent);
-    // This may or may not detect it depending on toString() output
-    // but we verify it doesn't throw
-    expect(typeof hasLitPattern).toBe('boolean');
-  });
-});
-
-describe('LitHMRAdapter - preserveState', () => {
-  it('should capture element properties', () => {
-    const adapter = new LitHMRAdapter();
-    
-    // Create a mock island with a Lit element
-    const island = new MockHTMLElement() as unknown as HTMLElement;
-    island.setAttribute('data-framework', 'lit');
-    island.setAttribute('data-src', '/islands/Counter.lit.ts');
-    island.setAttribute('data-props', '{"initialCount": 5}');
-    island.setAttribute('data-tag-name', 'mock-counter');
-    
-    // Create a mock Lit element
-    const litElement = new MockHTMLElement() as unknown as HTMLElement & {
-      count: number;
-      label: string;
-    };
-    (litElement as unknown as Record<string, unknown>).count = 10;
-    (litElement as unknown as Record<string, unknown>).label = 'Test Counter';
-    litElement.setAttribute('data-lit-element', 'true');
-    litElement.setAttribute('theme', 'dark');
-    
-    (island as unknown as MockHTMLElement).appendChild(litElement as unknown as MockHTMLElement);
-    
-    // Preserve state - will return null due to missing document global
-    // but should not throw
-    const state = adapter.preserveState(island);
-    
-    // In a test environment without document, state will be null
-    // This is expected behavior - the adapter handles it gracefully
-    // In a real browser environment, state would be captured
-    if (state) {
-      expect(state.framework).toBe('lit');
-      expect(state.data).toBeDefined();
-    }
-  });
-
-  it('should capture DOM state', () => {
-    const adapter = new LitHMRAdapter();
-    
-    // Create a mock island with form elements
-    const island = new MockHTMLElement() as unknown as HTMLElement;
-    island.setAttribute('data-framework', 'lit');
-    island.setAttribute('data-src', '/islands/Form.lit.ts');
-    island.setAttribute('data-tag-name', 'mock-form');
-    
-    // Note: Full DOM state capture requires a real DOM environment
-    // This test verifies the method doesn't throw
-    const state = adapter.preserveState(island);
-    
-    // State may be null in test environment without document global
-    // This is expected and handled gracefully
-    if (state) {
-      expect(state.framework).toBe('lit');
-    }
-  });
-
-  it('should handle missing elements gracefully', () => {
-    const adapter = new LitHMRAdapter();
-    
-    // Create an empty island
-    const island = new MockHTMLElement() as unknown as HTMLElement;
-    island.setAttribute('data-framework', 'lit');
-    island.setAttribute('data-src', '/islands/Empty.lit.ts');
-    
-    // Preserve state should not throw
-    const state = adapter.preserveState(island);
-    
-    // State may be null in test environment
-    if (state) {
-      expect(state.framework).toBe('lit');
-    }
-  });
-});
-
-describe('LitHMRAdapter - handleError', () => {
-  it('should not throw', () => {
-    const adapter = new LitHMRAdapter();
-    
-    const island = new MockHTMLElement() as unknown as HTMLElement;
-    const error = new Error('Test error');
-    
-    // handleError requires document global for creating error indicator
-    // In test environment, it will log but not throw
-    // This is expected behavior
-    try {
-      adapter.handleError(island, error);
-    } catch (e) {
-      // Expected in test environment without document
-      expect(e instanceof ReferenceError).toBe(true);
-    }
-  });
-
-  it('should handle different error types', () => {
-    const adapter = new LitHMRAdapter();
-    
-    const island = new MockHTMLElement() as unknown as HTMLElement;
-    
-    // Test that different error types are handled
-    const errors = [
-      new Error('custom element already defined'),
-      new Error('property not found'),
-      new Error('render error'),
-    ];
-    
-    for (const error of errors) {
-      try {
-        adapter.handleError(island, error);
-      } catch (e) {
-        // Expected in test environment without document
-        expect(e instanceof ReferenceError).toBe(true);
-      }
-    }
-  });
-});
-
-describe('LitHMRAdapter - restoreState', () => {
-  it('should restore element properties', () => {
-    const adapter = new LitHMRAdapter();
-    
-    // Create a mock island with a Lit element
-    const island = new MockHTMLElement() as unknown as HTMLElement;
-    island.setAttribute('data-tag-name', 'mock-counter');
-    
-    const litElement = new MockHTMLElement() as unknown as HTMLElement & {
-      count: number;
-      label: string;
-    };
-    (litElement as unknown as Record<string, unknown>).count = 0;
-    (litElement as unknown as Record<string, unknown>).label = '';
-    (island as unknown as MockHTMLElement).appendChild(litElement as unknown as MockHTMLElement);
-    
-    // Create a state snapshot
-    const state = {
-      framework: 'lit' as const,
-      timestamp: Date.now(),
-      data: {
-        tagName: 'mock-counter',
-        elementProperties: {
-          count: 10,
-          label: 'Restored Counter',
-        },
-        elementAttributes: {
-          theme: 'dark',
-        },
-      },
-    };
-    
-    // Restore state
-    adapter.restoreState(island, state);
-    
-    // Verify properties were restored
-    expect((litElement as unknown as Record<string, unknown>).count).toBe(10);
-    expect((litElement as unknown as Record<string, unknown>).label).toBe('Restored Counter');
-    expect(litElement.getAttribute('theme')).toBe('dark');
-  });
-
-  it('should handle missing elements gracefully', () => {
-    const adapter = new LitHMRAdapter();
-    
-    const island = new MockHTMLElement() as unknown as HTMLElement;
-    
-    const state = {
-      framework: 'lit' as const,
-      timestamp: Date.now(),
-      data: {
-        tagName: 'missing-element',
-        elementProperties: { count: 10 },
-      },
-    };
-    
-    // Should not throw
-    adapter.restoreState(island, state);
-  });
-});
-
-describe('LitHMRAdapter - unmount', () => {
-  it('should clean up element', () => {
-    const adapter = new LitHMRAdapter();
-    
-    const island = new MockHTMLElement() as unknown as HTMLElement;
-    island.setAttribute('data-tag-name', 'mock-counter');
-    
-    const litElement = new MockHTMLElement() as unknown as HTMLElement;
-    (island as unknown as MockHTMLElement).appendChild(litElement as unknown as MockHTMLElement);
-    
-    // Verify element exists
-    expect((island as unknown as MockHTMLElement).children.length).toBe(1);
-    
-    // Unmount - this will call querySelectorAll and remove elements
-    adapter.unmount(island);
-    
-    // In the mock implementation, remove() clears the _children array
-    // but the parent's children array is not automatically updated
-    // This is a limitation of the mock - in a real DOM, the element would be removed
-    // We just verify unmount doesn't throw
-  });
-
-  it('should handle missing elements gracefully', () => {
-    const adapter = new LitHMRAdapter();
-    
-    const island = new MockHTMLElement() as unknown as HTMLElement;
-    
-    // Should not throw
-    adapter.unmount(island);
-  });
-});
-
-// Note: Full integration tests for update() method would require:
-// - A real Lit runtime
-// - Custom element registry
-// - DOM environment with custom elements support
-// These are better tested in integration tests or E2E tests