Test Automation UI Generator

Project Overview

A React-based web application for generating test automation code based on the Page Object Model. The application allows users to connect to GitHub repositories, select files and classes, and generate either C# or TypeScript test code.

Key Features

• GitHub repository connection and validation
• Multi-step modal workflow
• File and directory navigation
• Test class selection
• Code generation with language options
• Clipboard integration

UI Components Structure

Main Page

• Simple landing page with centered content
• Large primary button labeled "Open Generator"
• Minimal styling with focus on the main action

Modal System

• Progressive disclosure through 5 distinct steps
• Progress indicator at the top
• Consistent navigation (Back/Next buttons)
• Modal size: 850px width, 700px height

Step 1: GitHub Configuration

Components:

• Two input fields:
  • GitHub URL (text input)
  • GitHub Token (password input)
• Validation message area
  • Success state (green background)
  • Error state (red background)
• Repository count display
• Next button (disabled until validation passes)

Step 2: Repository & App Selection

Components:

• Two scrollable lists side by side:
  • Left: Repository list
  • Right: Apps/Directories list
• Each list should:
  • Height: 400px
  • Width: 350px
  • Show scrollbar when content overflows
  • Highlight selected item
• Next button (disabled until both selections are made)

Step 3: Directory & File Selection

Components:

• Two scrollable lists (same dimensions as Step 2):
  • Left: Directory list
  • Right: File list
• Selection indicators
• File preview area (optional)
• Next button (disabled until selections are made)

Step 4: Test Class Selection

Components:

• Selected file display at top
• Large scrollable list (770px width) showing:
  • Available test classes
  • Class descriptions (if available)
• Selection highlighting
• Next button (disabled until class is selected)

Step 5: Code Generation

Components:

• Selected class display
• Action selection dropdown
• Optional value input field
• Language selection:
  • Radio buttons for C# and TypeScript
• Generate button
• Code output area:
  • Monospace font
  • Copy to clipboard button
  • Syntax highlighting (optional)

Technical Requirements

State Management

• Track selections across all steps
• Maintain GitHub connection state
• Handle loading states
• Manage validation states

API Integration

Required endpoints:

• GitHub repository validation
• Repository listing
• File system navigation
• Code generation

Data Models

interface GitHubConfig {
  url: string;
  token: string;
  isValid: boolean;
  repoCount: number;
}

interface Repository {
  name: string;
  path: string;
  apps: App[];
}

interface App {
  name: string;
  directories: Directory[];
}

interface Directory {
  path: string;
  files: File[];
}

interface TestClass {
  name: string;
  description?: string;
  actions: string[];
}

interface CodeGenerationConfig {
  language: 'csharp' | 'typescript';
  className: string;
  action: string;
  value?: string;
}

Styling Guidelines

• Use modern, clean UI
• Consistent spacing and alignment
• Clear visual hierarchy
• Responsive design not required (fixed width modals)
• Color scheme:
  • Primary: #4CAF50 (green)
  • Background: #ffffff
  • Text: #000000
  • Disabled: #cccccc

Error Handling

• Clear error messages for:
  • GitHub connection failures
  • Invalid selections
  • Code generation errors
• Loading states for async operations
• Graceful fallbacks

Accessibility

• Keyboard navigation support
• ARIA labels for interactive elements
• Focus management in modals
• High contrast text
• Screen reader friendly progress indicators

Implementation Notes

• Use React hooks for state management
• Implement modal system using React portals
• Handle GitHub authentication securely
• Implement proper error boundaries
• Use TypeScript for type safety
• Consider using shadcn/ui for components

User Flow

1. User clicks "Open Generator" button
2. GitHub configuration modal opens
3. After successful validation, proceed to repository selection
4. Select repository -> shows available apps/directories
5. Select directory -> shows available files
6. Select file -> shows available test classes
7. Configure and generate code
8. Copy code to clipboard
9. Close modal or start new generation

Nice to Have Features

• Dark mode support
• Code preview with syntax highlighting
• Auto-complete for action selection
• Recent selections history
• Batch code generation
• Save configurations for reuse
• Export generated code to file