CodebuffAI
diff --git a/‎cli/src/__tests__/e2e/first-time-login.test.ts‎
Lines changed: 316 additions & 0 deletions b/‎cli/src/__tests__/e2e/first-time-login.test.ts‎
Lines changed: 316 additions & 0 deletions
@@ -0,0 +1,316 @@
+import { describe, test, expect, beforeEach, afterEach, mock } from 'bun:test'
+import { render, waitFor, screen } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import React from 'react'
+import fs from 'fs'
+import path from 'path'
+import os from 'os'
+
+import { App } from '../../chat'
+import type { User } from '../../utils/auth'
+
+/**
+ * E2E tests for first-time login flow (P0 - Critical Path)
+ * 
+ * This is the most critical user journey - a new user installing and using
+ * Codebuff CLI for the first time. This flow must be bulletproof as it's the
+ * first impression and determines whether users can use the product at all.
+ * 
+ * Complete flow being tested:
+ * 1. User starts CLI for the first time (no credentials exist)
+ * 2. CLI shows login modal with clear instructions
+ * 3. User presses Enter key to initiate login
+ * 4. Browser opens automatically with OAuth login page
+ * 5. User completes login in browser (Google/GitHub OAuth)
+ * 6. CLI polls for login status and detects success within 5 seconds
+ * 7. Credentials are saved to ~/.config/manicode-dev/credentials.json
+ * 8. Login modal closes automatically
+ * 9. Chat interface becomes available
+ * 10. User can send their first message successfully
+ * 
+ * This test must verify:
+ * - Zero friction for new users
+ * - Clear UI feedback at each step
+ * - Fast detection of browser login (< 5 seconds)
+ * - Automatic transition to chat interface
+ * - No manual intervention required after Enter press
+ */
+
+const TEST_USER: User = {
+  id: 'new-user-123',
+  name: 'New User',
+  email: 'newuser@example.com',
+  authToken: 'fresh-session-token-abc',
+  fingerprintId: 'first-time-fingerprint',
+  fingerprintHash: 'first-time-hash',
+}
+
+describe('First-Time Login Flow E2E (P0)', () => {
+  let queryClient: QueryClient
+  let tempConfigDir: string
+
+  beforeEach(() => {
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    })
+    
+    // Create temp directory for isolated test environment
+    tempConfigDir = fs.mkdtempSync(path.join(os.tmpdir(), 'manicode-test-'))
+    
+    // TODO: Mock getConfigDir to use tempConfigDir
+    // TODO: Ensure no credentials exist (clean slate)
+    // TODO: Mock fetch for all API endpoints
+    // TODO: Use fake timers for polling control
+  })
+
+  afterEach(() => {
+    queryClient.clear()
+    if (fs.existsSync(tempConfigDir)) {
+      fs.rmSync(tempConfigDir, { recursive: true, force: true })
+    }
+    mock.restore()
+  })
+
+  describe('Complete Happy Path - First-Time Login', () => {
+    test('should complete entire first-time login flow from CLI start to first message', async () => {
+      // This is THE most critical test - if this passes, basic login works
+      
+      // STEP 1: Start CLI without any credentials
+      // TODO: Verify no credentials file exists in temp config dir
+      // TODO: Verify CODEBUFF_API_KEY environment variable is not set
+      // TODO: Render App component with requireAuth={true}
+      
+      // STEP 2: Verify login modal is shown with clear instructions
+      // TODO: Verify LoginModal component is rendered
+      // TODO: Verify modal shows "Press Enter to log in" message
+      // TODO: Verify Codebuff logo is displayed (if terminal is large enough)
+      // TODO: Verify no errors are shown
+      // TODO: Verify chat interface is NOT accessible yet
+      
+      // STEP 3: User presses Enter to initiate login
+      // TODO: Mock fetch for /api/auth/cli/code endpoint
+      // TODO: Mock response: { loginUrl: 'https://codebuff.com/login?code=abc123', fingerprintHash: 'hash123', expiresAt: '...' }
+      // TODO: Mock open() function (browser opening)
+      // TODO: Simulate Enter key press on login modal
+      // TODO: Wait for URL fetch to complete
+      
+      // STEP 4: Verify browser opens with login URL
+      // TODO: Verify open() was called exactly once
+      // TODO: Verify open() received the login URL from API response
+      // TODO: Verify login URL is displayed in modal (as backup for manual copy)
+      
+      // STEP 5: Simulate user completing login in browser
+      // TODO: Mock fetch for /api/auth/cli/status endpoint
+      // TODO: First 2 polls: return { status: 401 } (user still logging in)
+      // TODO: Third poll: return { status: 200, user: TEST_USER }
+      // TODO: Start polling by advancing fake timers
+      // TODO: Advance by 5 seconds (first poll - 401)
+      // TODO: Advance by 5 seconds (second poll - 401)
+      // TODO: Advance by 5 seconds (third poll - success with user data)
+      
+      // STEP 6: Verify CLI detects login within 5 seconds of completion
+      // TODO: Verify polling detected user data
+      // TODO: Verify total time from browser login to detection is ~5 seconds
+      // TODO: Verify loginMutation was triggered with TEST_USER data
+      
+      // STEP 7: Verify credentials are saved to file system
+      // TODO: Wait for saveUserCredentials to complete
+      // TODO: Read credentials file from temp config dir
+      // TODO: Verify file exists at correct path (manicode-dev/credentials.json)
+      // TODO: Parse JSON and verify it contains:
+      //   - id: TEST_USER.id
+      //   - name: TEST_USER.name
+      //   - email: TEST_USER.email
+      //   - authToken: TEST_USER.authToken
+      //   - fingerprintId: TEST_USER.fingerprintId
+      //   - fingerprintHash: TEST_USER.fingerprintHash
+      
+      // STEP 8: Verify modal closes automatically
+      // TODO: Wait for onLoginSuccess callback to complete
+      // TODO: Verify LoginModal is no longer in render tree
+      // TODO: Verify no loading states are shown
+      // TODO: Verify no errors occurred
+      
+      // STEP 9: Verify chat interface becomes available
+      // TODO: Verify chat input is rendered and enabled
+      // TODO: Verify chat interface is visible (not hidden)
+      // TODO: Verify user state is populated with TEST_USER data
+      // TODO: Verify isAuthenticated is true
+      
+      // STEP 10: Verify user can send first message successfully
+      // TODO: Mock WebSocket or message sending endpoint
+      // TODO: Simulate typing a message in input
+      // TODO: Simulate Enter key to send message
+      // TODO: Verify message appears in chat history
+      // TODO: Verify message was sent with correct auth token
+      
+      expect(true).toBe(false) // Remove when implemented
+    })
+  })
+
+  describe('Step-by-Step Verification', () => {
+    // Break down the happy path into individual testable steps
+    
+    test('should start with no credentials and show login modal', async () => {
+      // TODO: Verify no credentials file exists
+      // TODO: Render App
+      // TODO: Verify LoginModal is shown
+      // TODO: Verify requireAuth prop triggers modal
+      expect(true).toBe(false)
+    })
+
+    test('should show clear login instructions in modal', async () => {
+      // TODO: Render App with no credentials
+      // TODO: Verify modal shows "Press Enter to log in"
+      // TODO: Verify instructions are clear and actionable
+      // TODO: Verify no confusing error messages
+      expect(true).toBe(false)
+    })
+
+    test('should fetch login URL when Enter is pressed', async () => {
+      // TODO: Mock /api/auth/cli/code endpoint
+      // TODO: Render modal
+      // TODO: Press Enter
+      // TODO: Verify fetch was called to correct endpoint
+      // TODO: Verify request includes fingerprint data
+      expect(true).toBe(false)
+    })
+
+    test('should open browser automatically with fetched login URL', async () => {
+      // TODO: Mock URL fetch to return login URL
+      // TODO: Mock open() function
+      // TODO: Trigger login
+      // TODO: Wait for URL fetch
+      // TODO: Verify open() called with correct URL
+      // TODO: Verify browser opens without user intervention
+      expect(true).toBe(false)
+    })
+
+    test('should display login URL in modal as backup', async () => {
+      // TODO: Fetch login URL
+      // TODO: Verify URL is displayed in modal
+      // TODO: Verify URL is clickable for copying
+      // TODO: This is fallback if browser doesn't open
+      expect(true).toBe(false)
+    })
+
+    test('should start polling for login status after URL generation', async () => {
+      // TODO: Mock status endpoint
+      // TODO: Generate login URL
+      // TODO: Verify polling starts
+      // TODO: Verify polling interval is 5 seconds
+      // TODO: Verify correct query parameters
+      expect(true).toBe(false)
+    })
+
+    test('should detect successful login within 5 seconds', async () => {
+      // TODO: Set up polling
+      // TODO: Mock first 2 polls as 401
+      // TODO: Mock third poll as success
+      // TODO: Advance timers
+      // TODO: Verify detection happens on third poll
+      // TODO: Verify total time is ~10 seconds (2 polls + success)
+      expect(true).toBe(false)
+    })
+
+    test('should save credentials immediately after login detection', async () => {
+      // TODO: Complete login flow up to detection
+      // TODO: Spy on saveUserCredentials
+      // TODO: Verify function is called
+      // TODO: Verify credentials file is created
+      // TODO: Verify file contains correct data
+      expect(true).toBe(false)
+    })
+
+    test('should close modal automatically without user action', async () => {
+      // TODO: Complete login flow
+      // TODO: Wait for all async operations
+      // TODO: Verify modal is removed from DOM
+      // TODO: Verify no manual close action required
+      expect(true).toBe(false)
+    })
+
+    test('should show chat interface immediately after modal closes', async () => {
+      // TODO: Complete login flow
+      // TODO: Verify chat interface is rendered
+      // TODO: Verify input is focused and ready
+      // TODO: Verify no loading delay
+      expect(true).toBe(false)
+    })
+
+    test('should allow sending first message successfully', async () => {
+      // TODO: Complete login
+      // TODO: Mock message send endpoint
+      // TODO: Type and send message
+      // TODO: Verify message appears in UI
+      // TODO: Verify auth token was used
+      expect(true).toBe(false)
+    })
+  })
+
+  describe('User Experience Validation', () => {
+    test('should complete entire flow without any manual intervention after Enter', async () => {
+      // TODO: Start from no credentials
+      // TODO: Press Enter (only user action)
+      // TODO: Mock browser login completion
+      // TODO: Verify everything else is automatic
+      // TODO: Verify modal closes without clicking
+      // TODO: Verify chat opens without navigating
+      expect(true).toBe(false)
+    })
+
+    test('should provide visual feedback at each step of login', async () => {
+      // TODO: Track UI changes throughout flow
+      // TODO: Verify "Fetching login URL..." message
+      // TODO: Verify "Waiting for login..." message
+      // TODO: Verify "Login successful!" message
+      // TODO: No silent gaps in feedback
+      expect(true).toBe(false)
+    })
+
+    test('should not show any confusing error messages during normal flow', async () => {
+      // TODO: Complete entire login flow
+      // TODO: Verify no error messages are shown
+      // TODO: Verify 401 responses during polling don't show as errors
+      // TODO: Only show success feedback
+      expect(true).toBe(false)
+    })
+
+    test('should transition smoothly from modal to chat without flashing', async () => {
+      // TODO: Complete login
+      // TODO: Monitor UI transitions
+      // TODO: Verify no flickering or blank screens
+      // TODO: Verify smooth modal fade/close
+      // TODO: Verify chat appears immediately
+      expect(true).toBe(false)
+    })
+  })
+
+  describe('Performance Requirements', () => {
+    test('should detect browser login within 5 seconds of completion', async () => {
+      // TODO: Complete browser login (mock)
+      // TODO: Measure time until CLI detects it
+      // TODO: Verify detection time <= 5 seconds
+      // TODO: This is critical for good UX
+      expect(true).toBe(false)
+    })
+
+    test('should save credentials to disk in less than 1 second', async () => {
+      // TODO: Trigger credential save
+      // TODO: Measure time to write file
+      // TODO: Verify write time < 1000ms
+      // TODO: Fast saves = responsive UI
+      expect(true).toBe(false)
+    })
+
+    test('should render chat interface in less than 500ms after login', async () => {
+      // TODO: Complete login
+      // TODO: Measure time from modal close to chat render
+      // TODO: Verify render time < 500ms
+      expect(true).toBe(false)
+    })
+  })
+})