onejs-react 0.1.0

package/src/__tests__/mocks.ts

@@ -0,0 +1,311 @@
+/**
+ * Mock implementations for Unity UI Toolkit elements
+ *
+ * These mocks simulate the behavior of C# VisualElement and related classes
+ * as exposed through the QuickJS CS proxy.
+ */
+
+// Track all created elements for test assertions
+let createdElements: MockVisualElement[] = [];
+
+// MARK: Unity Types
+
+/**
+ * Mock Unity Color struct
+ */
+export class MockColor {
+    constructor(
+        public r: number,
+        public g: number,
+        public b: number,
+        public a: number
+    ) {}
+}
+
+/**
+ * Mock Unity UIElements Length struct
+ */
+export class MockLength {
+    constructor(
+        public value: number,
+        public unit: number = 0
+    ) {}
+}
+
+/**
+ * Mock LengthUnit enum
+ */
+export const MockLengthUnit = {
+    Pixel: 0,
+    Percent: 1,
+};
+
+/**
+ * Mock StyleKeyword enum
+ */
+export const MockStyleKeyword = {
+    Undefined: 0,
+    Auto: 1,
+    None: 2,
+    Initial: 3,
+};
+
+/**
+ * Mock VisualElement - base class for all UI Toolkit elements
+ */
+export class MockVisualElement {
+    // Unique identifier (simulates Unity's instance ID via __csHandle)
+    __csHandle: number;
+    __csType: string;
+
+    // Child management
+    private _children: MockVisualElement[] = [];
+
+    // Style object (simulates IStyle)
+    style: Record<string, unknown> = {};
+
+    // Class list
+    private _classList: Set<string> = new Set();
+
+    // Common properties
+    text = '';
+    value: unknown = undefined;
+    label = '';
+
+    constructor(csType = 'UnityEngine.UIElements.VisualElement') {
+        this.__csHandle = Math.floor(Math.random() * 1000000);
+        this.__csType = csType;
+        createdElements.push(this);
+    }
+
+    // Child management methods
+    Add(child: MockVisualElement): void {
+        if (child && !this._children.includes(child)) {
+            this._children.push(child);
+        }
+    }
+
+    Insert(index: number, child: MockVisualElement): void {
+        if (child) {
+            // Remove if already exists
+            const existingIndex = this._children.indexOf(child);
+            if (existingIndex >= 0) {
+                this._children.splice(existingIndex, 1);
+            }
+            this._children.splice(index, 0, child);
+        }
+    }
+
+    Remove(child: MockVisualElement): void {
+        const index = this._children.indexOf(child);
+        if (index >= 0) {
+            this._children.splice(index, 1);
+        }
+    }
+
+    RemoveAt(index: number): void {
+        if (index >= 0 && index < this._children.length) {
+            this._children.splice(index, 1);
+        }
+    }
+
+    IndexOf(child: MockVisualElement): number {
+        return this._children.indexOf(child);
+    }
+
+    Clear(): void {
+        this._children = [];
+    }
+
+    // Class list methods
+    AddToClassList(className: string): void {
+        this._classList.add(className);
+    }
+
+    RemoveFromClassList(className: string): void {
+        this._classList.delete(className);
+    }
+
+    ClearClassList(): void {
+        this._classList.clear();
+    }
+
+    // Test helpers (not in real API)
+    get children(): readonly MockVisualElement[] {
+        return this._children;
+    }
+
+    get childCount(): number {
+        return this._children.length;
+    }
+
+    get classList(): ReadonlySet<string> {
+        return this._classList;
+    }
+
+    hasClass(className: string): boolean {
+        return this._classList.has(className);
+    }
+}
+
+/**
+ * Mock Label element
+ */
+export class MockLabel extends MockVisualElement {
+    constructor() {
+        super('UnityEngine.UIElements.Label');
+    }
+}
+
+/**
+ * Mock Button element
+ */
+export class MockButton extends MockVisualElement {
+    constructor() {
+        super('UnityEngine.UIElements.Button');
+    }
+}
+
+/**
+ * Mock TextField element
+ */
+export class MockTextField extends MockVisualElement {
+    constructor() {
+        super('UnityEngine.UIElements.TextField');
+        this.value = '';
+    }
+}
+
+/**
+ * Mock Toggle element
+ */
+export class MockToggle extends MockVisualElement {
+    constructor() {
+        super('UnityEngine.UIElements.Toggle');
+        this.value = false;
+    }
+}
+
+/**
+ * Mock Slider element
+ */
+export class MockSlider extends MockVisualElement {
+    constructor() {
+        super('UnityEngine.UIElements.Slider');
+        this.value = 0;
+    }
+}
+
+/**
+ * Mock ScrollView element
+ */
+export class MockScrollView extends MockVisualElement {
+    constructor() {
+        super('UnityEngine.UIElements.ScrollView');
+    }
+}
+
+/**
+ * Mock Image element
+ */
+export class MockImage extends MockVisualElement {
+    constructor() {
+        super('UnityEngine.UIElements.Image');
+    }
+}
+
+/**
+ * Create the mock CS global object that mirrors QuickJSBootstrap.js proxy
+ */
+export function createMockCS() {
+    return {
+        UnityEngine: {
+            // Core types
+            Color: MockColor,
+            // UI Elements
+            UIElements: {
+                VisualElement: MockVisualElement,
+                Label: MockLabel,
+                Button: MockButton,
+                TextField: MockTextField,
+                Toggle: MockToggle,
+                Slider: MockSlider,
+                ScrollView: MockScrollView,
+                Image: MockImage,
+                // Style types
+                Length: MockLength,
+                LengthUnit: MockLengthUnit,
+                StyleKeyword: MockStyleKeyword,
+            },
+        },
+    };
+}
+
+/**
+ * Get all elements created during the test
+ */
+export function getCreatedElements(): readonly MockVisualElement[] {
+    return createdElements;
+}
+
+/**
+ * Find a created element by its handle
+ */
+export function findElementByHandle(handle: number): MockVisualElement | undefined {
+    return createdElements.find((el) => el.__csHandle === handle);
+}
+
+/**
+ * Reset all mocks - call this before each test
+ */
+export function resetAllMocks(): void {
+    createdElements = [];
+}
+
+/**
+ * Create a mock container for render() tests
+ */
+export function createMockContainer(): MockVisualElement {
+    return new MockVisualElement('Container');
+}
+
+/**
+ * Helper to wait for React to flush updates
+ * React uses microtasks for scheduling, so we need to flush the microtask queue
+ */
+export async function flushMicrotasks(): Promise<void> {
+    // Flush multiple rounds of microtasks to handle nested scheduling
+    // React's reconciler needs more iterations to flush all work
+    for (let i = 0; i < 50; i++) {
+        await Promise.resolve();
+        // Also allow any setTimeout callbacks to run
+        await new Promise(resolve => setImmediate ? setImmediate(resolve) : setTimeout(resolve, 0));
+    }
+}
+
+/**
+ * Wait for a specific condition to be true, with timeout
+ */
+export async function waitFor(
+    condition: () => boolean,
+    { timeout = 1000, interval = 10 } = {}
+): Promise<void> {
+    const start = Date.now();
+    while (!condition()) {
+        if (Date.now() - start > timeout) {
+            throw new Error('waitFor timed out');
+        }
+        await new Promise(resolve => setTimeout(resolve, interval));
+    }
+}
+
+/**
+ * Helper to get the __eventAPI mock for assertions
+ */
+export function getEventAPI() {
+    return (globalThis as any).__eventAPI as {
+        addEventListener: ReturnType<typeof import('vitest').vi.fn>;
+        removeEventListener: ReturnType<typeof import('vitest').vi.fn>;
+        removeAllEventListeners: ReturnType<typeof import('vitest').vi.fn>;
+    };
+}

package/src/__tests__/renderer.test.tsx

@@ -0,0 +1,387 @@
+/**
+ * Integration tests for the React renderer
+ *
+ * Tests cover:
+ * - render() and unmount() functions
+ * - Full React tree rendering
+ * - Re-renders and updates
+ * - Component lifecycle
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import React, { useState, useEffect } from 'react';
+import { render, unmount, getRoot } from '../renderer';
+import { View, Label, Button } from '../components';
+import { MockVisualElement, MockLength, MockColor, createMockContainer, flushMicrotasks, getEventAPI } from './mocks';
+
+// Helper to extract value from style (handles both raw values and MockLength/MockColor)
+function getStyleValue(style: unknown): unknown {
+    if (style instanceof MockLength) return style.value;
+    if (style instanceof MockColor) return style;
+    return style;
+}
+
+describe('renderer', () => {
+    describe('render()', () => {
+        it('renders a simple element to container', async () => {
+            const container = createMockContainer();
+
+            render(<ojs-view />, container as any);
+            await flushMicrotasks();
+
+            expect(container.childCount).toBe(1);
+            expect(container.children[0].__csType).toBe('UnityEngine.UIElements.VisualElement');
+        });
+
+        it('renders nested elements', async () => {
+            const container = createMockContainer();
+
+            render(
+                <ojs-view>
+                    <ojs-label text="Hello" />
+                    <ojs-button text="Click" />
+                </ojs-view>,
+                container as any
+            );
+            await flushMicrotasks();
+
+            expect(container.childCount).toBe(1);
+            const view = container.children[0] as MockVisualElement;
+            expect(view.childCount).toBe(2);
+            expect(view.children[0].__csType).toBe('UnityEngine.UIElements.Label');
+            expect(view.children[1].__csType).toBe('UnityEngine.UIElements.Button');
+        });
+
+        it('renders with styles', async () => {
+            const container = createMockContainer();
+
+            render(
+                <ojs-view style={{ width: 100, height: 50, backgroundColor: 'blue' }} />,
+                container as any
+            );
+            await flushMicrotasks();
+
+            const view = container.children[0] as MockVisualElement;
+            expect(getStyleValue(view.style.width)).toBe(100);
+            expect(getStyleValue(view.style.height)).toBe(50);
+            expect(view.style.backgroundColor).toBeInstanceOf(MockColor);
+        });
+
+        it('renders with className', async () => {
+            const container = createMockContainer();
+
+            render(<ojs-view className="foo bar" />, container as any);
+            await flushMicrotasks();
+
+            const view = container.children[0] as MockVisualElement;
+            expect(view.hasClass('foo')).toBe(true);
+            expect(view.hasClass('bar')).toBe(true);
+        });
+
+        it('creates a root on first render', async () => {
+            const container = createMockContainer();
+
+            expect(getRoot(container as any)).toBeUndefined();
+
+            render(<ojs-view />, container as any);
+            await flushMicrotasks();
+
+            expect(getRoot(container as any)).toBeDefined();
+        });
+
+        it('reuses root on re-render to same container', async () => {
+            const container = createMockContainer();
+
+            render(<ojs-view />, container as any);
+            await flushMicrotasks();
+            const firstRoot = getRoot(container as any);
+
+            render(<ojs-label text="Updated" />, container as any);
+            await flushMicrotasks();
+            const secondRoot = getRoot(container as any);
+
+            expect(secondRoot).toBe(firstRoot);
+        });
+    });
+
+    describe('unmount()', () => {
+        it('removes rendered content from container', async () => {
+            const container = createMockContainer();
+
+            render(<ojs-view />, container as any);
+            await flushMicrotasks();
+            expect(container.childCount).toBe(1);
+
+            unmount(container as any);
+            await flushMicrotasks();
+
+            // Container should be cleared
+            expect(container.childCount).toBe(0);
+        });
+
+        it('removes the root reference', async () => {
+            const container = createMockContainer();
+
+            render(<ojs-view />, container as any);
+            await flushMicrotasks();
+            expect(getRoot(container as any)).toBeDefined();
+
+            unmount(container as any);
+            await flushMicrotasks();
+
+            expect(getRoot(container as any)).toBeUndefined();
+        });
+
+        it('does nothing when unmounting non-rendered container', () => {
+            const container = createMockContainer();
+
+            // Should not throw
+            expect(() => unmount(container as any)).not.toThrow();
+        });
+    });
+
+    describe('component wrappers', () => {
+        it('renders View component', async () => {
+            const container = createMockContainer();
+
+            render(<View style={{ padding: 10 }} />, container as any);
+            await flushMicrotasks();
+
+            const view = container.children[0] as MockVisualElement;
+            expect(view.__csType).toBe('UnityEngine.UIElements.VisualElement');
+            expect(getStyleValue(view.style.paddingTop)).toBe(10);
+        });
+
+        it('renders Label component', async () => {
+            const container = createMockContainer();
+
+            render(<Label text="Hello World" />, container as any);
+            await flushMicrotasks();
+
+            const label = container.children[0] as MockVisualElement;
+            expect(label.__csType).toBe('UnityEngine.UIElements.Label');
+            expect(label.text).toBe('Hello World');
+        });
+
+        it('renders Button component with onClick', async () => {
+            const container = createMockContainer();
+            const handleClick = vi.fn();
+
+            render(<Button text="Click Me" onClick={handleClick} />, container as any);
+            await flushMicrotasks();
+
+            const button = container.children[0] as MockVisualElement;
+            expect(button.__csType).toBe('UnityEngine.UIElements.Button');
+            expect(button.text).toBe('Click Me');
+
+            // Verify event was registered
+            const eventAPI = getEventAPI();
+            expect(eventAPI.addEventListener).toHaveBeenCalledWith(
+                button,
+                'click',
+                handleClick
+            );
+        });
+    });
+
+    describe('React state updates', () => {
+        it('updates when state changes', async () => {
+            const container = createMockContainer();
+            let setCount: (n: number) => void;
+
+            function Counter() {
+                const [count, _setCount] = useState(0);
+                setCount = _setCount;
+                return <ojs-label text={`Count: ${count}`} />;
+            }
+
+            render(<Counter />, container as any);
+            await flushMicrotasks();
+
+            const label = container.children[0] as MockVisualElement;
+            expect(label.text).toBe('Count: 0');
+
+            // Update state
+            setCount!(5);
+            await flushMicrotasks();
+
+            expect(label.text).toBe('Count: 5');
+        });
+
+        it('updates styles when props change', async () => {
+            const container = createMockContainer();
+            let setWidth: (n: number) => void;
+
+            function ResizableBox() {
+                const [width, _setWidth] = useState(100);
+                setWidth = _setWidth;
+                return <ojs-view style={{ width, height: 50 }} />;
+            }
+
+            render(<ResizableBox />, container as any);
+            await flushMicrotasks();
+
+            const view = container.children[0] as MockVisualElement;
+            expect(getStyleValue(view.style.width)).toBe(100);
+
+            setWidth!(200);
+            await flushMicrotasks();
+
+            expect(getStyleValue(view.style.width)).toBe(200);
+        });
+
+        it('removes style properties when they are removed from props', async () => {
+            const container = createMockContainer();
+            let setHasBackground: (b: boolean) => void;
+
+            function ConditionalStyle() {
+                const [hasBackground, _setHasBackground] = useState(true);
+                setHasBackground = _setHasBackground;
+                return (
+                    <ojs-view
+                        style={hasBackground ? { backgroundColor: 'red', width: 100 } : { width: 100 }}
+                    />
+                );
+            }
+
+            render(<ConditionalStyle />, container as any);
+            await flushMicrotasks();
+
+            const view = container.children[0] as MockVisualElement;
+            expect(view.style.backgroundColor).toBeInstanceOf(MockColor);
+            expect(getStyleValue(view.style.width)).toBe(100);
+
+            setHasBackground!(false);
+            await flushMicrotasks();
+
+            expect(view.style.backgroundColor).toBeUndefined();
+            expect(getStyleValue(view.style.width)).toBe(100);
+        });
+    });
+
+    describe('React effects', () => {
+        it('runs useEffect after render', async () => {
+            const container = createMockContainer();
+            const effectFn = vi.fn();
+
+            function EffectComponent() {
+                useEffect(() => {
+                    effectFn();
+                }, []);
+                return <ojs-view />;
+            }
+
+            render(<EffectComponent />, container as any);
+            await flushMicrotasks();
+
+            expect(effectFn).toHaveBeenCalled();
+        });
+
+        it('runs cleanup on unmount', async () => {
+            const container = createMockContainer();
+            const cleanupFn = vi.fn();
+
+            function CleanupComponent() {
+                useEffect(() => {
+                    return cleanupFn;
+                }, []);
+                return <ojs-view />;
+            }
+
+            render(<CleanupComponent />, container as any);
+            await flushMicrotasks();
+
+            expect(cleanupFn).not.toHaveBeenCalled();
+
+            unmount(container as any);
+            await flushMicrotasks();
+
+            expect(cleanupFn).toHaveBeenCalled();
+        });
+    });
+
+    describe('conditional rendering', () => {
+        it('adds and removes children based on condition', async () => {
+            const container = createMockContainer();
+            let setShowChild: (b: boolean) => void;
+
+            function ConditionalChild() {
+                const [showChild, _setShowChild] = useState(true);
+                setShowChild = _setShowChild;
+                return (
+                    <ojs-view>
+                        {showChild && <ojs-label text="Child" />}
+                    </ojs-view>
+                );
+            }
+
+            render(<ConditionalChild />, container as any);
+            await flushMicrotasks();
+
+            const view = container.children[0] as MockVisualElement;
+            expect(view.childCount).toBe(1);
+
+            setShowChild!(false);
+            await flushMicrotasks();
+
+            expect(view.childCount).toBe(0);
+
+            setShowChild!(true);
+            await flushMicrotasks();
+
+            expect(view.childCount).toBe(1);
+        });
+    });
+
+    describe('lists', () => {
+        it('renders list of elements', async () => {
+            const container = createMockContainer();
+            const items = ['A', 'B', 'C'];
+
+            render(
+                <ojs-view>
+                    {items.map((item, i) => (
+                        <ojs-label key={i} text={item} />
+                    ))}
+                </ojs-view>,
+                container as any
+            );
+            await flushMicrotasks();
+
+            const view = container.children[0] as MockVisualElement;
+            expect(view.childCount).toBe(3);
+            expect((view.children[0] as MockVisualElement).text).toBe('A');
+            expect((view.children[1] as MockVisualElement).text).toBe('B');
+            expect((view.children[2] as MockVisualElement).text).toBe('C');
+        });
+
+        it('updates list when items change', async () => {
+            const container = createMockContainer();
+            let setItems: (items: string[]) => void;
+
+            function List() {
+                const [items, _setItems] = useState(['A', 'B']);
+                setItems = _setItems;
+                return (
+                    <ojs-view>
+                        {items.map((item) => (
+                            <ojs-label key={item} text={item} />
+                        ))}
+                    </ojs-view>
+                );
+            }
+
+            render(<List />, container as any);
+            await flushMicrotasks();
+
+            const view = container.children[0] as MockVisualElement;
+            expect(view.childCount).toBe(2);
+
+            setItems!(['A', 'B', 'C']);
+            await flushMicrotasks();
+
+            expect(view.childCount).toBe(3);
+            expect((view.children[2] as MockVisualElement).text).toBe('C');
+        });
+    });
+});