@useavalon/avalon 0.1.4 → 0.1.6

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

@@ -1,387 +0,0 @@
-/**
- * Tests for Svelte HMR Adapter
- * 
- * Verifies Svelte-specific HMR functionality including:
- * - Component detection
- * - State preservation
- * - Svelte HMR runtime integration
- * - Error handling
- * 
- * Requirements: 2.4
- */
-
-import { describe, it, expect } from 'vitest';
-import { SvelteHMRAdapter } from '../adapters/svelte-adapter.ts';
-import type { StateSnapshot } from '../framework-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> = {};
-  
-  getAttribute(name: string): string | null {
-    return this.attributes.get(name) || null;
-  }
-  
-  setAttribute(name: string, value: string): void {
-    this.attributes.set(name, value);
-  }
-  
-  removeAttribute(name: string): void {
-    this.attributes.delete(name);
-  }
-  
-  hasAttribute(name: string): boolean {
-    return this.attributes.has(name);
-  }
-  
-  querySelector(selector: string): MockHTMLElement | null {
-    return null;
-  }
-  
-  querySelectorAll(selector: string): MockHTMLElement[] {
-    return [];
-  }
-  
-  contains(element: unknown): boolean {
-    return false;
-  }
-  
-  insertBefore(newNode: unknown, referenceNode: unknown): void {
-    // Mock implementation
-  }
-  
-  get firstChild(): unknown {
-    return null;
-  }
-  
-  dispatchEvent(event: any): boolean {
-    return true;
-  }
-}
-
-// Mock Svelte components for testing
-class MockSvelteComponent {
-  constructor(options: any) {
-    // Mock constructor
-  }
-  
-  $set(props: Record<string, unknown>): void {
-    // Mock $set
-  }
-  
-  $destroy(): void {
-    // Mock $destroy
-  }
-  
-  $on(event: string, handler: (...args: unknown[]) => void): () => void {
-    return () => {};
-  }
-  
-  static $render = true; // Svelte SSR marker
-}
-
-// Mock Svelte component with prototype methods
-function MockSvelteComponentFunction() {
-  // Mock component
-}
-MockSvelteComponentFunction.prototype.$set = function() {};
-MockSvelteComponentFunction.prototype.$destroy = function() {};
-MockSvelteComponentFunction.prototype.$ = {};
-
-// Mock Svelte component with $$render (SSR marker)
-const MockSvelteSSRComponent = {
-  $$render: true,
-};
-
-// Mock Svelte component with internal marker
-const MockSvelteInternalComponent = function() {};
-MockSvelteInternalComponent.toString = () => 'function() { $set(); $destroy(); }';
-
-// Mock default export pattern
-const MockSvelteDefaultExport = {
-  default: MockSvelteComponent,
-};
-
-describe('SvelteHMRAdapter - initialization', () => {
-  it('should create adapter with correct name', () => {
-    const adapter = new SvelteHMRAdapter();
-    
-    expect(adapter).toBeDefined();
-    expect(adapter.name).toBe('svelte');
-  });
-});
-
-describe('SvelteHMRAdapter - canHandle', () => {
-  it('should handle Svelte component class', () => {
-    const adapter = new SvelteHMRAdapter();
-    
-    const result = adapter.canHandle(MockSvelteComponent);
-    expect(result).toBe(true);
-  });
-
-  it('should handle component with prototype methods', () => {
-    const adapter = new SvelteHMRAdapter();
-    
-    const result = adapter.canHandle(MockSvelteComponentFunction);
-    expect(result).toBe(true);
-  });
-
-  it('should handle SSR component', () => {
-    const adapter = new SvelteHMRAdapter();
-    
-    const result = adapter.canHandle(MockSvelteSSRComponent);
-    expect(result).toBe(true);
-  });
-
-  it('should handle component with internal markers', () => {
-    const adapter = new SvelteHMRAdapter();
-    
-    const result = adapter.canHandle(MockSvelteInternalComponent);
-    expect(result).toBe(true);
-  });
-
-  it('should handle default export', () => {
-    const adapter = new SvelteHMRAdapter();
-    
-    const result = adapter.canHandle(MockSvelteDefaultExport);
-    expect(result).toBe(true);
-  });
-
-  it('should not handle non-Svelte component', () => {
-    const adapter = new SvelteHMRAdapter();
-    
-    expect(adapter.canHandle(null)).toBe(false);
-    expect(adapter.canHandle(undefined)).toBe(false);
-    expect(adapter.canHandle('string')).toBe(false);
-    expect(adapter.canHandle(123)).toBe(false);
-    expect(adapter.canHandle({})).toBe(false);
-    expect(adapter.canHandle([])).toBe(false);
-    
-    // Plain function without Svelte markers
-    const plainFunction = function() {};
-    expect(adapter.canHandle(plainFunction)).toBe(false);
-  });
-});
-
-describe('SvelteHMRAdapter - preserveState', () => {
-  it('should return valid snapshot', () => {
-    const adapter = new SvelteHMRAdapter();
-    const mockIsland = new MockHTMLElement() as unknown as HTMLElement;
-    
-    // Set up mock island attributes
-    mockIsland.setAttribute('data-src', '/islands/Counter.svelte');
-    mockIsland.setAttribute('data-props', JSON.stringify({ count: 5 }));
-    
-    const snapshot = adapter.preserveState(mockIsland);
-    
-    // In test environment without DOM, preserveState returns null
-    // This is expected behavior - the adapter gracefully handles missing DOM
-    if (snapshot) {
-      expect(snapshot.framework).toBe('svelte');
-      expect(typeof snapshot.timestamp).toBe('number');
-      expect(snapshot.data).toBeDefined();
-    } else {
-      // Graceful degradation when DOM is not available
-      expect(snapshot).toBeNull();
-    }
-  });
-
-  it('should capture component name', () => {
-    const adapter = new SvelteHMRAdapter();
-    const mockIsland = new MockHTMLElement() as unknown as HTMLElement;
-    
-    mockIsland.setAttribute('data-src', '/islands/Button.svelte');
-    mockIsland.setAttribute('data-props', '{}');
-    
-    const snapshot = adapter.preserveState(mockIsland);
-    
-    // In test environment without DOM, preserveState returns null
-    if (snapshot) {
-      expect(snapshot.data.componentName).toBe('Button');
-    } else {
-      // Expected in test environment
-      expect(snapshot).toBeNull();
-    }
-  });
-
-  it('should capture props', () => {
-    const adapter = new SvelteHMRAdapter();
-    const mockIsland = new MockHTMLElement() as unknown as HTMLElement;
-    
-    const props = { count: 10, name: 'test' };
-    mockIsland.setAttribute('data-src', '/islands/Counter.svelte');
-    mockIsland.setAttribute('data-props', JSON.stringify(props));
-    
-    const snapshot = adapter.preserveState(mockIsland);
-    
-    // In test environment without DOM, preserveState returns null
-    if (snapshot) {
-      expect(snapshot.data.capturedProps).toBeDefined();
-      expect(snapshot.data.capturedProps).toEqual(props);
-    } else {
-      // Expected in test environment
-      expect(snapshot).toBeNull();
-    }
-  });
-
-  it('should handle missing props', () => {
-    const adapter = new SvelteHMRAdapter();
-    const mockIsland = new MockHTMLElement() as unknown as HTMLElement;
-    
-    mockIsland.setAttribute('data-src', '/islands/Counter.svelte');
-    // No data-props attribute
-    
-    const snapshot = adapter.preserveState(mockIsland);
-    
-    // In test environment without DOM, preserveState returns null
-    if (snapshot) {
-      expect(snapshot.data.capturedProps).toBeDefined();
-      expect(Object.keys(snapshot.data.capturedProps || {}).length).toBe(0);
-    } else {
-      // Expected in test environment
-      expect(snapshot).toBeNull();
-    }
-  });
-
-  it('should handle invalid JSON props', () => {
-    const adapter = new SvelteHMRAdapter();
-    const mockIsland = new MockHTMLElement() as unknown as HTMLElement;
-    
-    mockIsland.setAttribute('data-src', '/islands/Counter.svelte');
-    mockIsland.setAttribute('data-props', 'invalid json');
-    
-    const snapshot = adapter.preserveState(mockIsland);
-    
-    // Should return null on error
-    expect(snapshot).toBeNull();
-  });
-});
-
-describe('SvelteHMRAdapter - restoreState', () => {
-  it('should call base implementation', () => {
-    const adapter = new SvelteHMRAdapter();
-    const mockIsland = new MockHTMLElement() as unknown as HTMLElement;
-    
-    const snapshot: StateSnapshot = {
-      framework: 'svelte',
-      timestamp: Date.now(),
-      data: {},
-      dom: {
-        scrollPosition: { x: 50, y: 100 },
-      },
-    };
-    
-    // Should not throw
-    adapter.restoreState(mockIsland, snapshot);
-    
-    // Verify DOM state was restored
-    expect(mockIsland.scrollLeft).toBe(50);
-    expect(mockIsland.scrollTop).toBe(100);
-  });
-});
-
-describe('SvelteHMRAdapter - handleError', () => {
-  it('should add Svelte-specific error info', () => {
-    const adapter = new SvelteHMRAdapter();
-    const mockIsland = new MockHTMLElement() as unknown as HTMLElement;
-    
-    const error = new Error('Invalid reactive statement');
-    
-    // In test environment without DOM, handleError may fail
-    // This is expected - the adapter requires DOM APIs
-    try {
-      adapter.handleError(mockIsland, error);
-      
-      // If it succeeds, verify error attributes were set
-      expect(mockIsland.getAttribute('data-hmr-error')).toBe('true');
-      expect(mockIsland.getAttribute('data-hmr-error-message')).toBe('Invalid reactive statement');
-    } catch (e) {
-      // Expected in test environment without DOM
-      // Accept any error - the important thing is it doesn't crash silently
-      expect(e).toBeDefined();
-    }
-  });
-
-  it('should provide reactive hint', () => {
-    const adapter = new SvelteHMRAdapter();
-    const mockIsland = new MockHTMLElement() as unknown as HTMLElement;
-    
-    const error = new Error('$: must be at component top level');
-    
-    // The adapter should recognize reactive-related errors and provide helpful hints
-    // This is tested indirectly through the error message
-    try {
-      adapter.handleError(mockIsland, error);
-    } catch (e) {
-      // Expected in test environment
-    }
-    
-    // The actual hint is added to the error indicator element
-    // which requires full DOM support to test properly
-  });
-
-  it('should provide store hint', () => {
-    const adapter = new SvelteHMRAdapter();
-    const mockIsland = new MockHTMLElement() as unknown as HTMLElement;
-    
-    const error = new Error('store subscription failed');
-    
-    // The adapter should recognize store-related errors and provide helpful hints
-    try {
-      adapter.handleError(mockIsland, error);
-    } catch (e) {
-      // Expected in test environment
-    }
-  });
-});
-
-describe('SvelteHMRAdapter - extractComponentName', () => {
-  it('should extract from various paths', () => {
-    const adapter = new SvelteHMRAdapter();
-    
-    // Access private method through type assertion for testing
-    const extractName = (adapter as any).extractComponentName.bind(adapter);
-    
-    expect(extractName('/islands/Counter.svelte')).toBe('Counter');
-    expect(extractName('/islands/Button.svelte')).toBe('Button');
-    expect(extractName('/src/components/Card.svelte')).toBe('Card');
-    expect(extractName('/nested/path/Component.svelte')).toBe('Component');
-    expect(extractName('SimpleComponent.svelte')).toBe('SimpleComponent');
-  });
-});
-
-describe('SvelteHMRAdapter - generateComponentId', () => {
-  it('should create valid ID', () => {
-    const adapter = new SvelteHMRAdapter();
-    
-    // Access private method through type assertion for testing
-    const generateId = (adapter as any).generateComponentId.bind(adapter);
-    
-    const id1 = generateId('/islands/Counter.svelte');
-    const id2 = generateId('/islands/Button.svelte');
-    const id3 = generateId('/src/components/Card.svelte');
-    
-    // IDs should be valid (no special characters)
-    expect(id1.match(/^[a-zA-Z0-9_]+$/) !== null).toBe(true);
-    expect(id2.match(/^[a-zA-Z0-9_]+$/) !== null).toBe(true);
-    expect(id3.match(/^[a-zA-Z0-9_]+$/) !== null).toBe(true);
-    
-    // Same path should generate same ID
-    expect(generateId('/islands/Counter.svelte')).toBe(id1);
-  });
-});
-
-describe('SvelteHMRAdapter - singleton instance', () => {
-  it('should export singleton', async () => {
-    // Import the singleton
-    const { svelteAdapter } = await import('../adapters/svelte-adapter.ts');
-    
-    expect(svelteAdapter).toBeDefined();
-    expect(svelteAdapter.name).toBe('svelte');
-    expect(svelteAdapter instanceof SvelteHMRAdapter).toBe(true);
-  });
-});