Bug Fixing Workflow

Title: Editor crashes when selecting text in empty document

Steps to reproduce:
1. Create new episode
2. Open PRF editor (empty)
3. Click and drag to select text
4. Editor crashes with: "Cannot read property 'text' of null"

Expected: Should handle empty selection gracefully
Actual: Editor crashes

// src/components/editor/TipTapEditor.test.tsx
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { describe, it, expect } from 'vitest'
import { TipTapEditor } from './TipTapEditor'

describe('TipTapEditor', () => {
  it('should handle selection in empty document', async () => {
    const { container } = render(
      <TipTapEditor initialContent="" />
    )
    
    const editor = container.querySelector('.ProseMirror')
    expect(editor).toBeInTheDocument()
    
    // Simulate text selection
    await userEvent.click(editor!)
    await userEvent.keyboard('{Shift>}{ArrowRight}{/Shift}')
    
    // Should not crash
    expect(editor).toBeInTheDocument()
  })
})

npm run test:run -- TipTapEditor.test.tsx

# ❌ FAIL: TypeError: Cannot read property 'text' of null

// src/components/editor/TipTapEditor.tsx
import { useEditor, EditorContent } from '@tiptap/react'

export function TipTapEditor({ initialContent }: Props) {
  const editor = useEditor({
    extensions: [StarterKit],
    content: initialContent,
    onSelectionUpdate: ({ editor }) => {
      const { from, to } = editor.state.selection
      
      // ✅ Fix: Check if selection exists and has content
      if (from === to) return  // Empty selection
      
      const text = editor.state.doc.textBetween(from, to)
      if (!text) return  // No text in selection
      
      // Safe to use text now
      handleSelection(text)
    }
  })
  
  return <EditorContent editor={editor} />
}

npm run test:run -- TipTapEditor.test.tsx

# ✅ PASS: All tests passed

// src/utils/parseTranscript.test.ts
import { describe, it, expect } from 'vitest'
import { parseTranscript } from './parseTranscript'

describe('parseTranscript', () => {
  it('should handle empty input', () => {
    expect(parseTranscript('')).toEqual([])
  })
  
  it('should handle malformed timestamps', () => {
    const input = '[invalid] Speaker: Text'
    expect(parseTranscript(input)).toEqual([])
  })
  
  it('should parse valid transcript', () => {
    const input = '[00:00:10] John: Hello world'
    const result = parseTranscript(input)
    
    expect(result).toEqual([{
      timestamp: '00:00:10',
      speaker: 'John',
      text: 'Hello world'
    }])
  })
})

// functions/api/generate/prf.test.ts
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { onRequestPost } from './prf'
import * as ai from '@/services/ai'

vi.mock('@/services/ai')

describe('POST /api/generate/prf', () => {
  beforeEach(() => {
    vi.clearAllMocks()
  })
  
  it('should handle AI service timeout', async () => {
    vi.spyOn(ai, 'generatePRF').mockRejectedValue(
      new Error('Request timeout')
    )
    
    const request = new Request('http://localhost/api/generate/prf', {
      method: 'POST',
      body: JSON.stringify({ transcript: 'test' })
    })
    
    const response = await onRequestPost({ request, env: mockEnv })
    
    expect(response.status).toBe(504)  // Gateway timeout
    const data = await response.json()
    expect(data.error).toContain('timeout')
  })
})

// src/components/EpisodeList.test.tsx
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { describe, it, expect, vi } from 'vitest'
import { EpisodeList } from './EpisodeList'
import * as api from '@/services/api'

vi.mock('@/services/api')

describe('EpisodeList', () => {
  it('should display error when API fails', async () => {
    vi.spyOn(api, 'fetchEpisodes').mockRejectedValue(
      new Error('Network error')
    )
    
    render(<EpisodeList />)
    
    await waitFor(() => {
      expect(screen.getByText(/error loading episodes/i)).toBeInTheDocument()
    })
  })
  
  it('should retry on click', async () => {
    const fetchSpy = vi.spyOn(api, 'fetchEpisodes')
      .mockRejectedValueOnce(new Error('Network error'))
      .mockResolvedValueOnce([])
    
    render(<EpisodeList />)
    
    await waitFor(() => {
      expect(screen.getByText(/error/i)).toBeInTheDocument()
    })
    
    await userEvent.click(screen.getByText(/retry/i))
    
    expect(fetchSpy).toHaveBeenCalledTimes(2)
  })
})

// ❌ Bug: Doesn't check for null
function formatGuestName(guest) {
  return guest.firstName + ' ' + guest.lastName
}

// ✅ Fix: Add null checks
function formatGuestName(guest: Guest | null) {
  if (!guest) return 'Unknown Guest'
  return `${guest.firstName || ''} ${guest.lastName || ''}`.trim() || 'Unknown Guest'
}

// ✅ Test
it('should handle null guest', () => {
  expect(formatGuestName(null)).toBe('Unknown Guest')
})

// ❌ Bug: Race condition
function useEpisode(id: string) {
  const [episode, setEpisode] = useState(null)
  
  useEffect(() => {
    fetchEpisode(id).then(setEpisode)
  }, [id])
  
  return episode
}

// ✅ Fix: Cleanup and cancellation
function useEpisode(id: string) {
  const [episode, setEpisode] = useState(null)
  
  useEffect(() => {
    let cancelled = false
    
    fetchEpisode(id).then(data => {
      if (!cancelled) setEpisode(data)
    })
    
    return () => { cancelled = true }
  }, [id])
  
  return episode
}

// ❌ Bug: No validation
function createEpisode(data) {
  return sanity.create({ _type: 'episode', ...data })
}

// ✅ Fix: Validate input
function createEpisode(data: Partial<Episode>) {
  if (!data.episodeNumber) {
    throw new Error('Episode number is required')
  }
  if (data.episodeNumber < 1) {
    throw new Error('Episode number must be positive')
  }
  
  return sanity.create({ _type: 'episode', ...data })
}

// ✅ Test
it('should reject invalid episode number', () => {
  expect(() => createEpisode({ episodeNumber: 0 }))
    .toThrow('Episode number must be positive')
})