autosite / test-plan.md
samihalawa's picture
Sync changes - automated commit
144940a

AutoSite Application Test Plan

Overview

This test plan outlines a comprehensive approach to debug and verify the functionality of the AutoSite application, with particular focus on the AskAI component and its integration with the backend.

Prerequisites

  1. Environment setup
    • Create a .env file based on .env.example
    • Ensure DEFAULT_HF_TOKEN is set with a valid Hugging Face API token
    • Verify OAUTH_CLIENT_ID and OAUTH_CLIENT_SECRET if testing authentication

Test Cases

1. Basic Application Functionality

  • Verify UI Components

    • Editor panel renders correctly
    • Preview panel displays HTML content
    • Resizer works for adjusting panel sizes
    • Responsive design works on different screen sizes
  • Code Editor

    • HTML editing works correctly
    • Syntax highlighting functions
    • Error validation works

2. AskAI Component Testing

2.1 UI Elements

  • Input Field

    • Placeholder text changes after first query
    • Disabled state works during AI processing
    • Enter key triggers AI request
  • Progress Indicators

    • Progress bar appears and updates during streaming
    • Response mode indicator shows correct mode (diff/full)
    • Loading animation displays correctly
    • Success animation plays after completion

2.2 API Integration

  • Full HTML Mode

    • Initial requests generate complete HTML
    • Streaming updates preview in real-time
    • Final HTML is properly formatted
    • Success sound plays on completion
  • Diff Mode

    • Follow-up requests use diff mode
    • Diffs are correctly sent to server
    • Server applies diffs correctly
    • Original HTML is preserved if diff application fails

2.3 Error Handling

  • Authentication Errors

    • Login modal appears when rate limit exceeded
    • Error messages display correctly
  • Network Errors

    • Appropriate error handling for failed requests
    • UI recovers gracefully from errors
  • Malformed Responses

    • Application handles incomplete HTML
    • Application handles malformed diffs

3. Backend Testing

3.1 API Endpoints

  • /api/ask-ai

    • Correctly processes different prompt types
    • Rate limiting works as expected
    • Streaming response works correctly
    • Sets appropriate response headers
  • /api/apply-diffs

    • Correctly parses diff blocks
    • Applies changes accurately
    • Handles edge cases (empty blocks, malformed blocks)
    • Returns appropriate error messages

3.2 Authentication

  • HuggingFace OAuth
    • Login flow works correctly
    • Token storage and retrieval works
    • User information is correctly fetched

Visual Testing

UI Components

  • Verify all UI elements render correctly across different screen sizes
  • Check animations and transitions
  • Verify loading states and progress indicators

Accessibility

  • Verify keyboard navigation
  • Check color contrast
  • Verify screen reader compatibility

Performance Testing

  • Measure response time for AI requests
  • Verify memory usage during streaming
  • Check for UI freezing during intensive operations

Security Testing

  • Verify token handling
  • Check for exposed secrets
  • Verify rate limiting effectiveness

Recommendations

  1. Environment Setup

    • Create a comprehensive setup guide for developers
    • Document all required environment variables
  2. Error Handling

    • Enhance error messages for common setup issues
    • Add more detailed logging for debugging
  3. Testing Tools

    • Implement automated tests for critical paths
    • Create a test harness for simulating AI responses
  4. Documentation

    • Document the different response modes
    • Create troubleshooting guides for common issues