@ccheever/exact-renderer 0.1.0

package/src/__tests__/nodes.test.ts

@@ -0,0 +1,399 @@
+/**
+ * Node Model Tests
+ *
+ * Tests for the host node model and helper functions.
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import {
+  NodeKind,
+  DirtyFlags,
+  createRootNode,
+  createElementNode,
+  createTextNode,
+  appendChild,
+  insertBefore,
+  removeChild,
+  clearChildren,
+  getChildIds,
+  markStyleDirty,
+  markPropsDirty,
+  markEventsDirty,
+  clearDirtyFlags,
+  isDirty,
+  hasDirtyFlag,
+  _resetNodeIdCounter,
+} from '../nodes/index.js';
+
+// Reset node ID counter before each test
+beforeEach(() => {
+  _resetNodeIdCounter();
+});
+
+describe('createRootNode', () => {
+  it('should create a root node with ID 0', () => {
+    const root = createRootNode();
+    expect(root.kind).toBe(NodeKind.Root);
+    expect(root.id).toBe(0);
+    expect(root.parent).toBeNull();
+    expect(root.children).toEqual([]);
+  });
+
+  it('should mark root as created', () => {
+    const root = createRootNode();
+    expect(hasDirtyFlag(root, DirtyFlags.Created)).toBe(true);
+  });
+});
+
+describe('createElementNode', () => {
+  it('should create an element node with incrementing IDs', () => {
+    const node1 = createElementNode('view', 'div', false, {});
+    const node2 = createElementNode('text', 'text', false, {});
+    const node3 = createElementNode('view', 'View', true, {});
+
+    expect(node1.id).toBe(1);
+    expect(node2.id).toBe(2);
+    expect(node3.id).toBe(3);
+  });
+
+  it('should set correct properties', () => {
+    const node = createElementNode('view', 'div', false, { style: { width: 100 } });
+
+    expect(node.kind).toBe(NodeKind.Element);
+    expect(node.tagType).toBe('view');
+    expect(node.originalTag).toBe('div');
+    expect(node.isRNStyle).toBe(false);
+    expect(node.parent).toBeNull();
+    expect(node.children).toEqual([]);
+    expect(node.events.size).toBe(0);
+    expect(node.originalProps).toEqual({ style: { width: 100 } });
+  });
+
+  it('should mark element as created', () => {
+    const node = createElementNode('view', 'div', false, {});
+    expect(hasDirtyFlag(node, DirtyFlags.Created)).toBe(true);
+  });
+});
+
+describe('createTextNode', () => {
+  it('should create a text node with correct text', () => {
+    const node = createTextNode('Hello, world!');
+
+    expect(node.kind).toBe(NodeKind.Text);
+    expect(node.text).toBe('Hello, world!');
+    expect(node.parent).toBeNull();
+  });
+
+  it('should mark text node as created', () => {
+    const node = createTextNode('test');
+    expect(hasDirtyFlag(node, DirtyFlags.Created)).toBe(true);
+  });
+});
+
+describe('appendChild', () => {
+  it('should add child to parent', () => {
+    const parent = createElementNode('view', 'div', false, {});
+    const child = createElementNode('text', 'text', false, {});
+
+    const result = appendChild(parent, child);
+
+    expect(result).toBe(true);
+    expect(parent.children).toContain(child);
+    expect(child.parent).toBe(parent);
+  });
+
+  it('should mark parent children as dirty', () => {
+    const parent = createElementNode('view', 'div', false, {});
+    clearDirtyFlags(parent);
+    const child = createElementNode('text', 'text', false, {});
+
+    appendChild(parent, child);
+
+    expect(hasDirtyFlag(parent, DirtyFlags.Children)).toBe(true);
+  });
+
+  it('should not add duplicate children', () => {
+    const parent = createElementNode('view', 'div', false, {});
+    const child = createElementNode('text', 'text', false, {});
+
+    appendChild(parent, child);
+    const result = appendChild(parent, child);
+
+    expect(result).toBe(false);
+    expect(parent.children.length).toBe(1);
+  });
+
+  it('should move an existing child to the end', () => {
+    const parent = createElementNode('view', 'div', false, {});
+    const child1 = createElementNode('text', 'text', false, {});
+    const child2 = createElementNode('text', 'text', false, {});
+    const child3 = createElementNode('text', 'text', false, {});
+
+    appendChild(parent, child1);
+    appendChild(parent, child2);
+    appendChild(parent, child3);
+    clearDirtyFlags(parent);
+
+    const result = appendChild(parent, child1);
+
+    expect(result).toBe(true);
+    expect(parent.children).toEqual([child2, child3, child1]);
+    expect(child1.parent).toBe(parent);
+    expect(hasDirtyFlag(parent, DirtyFlags.Children)).toBe(true);
+  });
+
+  it('should work with root node', () => {
+    const root = createRootNode();
+    const child = createElementNode('view', 'div', false, {});
+
+    appendChild(root, child);
+
+    expect(root.children).toContain(child);
+    expect(child.parent).toBe(root);
+  });
+});
+
+describe('insertBefore', () => {
+  it('should insert child before another child', () => {
+    const parent = createElementNode('view', 'div', false, {});
+    const child1 = createElementNode('text', 'text', false, {});
+    const child2 = createElementNode('text', 'text', false, {});
+    const child3 = createElementNode('text', 'text', false, {});
+
+    appendChild(parent, child1);
+    appendChild(parent, child3);
+    insertBefore(parent, child2, child3);
+
+    expect(parent.children[0]).toBe(child1);
+    expect(parent.children[1]).toBe(child2);
+    expect(parent.children[2]).toBe(child3);
+  });
+
+  it('should append if beforeChild not found', () => {
+    const parent = createElementNode('view', 'div', false, {});
+    const child1 = createElementNode('text', 'text', false, {});
+    const child2 = createElementNode('text', 'text', false, {});
+    const notAChild = createElementNode('text', 'text', false, {});
+
+    appendChild(parent, child1);
+    insertBefore(parent, child2, notAChild);
+
+    expect(parent.children.length).toBe(2);
+    expect(parent.children[1]).toBe(child2);
+  });
+});
+
+describe('removeChild', () => {
+  it('should remove child from parent', () => {
+    const parent = createElementNode('view', 'div', false, {});
+    const child = createElementNode('text', 'text', false, {});
+
+    appendChild(parent, child);
+    const result = removeChild(parent, child);
+
+    expect(result).toBe(true);
+    expect(parent.children).not.toContain(child);
+    expect(child.parent).toBeNull();
+  });
+
+  it('should return false if child not found', () => {
+    const parent = createElementNode('view', 'div', false, {});
+    const notAChild = createElementNode('text', 'text', false, {});
+
+    const result = removeChild(parent, notAChild);
+
+    expect(result).toBe(false);
+  });
+
+  it('should mark parent children as dirty', () => {
+    const parent = createElementNode('view', 'div', false, {});
+    const child = createElementNode('text', 'text', false, {});
+
+    appendChild(parent, child);
+    clearDirtyFlags(parent);
+    removeChild(parent, child);
+
+    expect(hasDirtyFlag(parent, DirtyFlags.Children)).toBe(true);
+  });
+});
+
+describe('clearChildren', () => {
+  it('should remove all children', () => {
+    const parent = createElementNode('view', 'div', false, {});
+    const child1 = createElementNode('text', 'text', false, {});
+    const child2 = createElementNode('text', 'text', false, {});
+
+    appendChild(parent, child1);
+    appendChild(parent, child2);
+    clearChildren(parent);
+
+    expect(parent.children.length).toBe(0);
+    expect(child1.parent).toBeNull();
+    expect(child2.parent).toBeNull();
+  });
+});
+
+describe('getChildIds', () => {
+  it('should return array of child IDs', () => {
+    const parent = createElementNode('view', 'div', false, {});
+    const child1 = createElementNode('text', 'text', false, {});
+    const child2 = createElementNode('text', 'text', false, {});
+
+    appendChild(parent, child1);
+    appendChild(parent, child2);
+
+    const ids = getChildIds(parent);
+    expect(ids).toContain(child1.id);
+    expect(ids).toContain(child2.id);
+    expect(ids.length).toBe(2);
+  });
+
+  it('should return empty array for no children', () => {
+    const parent = createElementNode('view', 'div', false, {});
+    expect(getChildIds(parent)).toEqual([]);
+  });
+});
+
+describe('dirty flags', () => {
+  describe('markStyleDirty', () => {
+    it('should set style dirty flag', () => {
+      const node = createElementNode('view', 'div', false, {});
+      clearDirtyFlags(node);
+
+      markStyleDirty(node);
+
+      expect(hasDirtyFlag(node, DirtyFlags.Style)).toBe(true);
+      expect(hasDirtyFlag(node, DirtyFlags.Props)).toBe(false);
+    });
+  });
+
+  describe('markPropsDirty', () => {
+    it('should set props dirty flag', () => {
+      const node = createElementNode('view', 'div', false, {});
+      clearDirtyFlags(node);
+
+      markPropsDirty(node);
+
+      expect(hasDirtyFlag(node, DirtyFlags.Props)).toBe(true);
+      expect(hasDirtyFlag(node, DirtyFlags.Style)).toBe(false);
+    });
+  });
+
+  describe('markEventsDirty', () => {
+    it('should set events dirty flag', () => {
+      const node = createElementNode('view', 'div', false, {});
+      clearDirtyFlags(node);
+
+      markEventsDirty(node);
+
+      expect(hasDirtyFlag(node, DirtyFlags.Events)).toBe(true);
+    });
+  });
+
+  describe('clearDirtyFlags', () => {
+    it('should clear all dirty flags', () => {
+      const node = createElementNode('view', 'div', false, {});
+      // node starts with Created flag
+
+      clearDirtyFlags(node);
+
+      expect(isDirty(node)).toBe(false);
+      expect(node.dirtyFlags).toBe(DirtyFlags.None);
+    });
+  });
+
+  describe('isDirty', () => {
+    it('should return true if any flag is set', () => {
+      const node = createElementNode('view', 'div', false, {});
+      expect(isDirty(node)).toBe(true); // Created flag is set
+
+      clearDirtyFlags(node);
+      expect(isDirty(node)).toBe(false);
+
+      markStyleDirty(node);
+      expect(isDirty(node)).toBe(true);
+    });
+  });
+
+  describe('hasDirtyFlag', () => {
+    it('should check specific flag', () => {
+      const node = createElementNode('view', 'div', false, {});
+      clearDirtyFlags(node);
+
+      markStyleDirty(node);
+      markPropsDirty(node);
+
+      expect(hasDirtyFlag(node, DirtyFlags.Style)).toBe(true);
+      expect(hasDirtyFlag(node, DirtyFlags.Props)).toBe(true);
+      expect(hasDirtyFlag(node, DirtyFlags.Events)).toBe(false);
+      expect(hasDirtyFlag(node, DirtyFlags.Children)).toBe(false);
+    });
+  });
+});
+
+describe('child operations on large parents (LLP 0159 index cache)', () => {
+  // Above the child-index cache threshold (64), lookups go through a lazily
+  // built per-parent map. These tests exercise the cached paths against the
+  // same expectations as the small-array paths.
+  const CHILD_COUNT = 200;
+
+  function buildLargeParent() {
+    const parent = createElementNode('view', 'View', false, {});
+    const children = Array.from({ length: CHILD_COUNT }, () =>
+      createElementNode('view', 'View', false, {})
+    );
+    for (const child of children) {
+      appendChild(parent, child);
+    }
+    return { parent, children };
+  }
+
+  it('appends, moves, inserts, and removes consistently above the threshold', () => {
+    const { parent, children } = buildLargeParent();
+
+    expect(parent.children).toHaveLength(CHILD_COUNT);
+    expect(getChildIds(parent)).toEqual(children.map((child) => child.id));
+
+    // Re-appending the last child is a no-op.
+    expect(appendChild(parent, children[CHILD_COUNT - 1]!)).toBe(false);
+
+    // Moving an interior child to the end.
+    expect(appendChild(parent, children[10]!)).toBe(true);
+    expect(parent.children[CHILD_COUNT - 1]).toBe(children[10]);
+    expect(parent.children).toHaveLength(CHILD_COUNT);
+
+    // Moving it back before an interior sibling (cache rebuilt after the move).
+    expect(insertBefore(parent, children[10]!, children[11]!)).toBe(true);
+    expect(parent.children[10]).toBe(children[10]);
+    expect(parent.children[11]).toBe(children[11]);
+    expect(parent.children).toHaveLength(CHILD_COUNT);
+
+    // Removing an interior child.
+    expect(removeChild(parent, children[50]!)).toBe(true);
+    expect(parent.children).toHaveLength(CHILD_COUNT - 1);
+    expect(parent.children.indexOf(children[50]!)).toBe(-1);
+    expect(removeChild(parent, children[50]!)).toBe(false);
+
+    // Appending a brand-new child after mutations still lands at the end.
+    const fresh = createElementNode('view', 'View', false, {});
+    expect(appendChild(parent, fresh)).toBe(true);
+    expect(parent.children[parent.children.length - 1]).toBe(fresh);
+
+    clearChildren(parent);
+    expect(parent.children).toHaveLength(0);
+    for (const child of children) {
+      if (child !== children[50]) {
+        expect(child.parent).toBeNull();
+      }
+    }
+  });
+
+  it('insertBefore falls back to append when beforeChild is absent', () => {
+    const { parent } = buildLargeParent();
+    const fresh = createElementNode('view', 'View', false, {});
+    const detached = createElementNode('view', 'View', false, {});
+
+    expect(insertBefore(parent, fresh, detached)).toBe(true);
+    expect(parent.children[parent.children.length - 1]).toBe(fresh);
+  });
+});