@mmapp/react-compiler 0.1.0-alpha.1

package/src/__tests__/decompiler.test.ts

@@ -0,0 +1,718 @@
+/**
+ * Decompiler Tests — verifies IR → .workflow.tsx output AND round-trip fidelity.
+ *
+ * Two test categories:
+ *   1. Unit tests: IR → TSX output correctness (structure, imports, hooks)
+ *   2. Round-trip tests: IR → decompile → recompile → compare IR equivalence
+ */
+
+import { describe, it, expect } from 'vitest';
+import { decompile } from '../decompiler';
+import type { DecompilerInput } from '../decompiler';
+import { decompileToTSX, normalizeDecompilerInput } from '../babel/emitters/ir-to-tsx-emitter';
+import { validateRoundTrip } from '../RoundTripValidator';
+import type { IRWorkflowDefinition } from '@mindmatrix/player-core';
+
+function makeDefinition(overrides: Partial<DecompilerInput> = {}): DecompilerInput {
+  return {
+    slug: 'test-workflow',
+    name: 'Test Workflow',
+    version: '1.0.0',
+    description: 'A test workflow',
+    category: 'workflow',
+    fields: [],
+    states: [],
+    transitions: [],
+    roles: [],
+    tags: [],
+    metadata: {},
+    ...overrides,
+  };
+}
+
+describe('Decompiler', () => {
+  describe('basic output', () => {
+    it('should produce valid TSX with annotation and export', () => {
+      const result = decompile(makeDefinition());
+      expect(result.code).toContain('@workflow');
+      expect(result.code).toContain('slug="test-workflow"');
+      expect(result.code).toContain('export default function TestWorkflow');
+      expect(result.code).toContain('return null');
+      expect(result.componentName).toBe('TestWorkflow');
+    });
+
+    it('should use custom component name', () => {
+      const result = decompile(makeDefinition(), { componentName: 'MyApp' });
+      expect(result.code).toContain('function MyApp');
+      expect(result.componentName).toBe('MyApp');
+    });
+
+    it('should omit annotation when disabled', () => {
+      const result = decompile(makeDefinition(), { includeAnnotation: false });
+      expect(result.code).not.toContain('@workflow');
+    });
+  });
+
+  describe('field declarations', () => {
+    it('should emit useState for text fields', () => {
+      const result = decompile(makeDefinition({
+        fields: [
+          { name: 'user_name', type: 'text', required: false, default_value: 'Alice' },
+        ],
+      }));
+      expect(result.code).toContain('useState');
+      expect(result.code).toContain('userName');
+      expect(result.code).toContain('setUserName');
+      expect(result.code).toContain('"Alice"');
+      expect(result.imports).toContain('@mindmatrix/react');
+    });
+
+    it('should emit useState for number fields with type annotation', () => {
+      const result = decompile(makeDefinition({
+        fields: [
+          { name: 'count', type: 'number', required: false, default_value: 0 },
+        ],
+      }));
+      expect(result.code).toContain('useState<number>');
+      expect(result.code).toContain('count');
+      expect(result.code).toContain('setCount');
+    });
+
+    it('should emit useState for boolean fields', () => {
+      const result = decompile(makeDefinition({
+        fields: [
+          { name: 'is_active', type: 'boolean', required: false, default_value: false },
+        ],
+      }));
+      expect(result.code).toContain('useState');
+      expect(result.code).toContain('isActive');
+      expect(result.code).toContain('false');
+    });
+
+    it('should skip computed fields', () => {
+      const result = decompile(makeDefinition({
+        fields: [
+          { name: 'total', type: 'number', required: false, computed: 'price * quantity' },
+        ],
+      }));
+      expect(result.code).not.toContain('total');
+    });
+  });
+
+  describe('state effects', () => {
+    it('should emit useOnEnter for states with on_enter actions', () => {
+      const result = decompile(makeDefinition({
+        states: [{
+          name: 'active',
+          type: 'REGULAR',
+          description: '',
+          on_enter: [{ id: 'a1', type: 'set_field', mode: 'sync', config: { field: 'status', expression: '"active"' } }],
+          during: [],
+          on_exit: [],
+        }],
+      }));
+      expect(result.code).toContain('useOnEnter');
+      expect(result.code).toContain('"active"');
+      expect(result.code).toContain('setStatus');
+    });
+
+    it('should emit useOnExit for states with on_exit actions', () => {
+      const result = decompile(makeDefinition({
+        states: [{
+          name: 'active',
+          type: 'REGULAR',
+          description: '',
+          on_enter: [],
+          during: [],
+          on_exit: [{ id: 'a2', type: 'log_event', mode: 'sync', config: { message: 'Exiting active state' } }],
+        }],
+      }));
+      expect(result.code).toContain('useOnExit');
+      expect(result.code).toContain('console.log');
+      expect(result.code).toContain('Exiting active state');
+    });
+
+    it('should emit useWhileIn for during actions', () => {
+      const result = decompile(makeDefinition({
+        states: [{
+          name: 'polling',
+          type: 'REGULAR',
+          description: '',
+          on_enter: [],
+          on_exit: [],
+          during: [{
+            id: 'd1',
+            type: 'interval',
+            interval_ms: 5000,
+            actions: [{ id: 'a3', type: 'log_event', mode: 'sync', config: { message: 'polling...' } }],
+          }],
+        }],
+      }));
+      expect(result.code).toContain('useWhileIn');
+      expect(result.code).toContain('"polling"');
+      expect(result.code).toContain('5000');
+    });
+  });
+
+  describe('transitions', () => {
+    it('should emit useTransition with from/to', () => {
+      const result = decompile(makeDefinition({
+        transitions: [{
+          name: 'submit',
+          from: ['draft'],
+          to: 'pending',
+          actions: [],
+          conditions: [],
+        }],
+      }));
+      expect(result.code).toContain('useTransition');
+      expect(result.code).toContain('"submit"');
+      expect(result.code).toContain('from: "draft"');
+      expect(result.code).toContain('to: "pending"');
+    });
+
+    it('should emit conditions as when prop', () => {
+      const result = decompile(makeDefinition({
+        transitions: [{
+          name: 'approve',
+          from: ['pending'],
+          to: 'approved',
+          actions: [],
+          conditions: [{ field: 'amount', operator: 'gt', value: 1000 }],
+        }],
+      }));
+      expect(result.code).toContain('when:');
+      expect(result.code).toContain('amount > 1000');
+    });
+
+    it('should emit roles array', () => {
+      const result = decompile(makeDefinition({
+        transitions: [{
+          name: 'approve',
+          from: ['pending'],
+          to: 'approved',
+          actions: [],
+          conditions: [],
+          roles: ['admin', 'manager'],
+        }],
+      }));
+      expect(result.code).toContain('roles:');
+      expect(result.code).toContain('"admin"');
+      expect(result.code).toContain('"manager"');
+    });
+  });
+
+  describe('action types', () => {
+    it('should emit emit_event as emitEvent()', () => {
+      const result = decompile(makeDefinition({
+        states: [{
+          name: 's1',
+          type: 'REGULAR',
+          description: '',
+          on_enter: [{ id: 'a1', type: 'emit_event', mode: 'sync', config: { event: 'order.placed', payload: { orderId: 123 } } }],
+          during: [],
+          on_exit: [],
+        }],
+      }));
+      expect(result.code).toContain('emitEvent');
+      expect(result.code).toContain('"order.placed"');
+    });
+
+    it('should emit call_workflow as callWorkflow()', () => {
+      const result = decompile(makeDefinition({
+        states: [{
+          name: 's1',
+          type: 'REGULAR',
+          description: '',
+          on_enter: [{ id: 'a1', type: 'call_workflow', mode: 'sync', config: { slug: 'calculate-tax' } }],
+          during: [],
+          on_exit: [],
+        }],
+      }));
+      expect(result.code).toContain('callWorkflow');
+      expect(result.code).toContain('"calculate-tax"');
+    });
+
+    it('should emit spawn_instance as spawnInstance()', () => {
+      const result = decompile(makeDefinition({
+        states: [{
+          name: 's1',
+          type: 'REGULAR',
+          description: '',
+          on_enter: [{ id: 'a1', type: 'spawn_instance', mode: 'async', config: { slug: 'child-workflow' } }],
+          during: [],
+          on_exit: [],
+        }],
+      }));
+      expect(result.code).toContain('spawnInstance');
+      expect(result.code).toContain('"child-workflow"');
+    });
+
+    it('should emit http_request as fetch()', () => {
+      const result = decompile(makeDefinition({
+        states: [{
+          name: 's1',
+          type: 'REGULAR',
+          description: '',
+          on_enter: [{ id: 'a1', type: 'http_request', mode: 'async', config: { url: 'https://api.example.com', method: 'POST' } }],
+          during: [],
+          on_exit: [],
+        }],
+      }));
+      expect(result.code).toContain('fetch');
+      expect(result.code).toContain('"https://api.example.com"');
+      expect(result.code).toContain('"POST"');
+    });
+
+    it('should emit unknown actions as commented void expressions', () => {
+      const result = decompile(makeDefinition({
+        states: [{
+          name: 's1',
+          type: 'REGULAR',
+          description: '',
+          on_enter: [{ id: 'a1', type: 'custom_action', mode: 'sync', config: { key: 'value' } }],
+          during: [],
+          on_exit: [],
+        }],
+      }));
+      expect(result.code).toContain('void 0');
+      expect(result.code).toContain('custom_action');
+    });
+
+    it('should skip noop actions', () => {
+      const result = decompile(makeDefinition({
+        states: [{
+          name: 's1',
+          type: 'REGULAR',
+          description: '',
+          on_enter: [{ id: 'a1', type: 'noop', mode: 'sync', config: {} }],
+          during: [],
+          on_exit: [],
+        }],
+      }));
+      // noop should produce an empty callback (just ;)
+      expect(result.code).not.toContain('noop');
+    });
+  });
+
+  describe('binding expressions', () => {
+    it('should handle dot-path expressions in JSX bindings', () => {
+      const result = decompile(makeDefinition({
+        experience: {
+          id: 'root',
+          component: 'Text',
+          children: [],
+          bindings: { content: 'user.profile.name' },
+        },
+      }));
+      // Should produce member expression, not a string literal
+      expect(result.code).toContain('user');
+      expect(result.code).toContain('profile');
+      expect(result.code).toContain('name');
+    });
+  });
+
+  describe('event subscriptions', () => {
+    it('should emit useOnEvent for workflow-level events', () => {
+      const result = decompile(makeDefinition({
+        on_event: [{
+          match: 'order.placed',
+          actions: [{ type: 'set_field', field: 'status', expression: '"received"' }],
+        }],
+      }));
+      expect(result.code).toContain('useOnEvent');
+      expect(result.code).toContain('"order.placed"');
+    });
+  });
+
+  describe('field watchers', () => {
+    it('should emit useOnChange from metadata.fieldWatchers', () => {
+      const result = decompile(makeDefinition({
+        metadata: {
+          fieldWatchers: [{
+            id: 'watcher_1',
+            field: 'status',
+            actions: [{ id: 'auto_1', type: 'log_event', mode: 'auto', config: { message: 'status changed' } }],
+          }],
+        },
+      }));
+      expect(result.code).toContain('useOnChange');
+      expect(result.code).toContain('"status"');
+    });
+  });
+
+  describe('transition effects', () => {
+    it('should emit useOnTransition from metadata.transitionEffects', () => {
+      const result = decompile(makeDefinition({
+        metadata: {
+          transitionEffects: [{
+            id: 'effect_1',
+            transition: 'submit',
+            actions: [{ id: 'auto_1', type: 'log_event', mode: 'auto', config: { message: 'submitted' } }],
+          }],
+        },
+      }));
+      expect(result.code).toContain('useOnTransition');
+      expect(result.code).toContain('"submit"');
+    });
+  });
+
+  describe('experience tree', () => {
+    it('should emit JSX tree with nested components', () => {
+      const result = decompile(makeDefinition({
+        experience: {
+          id: 'root',
+          component: 'Stack',
+          config: { gap: 16 },
+          children: [
+            { id: 'h1', component: 'Heading', config: { level: 2, value: 'Hello' } },
+            { id: 'btn', component: 'Button', config: { label: 'Click me' } },
+          ],
+        },
+      }));
+      expect(result.code).toContain('<Stack');
+      expect(result.code).toContain('gap={16}');
+      expect(result.code).toContain('<Heading');
+      expect(result.code).toContain('<Button');
+    });
+
+    it('should emit Show wrapper for visible_when', () => {
+      const result = decompile(makeDefinition({
+        experience: {
+          id: 'root',
+          component: 'Text',
+          visible_when: '$local.is_admin',
+          config: { value: 'Admin Panel' },
+        },
+      }));
+      expect(result.code).toContain('<Show');
+      expect(result.code).toContain('when={');
+    });
+
+    it('should emit sx prop from style IR', () => {
+      const result = decompile(makeDefinition({
+        experience: {
+          id: 'root',
+          component: 'Stack',
+          style: {
+            padding: { top: 16, right: 16, bottom: 16, left: 16 },
+            gap: 8,
+          },
+          children: [],
+        },
+      }));
+      expect(result.code).toContain('sx=');
+    });
+  });
+
+  describe('ir-to-tsx-emitter bridge', () => {
+    it('should produce identical output to decompile()', () => {
+      const def = makeDefinition({
+        fields: [{ name: 'count', type: 'number', required: false, default_value: 0 }],
+        transitions: [{ name: 'inc', from: ['idle'], to: 'counting', actions: [] }],
+      });
+
+      const directResult = decompile(def);
+      const bridgeResult = decompileToTSX(def);
+
+      expect(bridgeResult.code).toBe(directResult.code);
+      expect(bridgeResult.componentName).toBe(directResult.componentName);
+    });
+
+    it('should normalize input from views.default', () => {
+      const def: IRWorkflowDefinition = {
+        slug: 'test',
+        name: 'Test',
+        version: '1.0.0',
+        category: 'workflow',
+        fields: [],
+        states: [],
+        transitions: [],
+        roles: [],
+      };
+      // Simulate stored IR format where experience is in views.default
+      (def as any).views = {
+        default: { id: 'root', component: 'Stack', children: [] },
+      };
+
+      const normalized = normalizeDecompilerInput(def);
+      expect(normalized.experience).toBeDefined();
+      expect(normalized.experience!.component).toBe('Stack');
+    });
+  });
+});
+
+// =============================================================================
+// Round-Trip Tests: IR → decompile → recompile → compare IR
+// =============================================================================
+
+describe('Round-Trip: IR → TSX → IR equivalence', () => {
+  describe('fields-only workflow', () => {
+    it('should preserve text and number fields through round trip', () => {
+      const ir = makeDefinition({
+        slug: 'field-test',
+        fields: [
+          { name: 'title', type: 'text', required: false, default_value: 'Untitled' },
+          { name: 'count', type: 'number', required: false, default_value: 0 },
+          { name: 'is_active', type: 'boolean', required: false, default_value: false },
+        ],
+      });
+
+      const result = validateRoundTrip(ir);
+      expect(result.roundTrippedIR).not.toBeNull();
+
+      // All fields should survive
+      const rtFields = result.roundTrippedIR!.fields.map(f => f.name).sort();
+      expect(rtFields).toContain('title');
+      expect(rtFields).toContain('count');
+      expect(rtFields).toContain('isActive');
+    });
+  });
+
+  describe('transitions with roles and conditions', () => {
+    it('should preserve transition metadata through round trip', () => {
+      const ir = makeDefinition({
+        slug: 'approval-flow',
+        transitions: [
+          {
+            name: 'submit',
+            from: ['draft'],
+            to: 'pending',
+            actions: [],
+            roles: ['author'],
+            required_fields: ['title', 'body'],
+          },
+          {
+            name: 'approve',
+            from: ['pending'],
+            to: 'approved',
+            actions: [],
+            roles: ['reviewer'],
+            conditions: [{ field: 'score', operator: 'gte', value: 80 }],
+          },
+        ],
+      });
+
+      const result = validateRoundTrip(ir);
+      expect(result.roundTrippedIR).not.toBeNull();
+
+      const rtTransitions = result.roundTrippedIR!.transitions;
+      expect(rtTransitions.length).toBe(2);
+
+      const submit = rtTransitions.find(t => t.name === 'submit');
+      expect(submit).toBeDefined();
+      expect(submit!.to).toBe('pending');
+      expect(submit!.roles).toContain('author');
+      expect(submit!.required_fields).toEqual(expect.arrayContaining(['title', 'body']));
+
+      const approve = rtTransitions.find(t => t.name === 'approve');
+      expect(approve).toBeDefined();
+      expect(approve!.to).toBe('approved');
+      expect(approve!.roles).toContain('reviewer');
+    });
+  });
+
+  describe('state effects (enter, exit, during)', () => {
+    it('should preserve on_enter and on_exit action counts', () => {
+      const ir = makeDefinition({
+        slug: 'effect-test',
+        states: [
+          {
+            name: 'active',
+            type: 'REGULAR',
+            on_enter: [
+              { id: 'a1', type: 'set_field', mode: 'auto', config: { field: 'status', value: 'active' } },
+              { id: 'a2', type: 'log_event', mode: 'auto', config: { message: 'entered active' } },
+            ],
+            on_exit: [
+              { id: 'a3', type: 'log_event', mode: 'auto', config: { message: 'leaving active' } },
+            ],
+            during: [],
+          },
+        ],
+      });
+
+      const result = validateRoundTrip(ir);
+      expect(result.roundTrippedIR).not.toBeNull();
+
+      const activeState = result.roundTrippedIR!.states.find(s => s.name === 'active');
+      expect(activeState).toBeDefined();
+      expect(activeState!.on_enter.length).toBe(2);
+      expect(activeState!.on_exit.length).toBe(1);
+    });
+
+    it('should preserve during actions (useWhileIn)', () => {
+      const ir = makeDefinition({
+        slug: 'during-test',
+        states: [{
+          name: 'monitoring',
+          type: 'REGULAR',
+          on_enter: [],
+          on_exit: [],
+          during: [{
+            id: 'd1',
+            type: 'interval',
+            interval_ms: 30000,
+            actions: [{ id: 'a1', type: 'log_event', mode: 'auto', config: { message: 'heartbeat' } }],
+          }],
+        }],
+      });
+
+      const result = validateRoundTrip(ir);
+      expect(result.roundTrippedIR).not.toBeNull();
+
+      const state = result.roundTrippedIR!.states.find(s => s.name === 'monitoring');
+      expect(state).toBeDefined();
+      expect(state!.during.length).toBe(1);
+    });
+  });
+
+  describe('event subscriptions', () => {
+    it('should preserve on_event subscriptions through round trip', () => {
+      const ir = makeDefinition({
+        slug: 'event-test',
+        on_event: [{
+          match: 'message.received',
+          actions: [{ type: 'set_field', field: 'message_count', expression: 'message_count + 1' }],
+        }],
+      });
+
+      const result = validateRoundTrip(ir);
+      const errors = result.diffs.filter(d => d.severity === 'error');
+      // Events should round-trip (1 in, 1 out)
+      const eventDiff = errors.find(d => d.path === 'on_event.length');
+      expect(eventDiff).toBeUndefined();
+    });
+  });
+
+  describe('combined workflow (fields + states + transitions + experience)', () => {
+    it('should handle a complete workflow round trip', () => {
+      const ir = makeDefinition({
+        slug: 'order-tracker',
+        category: 'workflow',
+        fields: [
+          { name: 'status', type: 'text', required: false, default_value: 'draft' },
+          { name: 'total', type: 'number', required: false, default_value: 0 },
+        ],
+        states: [
+          {
+            name: 'draft',
+            type: 'START',
+            on_enter: [{ id: 'a1', type: 'set_field', mode: 'auto', config: { field: 'status', value: 'draft' } }],
+            on_exit: [],
+            during: [],
+          },
+          {
+            name: 'submitted',
+            type: 'REGULAR',
+            on_enter: [{ id: 'a2', type: 'log_event', mode: 'auto', config: { message: 'Order submitted' } }],
+            on_exit: [],
+            during: [],
+          },
+          {
+            name: 'approved',
+            type: 'END',
+            on_enter: [],
+            on_exit: [],
+            during: [],
+          },
+        ],
+        transitions: [
+          { name: 'submit', from: ['draft'], to: 'submitted', actions: [] },
+          { name: 'approve', from: ['submitted'], to: 'approved', actions: [], roles: ['admin'] },
+        ],
+        experience: {
+          id: 'root',
+          component: 'Stack',
+          config: { gap: 16 },
+          children: [
+            { id: 'h1', component: 'Heading', config: { value: 'Order Tracker' } },
+            { id: 'txt', component: 'Text', bindings: { value: '$local.status' } },
+            { id: 'btn', component: 'Button', config: { label: 'Submit' }, bindings: { onClick: '$action.transition(submit)' } },
+          ],
+        },
+      });
+
+      const result = validateRoundTrip(ir);
+      expect(result.roundTrippedIR).not.toBeNull();
+
+      // Verify structure preserved
+      expect(result.roundTrippedIR!.slug).toBe('order-tracker');
+      expect(result.roundTrippedIR!.fields.length).toBeGreaterThanOrEqual(2);
+      expect(result.roundTrippedIR!.transitions.length).toBe(2);
+
+      const criticalErrors = result.diffs.filter(d => d.severity === 'error');
+      // Expect no critical errors (some warnings are OK for type inference)
+      expect(criticalErrors.length).toBe(0);
+    });
+  });
+
+  describe('auto transitions', () => {
+    it('should preserve auto flag on transitions', () => {
+      const ir = makeDefinition({
+        slug: 'auto-test',
+        transitions: [{
+          name: 'auto-advance',
+          from: ['waiting'],
+          to: 'processing',
+          actions: [],
+          auto: true,
+        }],
+      });
+
+      const result = validateRoundTrip(ir);
+      expect(result.roundTrippedIR).not.toBeNull();
+
+      const autoTrans = result.roundTrippedIR!.transitions.find(t => t.name === 'auto-advance');
+      expect(autoTrans).toBeDefined();
+      expect(autoTrans!.auto).toBe(true);
+    });
+  });
+
+  describe('multi-from transitions', () => {
+    it('should preserve multiple from states', () => {
+      const ir = makeDefinition({
+        slug: 'multi-from',
+        transitions: [{
+          name: 'reset',
+          from: ['active', 'paused', 'error'],
+          to: 'idle',
+          actions: [],
+        }],
+      });
+
+      const result = validateRoundTrip(ir);
+      expect(result.roundTrippedIR).not.toBeNull();
+
+      const reset = result.roundTrippedIR!.transitions.find(t => t.name === 'reset');
+      expect(reset).toBeDefined();
+      expect(reset!.from.sort()).toEqual(['active', 'error', 'paused']);
+    });
+  });
+
+  describe('decompile generates valid compilable code', () => {
+    it('should produce code that parses without errors', () => {
+      const ir = makeDefinition({
+        slug: 'parse-test',
+        fields: [
+          { name: 'name', type: 'text', required: false, default_value: '' },
+        ],
+        states: [{
+          name: 'idle',
+          type: 'START',
+          on_enter: [{ id: 'a1', type: 'set_field', mode: 'auto', config: { field: 'name', value: 'default' } }],
+          on_exit: [],
+          during: [],
+        }],
+        transitions: [{ name: 'start', from: ['idle'], to: 'active', actions: [] }],
+      });
+
+      const result = validateRoundTrip(ir);
+      // The round trip should produce an IR (meaning compilation succeeded)
+      expect(result.roundTrippedIR).not.toBeNull();
+      expect(result.generatedSource).toContain('useState');
+      expect(result.generatedSource).toContain('useOnEnter');
+      expect(result.generatedSource).toContain('useTransition');
+    });
+  });
+});