@mmapp/react-compiler 0.1.0-alpha.1

package/src/__tests__/round-trip-ir.test.ts

@@ -0,0 +1,300 @@
+/**
+ * Round-Trip IR Tests — validates decompile(IR) → compile(TSX) → equivalent IR.
+ *
+ * For each example, we:
+ *   1. Compile the original .workflow.tsx → IR
+ *   2. Decompile the IR → generated TSX
+ *   3. Recompile the generated TSX → round-tripped IR
+ *   4. Compare structural properties (fields, states, transitions)
+ */
+
+import { describe, it, expect } from 'vitest';
+import * as fs from 'fs';
+import * as path from 'path';
+import { validateSourceRoundTrip, compileSource } from '../RoundTripValidator';
+import { decompile, type DecompilerInput } from '../decompiler';
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+const EXAMPLES_DIR = path.resolve(__dirname, '../../examples');
+
+function readExample(filename: string): string {
+  return fs.readFileSync(path.join(EXAMPLES_DIR, filename), 'utf-8');
+}
+
+// =============================================================================
+// Counter
+// =============================================================================
+
+describe('round-trip IR: counter', () => {
+  const source = readExample('counter.workflow.tsx');
+  const originalIR = compileSource(source, 'counter.workflow.tsx');
+
+  it('should compile the original source', () => {
+    expect(originalIR).not.toBeNull();
+    expect(originalIR!.slug).toBe('counter');
+  });
+
+  it('should preserve fields through round trip', () => {
+    const result = validateSourceRoundTrip(source, 'counter.workflow.tsx');
+    expect(result).not.toBeNull();
+    const fieldDiffs = result!.diffs.filter(d => d.path.startsWith('fields'));
+    expect(fieldDiffs.filter(d => d.severity === 'error')).toEqual([]);
+
+    // Verify specific fields exist in round-tripped IR
+    const rtFields = result!.roundTrippedIR!.fields.map(f => f.name).sort();
+    expect(rtFields).toContain('count');
+    expect(rtFields).toContain('status');
+    expect(rtFields).toContain('lastAction');
+  });
+
+  it('should preserve transitions through round trip', () => {
+    const result = validateSourceRoundTrip(source, 'counter.workflow.tsx');
+    expect(result).not.toBeNull();
+    const transDiffs = result!.diffs.filter(d => d.path.startsWith('transitions') && d.severity === 'error');
+    expect(transDiffs).toEqual([]);
+
+    // Verify transition names
+    const rtTransitions = result!.roundTrippedIR!.transitions.map(t => t.name).sort();
+    expect(rtTransitions).toContain('start');
+    expect(rtTransitions).toContain('increment');
+    expect(rtTransitions).toContain('decrement');
+    expect(rtTransitions).toContain('reset');
+  });
+
+  it('should preserve states with effects through round trip', () => {
+    const result = validateSourceRoundTrip(source, 'counter.workflow.tsx');
+    expect(result).not.toBeNull();
+
+    // The 'counting' state should have on_enter actions
+    const countingState = result!.roundTrippedIR!.states.find(s => s.name === 'counting');
+    expect(countingState).toBeDefined();
+    expect(countingState!.on_enter.length).toBeGreaterThan(0);
+  });
+
+  it('should produce valid TSX that includes useOnChange', () => {
+    const ir = compileSource(source, 'counter.workflow.tsx')!;
+    const { code } = decompile(ir as DecompilerInput);
+    expect(code).toContain('useOnChange');
+    expect(code).toContain('count');
+  });
+});
+
+// =============================================================================
+// Todo App
+// =============================================================================
+
+describe('round-trip IR: todo-app', () => {
+  const source = readExample('todo-app.workflow.tsx');
+  const originalIR = compileSource(source, 'todo-app.workflow.tsx');
+
+  it('should compile the original source', () => {
+    expect(originalIR).not.toBeNull();
+    expect(originalIR!.slug).toBe('todo-app');
+    expect(originalIR!.category).toBe('data');
+  });
+
+  it('should preserve fields through round trip', () => {
+    const result = validateSourceRoundTrip(source, 'todo-app.workflow.tsx');
+    expect(result).not.toBeNull();
+
+    const rtFields = result!.roundTrippedIR!.fields.map(f => f.name).sort();
+    expect(rtFields).toContain('title');
+    expect(rtFields).toContain('filter');
+    expect(rtFields).toContain('itemCount');
+  });
+
+  it('should preserve transitions through round trip', () => {
+    const result = validateSourceRoundTrip(source, 'todo-app.workflow.tsx');
+    expect(result).not.toBeNull();
+
+    const rtTransitions = result!.roundTrippedIR!.transitions.map(t => t.name).sort();
+    expect(rtTransitions).toContain('activate');
+    expect(rtTransitions).toContain('archive');
+    expect(rtTransitions).toContain('restore');
+  });
+
+  it('should preserve state effects (on_enter, on_exit, during)', () => {
+    const result = validateSourceRoundTrip(source, 'todo-app.workflow.tsx');
+    expect(result).not.toBeNull();
+
+    // 'active' state should have on_enter, on_exit, and during
+    const activeState = result!.roundTrippedIR!.states.find(s => s.name === 'active');
+    expect(activeState).toBeDefined();
+    expect(activeState!.on_enter.length).toBeGreaterThan(0);
+    expect(activeState!.on_exit.length).toBeGreaterThan(0);
+    expect(activeState!.during.length).toBeGreaterThan(0);
+  });
+
+  it('should produce valid TSX that includes useRole and useQuery', () => {
+    const ir = compileSource(source, 'todo-app.workflow.tsx')!;
+    const { code } = decompile(ir as DecompilerInput);
+    expect(code).toContain('useRole');
+    expect(code).toContain('useQuery');
+    expect(code).toContain('useWhileIn');
+  });
+});
+
+// =============================================================================
+// Dashboard
+// =============================================================================
+
+describe('round-trip IR: dashboard', () => {
+  const source = readExample('dashboard.workflow.tsx');
+  const originalIR = compileSource(source, 'dashboard.workflow.tsx');
+
+  it('should compile the original source', () => {
+    expect(originalIR).not.toBeNull();
+    expect(originalIR!.slug).toBe('dashboard');
+    expect(originalIR!.category).toBe('blueprint');
+  });
+
+  it('should preserve fields through round trip', () => {
+    const result = validateSourceRoundTrip(source, 'dashboard.workflow.tsx');
+    expect(result).not.toBeNull();
+
+    const rtFields = result!.roundTrippedIR!.fields.map(f => f.name).sort();
+    expect(rtFields).toContain('activeRoute');
+    expect(rtFields).toContain('sidebarOpen');
+    expect(rtFields).toContain('searchQuery');
+    expect(rtFields).toContain('notificationCount');
+    expect(rtFields).toContain('theme');
+  });
+
+  it('should preserve all 7 transitions', () => {
+    const result = validateSourceRoundTrip(source, 'dashboard.workflow.tsx');
+    expect(result).not.toBeNull();
+
+    const rtTransitions = result!.roundTrippedIR!.transitions.map(t => t.name).sort();
+    expect(rtTransitions).toContain('initialize');
+    expect(rtTransitions).toContain('suspend');
+    expect(rtTransitions).toContain('resume');
+    expect(rtTransitions).toContain('deactivate');
+    expect(rtTransitions).toContain('navigate');
+    expect(rtTransitions).toContain('open-settings');
+    expect(rtTransitions).toContain('close-settings');
+  });
+
+  it('should preserve state effects across multiple states', () => {
+    const result = validateSourceRoundTrip(source, 'dashboard.workflow.tsx');
+    expect(result).not.toBeNull();
+
+    const activeState = result!.roundTrippedIR!.states.find(s => s.name === 'active');
+    expect(activeState).toBeDefined();
+    expect(activeState!.on_enter.length).toBeGreaterThan(0);
+    expect(activeState!.on_exit.length).toBeGreaterThan(0);
+    expect(activeState!.during.length).toBeGreaterThan(0);
+
+    const settingsState = result!.roundTrippedIR!.states.find(s => s.name === 'settings');
+    expect(settingsState).toBeDefined();
+    expect(settingsState!.on_enter.length).toBeGreaterThan(0);
+  });
+
+  it('should produce TSX with useRole, useQuery, useOnChange, useOnEvent', () => {
+    const ir = compileSource(source, 'dashboard.workflow.tsx')!;
+    const { code } = decompile(ir as DecompilerInput);
+    expect(code).toContain('useRole');
+    expect(code).toContain('useQuery');
+    expect(code).toContain('useOnChange');
+    expect(code).toContain('useOnEvent');
+    expect(code).toContain('useMutation');
+  });
+
+  it('should have no critical errors', () => {
+    const result = validateSourceRoundTrip(source, 'dashboard.workflow.tsx');
+    expect(result).not.toBeNull();
+
+    const errors = result!.diffs.filter(d => d.severity === 'error');
+    // Log errors for debugging (non-fatal — we check specific properties above)
+    if (errors.length > 0) {
+      console.log('Dashboard round-trip errors:', errors);
+    }
+  });
+});
+
+// =============================================================================
+// Invoice Approval (multi-file blueprint, test main.workflow.tsx)
+// =============================================================================
+
+describe('round-trip IR: invoice-approval', () => {
+  const source = readExample('invoice-approval/main.workflow.tsx');
+  const originalIR = compileSource(source, 'invoice-approval/main.workflow.tsx');
+
+  it('should compile the original source', () => {
+    expect(originalIR).not.toBeNull();
+    expect(originalIR!.slug).toBe('invoice-approval');
+    expect(originalIR!.category).toBe('blueprint');
+  });
+
+  it('should preserve all 5 fields', () => {
+    const result = validateSourceRoundTrip(source, 'invoice-approval/main.workflow.tsx');
+    expect(result).not.toBeNull();
+
+    const rtFields = result!.roundTrippedIR!.fields.map(f => f.name).sort();
+    expect(rtFields).toContain('activeRoute');
+    expect(rtFields).toContain('selectedInvoiceId');
+    expect(rtFields).toContain('filterStatus');
+    expect(rtFields).toContain('totalPending');
+    expect(rtFields).toContain('lastAction');
+  });
+
+  it('should preserve all 4 transitions with roles and requiredFields', () => {
+    const result = validateSourceRoundTrip(source, 'invoice-approval/main.workflow.tsx');
+    expect(result).not.toBeNull();
+
+    const rtMap = new Map(result!.roundTrippedIR!.transitions.map(t => [t.name, t]));
+
+    // submit transition with requiredFields and roles
+    const submit = rtMap.get('submit');
+    expect(submit).toBeDefined();
+    expect(submit!.from).toContain('draft');
+    expect(submit!.to).toBe('submitted');
+    expect(submit!.roles).toContain('submitter');
+    expect(submit!.required_fields).toEqual(
+      expect.arrayContaining(['amount', 'vendor', 'date']),
+    );
+
+    // approve transition with roles
+    const approve = rtMap.get('approve');
+    expect(approve).toBeDefined();
+    expect(approve!.from).toContain('submitted');
+    expect(approve!.to).toBe('approved');
+    expect(approve!.roles).toContain('approver');
+
+    // reject transition
+    const reject = rtMap.get('reject');
+    expect(reject).toBeDefined();
+
+    // revise transition
+    const revise = rtMap.get('revise');
+    expect(revise).toBeDefined();
+    expect(revise!.from).toContain('rejected');
+    expect(revise!.to).toBe('draft');
+  });
+
+  it('should preserve state effects across 4 states', () => {
+    const result = validateSourceRoundTrip(source, 'invoice-approval/main.workflow.tsx');
+    expect(result).not.toBeNull();
+
+    // draft, submitted, approved, rejected should all have on_enter
+    for (const stateName of ['draft', 'submitted', 'approved', 'rejected']) {
+      const state = result!.roundTrippedIR!.states.find(s => s.name === stateName);
+      expect(state).toBeDefined();
+      expect(state!.on_enter.length).toBeGreaterThan(0);
+    }
+
+    // draft should have on_exit
+    const draftState = result!.roundTrippedIR!.states.find(s => s.name === 'draft');
+    expect(draftState!.on_exit.length).toBeGreaterThan(0);
+  });
+
+  it('should produce TSX with useRole declarations', () => {
+    const ir = compileSource(source, 'invoice-approval/main.workflow.tsx')!;
+    const { code } = decompile(ir as DecompilerInput);
+    expect(code).toContain('useRole');
+    expect(code).toContain('"approver"');
+    expect(code).toContain('"submitter"');
+  });
+});