End-to-End Data Flow

Relevant source files

The following files were used as context for generating this wiki page:

• testgen/src/pages/Dashboard.tsx
• testgen/src/lib/backend.ts
• testgen-backend/main.go
• testgen/src/components/TestRunner.tsx
• testgen/src/components/ResultsDisplay.tsx
• README.md
• testgen/src/lib/github.ts

This document outlines the end-to-end data flow for the TestGen AI application, from user input to the final display of test results. The system is designed to take a GitHub repository URL, analyze its code, generate test cases using Google's Gemini AI, execute them, and present the results. The architecture involves a React frontend, a Go backend (and a client-side alternative), and integrations with the GitHub and Gemini APIs.

The overall workflow can be broken down into four main stages: Repository Analysis, Code Context Generation, AI-Powered Test Generation, and Test Execution & Results Display. Each stage processes data and passes it to the next, forming a pipeline that transforms source code into actionable test insights.

This diagram provides a high-level overview of the system's architecture and the interaction between its components.

1. Repository Analysis

The process begins when a user enters a GitHub repository URL into the input field on the Dashboard page and initiates the cloning process. The system supports two methods for fetching repository code: a Go backend that performs a git clone, and a client-side implementation that uses the GitHub API directly.

Sources: testgen/src/pages/Dashboard.tsx:66-112, testgen-backend/main.go:303-376, testgen/src/lib/backend.ts:223-306

1.1. User Interaction and URL Parsing

1. The user provides a URL in the repo-url input field in Dashboard.tsx.
2. Clicking the "fetch content" button triggers the handleCloneRepository function.
3. The URL is parsed by parseGitHubUrl to extract the repository owner and name. This function is implemented in both the Go backend and the client-side TypeScript library.

Sources: testgen/src/pages/Dashboard.tsx:76-84, testgen-backend/main.go:110-143, testgen/src/lib/backend.ts:92-121

1.2. Code Fetching Mechanisms

Go Backend (/api/clone-repo)

The Go backend provides a robust, server-side cloning mechanism.

This diagram shows the sequence of operations when the Go backend handles repository cloning.
Sources: testgen-backend/main.go:303-376

Client-Side (ClientBackend.ts)

The client-side approach avoids the need for a dedicated server by interacting with the GitHub API directly from the browser.

This diagram illustrates the client-side flow for fetching repository files via the GitHub API.
Sources: testgen/src/lib/backend.ts:223-306, CLIENT_BACKEND.md

1.3. File Filtering

Both implementations use a predefined list of exclusion patterns to filter out irrelevant files and directories (e.g., node_modules, .git, dist). This ensures that only relevant source code is included in the context for the AI. Files are also filtered by size to avoid performance issues.

Sources: testgen-backend/main.go:70-87, testgen/src/lib/backend.ts:40-60, testgen/src/lib/github.ts:13-53

2. Code Context Generation

After fetching the relevant files, the system aggregates their content into a single string, referred to as codeContext. This context is the primary input for the AI model.

The generatePromptContext function, present in both main.go and backend.ts, is responsible for this task. It formats the output by:

• Adding a header to explain the purpose of the content.
• Grouping files by type (e.g., Go, Configuration, Other) for better organization.
• Prepending each file's content with a comment indicating its path (e.g., // File: src/main.go).

Sources: testgen-backend/main.go:244-301, testgen/src/lib/backend.ts:340-388

3. AI-Powered Test Generation

With the codeContext prepared, the frontend initiates the test generation process by calling the Gemini API.

3.1. API Request Flow

The handleGenerateTests function in Dashboard.tsx orchestrates this step. It gathers the Gemini API key (from settings), the codeContext, and an optional additional prompt.

This diagram details the interaction for generating test cases using the Gemini API.
Sources: testgen/src/pages/Dashboard.tsx:114-159, testgen-backend/main.go:484-633, testgen/src/lib/backend.ts:436-527

3.2. Data Structures

The request and response for test generation are structured to ensure consistency.

Structure	Fields	Description	Source File
GeminiRequest	apiKey, codeContext, additionalPrompt	Data sent to the backend to initiate test generation.	testgen/src/lib/backend.ts:35-39
GeminiResponse	testCases, summary	The structured JSON response expected from the Gemini API.	testgen/src/lib/backend.ts:25-33
GeminiTestCase	id, name, description, input, expected, code, testType, priority	Represents a single, detailed test case generated by the AI.	testgen/src/lib/backend.ts:13-23

After receiving the GeminiResponse, the convertGeminiTestsToAppFormat function maps the AI-generated tests into the format used by the frontend application's state, setting the initial status of each test to pending.

Sources: testgen/src/lib/backend.ts:530-543, testgen/src/pages/Dashboard.tsx:146-147

4. Test Execution and Results Display

The final stage involves executing the generated tests and displaying the results to the user.

4.1. Test Execution

The TestRunner.tsx component is responsible for running the tests.

• It receives the array of test cases from the Dashboard.
• The runAllTests or runSingleTest function iterates through the tests.
• For each test, the executeTest function creates a sandboxed JavaScript environment using a new Function() constructor.
• This environment includes a library of mock functions (CreateUser, Login, calculateSum, etc.) to handle dependencies in the code being tested.
• The test code is executed, and the actual result is compared against the expected result.
• The status of the test case is updated to passed or failed, and the execution duration is recorded.

This flowchart illustrates the logic within the TestRunner component for executing a single test case.

4.2. Results Visualization

The ResultsDisplay.tsx component receives the final, stateful list of test cases and presents them in a user-friendly manner. It provides:

• Summary statistics (total, passed, failed, average time).
• A filterable and searchable list of all test results.
• Detailed views for each test, showing input, expected output, and the actual result or error.
• An option to export the results to a CSV file.

Sources: testgen/src/components/ResultsDisplay.tsx

Summary

The end-to-end data flow of TestGen AI is a well-defined pipeline that seamlessly integrates user interaction, external APIs, and client-side logic. It begins with a simple GitHub URL, leverages the power of a Go backend or direct GitHub API calls for code analysis, employs the Gemini AI for intelligent test case generation, and concludes with a robust test execution and visualization engine in the React frontend. This architecture allows for a powerful and efficient workflow for automated software testing.

Sources: README.md, testgen/IMPLEMENTATION.md