test: strengthen TUI component test assertions and fix flaky patterns

Author: notgitika

src/cli/tui/components/__tests__/ConfirmReview.test.tsx

@@ -6,10 +6,11 @@ import { describe, expect, it } from 'vitest';
 describe('ConfirmReview', () => {
   it('renders default title and help text', () => {
     const { lastFrame } = render(<ConfirmReview fields={[{ label: 'Name', value: 'my-agent' }]} />);
+    const frame = lastFrame()!;
 
-    expect(lastFrame()).toContain('Review Configuration');
-    expect(lastFrame()).toContain('Enter confirm');
-    expect(lastFrame()).toContain('Esc back');
+    expect(frame).toContain('Review Configuration');
+    expect(frame).toContain('Enter confirm');
+    expect(frame).toContain('Esc back');
   });
 
   it('renders custom title', () => {
@@ -18,9 +19,10 @@ describe('ConfirmReview', () => {
     );
 
     expect(lastFrame()).toContain('Review Deploy');
+    expect(lastFrame()).not.toContain('Review Configuration');
   });
 
-  it('renders all fields', () => {
+  it('renders each field as label: value on the same line', () => {
     const { lastFrame } = render(
       <ConfirmReview
         fields={[
@@ -30,21 +32,58 @@ describe('ConfirmReview', () => {
         ]}
       />
     );
+    const lines = lastFrame()!.split('\n');
 
-    expect(lastFrame()).toContain('Name');
-    expect(lastFrame()).toContain('my-agent');
-    expect(lastFrame()).toContain('SDK');
-    expect(lastFrame()).toContain('Strands');
-    expect(lastFrame()).toContain('Language');
-    expect(lastFrame()).toContain('Python');
+    // Each label and its value should appear on the same line
+    const nameLine = lines.find(l => l.includes('Name'))!;
+    expect(nameLine).toContain('my-agent');
+
+    const sdkLine = lines.find(l => l.includes('SDK'))!;
+    expect(sdkLine).toContain('Strands');
+
+    const langLine = lines.find(l => l.includes('Language'))!;
+    expect(langLine).toContain('Python');
+  });
+
+  it('renders label with colon separator', () => {
+    const { lastFrame } = render(<ConfirmReview fields={[{ label: 'Region', value: 'us-east-1' }]} />);
+    const lines = lastFrame()!.split('\n');
+
+    const regionLine = lines.find(l => l.includes('Region'))!;
+    expect(regionLine).toMatch(/Region.*:.*us-east-1/);
   });
 
-  it('renders custom help text', () => {
+  it('renders custom help text replacing default', () => {
     const { lastFrame } = render(
       <ConfirmReview fields={[{ label: 'Name', value: 'test' }]} helpText="Press Y to confirm" />
     );
 
     expect(lastFrame()).toContain('Press Y to confirm');
     expect(lastFrame()).not.toContain('Enter confirm');
   });
+
+  it('renders multiple fields in order', () => {
+    const { lastFrame } = render(
+      <ConfirmReview
+        fields={[
+          { label: 'First', value: 'A' },
+          { label: 'Second', value: 'B' },
+          { label: 'Third', value: 'C' },
+        ]}
+      />
+    );
+    const frame = lastFrame()!;
+
+    // All three labels should be present
+    expect(frame).toContain('First');
+    expect(frame).toContain('Second');
+    expect(frame).toContain('Third');
+
+    // Verify ordering: First appears before Second
+    const firstIdx = frame.indexOf('First');
+    const secondIdx = frame.indexOf('Second');
+    const thirdIdx = frame.indexOf('Third');
+    expect(firstIdx).toBeLessThan(secondIdx);
+    expect(secondIdx).toBeLessThan(thirdIdx);
+  });
 });

src/cli/tui/components/__tests__/DeployStatus.test.tsx

@@ -9,66 +9,168 @@ function makeMsg(
   code = 'CDK_TOOLKIT_I5502',
   progress?: { completed: number; total: number }
 ): DeployMessage {
-  return { message, code, level: 'info', time: new Date(), timestamp: new Date(), progress } as DeployMessage;
+  return {
+    message,
+    code,
+    level: 'info',
+    time: new Date(),
+    timestamp: new Date(),
+    progress,
+  } as DeployMessage;
+}
+
+function makeResourceMsg(resourceType: string, status: string): DeployMessage {
+  return makeMsg(`MyStack | ${status} | AWS::${resourceType} | LogicalId`);
 }
 
 describe('DeployStatus', () => {
-  it('renders deploying state with gradient text', () => {
-    const { lastFrame } = render(<DeployStatus messages={[]} isComplete={false} hasError={false} />);
+  describe('header state', () => {
+    it('shows "Deploying to AWS" when not complete', () => {
+      const { lastFrame } = render(<DeployStatus messages={[]} isComplete={false} hasError={false} />);
 
-    expect(lastFrame()).toContain('Deploying to AWS');
-  });
+      expect(lastFrame()).toContain('Deploying to AWS');
+    });
 
-  it('renders success state when complete', () => {
-    const { lastFrame } = render(<DeployStatus messages={[]} isComplete={true} hasError={false} />);
+    it('shows success message when complete without error', () => {
+      const { lastFrame } = render(<DeployStatus messages={[]} isComplete={true} hasError={false} />);
+      const frame = lastFrame()!;
 
-    expect(lastFrame()).toContain('Deploy to AWS Complete');
-  });
+      expect(frame).toContain('✓');
+      expect(frame).toContain('Deploy to AWS Complete');
+    });
 
-  it('renders failure state when complete with error', () => {
-    const { lastFrame } = render(<DeployStatus messages={[]} isComplete={true} hasError={true} />);
+    it('shows failure message when complete with error', () => {
+      const { lastFrame } = render(<DeployStatus messages={[]} isComplete={true} hasError={true} />);
+      const frame = lastFrame()!;
 
-    expect(lastFrame()).toContain('Deploy to AWS Failed');
+      expect(frame).toContain('✗');
+      expect(frame).toContain('Deploy to AWS Failed');
+    });
   });
 
-  it('renders resource events during deployment', () => {
-    const messages = [
-      makeMsg('MyStack | CREATE_IN_PROGRESS | AWS::Lambda::Function | MyFunc'),
-      makeMsg('MyStack | CREATE_COMPLETE | AWS::Lambda::Function | MyFunc'),
-    ];
+  describe('resource event parsing', () => {
+    it('displays parsed resource type and status from CDK event messages', () => {
+      const messages = [
+        makeResourceMsg('Lambda::Function', 'CREATE_IN_PROGRESS'),
+        makeResourceMsg('Lambda::Function', 'CREATE_COMPLETE'),
+      ];
 
-    const { lastFrame } = render(<DeployStatus messages={messages} isComplete={false} hasError={false} />);
+      const { lastFrame } = render(<DeployStatus messages={messages} isComplete={false} hasError={false} />);
+      const frame = lastFrame()!;
 
-    expect(lastFrame()).toContain('Lambda::Function');
-    expect(lastFrame()).toContain('CREATE_COMPLETE');
-  });
+      expect(frame).toContain('Lambda::Function');
+      expect(frame).toContain('CREATE_COMPLETE');
+    });
 
-  it('renders progress bar when progress data exists', () => {
-    const messages = [makeMsg('deploying', 'CDK_TOOLKIT_I5502', { completed: 3, total: 10 })];
+    it('strips AWS:: prefix from resource types', () => {
+      const messages = [makeResourceMsg('S3::Bucket', 'CREATE_COMPLETE')];
 
-    const { lastFrame } = render(<DeployStatus messages={messages} isComplete={false} hasError={false} />);
+      const { lastFrame } = render(<DeployStatus messages={messages} isComplete={false} hasError={false} />);
 
-    expect(lastFrame()).toContain('3/10');
-  });
+      expect(lastFrame()).toContain('S3::Bucket');
+      expect(lastFrame()).not.toContain('AWS::S3::Bucket');
+    });
+
+    it('skips CLEANUP messages', () => {
+      const messages = [
+        makeResourceMsg('Lambda::Function', 'CREATE_COMPLETE'),
+        makeMsg('MyStack | CLEANUP_IN_PROGRESS | AWS::Lambda::Function | OldFunc'),
+      ];
+
+      const { lastFrame } = render(<DeployStatus messages={messages} isComplete={false} hasError={false} />);
+      const frame = lastFrame()!;
+
+      expect(frame).toContain('CREATE_COMPLETE');
+      expect(frame).not.toContain('CLEANUP');
+    });
+
+    it('ignores non-resource-event messages (non-I5502 codes)', () => {
+      const messages = [makeMsg('Some general info', 'CDK_TOOLKIT_I1234')];
+
+      const { lastFrame } = render(<DeployStatus messages={messages} isComplete={false} hasError={false} />);
+
+      // Should show deploying text but no resource lines
+      expect(lastFrame()).toContain('Deploying to AWS');
+      expect(lastFrame()).not.toContain('Some general info');
+    });
 
-  it('skips CLEANUP messages', () => {
-    const messages = [
-      makeMsg('MyStack | CREATE_COMPLETE | AWS::Lambda::Function | MyFunc'),
-      makeMsg('MyStack | CLEANUP_IN_PROGRESS | AWS::Lambda::Function | OldFunc'),
-    ];
+    it('shows only last 8 resource events', () => {
+      const messages = Array.from({ length: 12 }, (_, i) =>
+        makeResourceMsg(`Service::Resource${i}`, 'CREATE_COMPLETE')
+      );
 
-    const { lastFrame } = render(<DeployStatus messages={messages} isComplete={false} hasError={false} />);
+      const { lastFrame } = render(<DeployStatus messages={messages} isComplete={false} hasError={false} />);
+      const frame = lastFrame()!;
 
-    expect(lastFrame()).toContain('Lambda::Function');
-    expect(lastFrame()).toContain('CREATE_COMPLETE');
+      // First 4 should be trimmed (12 - 8 = 4)
+      expect(frame).not.toContain('Resource0');
+      expect(frame).not.toContain('Resource3');
+      // Last 8 should be visible
+      expect(frame).toContain('Resource4');
+      expect(frame).toContain('Resource11');
+    });
   });
 
-  it('ignores non-resource-event messages', () => {
-    const messages = [makeMsg('Some general info', 'CDK_TOOLKIT_I1234')];
+  describe('progress bar', () => {
+    it('renders progress bar with completed/total count', () => {
+      const messages = [makeMsg('deploying', 'CDK_TOOLKIT_I5502', { completed: 3, total: 10 })];
 
-    const { lastFrame } = render(<DeployStatus messages={messages} isComplete={false} hasError={false} />);
+      const { lastFrame } = render(<DeployStatus messages={messages} isComplete={false} hasError={false} />);
+      const frame = lastFrame()!;
+
+      expect(frame).toContain('3/10');
+      expect(frame).toContain('█');
+      expect(frame).toContain('░');
+    });
+
+    it('shows full progress bar on completion', () => {
+      const messages = [makeMsg('done', 'CDK_TOOLKIT_I5502', { completed: 10, total: 10 })];
+
+      const { lastFrame } = render(<DeployStatus messages={messages} isComplete={true} hasError={false} />);
+      const frame = lastFrame()!;
+
+      // On completion, bar shows total/total
+      expect(frame).toContain('10/10');
+    });
+
+    it('does not show progress bar when no progress data', () => {
+      const messages = [makeResourceMsg('Lambda::Function', 'CREATE_COMPLETE')];
+
+      const { lastFrame } = render(<DeployStatus messages={messages} isComplete={false} hasError={false} />);
+
+      expect(lastFrame()).not.toContain('█');
+      expect(lastFrame()).not.toContain('░');
+    });
+
+    it('uses most recent progress data', () => {
+      const messages = [
+        makeMsg('step1', 'CDK_TOOLKIT_I5502', { completed: 2, total: 10 }),
+        makeMsg('step2', 'CDK_TOOLKIT_I5502', { completed: 7, total: 10 }),
+      ];
+
+      const { lastFrame } = render(<DeployStatus messages={messages} isComplete={false} hasError={false} />);
+
+      // Should show the latest progress
+      expect(lastFrame()).toContain('7/10');
+    });
+  });
 
-    // Should still show the deploying text but no resource lines
-    expect(lastFrame()).toContain('Deploying to AWS');
+  describe('error state details', () => {
+    it('shows last 3 resource events on failure', () => {
+      const messages = [
+        makeResourceMsg('Lambda::Function', 'CREATE_COMPLETE'),
+        makeResourceMsg('IAM::Role', 'CREATE_COMPLETE'),
+        makeResourceMsg('S3::Bucket', 'CREATE_COMPLETE'),
+        makeResourceMsg('DynamoDB::Table', 'CREATE_FAILED'),
+      ];
+
+      const { lastFrame } = render(<DeployStatus messages={messages} isComplete={true} hasError={true} />);
+      const frame = lastFrame()!;
+
+      // Last 3 of 4 resource events should show
+      expect(frame).toContain('IAM::Role');
+      expect(frame).toContain('S3::Bucket');
+      expect(frame).toContain('DynamoDB::Table');
+    });
   });
 });