@ccheever/exact-renderer 0.1.0

package/src/__tests__/tags.test.ts

@@ -0,0 +1,354 @@
+/**
+ * Tag Mapping Tests
+ *
+ * Tests for the tag configuration and mapping utilities.
+ */
+
+import { afterEach, describe, it, expect } from 'vitest';
+import {
+  _clearNativeViewTagsForTesting,
+  getTagConfig,
+  isValidTag,
+  isWebTag,
+  isRNTag,
+  getWebTags,
+  getRNTags,
+  getAllTags,
+  defaultTagConfig,
+} from '../tags/tag-map.js';
+import { NodeType } from '@exact/core';
+import { createNativeViewComponent } from '../native-view.js';
+
+afterEach(() => {
+  _clearNativeViewTagsForTesting();
+});
+
+describe('getTagConfig', () => {
+  describe('web tags', () => {
+    it('should return config for div', () => {
+      const config = getTagConfig('div');
+      expect(config).not.toBeNull();
+      expect(config!.canonicalType).toBe('view');
+      expect(config!.nodeType).toBe(NodeType.View);
+      expect(config!.isRNStyle).toBe(false);
+      expect(config!.defaultFlexDirection).toBe('row');
+    });
+
+    it('should return config for span', () => {
+      const config = getTagConfig('span');
+      expect(config).not.toBeNull();
+      expect(config!.canonicalType).toBe('view');
+      expect(config!.defaultFlexDirection).toBe('row');
+    });
+
+    it('should return text-container configs for paragraph and heading tags', () => {
+      expect(getTagConfig('p')?.canonicalType).toBe('text');
+      expect(getTagConfig('h1')?.canonicalType).toBe('text');
+      expect(getTagConfig('h6')?.isTextContainer).toBe(true);
+    });
+
+    it('should return config for text', () => {
+      const config = getTagConfig('text');
+      expect(config).not.toBeNull();
+      expect(config!.canonicalType).toBe('text');
+      expect(config!.nodeType).toBe(NodeType.Text);
+      expect(config!.isTextContainer).toBe(true);
+    });
+
+    it('should return config for img', () => {
+      const config = getTagConfig('img');
+      expect(config).not.toBeNull();
+      expect(config!.canonicalType).toBe('image');
+      expect(config!.nodeType).toBe(NodeType.Image);
+    });
+
+    it('should return config for lowercase svg', () => {
+      const config = getTagConfig('svg');
+      expect(config).not.toBeNull();
+      expect(config!.canonicalType).toBe('svg');
+      expect(config!.nodeType).toBe(NodeType.Svg);
+    });
+
+    it('should return config for input', () => {
+      const config = getTagConfig('input');
+      expect(config).not.toBeNull();
+      expect(config!.canonicalType).toBe('input');
+      expect(config!.nodeType).toBe(NodeType.TextInput);
+      expect(config!.supportsChangeEvents).toBe(true);
+    });
+
+    it('should return config for textarea', () => {
+      const config = getTagConfig('textarea');
+      expect(config).not.toBeNull();
+      expect(config!.canonicalType).toBe('input');
+      expect(config!.nodeType).toBe(NodeType.TextInput);
+    });
+
+    it('should return config for button', () => {
+      const config = getTagConfig('button');
+      expect(config).not.toBeNull();
+      expect(config!.canonicalType).toBe('pressable');
+      expect(config!.nodeType).toBe(NodeType.View);
+      expect(config!.supportsPressEvents).toBe(true);
+    });
+
+    it('should return config for semantic container tags', () => {
+      expect(getTagConfig('section')?.canonicalType).toBe('view');
+      expect(getTagConfig('article')?.canonicalType).toBe('view');
+      expect(getTagConfig('label')?.canonicalType).toBe('view');
+      expect(getTagConfig('a')?.supportsPressEvents).toBe(true);
+    });
+
+    it('should return config for toggle (web)', () => {
+      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!.supportsChangeEvents).toBe(true);
+    });
+  });
+
+  describe('RN tags', () => {
+    it('should return config for View', () => {
+      const config = getTagConfig('View');
+      expect(config).not.toBeNull();
+      expect(config!.canonicalType).toBe('view');
+      expect(config!.nodeType).toBe(NodeType.View);
+      expect(config!.isRNStyle).toBe(true);
+      expect(config!.defaultFlexDirection).toBe('column');
+    });
+
+    it('should return config for Text', () => {
+      const config = getTagConfig('Text');
+      expect(config).not.toBeNull();
+      expect(config!.canonicalType).toBe('text');
+      expect(config!.isRNStyle).toBe(true);
+      expect(config!.isTextContainer).toBe(true);
+    });
+
+    it('should return config for Image', () => {
+      const config = getTagConfig('Image');
+      expect(config).not.toBeNull();
+      expect(config!.canonicalType).toBe('image');
+      expect(config!.isRNStyle).toBe(true);
+    });
+
+    it('should return config for ScrollView', () => {
+      const config = getTagConfig('ScrollView');
+      expect(config).not.toBeNull();
+      expect(config!.canonicalType).toBe('scroll');
+      expect(config!.nodeType).toBe(NodeType.ScrollView);
+    });
+
+    it('should return config for List', () => {
+      const config = getTagConfig('List');
+      expect(config).not.toBeNull();
+      expect(config!.canonicalType).toBe('list');
+      expect(config!.nodeType).toBe(NodeType.List);
+      expect(config!.isRNStyle).toBe(true);
+      expect(config!.defaultFlexDirection).toBe('column');
+    });
+
+    it('should return config for TextInput', () => {
+      const config = getTagConfig('TextInput');
+      expect(config).not.toBeNull();
+      expect(config!.canonicalType).toBe('input');
+      expect(config!.supportsChangeEvents).toBe(true);
+    });
+
+    it('should return config for Pressable', () => {
+      const config = getTagConfig('Pressable');
+      expect(config).not.toBeNull();
+      expect(config!.canonicalType).toBe('pressable');
+      expect(config!.nodeType).toBe(NodeType.Pressable);
+      expect(config!.supportsPressEvents).toBe(true);
+      expect(config!.isRNStyle).toBe(true);
+    });
+
+    it('should return 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!.supportsChangeEvents).toBe(true);
+      expect(config!.supportsPressEvents).toBe(false);
+    });
+
+    it('should return config for Switch', () => {
+      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);
+      expect(config!.supportsChangeEvents).toBe(true);
+    });
+  });
+
+  describe('unknown tags', () => {
+    it('should return null for unknown tags', () => {
+      expect(getTagConfig('unknown')).toBeNull();
+      expect(getTagConfig('foo')).toBeNull();
+      expect(getTagConfig('CustomComponent')).toBeNull();
+    });
+  });
+});
+
+describe('isValidTag', () => {
+  it('should return true for valid web tags', () => {
+    expect(isValidTag('div')).toBe(true);
+    expect(isValidTag('span')).toBe(true);
+    expect(isValidTag('text')).toBe(true);
+    expect(isValidTag('img')).toBe(true);
+    expect(isValidTag('textarea')).toBe(true);
+    expect(isValidTag('svg')).toBe(true);
+  });
+
+  it('should return true for valid RN tags', () => {
+    expect(isValidTag('View')).toBe(true);
+    expect(isValidTag('Text')).toBe(true);
+    expect(isValidTag('Image')).toBe(true);
+    expect(isValidTag('Pressable')).toBe(true);
+    expect(isValidTag('List')).toBe(true);
+  });
+
+  it('should return false for unknown tags', () => {
+    expect(isValidTag('unknown')).toBe(false);
+    expect(isValidTag('Foo')).toBe(false);
+  });
+});
+
+describe('isWebTag', () => {
+  it('should return true for web tags', () => {
+    expect(isWebTag('div')).toBe(true);
+    expect(isWebTag('span')).toBe(true);
+    expect(isWebTag('text')).toBe(true);
+    expect(isWebTag('img')).toBe(true);
+    expect(isWebTag('button')).toBe(true);
+    expect(isWebTag('textarea')).toBe(true);
+    expect(isWebTag('svg')).toBe(true);
+  });
+
+  it('should return false for RN tags', () => {
+    expect(isWebTag('View')).toBe(false);
+    expect(isWebTag('Text')).toBe(false);
+    expect(isWebTag('Image')).toBe(false);
+  });
+});
+
+describe('isRNTag', () => {
+  it('should return true for RN tags', () => {
+    expect(isRNTag('View')).toBe(true);
+    expect(isRNTag('Text')).toBe(true);
+    expect(isRNTag('Image')).toBe(true);
+    expect(isRNTag('Pressable')).toBe(true);
+    expect(isRNTag('ScrollView')).toBe(true);
+    expect(isRNTag('List')).toBe(true);
+  });
+
+  it('should return false for web tags', () => {
+    expect(isRNTag('div')).toBe(false);
+    expect(isRNTag('text')).toBe(false);
+    expect(isRNTag('img')).toBe(false);
+  });
+});
+
+describe('getWebTags', () => {
+  it('should return all web tag names', () => {
+    const tags = getWebTags();
+    expect(tags).toContain('div');
+    expect(tags).toContain('span');
+    expect(tags).toContain('text');
+    expect(tags).toContain('img');
+    expect(tags).toContain('input');
+    expect(tags).toContain('button');
+    expect(tags).toContain('toggle');
+    expect(tags).toContain('textarea');
+    expect(tags).toContain('svg');
+    expect(tags).toContain('section');
+    expect(tags).toContain('a');
+    expect(tags.length).toBe(26);
+  });
+});
+
+describe('getRNTags', () => {
+  it('should return all RN tag names', () => {
+    const tags = getRNTags();
+    expect(tags).toContain('View');
+    expect(tags).toContain('Text');
+    expect(tags).toContain('Image');
+    expect(tags).toContain('ScrollView');
+    expect(tags).toContain('List');
+    expect(tags).toContain('TextInput');
+    expect(tags).toContain('Pressable');
+    expect(tags).toContain('Toggle');
+    expect(tags).toContain('Switch');
+    expect(tags.length).toBe(11);
+  });
+});
+
+describe('getAllTags', () => {
+  it('should return all tag names', () => {
+    const tags = getAllTags();
+    expect(tags.length).toBe(37); // 26 web + 11 RN
+    expect(tags).toContain('div');
+    expect(tags).toContain('View');
+    expect(tags).toContain('List');
+    expect(tags).toContain('toggle');
+    expect(tags).toContain('Toggle');
+    expect(tags).toContain('Switch');
+    expect(tags).toContain('svg');
+    expect(tags).toContain('textarea');
+  });
+
+  it('includes dynamically registered native-view tags', () => {
+    const ChartView = createNativeViewComponent<{ title: string }>({
+      moduleName: 'com.exact.chart',
+      propKeys: ['title'],
+      selection: {
+        tier: 'atomic',
+      },
+    });
+
+    const element = ChartView({ title: 'Revenue' });
+    const tag = String(element.type);
+    const config = getTagConfig(tag);
+    const tags = getAllTags();
+
+    expect(config).not.toBeNull();
+    expect(config!.canonicalType).toBe('nativeView');
+    expect(config!.nodeType).toBe(NodeType.NativeView);
+    expect(config!.nativeView?.moduleName).toBe('com.exact.chart');
+    expect(tags).toContain(tag);
+    expect(isValidTag(tag)).toBe(true);
+  });
+});
+
+describe('defaultTagConfig', () => {
+  it('should provide sensible defaults', () => {
+    expect(defaultTagConfig.canonicalType).toBe('view');
+    expect(defaultTagConfig.nodeType).toBe(NodeType.View);
+    expect(defaultTagConfig.isRNStyle).toBe(false);
+    expect(defaultTagConfig.defaultFlexDirection).toBe('row');
+    expect(defaultTagConfig.isTextContainer).toBe(false);
+    expect(defaultTagConfig.supportsPressEvents).toBe(false);
+  });
+});
+
+describe('flex direction defaults', () => {
+  it('web tags should default to row', () => {
+    expect(getTagConfig('div')!.defaultFlexDirection).toBe('row');
+    expect(getTagConfig('span')!.defaultFlexDirection).toBe('row');
+    expect(getTagConfig('button')!.defaultFlexDirection).toBe('row');
+  });
+
+  it('RN tags should default to column', () => {
+    expect(getTagConfig('View')!.defaultFlexDirection).toBe('column');
+    expect(getTagConfig('Text')!.defaultFlexDirection).toBe('column');
+    expect(getTagConfig('Pressable')!.defaultFlexDirection).toBe('column');
+  });
+});