Dashboard UI

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/src/components/TestRunner.tsx
• testgen/src/components/ResultsDisplay.tsx
• testgen-backend/main.go
• README.md

The Dashboard UI is the central user interface for the TestGen AI application. It provides a comprehensive, tab-based workspace for users to interact with the core features of the platform: fetching code from GitHub repositories, generating test cases using AI, executing those tests, and viewing the results. The entire user workflow is managed within this single, cohesive component.

The dashboard is built as a React component and orchestrates the state and data flow between various child components responsible for specific functionalities. It manages user inputs, API interactions, and the lifecycle of test cases from generation to execution.

Sources: testgen/src/pages/Dashboard.tsx, README.md

Architecture and Core Components

The Dashboard component serves as the primary container, managing the application's state and rendering the main layout. It utilizes a tabbed interface to separate the major stages of the testing workflow.

Sources: testgen/src/pages/Dashboard.tsx:29-376

Component Hierarchy

The following diagram illustrates the high-level component structure of the Dashboard UI.

State Management

The Dashboard component uses React's useState hook to manage all local UI and data state. This includes user inputs, API loading states, and the test cases themselves.

State Variable	Type	Description
repoUrl	string	Stores the GitHub repository URL entered by the user.
geminiKey	string	Stores the user's Gemini API key from the Settings tab.
codeInput	string	Holds the code context, either pasted by the user or fetched from a repository.
testCases	TestCase[]	An array of generated test cases. This state is passed to child components.
isGenerating	boolean	A loading flag for when tests are being generated by the AI.
isRunning	boolean	A flag to indicate that tests are currently being executed by the TestRunner.
isCloning	boolean	A loading flag for when a repository's files are being fetched.
clonedFiles	string[]	An array of file paths fetched from the repository.
currentRepo	string	The owner/repo name of the currently cloned repository.

Sources: testgen/src/pages/Dashboard.tsx:40-48

Data Structures

The dashboard and its child components rely on a central TestCase interface to represent each test. This structure is populated from the GeminiTestCase format returned by the AI service.

TestCase Interface

This is the application's internal representation of a test case.

Field	Type	Description
id	string	A unique identifier for the test case.
name	string	A descriptive name for the test.
input	any	The input data for the function being tested.
expected	any	The expected output for the given input.
code	string	The source code snippet being tested.
status	'pending' | 'running' | 'passed' | 'failed'	The current execution status of the test.
result	any	The actual result after execution.
error	string	Any error message produced during execution.
duration	number	The execution time in milliseconds.

Sources: testgen/src/pages/Dashboard.tsx:30-38

GeminiTestCase Interface

This is the format expected from the Gemini API response, which is then converted into the TestCase format.

Field	Type	Description
id	string	A unique identifier.
name	string	The test name.
description	string	A detailed description of the test's purpose.
input	any	Input data for the test.
expected	any	Expected output.
code	string	The code being tested.
testType	'unit' | 'integration' | ...	The category of the test.
priority	'high' | 'medium' | 'low'	The priority of the test case.

Sources: testgen/src/lib/backend.ts:24-33

Tabbed Interface

The dashboard is organized into four main tabs, each corresponding to a step in the workflow.

Tab	Icon	Value	Purpose
Generate	Code2	generate	Input code via GitHub URL or direct paste, and generate test cases.
Execute	TestTube	execute	Run the generated test cases and see live progress.
Results	Zap	results	View a summary and detailed breakdown of test execution results.
Settings	Settings	settings	Configure API keys required for test generation.

Sources: testgen/src/pages/Dashboard.tsx:192-211

Generate Tab

This is the starting point of the workflow. It allows users to provide code and initiate the AI-powered test generation process.

Repository Cloning and Code Input

Users can either provide a GitHub repository URL or paste code directly into a textarea.

1. GitHub URL: The user enters a public GitHub repository URL.
2. Fetch Content: Clicking the "fetch content" button triggers the handleCloneRepository function.
3. API Call: This function calls ApiService.cloneRepository(repoUrl).
4. Context Generation: The fetched files are processed by ClientBackend.generatePromptContext to create a single string, which is then set as the codeInput state.
5. UI Update: The UI updates to show the number of cloned files and the current repository.

The following sequence diagram shows the repository cloning flow.

Test Generation

Once code is present in the codeInput textarea, the user can generate tests.

1. Generate Tests: Clicking "Generate Test Cases" triggers handleGenerateTests.
2. API Call: The function calls ApiService.generateTests, passing the geminiKey, codeInput, and currentRepo.
3. AI Processing: The backend service sends a structured prompt to the Gemini API.
4. Response Handling: The JSON response from Gemini is parsed.
5. Data Conversion: convertGeminiTestsToAppFormat transforms the AI-generated tests into the application's TestCase[] format.
6. UI Update: The testCases state is updated, and the "Generated Test Cases" card is populated.

The sequence diagram below details the test generation flow.

Execute Tab

This tab is responsible for running the generated tests. It contains the TestRunner component.

• The Dashboard component passes the testCases array and the setTestCases state setter function as props to TestRunner.
• TestRunner contains the logic to execute each test case in a sandboxed JavaScript environment, update its status, and report results.
• The isRunning state is shared to disable controls in the Dashboard while tests are executing.

Sources: testgen/src/pages/Dashboard.tsx:346-352, testgen/src/components/TestRunner.tsx

Results Tab

This tab displays a summary and detailed report of the test execution results. It contains the ResultsDisplay component.

• The Dashboard passes the testCases array, which now contains execution results (status, duration, etc.), to the ResultsDisplay component.
• ResultsDisplay calculates statistics like pass/fail counts and average execution time. It also provides filtering and an option to export results to CSV.

*Sources: testgen/src/pages/Dashboardtsx:354-356, testgen/src/components/ResultsDisplay.tsx_

Settings Tab

This tab allows the user to configure necessary API keys.

• It contains a single Input field for the Gemini API Key.
• The onChange event of the input updates the geminiKey state in the Dashboard component.
• This key is required for the handleGenerateTests function to succeed.

Sources: testgen/src/pages/Dashboard.tsx:358-373

Conclusion

The Dashboard UI is the cornerstone of the TestGen AI application, providing a seamless and intuitive user experience. It effectively manages the entire workflow, from code acquisition and AI-driven test generation to execution and results visualization. By centralizing state management and orchestrating interactions between specialized child components, it creates a powerful and user-friendly tool for automated software testing.

Sources: testgen/src/pages/Dashboard.tsx, README.md