Auto-fixer.md

Auto-Fixer Script

Introduction

The Auto-Fixer script is a powerful tool designed to automatically test and fix React components in a project. It leverages the London school of Test-Driven Development (TDD) and uses an AI-powered code assistant to iteratively improve failing tests and component code.

Features

• Automatically runs tests for specified React components
• Analyzes test failures and error messages
• Uses AI to suggest and implement fixes for failing tests and components
• Supports fixing a single component or all components in a project
• Implements an iterative approach with a configurable maximum number of attempts
• Provides detailed output and logging of the fixing process

Usage

To use the Auto-Fixer script, run it from the command line with the following syntax:

./auto-fixer.sh [OPTIONS] [test_name]

Options:

• --all: Fix all tests in the components directory
• --help: Display the help message

Arguments:

• test_name: Name of the specific test to fix (optional if --all is used)

Examples:

./auto-fixer.sh AgentNetwork     # Fix tests for AgentNetwork
./auto-fixer.sh --all            # Fix all tests in components

Configuration

The Auto-Fixer script can be configured by modifying the following variables in the script:

• max_iterations: Maximum number of fix attempts per component (default: 5)
• test_file: Path to the test file (default: "src/components/$test_name/$test_name.test.tsx")
• component_file: Path to the component file (default: "src/components/$test_name/$test_name.tsx")

To use the AI-powered code assistant, ensure you have set up the following:

1. Install aider.chat:

   pip install aider-chat
   

2. Create a .env file in the project root with your AI model configuration:

   OPENAI_API_KEY=your_api_key_here
   OPENAI_MODEL=gpt-4-1106-preview  # or another compatible model
   

   Alternatively, you can use other LiteLLM models or Sonnet 3.5 by adjusting the OPENAI_MODEL value accordingly.

The script uses the configured AI model in "architect mode" to analyze test failures and suggest fixes. It follows the London school of TDD by focusing on the behavior and interactions of components, using mocks and stubs to isolate the component under test.

auto-fixer.sh

#!/bin/bash

# Function to display help message
function show_help {
  echo "Usage: $0 [OPTIONS] [test_name]"
  echo ""
  echo "Options:"
  echo "  --all       Fix all tests in components"
  echo "  --help      Display this help message"
  echo ""
  echo "Arguments:"
  echo "  test_name   Name of the specific test to fix (optional if --all is used)"
  echo ""
  echo "Examples:"
  echo "  $0 AgentNetwork     # Fix tests for AgentNetwork"
  echo "  $0 --all            # Fix all tests in components"
  exit 0
}

# Initialize variables
all_tests=false
test_name=""

# Parse arguments
while [[ $# -gt 0 ]]; do
  case $1 in
    --all)
      all_tests=true
      shift # Remove --all from processing
      ;;
    --help)
      show_help
      ;;
    -*|--*) # Unknown option
      echo "Error: Unknown option $1"
      show_help
      ;;
    *) # Test name
      if [ -n "$test_name" ]; then
        echo "Error: Multiple test names provided. Please provide only one test name or use --all."
        show_help
      fi
      test_name="$1"
      shift # Remove test_name from processing
      ;;
  esac
done

if [ "$all_tests" = true ] && [ -n "$test_name" ]; then
  echo "Error: Cannot specify a test name and --all at the same time."
  exit 1
fi

if [ "$all_tests" = false ] && [ -z "$test_name" ]; then
  echo "Error: Please provide a test name or use --all."
  echo "Use --help for usage information."
  exit 1
fi

echo "Starting test and fix loop..."

original_dir=$(pwd)
max_iterations=5

if [ "$all_tests" = true ]; then
  # Get a list of all test names in src/components
  test_names=($(ls src/components))
else
  test_names=("$test_name")
fi

for test_name in "${test_names[@]}"; do
  # Check if the test files exist
  test_file="src/components/$test_name/$test_name.test.tsx"
  component_file="src/components/$test_name/$test_name.tsx"

  if [ ! -f "$test_file" ] || [ ! -f "$component_file" ]; then
    echo "Skipping $test_name: Test file or component file does not exist."
    continue
  fi

  iteration=0
  while [ $iteration -lt $max_iterations ]; do
    echo "Testing component: $test_name"
    echo "Iteration $((iteration+1)) of $max_iterations"
    echo "Running test command: cd src && CI=true npm test $test_name -- --run --reporter verbose"

    # Create a temporary file to store the test output
    test_output_file=$(mktemp)

    # Run the test, capture output and exit code, and display output in real-time
    (
      cd src
      CI=true npm test "$test_name" -- --run --reporter verbose 2>&1
      echo $? > "$original_dir/exit_code.tmp"
    ) | tee "$test_output_file"

    # Read the exit code
    test_exit_code=$(cat exit_code.tmp)
    rm exit_code.tmp

    # Read the test output from the file
    test_output=$(cat "$test_output_file")
    rm "$test_output_file"

    # Ensure we're back in the original directory
    cd "$original_dir"

    if [ "$test_exit_code" -eq 0 ]; then
      echo "Test passed successfully for component $test_name!"
      break
    else
      echo "Test failed for component $test_name. Attempting to fix..."

      # Extract specific error messages from the test output
      error_messages=$(echo "$test_output" | grep -E 'AssertionError|FAIL' -A 5)

      # Prepare a detailed message for Aider
      aider_message="The test 'npm test $test_name' in the src directory failed with the following errors:

$error_messages

From the test output, some tests are failing.

Please analyze and suggest specific fixes for the following files:

1. src/components/$test_name/$test_name.test.tsx
2. src/components/$test_name/$test_name.tsx

Focus on these potential issues:

- Asynchronous operations not properly handled in tests
- Incorrect mocking of dependencies
- Improper error handling in the component
- Incorrect use of React Testing Library methods

Provide specific code changes to fix the failing tests and ensure that error messages are displayed correctly in both the component and the tests."

      # Run Aider with the detailed message
      aider --message "$aider_message" --yes-always \
        "src/components/$test_name/$test_name.test.tsx" \
        "src/components/$test_name/$test_name.tsx"

      echo "Aider execution completed. Retrying test..."
    fi

    ((iteration++))
  done

  if [ $iteration -ge $max_iterations ]; then
    echo "Maximum iterations reached for component $test_name. Please review the changes and errors manually."
  fi

done

echo "Test and fix loop completed."

Test-creator.md

Test Creator Script

The Test Creator script is an automated tool designed to generate unit tests for React components. It leverages AI-powered insights to create comprehensive test suites, saving developers time and ensuring consistent test coverage across components.

Features

• Automatically generates unit tests for React components in the ./src directory
• Uses Jest and React Testing Library for robust testing
• Ensures coverage for props, state changes, event handlers, and edge cases
• Supports generating tests for a single component or all components in the project
• Skips components that already have existing test files to prevent overwriting
• Provides detailed output and logging of the test creation process

Usage

To use the Test Creator script, run it from the command line with the following syntax:

./test-creator.sh [OPTIONS] [component_name]

Options:

• --all: Generate tests for all components in ./src
• --help: Display the help message

Arguments:

• component_name: Name of the specific component to create tests for (optional if --all is used)

Examples:

./test-creator.sh ButtonComponent    # Create unit tests for ButtonComponent
./test-creator.sh --all              # Create unit tests for all components in ./src

Configuration

To use the AI-powered code assistant for test generation, ensure you have set up the following:

1. Install aider-chat:

   pip install aider-chat
   

2. Create a .env file in the project root with your AI model configuration:

   OPENAI_API_KEY=your_api_key_here
   OPENAI_MODEL=gpt-4-1106-preview  # or another compatible model
   

   You can use other LiteLLM models or Sonnet 3.5 by adjusting the OPENAI_MODEL value accordingly.

How It Works

1. The script identifies the target component(s) in the ./src directory.
2. For each component, it checks if a test file already exists to avoid overwriting.
3. If no test file exists, it uses the AI-powered assistant to generate a comprehensive unit test.
4. The generated test file is saved in the same directory as the component, with a .test.tsx extension.
5. The script provides progress updates and the locations of newly created test files.

Notes

• Component files should be located in the ./src directory and use the .tsx extension.
• The script assumes a standard structure for React components.
• For complex components or edge cases, manual review and adjustment of generated tests may be necessary.

Benefits

• Saves time on repetitive test writing tasks
• Ensures consistent test coverage across components
• Leverages AI to create comprehensive test suites
• Simplifies the process of maintaining high code quality through testing

Start using the Test Creator script today to automate your test creation process and focus on building great React components!

Test-creator.sh

#!/bin/bash

# Function to display help message
function show_help {
  echo "Usage: $0 [OPTIONS] [component_name]"
  echo ""
  echo "Options:"
  echo "  --all       Generate tests for all components in ./src"
  echo "  --help      Display this help message"
  echo ""
  echo "Arguments:"
  echo "  component_name   Name of the specific component to create tests for (optional if --all is used)"
  echo ""
  echo "Examples:"
  echo "  $0 ButtonComponent     # Create unit tests for ButtonComponent"
  echo "  $0 --all               # Create unit tests for all components in ./src"
  exit 0
}

# Initialize variables
all_components=false
component_name=""

# Parse arguments
while [[ $# -gt 0 ]]; do
  case $1 in
    --all)
      all_components=true
      shift # Remove --all from processing
      ;;
    --help)
      show_help
      ;;
    -*|--*) # Unknown option
      echo "Error: Unknown option $1"
      show_help
      ;;
    *) # Component name
      if [ -n "$component_name" ]; then
        echo "Error: Multiple component names provided. Please provide only one component name or use --all."
        show_help
      fi
      component_name="$1"
      shift # Remove component_name from processing
      ;;
  esac
done

if [ "$all_components" = true ] && [ -n "$component_name" ]; then
  echo "Error: Cannot specify a component name and --all at the same time."
  exit 1
fi

if [ "$all_components" = false ] && [ -z "$component_name" ]; then
  echo "Error: Please provide a component name or use --all."
  echo "Use --help for usage information."
  exit 1
fi

echo "Starting test creation process..."

original_dir=$(pwd)

if [ "$all_components" = true ]; then
  # Get a list of all component names in ./src
  component_names=($(find ./src -type f -name '*.tsx' | sed 's|.*/||' | sed 's|\.tsx||'))
else
  component_names=("$component_name")
fi

for component_name in "${component_names[@]}"; do
  component_file="./src/$component_name.tsx"
  test_file="./src/$component_name.test.tsx"

  if [ ! -f "$component_file" ]; then
    echo "Skipping $component_name: Component file does not exist."
    continue
  fi

  if [ -f "$test_file" ]; then
    echo "Skipping $component_name: Test file already exists."
    continue
  fi

  echo "Creating unit tests for component: $component_name"

  aider_message="Create a unit test file for the React component located at $component_file. 

Key requirements:
- Use Jest and React Testing Library.
- Test rendering and interaction logic, including props, state changes, and event handlers.
- Ensure the test covers edge cases and verifies expected outputs.
- Save the test file at $test_file."

  # Run Aider to generate the test file
  aider --message "$aider_message" --yes-always \
    "$component_file" \
    "$test_file"

  echo "Test file created for component: $component_name at $test_file."
done

echo "Test creation process completed."