@auto-engineer/component-implementor-react 1.97.2 → 1.99.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),
@@ -149,6 +175,163 @@ describe('implement-component', () => {
         correlationId: 'cor-1',
       });
     });
+
+    it('handles payload with undefined spec delta fields without crashing', async () => {
+      vi.mocked(existsSync).mockReturnValue(false);
+      vi.mocked(runPipeline).mockResolvedValue({
+        success: true,
+        llmCalls: 4,
+        fixIterations: 1,
+      });
+
+      const command = {
+        type: 'ImplementComponent' as const,
+        data: {
+          targetDir: '/project/client',
+          job: {
+            id: 'job_3',
+            dependsOn: [],
+            target: 'ImplementComponent' as const,
+            payload: {
+              componentId: 'resource-preview',
+              structure: ['renders a preview card'],
+              rendering: undefined,
+              interaction: undefined,
+              styling: undefined,
+              storybookPath: 'src/components/ui/ResourcePreview.stories.tsx',
+              files: { create: ['src/components/ui/ResourcePreview.tsx'] },
+            },
+          },
+        },
+        requestId: 'req-1',
+        correlationId: 'cor-1',
+      };
+
+      const result = await handleImplementComponent(
+        command as unknown as Parameters<typeof handleImplementComponent>[0],
+      );
+
+      expect(result.type).toBe('ComponentImplemented');
+    });
+
+    it('defaults targetDir to ./client when not provided', async () => {
+      vi.mocked(existsSync).mockReturnValue(false);
+      vi.mocked(runPipeline).mockResolvedValue({
+        success: true,
+        llmCalls: 2,
+        fixIterations: 0,
+      });
+
+      const command = {
+        type: 'ImplementComponent' as const,
+        data: {
+          job: {
+            id: 'job_1',
+            dependsOn: [],
+            target: 'ImplementComponent' as const,
+            payload: {
+              componentId: 'my-widget',
+              structure: ['renders a widget'],
+              rendering: ['shows content'],
+              interaction: ['handles click'],
+              styling: ['uses primary'],
+              storybookPath: 'src/MyWidget.stories.tsx',
+              files: { create: ['src/MyWidget.tsx'] },
+            },
+          },
+        },
+        requestId: 'req-1',
+        correlationId: 'cor-1',
+      };
+
+      const result = await handleImplementComponent(
+        command as unknown as Parameters<typeof handleImplementComponent>[0],
+      );
+
+      expect(result).toEqual(
+        expect.objectContaining({
+          type: 'ComponentImplemented',
+          data: expect.objectContaining({ name: 'MyWidget' }),
+        }),
+      );
+    });
+
+    it('derives component path from componentId when files.create is empty string', async () => {
+      vi.mocked(existsSync).mockReturnValue(false);
+      vi.mocked(runPipeline).mockResolvedValue({
+        success: true,
+        llmCalls: 4,
+        fixIterations: 0,
+      });
+
+      const command = makeCommand({
+        job: {
+          id: 'job_1',
+          dependsOn: [],
+          target: 'ImplementComponent',
+          payload: {
+            componentId: 'task-form-input',
+            structure: ['renders input'],
+            rendering: [],
+            interaction: [],
+            styling: [],
+            storybookPath: '.stories',
+            files: { create: [''] },
+          },
+        },
+      });
+
+      const result = await handleImplementComponent(command);
+
+      expect(result).toEqual({
+        type: 'ComponentImplemented',
+        data: {
+          name: 'TaskFormInput',
+          componentPath: expect.stringContaining('src/components/TaskFormInput.tsx'),
+          testPath: expect.stringContaining('src/components/TaskFormInput.test.tsx'),
+          storyPath: expect.stringContaining('src/components/TaskFormInput.stories.tsx'),
+          filesCreated: expect.arrayContaining([
+            expect.stringContaining('TaskFormInput.tsx'),
+            expect.stringContaining('TaskFormInput.test.tsx'),
+            expect.stringContaining('TaskFormInput.stories.tsx'),
+          ]),
+        },
+        timestamp: expect.any(Date),
+        requestId: 'req-1',
+        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', () => {
@@ -156,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' }));
+    });
   });
 });