@auto-engineer/component-implementor-react 1.97.2 → 1.99.0

package/src/prompt.test.ts

@@ -1,9 +1,13 @@
 import { describe, expect, it } from 'vitest';
 import {
   buildComponentPrompt,
+  buildLintFixPrompt,
   buildReconcilerPrompt,
+  buildStoryFixPrompt,
   buildStoryPrompt,
+  buildTestFixPrompt,
   buildTestPrompt,
+  buildTypeFixPrompt,
   componentPromptSections,
   reconcilerPromptSections,
   storyPromptSections,
@@ -17,16 +21,18 @@ const specDeltas = {
   styling: ['applies elevated style when raised=true'],
 };
 
+const projectSection = '## Project Dependencies\ntest project context';
+
 describe('prompt builders', () => {
   describe('buildComponentPrompt', () => {
     it('returns system and prompt', () => {
-      const result = buildComponentPrompt({ componentName: 'Card', specDeltas });
+      const result = buildComponentPrompt({ componentName: 'Card', specDeltas, projectSection });
       expect(result.system).toBeTruthy();
       expect(result.prompt).toBeTruthy();
     });
 
     it('system prompt contains all sections', () => {
-      const { system } = buildComponentPrompt({ componentName: 'Card', specDeltas });
+      const { system } = buildComponentPrompt({ componentName: 'Card', specDeltas, projectSection });
       expect(system).toContain('YOUR INPUT');
       expect(system).toContain('YOUR OUTPUT');
       expect(system).toContain('METHODOLOGY');
@@ -35,7 +41,7 @@ describe('prompt builders', () => {
     });
 
     it('user prompt includes component name and spec deltas', () => {
-      const { prompt } = buildComponentPrompt({ componentName: 'Card', specDeltas });
+      const { prompt } = buildComponentPrompt({ componentName: 'Card', specDeltas, projectSection });
       expect(prompt).toContain('**Card**');
       expect(prompt).toContain('renders a Card element');
       expect(prompt).toContain('shows skeleton when loading');
@@ -46,25 +52,32 @@ describe('prompt builders', () => {
         componentName: 'Card',
         specDeltas,
         existingComponent: 'export function Card() {}',
+        projectSection,
       });
       expect(prompt).toContain('## Existing Component');
       expect(prompt).toContain('export function Card() {}');
     });
 
     it('user prompt omits existing component section when not provided', () => {
-      const { prompt } = buildComponentPrompt({ componentName: 'Card', specDeltas });
+      const { prompt } = buildComponentPrompt({ componentName: 'Card', specDeltas, projectSection });
       expect(prompt).not.toContain('## Existing Component');
     });
+
+    it('user prompt includes project section', () => {
+      const { prompt } = buildComponentPrompt({ componentName: 'Card', specDeltas, projectSection });
+      expect(prompt).toContain('## Project Dependencies');
+      expect(prompt).toContain('test project context');
+    });
   });
 
   describe('buildTestPrompt', () => {
     it('system prompt establishes tests as source of truth', () => {
-      const { system } = buildTestPrompt({ componentName: 'Card', specDeltas });
+      const { system } = buildTestPrompt({ componentName: 'Card', specDeltas, projectSection });
       expect(system).toContain('source of truth');
     });
 
     it('user prompt includes spec deltas', () => {
-      const { prompt } = buildTestPrompt({ componentName: 'Card', specDeltas });
+      const { prompt } = buildTestPrompt({ componentName: 'Card', specDeltas, projectSection });
       expect(prompt).toContain('## Spec Deltas');
       expect(prompt).toContain('calls onSelect when clicked');
     });
@@ -74,26 +87,90 @@ describe('prompt builders', () => {
         componentName: 'Card',
         specDeltas,
         existingComponent: 'existing code',
+        projectSection,
       });
       expect(prompt).toContain('## Existing Component');
       expect(prompt).toContain('existing code');
     });
+
+    it('user prompt includes project section', () => {
+      const { prompt } = buildTestPrompt({ componentName: 'Card', specDeltas, projectSection });
+      expect(prompt).toContain('## Project Dependencies');
+      expect(prompt).toContain('test project context');
+    });
+
+    it('system prompt contains Tailwind test rule', () => {
+      const { system } = buildTestPrompt({ componentName: 'Card', specDeltas, projectSection });
+      expect(system).toContain('Tailwind classes, not inline styles');
+      expect(system).toContain('toHaveClass');
+      expect(system).toContain('NEVER use `toHaveStyle()`');
+    });
+
+    it('system prompt contains semantic element verification rule', () => {
+      const { system } = buildTestPrompt({ componentName: 'Card', specDeltas, projectSection });
+      expect(system).toContain('Verify semantic elements from component source');
+      expect(system).toContain('getByText');
+    });
   });
 
   describe('buildStoryPrompt', () => {
     it('system prompt covers CSF3 and story conventions', () => {
-      const { system } = buildStoryPrompt({ componentName: 'Card', specDeltas });
+      const { system } = buildStoryPrompt({
+        componentName: 'Card',
+        specDeltas,
+        projectSection,
+        componentImportPath: '@/components/Card',
+      });
       expect(system).toContain('CSF3');
       expect(system).toContain('Meta');
       expect(system).toContain('StoryObj');
     });
 
     it('user prompt includes spec deltas without component code', () => {
-      const { prompt } = buildStoryPrompt({ componentName: 'Card', specDeltas });
+      const { prompt } = buildStoryPrompt({
+        componentName: 'Card',
+        specDeltas,
+        projectSection,
+        componentImportPath: '@/components/Card',
+      });
       expect(prompt).toContain('## Spec Deltas');
       expect(prompt).toContain('applies elevated style when raised=true');
       expect(prompt).not.toContain('## Component Code');
     });
+
+    it('user prompt includes component code when provided', () => {
+      const { prompt } = buildStoryPrompt({
+        componentName: 'Card',
+        specDeltas,
+        projectSection,
+        componentImportPath: '@/components/Card',
+        componentCode: 'export function Card() {}',
+      });
+      expect(prompt).toContain('## Component Code');
+      expect(prompt).toContain('export function Card() {}');
+    });
+
+    it('user prompt includes project section', () => {
+      const { prompt } = buildStoryPrompt({
+        componentName: 'Card',
+        specDeltas,
+        projectSection,
+        componentImportPath: '@/components/Card',
+      });
+      expect(prompt).toContain('## Project Dependencies');
+      expect(prompt).toContain('test project context');
+    });
+
+    it('user prompt includes component import path', () => {
+      const { prompt } = buildStoryPrompt({
+        componentName: 'Card',
+        specDeltas,
+        projectSection,
+        componentImportPath: '@/components/Card',
+      });
+      expect(prompt).toContain('## Component Import Path');
+      expect(prompt).toContain("import { Card } from '@/components/Card'");
+    });
   });
 
   describe('buildReconcilerPrompt', () => {
@@ -103,6 +180,7 @@ describe('prompt builders', () => {
       componentCode: 'component source',
       testCode: 'test source',
       storyCode: 'story source',
+      projectSection,
     };
 
     it('system prompt establishes test immutability', () => {
@@ -129,6 +207,96 @@ describe('prompt builders', () => {
       expect(prompt).toContain('## Existing Component');
       expect(prompt).toContain('old code');
     });
+
+    it('user prompt includes project section', () => {
+      const { prompt } = buildReconcilerPrompt(reconcileInput);
+      expect(prompt).toContain('## Project Dependencies');
+      expect(prompt).toContain('test project context');
+    });
+  });
+
+  describe('buildComponentPrompt handles undefined specDelta fields', () => {
+    const specDeltasWithUndefined = {
+      structure: ['renders a Card element'],
+      rendering: undefined as unknown as string[],
+      interaction: undefined as unknown as string[],
+      styling: ['applies elevated style when raised=true'],
+    };
+
+    it('returns valid result when rendering and interaction are undefined', () => {
+      const result = buildComponentPrompt({
+        componentName: 'Card',
+        specDeltas: specDeltasWithUndefined,
+        projectSection,
+      });
+      expect(result.system).toBeTruthy();
+      expect(result.prompt).toBeTruthy();
+      expect(result.prompt).toContain('renders a Card element');
+    });
+  });
+
+  describe('buildTestPrompt handles undefined specDelta fields', () => {
+    const specDeltasWithUndefined = {
+      structure: undefined as unknown as string[],
+      rendering: ['shows skeleton when loading'],
+      interaction: undefined as unknown as string[],
+      styling: ['applies elevated style when raised=true'],
+    };
+
+    it('returns valid result when structure and interaction are undefined', () => {
+      const result = buildTestPrompt({
+        componentName: 'Card',
+        specDeltas: specDeltasWithUndefined,
+        projectSection,
+      });
+      expect(result.system).toBeTruthy();
+      expect(result.prompt).toBeTruthy();
+      expect(result.prompt).toContain('shows skeleton when loading');
+    });
+  });
+
+  describe('buildStoryPrompt handles undefined specDelta fields', () => {
+    const specDeltasWithUndefined = {
+      structure: ['renders a Card element'],
+      rendering: undefined as unknown as string[],
+      interaction: ['calls onSelect when clicked'],
+      styling: undefined as unknown as string[],
+    };
+
+    it('returns valid result when rendering and styling are undefined', () => {
+      const result = buildStoryPrompt({
+        componentName: 'Card',
+        specDeltas: specDeltasWithUndefined,
+        projectSection,
+        componentImportPath: '@/components/Card',
+      });
+      expect(result.system).toBeTruthy();
+      expect(result.prompt).toBeTruthy();
+      expect(result.prompt).toContain('renders a Card element');
+    });
+  });
+
+  describe('buildReconcilerPrompt handles undefined specDelta fields', () => {
+    const specDeltasWithUndefined = {
+      structure: ['renders a Card element'],
+      rendering: ['shows skeleton when loading'],
+      interaction: undefined as unknown as string[],
+      styling: undefined as unknown as string[],
+    };
+
+    it('returns valid result when interaction and styling are undefined', () => {
+      const result = buildReconcilerPrompt({
+        componentName: 'Card',
+        specDeltas: specDeltasWithUndefined,
+        componentCode: 'component source',
+        testCode: 'test source',
+        storyCode: 'story source',
+        projectSection,
+      });
+      expect(result.system).toBeTruthy();
+      expect(result.prompt).toBeTruthy();
+      expect(result.prompt).toContain('renders a Card element');
+    });
   });
 
   describe('exported prompt sections', () => {
@@ -160,4 +328,81 @@ describe('prompt builders', () => {
       }
     });
   });
+
+  describe('buildTypeFixPrompt', () => {
+    it('includes errors, component code, and test code', () => {
+      const result = buildTypeFixPrompt({
+        componentCode: 'const x: number = "bad"',
+        testCode: 'import { Card } from "./Card"',
+        errors: ['src/Card.tsx(1,7): error TS2322: Type string not assignable to number'],
+      });
+
+      expect(result.system).toContain('TypeScript error fixer');
+      expect(result.system).toContain('two code blocks');
+      expect(result.prompt).toContain('## TypeScript Errors');
+      expect(result.prompt).toContain('error TS2322');
+      expect(result.prompt).toContain('## Component Code');
+      expect(result.prompt).toContain('const x: number = "bad"');
+      expect(result.prompt).toContain('## Test Code');
+      expect(result.prompt).toContain('import { Card } from "./Card"');
+    });
+  });
+
+  describe('buildTestFixPrompt', () => {
+    it('includes failures, output, component code, and test code', () => {
+      const result = buildTestFixPrompt({
+        componentCode: 'export function Card() { return <div /> }',
+        testCode: 'expect(screen.getByRole("button")).toBeInTheDocument()',
+        failures: ['renders button: Expected element not found'],
+        testOutput: 'FAIL src/Card.test.tsx',
+      });
+
+      expect(result.system).toContain('test failure fixer');
+      expect(result.system).toContain('source of truth');
+      expect(result.prompt).toContain('## Test Failures');
+      expect(result.prompt).toContain('Expected element not found');
+      expect(result.prompt).toContain('## Test Output');
+      expect(result.prompt).toContain('FAIL src/Card.test.tsx');
+      expect(result.prompt).toContain('## Component Code');
+      expect(result.prompt).toContain('## Test Code');
+    });
+  });
+
+  describe('buildLintFixPrompt', () => {
+    it('includes errors, component code, and test code', () => {
+      const result = buildLintFixPrompt({
+        componentCode: 'var x = 1',
+        testCode: 'var y = 2',
+        errors: ['src/Card.tsx:1:1 lint/style/useConst: Use const instead of var'],
+      });
+
+      expect(result.system).toContain('lint error fixer');
+      expect(result.system).toContain('two code blocks');
+      expect(result.prompt).toContain('## Lint Errors');
+      expect(result.prompt).toContain('useConst');
+      expect(result.prompt).toContain('## Component Code');
+      expect(result.prompt).toContain('var x = 1');
+      expect(result.prompt).toContain('## Test Code');
+      expect(result.prompt).toContain('var y = 2');
+    });
+  });
+
+  describe('buildStoryFixPrompt', () => {
+    it('includes errors, story code, and component code as reference', () => {
+      const result = buildStoryFixPrompt({
+        storyCode: 'import { Card } from "./Card"',
+        componentCode: 'export function Card() {}',
+        errors: ['src/Card.stories.tsx(1,10): error TS2305: Module has no exported member'],
+      });
+
+      expect(result.system).toContain('Storybook story fixer');
+      expect(result.system).toContain('one code block');
+      expect(result.prompt).toContain('## TypeScript Errors');
+      expect(result.prompt).toContain('error TS2305');
+      expect(result.prompt).toContain('## Story Code');
+      expect(result.prompt).toContain('import { Card } from "./Card"');
+      expect(result.prompt).toContain('## Component Code (reference)');
+      expect(result.prompt).toContain('export function Card() {}');
+    });
+  });
 });