@ccheever/exact-renderer 0.1.0

package/src/__tests__/toggle.test.ts

@@ -0,0 +1,441 @@
+/**
+ * Toggle/Switch Component Tests
+ *
+ * Comprehensive tests for the Toggle native element implementation.
+ * Tests cover: props normalization, tag mapping, controlled/uncontrolled state,
+ * event handling, accessibility, and styling.
+ */
+
+import { describe, it, expect } from 'vitest';
+import {
+  getTagConfig,
+  isValidTag,
+} from '../tags/tag-map.js';
+import { normalizeProps } from '../props/normalize.js';
+import { NodeType } from '@exact/core';
+
+// =============================================================================
+// Tag Configuration Tests
+// =============================================================================
+
+describe('Toggle tag configuration', () => {
+  describe('web-style toggle tag', () => {
+    it('should have correct config for lowercase toggle', () => {
+      const config = getTagConfig('toggle');
+      expect(config).not.toBeNull();
+      expect(config!.canonicalType).toBe('nativeView');
+      expect(config!.nodeType).toBe(NodeType.NativeView);
+      expect(config!.nativeView?.moduleName).toBe('exact.toggle');
+      expect(config!.isRNStyle).toBe(false);
+      expect(config!.defaultFlexDirection).toBe('row');
+    });
+
+    it('should support change events', () => {
+      const config = getTagConfig('toggle');
+      expect(config!.supportsChangeEvents).toBe(true);
+      expect(config!.supportsPressEvents).toBe(false);
+    });
+
+    it('should not be a text container', () => {
+      const config = getTagConfig('toggle');
+      expect(config!.isTextContainer).toBe(false);
+    });
+  });
+
+  describe('RN-style Toggle component', () => {
+    it('should have correct config for Toggle', () => {
+      const config = getTagConfig('Toggle');
+      expect(config).not.toBeNull();
+      expect(config!.canonicalType).toBe('nativeView');
+      expect(config!.nodeType).toBe(NodeType.NativeView);
+      expect(config!.nativeView?.moduleName).toBe('exact.toggle');
+      expect(config!.isRNStyle).toBe(true);
+      expect(config!.defaultFlexDirection).toBe('column');
+    });
+
+    it('should have correct config for Switch alias', () => {
+      const config = getTagConfig('Switch');
+      expect(config).not.toBeNull();
+      expect(config!.canonicalType).toBe('nativeView');
+      expect(config!.nodeType).toBe(NodeType.NativeView);
+      expect(config!.nativeView?.moduleName).toBe('exact.toggle');
+      expect(config!.isRNStyle).toBe(true);
+    });
+
+    it('should support change events for Toggle and Switch', () => {
+      expect(getTagConfig('Toggle')!.supportsChangeEvents).toBe(true);
+      expect(getTagConfig('Switch')!.supportsChangeEvents).toBe(true);
+    });
+  });
+
+  describe('tag validation', () => {
+    it('should validate toggle as a valid tag', () => {
+      expect(isValidTag('toggle')).toBe(true);
+      expect(isValidTag('Toggle')).toBe(true);
+      expect(isValidTag('Switch')).toBe(true);
+    });
+  });
+});
+
+// =============================================================================
+// Props Normalization Tests
+// =============================================================================
+
+describe('Toggle props normalization', () => {
+  describe('value props', () => {
+    it('should normalize boolean value prop', () => {
+      const result = normalizeProps('toggle', { value: true }, false);
+      expect(result.toggleValue).toBe(true);
+    });
+
+    it('should normalize false value prop', () => {
+      const result = normalizeProps('toggle', { value: false }, false);
+      expect(result.toggleValue).toBe(false);
+    });
+
+    it('should normalize defaultValue when value is not present', () => {
+      const result = normalizeProps('toggle', { defaultValue: true }, false);
+      expect(result.toggleValue).toBe(true);
+    });
+
+    it('should prefer value over defaultValue', () => {
+      const result = normalizeProps('toggle', { value: false, defaultValue: true }, false);
+      expect(result.toggleValue).toBe(false);
+    });
+
+    it('should handle undefined value gracefully', () => {
+      const result = normalizeProps('toggle', {}, false);
+      expect(result.toggleValue).toBeUndefined();
+    });
+  });
+
+  describe('styling props', () => {
+    it('should normalize glassEffect prop', () => {
+      const result = normalizeProps('toggle', { glassEffect: true }, false);
+      expect(result.glassEffect).toBe(true);
+    });
+
+    it('should normalize glassEffect false', () => {
+      const result = normalizeProps('toggle', { glassEffect: false }, false);
+      // The explicit off is the "false" spec string (not boolean false /
+      // omitted): the protocol has no prop-removal op, so the off must hit
+      // the wire to tear down a previously glassy node (ENG-22484). The
+      // scalar encoder stringifies booleans, so the wire value is identical.
+      expect(result.glassEffect).toBe('false');
+    });
+
+    it('should normalize tintColor prop', () => {
+      const result = normalizeProps('toggle', { tintColor: '#34d399' }, false);
+      expect(result.tintColor).toBe('#34d399');
+    });
+
+    it('should handle hex colors with alpha', () => {
+      const result = normalizeProps('toggle', { tintColor: '#34d39980' }, false);
+      expect(result.tintColor).toBe('#34d39980');
+    });
+
+    it('should handle rgb colors', () => {
+      const result = normalizeProps('toggle', { tintColor: 'rgb(52, 211, 153)' }, false);
+      expect(result.tintColor).toBe('rgb(52, 211, 153)');
+    });
+  });
+
+  describe('disabled prop', () => {
+    it('should normalize disabled prop true', () => {
+      const result = normalizeProps('toggle', { disabled: true }, false);
+      expect(result.disabled).toBe(true);
+    });
+
+    it('should normalize disabled prop false', () => {
+      const result = normalizeProps('toggle', { disabled: false }, false);
+      expect(result.disabled).toBe(false);
+    });
+
+    it('should not set disabled when undefined', () => {
+      const result = normalizeProps('toggle', {}, false);
+      expect(result.disabled).toBeUndefined();
+    });
+  });
+
+  describe('label props', () => {
+    it('should extract label from label prop', () => {
+      const result = normalizeProps('toggle', { label: 'Enable notifications' }, false);
+      expect(result.textContent).toBe('Enable notifications');
+    });
+
+    it('should extract label from string children', () => {
+      const result = normalizeProps('toggle', { children: 'Dark mode' }, false);
+      expect(result.textContent).toBe('Dark mode');
+    });
+
+    it('should prefer label prop over children', () => {
+      const result = normalizeProps('toggle', { label: 'From label', children: 'From children' }, false);
+      expect(result.textContent).toBe('From label');
+    });
+
+    it('should handle empty label', () => {
+      const result = normalizeProps('toggle', { label: '' }, false);
+      // Empty string is still a valid string, so it gets set
+      expect(result.textContent).toBe('');
+    });
+  });
+
+  describe('RN style props', () => {
+    it('should normalize props with RN style flag', () => {
+      const result = normalizeProps('toggle', { 
+        value: true, 
+        disabled: false,
+        tintColor: '#10b981' 
+      }, true);
+      
+      expect(result.toggleValue).toBe(true);
+      expect(result.disabled).toBe(false);
+      expect(result.tintColor).toBe('#10b981');
+    });
+  });
+
+  describe('combined props', () => {
+    it('should normalize all props together', () => {
+      const result = normalizeProps('toggle', {
+        value: true,
+        disabled: false,
+        glassEffect: true,
+        tintColor: '#34d399',
+        label: 'Notifications',
+      }, false);
+
+      expect(result.toggleValue).toBe(true);
+      expect(result.disabled).toBe(false);
+      expect(result.glassEffect).toBe(true);
+      expect(result.tintColor).toBe('#34d399');
+      expect(result.textContent).toBe('Notifications');
+    });
+  });
+});
+
+// =============================================================================
+// NodeType Tests
+// =============================================================================
+
+describe('Toggle NativeView routing', () => {
+  it('should route through NativeView instead of a dedicated NodeType', () => {
+    expect(getTagConfig('Toggle')!.nodeType).toBe(NodeType.NativeView);
+    expect(getTagConfig('Switch')!.nodeType).toBe(NodeType.NativeView);
+  });
+
+  it('should preserve the exact.toggle module contract', () => {
+    const metadata = getTagConfig('Toggle')!.nativeView;
+    expect(metadata?.moduleName).toBe('exact.toggle');
+    expect(metadata?.propKeys).toEqual([
+      'value',
+      'tintColor',
+      'disabled',
+      'glassEffect',
+      'accessibilityLabel',
+    ]);
+    expect(metadata?.selection).toEqual({
+      tier: 'delegated',
+      gesturePolicy: 'internal',
+    });
+  });
+});
+
+// =============================================================================
+// Controlled vs Uncontrolled State Tests
+// =============================================================================
+
+describe('Toggle controlled/uncontrolled behavior', () => {
+  describe('controlled mode (value prop)', () => {
+    it('should use value when provided', () => {
+      const result = normalizeProps('toggle', { value: true }, false);
+      expect(result.toggleValue).toBe(true);
+    });
+
+    it('should ignore defaultValue when value is provided', () => {
+      const result = normalizeProps('toggle', { value: false, defaultValue: true }, false);
+      expect(result.toggleValue).toBe(false);
+    });
+
+    it('should update when value changes to false', () => {
+      const resultTrue = normalizeProps('toggle', { value: true }, false);
+      const resultFalse = normalizeProps('toggle', { value: false }, false);
+      
+      expect(resultTrue.toggleValue).toBe(true);
+      expect(resultFalse.toggleValue).toBe(false);
+    });
+  });
+
+  describe('uncontrolled mode (defaultValue prop)', () => {
+    it('should use defaultValue when value is not provided', () => {
+      const result = normalizeProps('toggle', { defaultValue: true }, false);
+      expect(result.toggleValue).toBe(true);
+    });
+
+    it('should have undefined toggleValue when neither value nor defaultValue provided', () => {
+      const result = normalizeProps('toggle', {}, false);
+      expect(result.toggleValue).toBeUndefined();
+    });
+  });
+});
+
+// =============================================================================
+// Accessibility Props Tests
+// =============================================================================
+
+describe('Toggle accessibility', () => {
+  it('should extract accessibilityLabel', () => {
+    const result = normalizeProps('toggle', { 
+      accessibilityLabel: 'Toggle dark mode' 
+    }, false);
+    expect(result.accessibilityLabel).toBe('Toggle dark mode');
+  });
+
+  it('should not set accessibilityLabel when not provided', () => {
+    const result = normalizeProps('toggle', { value: true }, false);
+    expect(result.accessibilityLabel).toBeUndefined();
+  });
+});
+
+// =============================================================================
+// Track Color Tests (RN compatibility)
+// =============================================================================
+
+describe('Toggle track colors', () => {
+  it('should handle trackColor object format', () => {
+    // Note: The normalizeProps currently doesn't process trackColor,
+    // but we test the prop extraction pattern
+    const props = {
+      trackColor: { false: '#767577', true: '#81b0ff' }
+    };
+    
+    // Verify the structure is correct
+    expect(props.trackColor.false).toBe('#767577');
+    expect(props.trackColor.true).toBe('#81b0ff');
+  });
+
+  it('should handle simple tintColor', () => {
+    const result = normalizeProps('toggle', { tintColor: '#10b981' }, false);
+    expect(result.tintColor).toBe('#10b981');
+  });
+});
+
+// =============================================================================
+// Event Callback Tests
+// =============================================================================
+
+describe('Toggle event callbacks', () => {
+  it('should accept onValueChange callback in props', () => {
+    const callback = (value: boolean) => console.log(value);
+    const props = { value: true, onValueChange: callback };
+    
+    // The props should pass through correctly
+    expect(typeof props.onValueChange).toBe('function');
+    expect(props.value).toBe(true);
+  });
+
+  it('should accept onFocus callback', () => {
+    const callback = () => console.log('focused');
+    const props = { onFocus: callback };
+    expect(typeof props.onFocus).toBe('function');
+  });
+
+  it('should accept onBlur callback', () => {
+    const callback = () => console.log('blurred');
+    const props = { onBlur: callback };
+    expect(typeof props.onBlur).toBe('function');
+  });
+});
+
+// =============================================================================
+// Integration Tests - Full Component Props
+// =============================================================================
+
+describe('Toggle full integration', () => {
+  it('should normalize a complete Toggle configuration', () => {
+    const result = normalizeProps('toggle', {
+      value: true,
+      defaultValue: false, // Should be ignored
+      disabled: false,
+      glassEffect: true,
+      tintColor: '#34d399',
+      label: 'Enable feature',
+      accessibilityLabel: 'Enable feature toggle',
+    }, false);
+
+    expect(result.toggleValue).toBe(true);
+    expect(result.disabled).toBe(false);
+    expect(result.glassEffect).toBe(true);
+    expect(result.tintColor).toBe('#34d399');
+    expect(result.textContent).toBe('Enable feature');
+    expect(result.accessibilityLabel).toBe('Enable feature toggle');
+  });
+
+  it('should normalize minimal Toggle props', () => {
+    const result = normalizeProps('toggle', {}, false);
+    
+    // All optional props should be undefined
+    expect(result.toggleValue).toBeUndefined();
+    expect(result.disabled).toBeUndefined();
+    expect(result.glassEffect).toBeUndefined();
+    expect(result.tintColor).toBeUndefined();
+    expect(result.textContent).toBeUndefined();
+  });
+
+  it('should handle web-style toggle with iOS glass effect', () => {
+    const result = normalizeProps('toggle', {
+      value: false,
+      glassEffect: true,
+      tintColor: '#6366f1',
+    }, false);
+
+    expect(result.toggleValue).toBe(false);
+    expect(result.glassEffect).toBe(true);
+    expect(result.tintColor).toBe('#6366f1');
+  });
+
+  it('should handle RN-style Switch props', () => {
+    const result = normalizeProps('toggle', {
+      value: true,
+      disabled: true,
+      tintColor: '#ef4444',
+    }, true);
+
+    expect(result.toggleValue).toBe(true);
+    expect(result.disabled).toBe(true);
+    expect(result.tintColor).toBe('#ef4444');
+  });
+});
+
+// =============================================================================
+// Edge Cases
+// =============================================================================
+
+describe('Toggle edge cases', () => {
+  it('should handle non-boolean value gracefully', () => {
+    // @ts-expect-error - Testing invalid prop type
+    const result = normalizeProps('toggle', { value: 'true' }, false);
+    expect(result.toggleValue).toBeUndefined();
+  });
+
+  it('should handle non-string tintColor gracefully', () => {
+    // @ts-expect-error - Testing invalid prop type
+    const result = normalizeProps('toggle', { tintColor: 123 }, false);
+    expect(result.tintColor).toBeUndefined();
+  });
+
+  it('should handle non-boolean disabled gracefully', () => {
+    // @ts-expect-error - Testing invalid prop type
+    const result = normalizeProps('toggle', { disabled: 'true' }, false);
+    expect(result.disabled).toBeUndefined();
+  });
+
+  it('should handle numeric children gracefully', () => {
+    const result = normalizeProps('toggle', { children: 42 }, false);
+    expect(result.textContent).toBe('42');
+  });
+
+  it('should handle array children', () => {
+    const result = normalizeProps('toggle', { children: ['Enable ', 'feature'] }, false);
+    expect(result.textContent).toBe('Enable feature');
+  });
+});

package/src/__tests__/transitions.test.ts

@@ -0,0 +1,106 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { EventType } from '@exact/core/protocol/opcodes';
+import { createInstance, getTagConfig, processEventProps, updateInstanceProps } from '../host-ops.js';
+import { _resetNodeIdCounter } from '../nodes/index.js';
+import { _clearHandlers, getHandler } from '../host-config.js';
+
+beforeEach(() => {
+  _resetNodeIdCounter();
+  _clearHandlers();
+});
+
+describe('renderer transition integration', () => {
+  it('normalizes transitions during instance creation', () => {
+    const onTransitionEnd = vi.fn();
+    const instance = createInstance('View', {
+      style: {
+        opacity: 1,
+        transition: 'opacity 180ms ease-out, transform 220ms spring(damping: 16, stiffness: 220)',
+      },
+      onTransitionEnd,
+    });
+    // Event registration is deferred to commit (LLP 0159); simulate it here.
+    processEventProps(instance, instance.originalProps, getTagConfig('View')!);
+
+    expect(instance.transitions).toEqual({
+      opacity: {
+        type: 'timing',
+        duration: 180,
+        delay: 0,
+        easing: 'easeOut',
+        respectsReducedMotion: true,
+      },
+      transform: {
+        type: 'spring',
+        duration: 220,
+        delay: 0,
+        damping: 16,
+        stiffness: 220,
+        mass: 1,
+        velocity: 0,
+        respectsReducedMotion: true,
+      },
+    });
+
+    const binding = instance.events.get(EventType.TransitionEnd);
+    expect(binding).toBeDefined();
+    expect(getHandler(binding!.handlerId)).toBe(onTransitionEnd);
+  });
+
+  it('updates transition metadata and preserves transition-end binding identity', () => {
+    const handler = vi.fn();
+    const instance = createInstance('View', {
+      style: {
+        opacity: 1,
+        transition: 'opacity 180ms ease-out',
+      },
+      onTransitionEnd: handler,
+    });
+    // Event registration is deferred to commit (LLP 0159); simulate it here.
+    processEventProps(instance, instance.originalProps, getTagConfig('View')!);
+
+    const binding = instance.events.get(EventType.TransitionEnd);
+    expect(binding).toBeDefined();
+
+    updateInstanceProps(
+      instance,
+      {
+        style: {
+          opacity: 1,
+          transition: 'opacity 180ms ease-out',
+        },
+        onTransitionEnd: handler,
+      },
+      {
+        style: {
+          opacity: 0.5,
+          transition: {
+            opacity: { type: 'timing', duration: 200, easing: 'easeIn' },
+            backgroundColor: { type: 'timing', duration: 150, easing: 'linear' },
+          },
+        },
+        onTransitionEnd: handler,
+      }
+    );
+
+    expect(instance.transitions).toEqual({
+      opacity: {
+        type: 'timing',
+        duration: 200,
+        delay: 0,
+        easing: 'easeIn',
+        respectsReducedMotion: true,
+      },
+      backgroundColor: {
+        type: 'timing',
+        duration: 150,
+        delay: 0,
+        easing: 'linear',
+        respectsReducedMotion: true,
+      },
+    });
+
+    const updatedBinding = instance.events.get(EventType.TransitionEnd);
+    expect(updatedBinding?.handlerId).toBe(binding?.handlerId);
+  });
+});