@auto-engineer/component-implementor-react 1.98.0 → 1.100.0

package/src/commands/implement-component.test.ts

@@ -1,16 +1,11 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
-vi.mock('ai', () => ({
-  generateText: vi.fn(),
-}));
-
 vi.mock('@auto-engineer/model-factory', () => ({
   createModelFromEnv: vi.fn(() => 'mock-model'),
 }));
 
 vi.mock('node:fs/promises', () => ({
   readFile: vi.fn(),
-  writeFile: vi.fn(),
   mkdir: vi.fn(),
 }));
 
@@ -18,11 +13,24 @@ vi.mock('node:fs', () => ({
   existsSync: vi.fn(),
 }));
 
+vi.mock('../project-context', () => ({
+  buildFullProjectSection: vi.fn().mockResolvedValue(''),
+}));
+
+vi.mock('../pipeline/run-pipeline', () => ({
+  buildPipelineSteps: vi.fn(() => []),
+  runPipeline: vi.fn(),
+}));
+
 import { existsSync } from 'node:fs';
-import { readFile, writeFile } from 'node:fs/promises';
-import { generateText } from 'ai';
+import { readFile } from 'node:fs/promises';
+import { runPipeline } from '../pipeline/run-pipeline';
 import { commandHandler, handleImplementComponent } from './implement-component';
 
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
 function makeCommand(overrides: Record<string, unknown> = {}) {
   return {
     type: 'ImplementComponent' as const,
@@ -40,6 +48,7 @@ function makeCommand(overrides: Record<string, unknown> = {}) {
           styling: ['uses primary class'],
           storybookPath: 'src/components/ui/MyButton.stories.tsx',
           files: { create: ['src/components/ui/MyButton.tsx'] },
+          composes: [] as { id: string; path: string }[],
         },
       },
       ...overrides,
@@ -55,20 +64,13 @@ describe('implement-component', () => {
   });
 
   describe('handleImplementComponent', () => {
-    it('generates 3 files via parallel agents + reconciliation and returns ComponentImplemented', async () => {
-      const mockGenerateText = vi.mocked(generateText);
-      // Phase 1: 3 parallel calls (component, test, story)
-      mockGenerateText
-        .mockResolvedValueOnce({ text: 'component file code' } as Awaited<ReturnType<typeof generateText>>)
-        .mockResolvedValueOnce({ text: 'test file code' } as Awaited<ReturnType<typeof generateText>>)
-        .mockResolvedValueOnce({ text: 'story file code' } as Awaited<ReturnType<typeof generateText>>)
-        // Phase 2: reconciliation
-        .mockResolvedValueOnce({
-          text: '```tsx\nreconciled component\n```\n\n```tsx\nreconciled story\n```',
-        } as Awaited<ReturnType<typeof generateText>>);
-
+    it('runs pipeline and returns ComponentImplemented on success', async () => {
       vi.mocked(existsSync).mockReturnValue(false);
-      vi.mocked(writeFile).mockResolvedValue(undefined);
+      vi.mocked(runPipeline).mockResolvedValue({
+        success: true,
+        llmCalls: 4,
+        fixIterations: 1,
+      });
 
       const result = await handleImplementComponent(makeCommand());
 
@@ -90,23 +92,40 @@ describe('implement-component', () => {
         correlationId: 'cor-1',
       });
 
-      expect(mockGenerateText).toHaveBeenCalledTimes(4);
-      expect(writeFile).toHaveBeenCalledTimes(3);
+      expect(runPipeline).toHaveBeenCalledTimes(1);
     });
 
-    it('reads existing component when modifying', async () => {
-      const mockGenerateText = vi.mocked(generateText);
-      mockGenerateText
-        .mockResolvedValueOnce({ text: 'component code' } as Awaited<ReturnType<typeof generateText>>)
-        .mockResolvedValueOnce({ text: 'test code' } as Awaited<ReturnType<typeof generateText>>)
-        .mockResolvedValueOnce({ text: 'story code' } as Awaited<ReturnType<typeof generateText>>)
-        .mockResolvedValueOnce({
-          text: '```tsx\nrc\n```\n```tsx\nrs\n```',
-        } as Awaited<ReturnType<typeof generateText>>);
+    it('returns ComponentImplementationFailed when pipeline fails', async () => {
+      vi.mocked(existsSync).mockReturnValue(false);
+      vi.mocked(runPipeline).mockResolvedValue({
+        success: false,
+        error: 'Step "Type Fix Loop" failed: errors remain',
+        llmCalls: 5,
+        fixIterations: 3,
+      });
+
+      const result = await handleImplementComponent(makeCommand());
+
+      expect(result).toEqual({
+        type: 'ComponentImplementationFailed',
+        data: {
+          error: 'Step "Type Fix Loop" failed: errors remain',
+          name: 'MyButton',
+        },
+        timestamp: expect.any(Date),
+        requestId: 'req-1',
+        correlationId: 'cor-1',
+      });
+    });
 
+    it('reads existing component when modifying', async () => {
       vi.mocked(existsSync).mockReturnValue(true);
       vi.mocked(readFile).mockResolvedValue('existing component code' as never);
-      vi.mocked(writeFile).mockResolvedValue(undefined);
+      vi.mocked(runPipeline).mockResolvedValue({
+        success: true,
+        llmCalls: 3,
+        fixIterations: 0,
+      });
 
       const command = makeCommand({
         job: {
@@ -121,6 +140,7 @@ describe('implement-component', () => {
             styling: [],
             storybookPath: 'src/components/ui/MyButton.stories.tsx',
             files: { modify: ['src/components/ui/MyButton.tsx'] },
+            composes: [] as { id: string; path: string }[],
           },
         },
       });
@@ -128,20 +148,26 @@ describe('implement-component', () => {
       await handleImplementComponent(command);
 
       expect(readFile).toHaveBeenCalledWith('/project/client/src/components/ui/MyButton.tsx', 'utf-8');
-    });
 
-    it('returns ComponentImplementationFailed on error', async () => {
-      const mockGenerateText = vi.mocked(generateText);
-      mockGenerateText.mockRejectedValue(new Error('AI service down'));
+      expect(runPipeline).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          existingComponent: 'existing component code',
+          isModify: true,
+        }),
+      );
+    });
 
+    it('returns ComponentImplementationFailed on unexpected error', async () => {
       vi.mocked(existsSync).mockReturnValue(false);
+      vi.mocked(runPipeline).mockRejectedValue(new Error('Unexpected crash'));
 
       const result = await handleImplementComponent(makeCommand());
 
       expect(result).toEqual({
         type: 'ComponentImplementationFailed',
         data: {
-          error: 'AI service down',
+          error: 'Unexpected crash',
           name: 'MyButton',
         },
         timestamp: expect.any(Date),
@@ -151,22 +177,13 @@ describe('implement-component', () => {
     });
 
     it('handles payload with undefined spec delta fields without crashing', async () => {
-      const mockGenerateText = vi.mocked(generateText);
-      mockGenerateText
-        .mockResolvedValueOnce({ text: 'component file code' } as Awaited<ReturnType<typeof generateText>>)
-        .mockResolvedValueOnce({ text: 'test file code' } as Awaited<ReturnType<typeof generateText>>)
-        .mockResolvedValueOnce({ text: 'story file code' } as Awaited<ReturnType<typeof generateText>>)
-        .mockResolvedValueOnce({
-          text: '```tsx\nreconciled component\n```\n\n```tsx\nreconciled story\n```',
-        } as Awaited<ReturnType<typeof generateText>>);
-
       vi.mocked(existsSync).mockReturnValue(false);
-      vi.mocked(writeFile).mockResolvedValue(undefined);
+      vi.mocked(runPipeline).mockResolvedValue({
+        success: true,
+        llmCalls: 4,
+        fixIterations: 1,
+      });
 
-      // Simulate production payload where the pipeline omits spec delta fields
-      // (e.g. "Resource-preview", "Plant-fields-page" components).
-      // At runtime JSON deserialization can produce undefined for these fields,
-      // bypassing TypeScript's compile-time guarantees.
       const command = {
         type: 'ImplementComponent' as const,
         data: {
@@ -190,30 +207,20 @@ describe('implement-component', () => {
         correlationId: 'cor-1',
       };
 
-      // Cast through unknown to bypass TypeScript — this is what happens at runtime
-      // when the pipeline sends a payload with missing fields
       const result = await handleImplementComponent(
         command as unknown as Parameters<typeof handleImplementComponent>[0],
       );
 
-      // Should succeed, not crash. Undefined spec delta fields should be treated as empty arrays.
-      // Currently fails: buildSpecSection() throws "Cannot read properties of undefined (reading 'map')"
-      // which gets caught by try/catch and returns ComponentImplementationFailed instead.
       expect(result.type).toBe('ComponentImplemented');
     });
 
     it('defaults targetDir to ./client when not provided', async () => {
-      const mockGenerateText = vi.mocked(generateText);
-      mockGenerateText
-        .mockResolvedValueOnce({ text: 'component code' } as Awaited<ReturnType<typeof generateText>>)
-        .mockResolvedValueOnce({ text: 'test code' } as Awaited<ReturnType<typeof generateText>>)
-        .mockResolvedValueOnce({ text: 'story code' } as Awaited<ReturnType<typeof generateText>>)
-        .mockResolvedValueOnce({
-          text: '```tsx\nrc\n```\n```tsx\nrs\n```',
-        } as Awaited<ReturnType<typeof generateText>>);
-
       vi.mocked(existsSync).mockReturnValue(false);
-      vi.mocked(writeFile).mockResolvedValue(undefined);
+      vi.mocked(runPipeline).mockResolvedValue({
+        success: true,
+        llmCalls: 2,
+        fixIterations: 0,
+      });
 
       const command = {
         type: 'ImplementComponent' as const,
@@ -250,17 +257,12 @@ describe('implement-component', () => {
     });
 
     it('derives component path from componentId when files.create is empty string', async () => {
-      const mockGenerateText = vi.mocked(generateText);
-      mockGenerateText
-        .mockResolvedValueOnce({ text: 'component code' } as Awaited<ReturnType<typeof generateText>>)
-        .mockResolvedValueOnce({ text: 'test code' } as Awaited<ReturnType<typeof generateText>>)
-        .mockResolvedValueOnce({ text: 'story code' } as Awaited<ReturnType<typeof generateText>>)
-        .mockResolvedValueOnce({
-          text: '```tsx\nrc\n```\n```tsx\nrs\n```',
-        } as Awaited<ReturnType<typeof generateText>>);
-
       vi.mocked(existsSync).mockReturnValue(false);
-      vi.mocked(writeFile).mockResolvedValue(undefined);
+      vi.mocked(runPipeline).mockResolvedValue({
+        success: true,
+        llmCalls: 4,
+        fixIterations: 0,
+      });
 
       const command = makeCommand({
         job: {
@@ -299,6 +301,37 @@ describe('implement-component', () => {
         correlationId: 'cor-1',
       });
     });
+
+    it('passes correct context to pipeline', async () => {
+      vi.mocked(existsSync).mockReturnValue(false);
+      vi.mocked(runPipeline).mockResolvedValue({
+        success: true,
+        llmCalls: 2,
+        fixIterations: 0,
+      });
+
+      await handleImplementComponent(makeCommand());
+
+      expect(runPipeline).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          componentName: 'MyButton',
+          componentPath: '/project/client/src/components/ui/MyButton.tsx',
+          testPath: '/project/client/src/components/ui/MyButton.test.tsx',
+          storyPath: '/project/client/src/components/ui/MyButton.stories.tsx',
+          componentImportPath: '@/components/ui/MyButton',
+          specDeltas: {
+            structure: ['renders a button element'],
+            rendering: ['shows spinner when loading'],
+            interaction: ['calls onClick handler'],
+            styling: ['uses primary class'],
+          },
+          isModify: false,
+          llmCalls: 0,
+          fixIterations: 0,
+        }),
+      );
+    });
   });
 
   describe('commandHandler', () => {
@@ -306,5 +339,205 @@ describe('implement-component', () => {
       expect(commandHandler.name).toBe('ImplementComponent');
       expect(commandHandler.alias).toBe('implement:component');
     });
+
+    it('handle delegates to handleImplementComponent', async () => {
+      vi.mocked(existsSync).mockReturnValue(false);
+      vi.mocked(runPipeline).mockResolvedValue({
+        success: true,
+        llmCalls: 0,
+        fixIterations: 0,
+      });
+
+      const result = await commandHandler.handle(makeCommand());
+
+      expect(result).toEqual(expect.objectContaining({ type: 'ComponentImplemented' }));
+    });
+  });
+
+  describe('filePathToImportAlias edge cases', () => {
+    it('handles paths starting with ./', async () => {
+      vi.mocked(existsSync).mockReturnValue(false);
+      vi.mocked(runPipeline).mockResolvedValue({
+        success: true,
+        llmCalls: 0,
+        fixIterations: 0,
+      });
+
+      const command = makeCommand({
+        job: {
+          id: 'job_1',
+          dependsOn: [],
+          target: 'ImplementComponent',
+          payload: {
+            componentId: 'my-button',
+            structure: [],
+            rendering: [],
+            interaction: [],
+            styling: [],
+            storybookPath: 'src/components/ui/MyButton.stories.tsx',
+            files: { create: ['./src/components/ui/MyButton.tsx'] },
+            composes: [] as { id: string; path: string }[],
+          },
+        },
+      });
+
+      await handleImplementComponent(command);
+
+      expect(runPipeline).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          componentImportPath: '@/components/ui/MyButton',
+        }),
+      );
+    });
+  });
+
+  describe('edge cases', () => {
+    it('reads existing test when modifying and test file exists', async () => {
+      vi.mocked(existsSync).mockReturnValue(true);
+      vi.mocked(readFile).mockResolvedValue('existing code' as never);
+      vi.mocked(runPipeline).mockResolvedValue({
+        success: true,
+        llmCalls: 1,
+        fixIterations: 0,
+      });
+
+      const command = makeCommand({
+        job: {
+          id: 'job_2',
+          dependsOn: [],
+          target: 'ImplementComponent',
+          payload: {
+            componentId: 'my-button',
+            structure: [],
+            rendering: [],
+            interaction: [],
+            styling: [],
+            storybookPath: 'src/components/ui/MyButton.stories.tsx',
+            files: { modify: ['src/components/ui/MyButton.tsx'] },
+            composes: [] as { id: string; path: string }[],
+          },
+        },
+      });
+
+      await handleImplementComponent(command);
+
+      expect(runPipeline).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          existingComponent: 'existing code',
+          existingTest: 'existing code',
+        }),
+      );
+    });
+
+    it('sets existingTest to undefined when test file does not exist in modify mode', async () => {
+      vi.mocked(existsSync).mockReturnValueOnce(true).mockReturnValueOnce(false);
+      vi.mocked(readFile).mockResolvedValue('existing component' as never);
+      vi.mocked(runPipeline).mockResolvedValue({
+        success: true,
+        llmCalls: 1,
+        fixIterations: 0,
+      });
+
+      const command = makeCommand({
+        job: {
+          id: 'job_2',
+          dependsOn: [],
+          target: 'ImplementComponent',
+          payload: {
+            componentId: 'my-button',
+            structure: [],
+            rendering: [],
+            interaction: [],
+            styling: [],
+            storybookPath: 'src/components/ui/MyButton.stories.tsx',
+            files: { modify: ['src/components/ui/MyButton.tsx'] },
+            composes: [] as { id: string; path: string }[],
+          },
+        },
+      });
+
+      await handleImplementComponent(command);
+
+      expect(runPipeline).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          existingComponent: 'existing component',
+          existingTest: undefined,
+        }),
+      );
+    });
+
+    it('uses fallback error message when pipeline result has no error string', async () => {
+      vi.mocked(existsSync).mockReturnValue(false);
+      vi.mocked(runPipeline).mockResolvedValue({
+        success: false,
+        llmCalls: 0,
+        fixIterations: 0,
+      });
+
+      const result = await handleImplementComponent(makeCommand());
+
+      expect(result).toEqual({
+        type: 'ComponentImplementationFailed',
+        data: {
+          error: 'Pipeline failed',
+          name: 'MyButton',
+        },
+        timestamp: expect.any(Date),
+        requestId: 'req-1',
+        correlationId: 'cor-1',
+      });
+    });
+
+    it('handles non-Error thrown from pipeline', async () => {
+      vi.mocked(existsSync).mockReturnValue(false);
+      vi.mocked(runPipeline).mockRejectedValue('string error');
+
+      const result = await handleImplementComponent(makeCommand());
+
+      expect(result).toEqual({
+        type: 'ComponentImplementationFailed',
+        data: {
+          error: 'string error',
+          name: 'MyButton',
+        },
+        timestamp: expect.any(Date),
+        requestId: 'req-1',
+        correlationId: 'cor-1',
+      });
+    });
+
+    it('handles empty files payload gracefully', async () => {
+      vi.mocked(existsSync).mockReturnValue(false);
+      vi.mocked(runPipeline).mockResolvedValue({
+        success: true,
+        llmCalls: 0,
+        fixIterations: 0,
+      });
+
+      const command = makeCommand({
+        job: {
+          id: 'job_1',
+          dependsOn: [],
+          target: 'ImplementComponent',
+          payload: {
+            componentId: 'my-button',
+            structure: [],
+            rendering: [],
+            interaction: [],
+            styling: [],
+            storybookPath: 'src/components/ui/MyButton.stories.tsx',
+            files: {},
+            composes: [] as { id: string; path: string }[],
+          },
+        },
+      });
+
+      const result = await handleImplementComponent(command);
+
+      expect(result).toEqual(expect.objectContaining({ type: 'ComponentImplemented' }));
+    });
   });
 });