Test Results Visualization
Relevant source files
The following files were used as context for generating this wiki page:
The Test Results Visualization system provides a comprehensive and interactive interface for viewing the outcomes of executed test cases. It is a core feature of the TestGen AI Dashboard, offering statistical summaries, detailed test-by-test breakdowns, filtering capabilities, and data export functionality. The primary goal is to give developers a clear and immediate understanding of the test run's success and to help diagnose any failures.
This system is implemented as the ResultsDisplay React component, which is rendered within the "Results" tab of the main Dashboard. It receives the executed test case data from its parent Dashboard component, which in turn is updated by the TestRunner component during execution.
Sources: testgen/src/components/ResultsDisplay.tsx, testgen/src/pages/Dashboard.tsx:302-304, README.md:50-52
Architecture and Data Flow
The visualization of test results is the final step in the application's workflow. The ResultsDisplay component is a presentational component that relies on state managed by the Dashboard page.
The diagram below illustrates the flow of test case data from generation to visualization.
This diagram shows that the Dashboard component orchestrates the data flow, holding the testCases state. The TestRunner updates this state with execution results, and the ResultsDisplay component reads from it to render the final view.
Sources: testgen/src/pages/Dashboard.tsx:43,165,302,304, testgen/src/components/TestRunner.tsx:32-35, testgen/src/components/ResultsDisplay.tsx:30-32
Data Structure: TestCase
The core data structure that powers the results visualization is the TestCase interface. This object holds all information about a single test, from its definition to its execution outcome.
| Property | Type | Description | Source File |
|---|---|---|---|
id | string | A unique identifier for the test case. | testgen/src/components/ResultsDisplay.tsx:21 |
name | string | A descriptive name for the test. | testgen/src/components/ResultsDisplay.tsx:22 |
input | any | The input data provided to the function being tested. | testgen/src/components/ResultsDisplay.tsx:23 |
expected | any | The expected output for the given input. | testgen/src/components/ResultsDisplay.tsx:24 |
code | string | The code snippet being tested. | testgen/src/components/ResultsDisplay.tsx:25 |
status | 'pending' | 'running' | 'passed' | 'failed' | The execution status of the test. | testgen/src/components/ResultsDisplay.tsx:26 |
result | any (optional) | The actual result produced by the test execution. | testgen/src/components/ResultsDisplay.tsx:27 |
error | string (optional) | Any error message captured during a failed execution. | testgen/src/components/ResultsDisplay.tsx:28 |
duration | number (optional) | The time taken to execute the test, in milliseconds. | testgen/src/components/ResultsDisplay.tsx:29 |
This interface is defined consistently across ResultsDisplay.tsx, TestRunner.tsx, and Dashboard.tsx.
Core Features of ResultsDisplay
The ResultsDisplay component is composed of several key features that together provide a rich user experience for analyzing test results.
Sources: testgen/src/components/ResultsDisplay.tsx
Summary Statistics
At the top of the results page, four summary cards provide a high-level overview of the test run.
This diagram shows how statistics are derived from the main testCases array.
- Total Tests: The total number of test cases (
testCases.length). - Passed: A count of test cases where
status === 'passed'. - Failed: A count of test cases where
status === 'failed'. - Avg Time: The average
durationof all tests that have a recorded duration. It is displayed in milliseconds (ms).
Sources: testgen/src/components/ResultsDisplay.tsx:35-40, 80-137
Filtering and Searching
To help users navigate large sets of test results, the component includes filtering and searching functionality.
- Search: A text input allows users to filter tests by
name. The search is case-insensitive. - Status Filter: A dropdown menu allows users to filter tests by their
status(all,passed,failed,pending).
These two filters are combined to create the final list of filteredTests that are displayed to the user.
Sources: testgen/src/components/ResultsDisplay.tsx:33-34, 43-47, 161-182
Export to CSV
The component includes an "Export CSV" button that triggers the exportResults function. This function serializes the testCases array into a CSV format and initiates a browser download.
The CSV file contains the following columns:
- Test Name
- Status
- Input
- Expected
- Result
- Error
- Duration (ms)
Sources: testgen/src/components/ResultsDisplay.tsx:49-65, 145-148
Results Views
The results are presented in two different tabbed views: "List View" and "Postman View".
List View
This is the default, detailed view. Each test case is displayed in a separate card containing:
- Test index and name.
- Status badge (e.g., "passed", "failed").
- Duration badge (if available).
- A detailed breakdown of
Input,Expected, andResultin formatted code blocks. TheResultblock is color-coded green for passed tests and red for failed tests.
Sources: testgen/src/components/ResultsDisplay.tsx:185-253
Postman View
This view provides a more compact, table-like layout reminiscent of API clients like Postman. Each test is a single row in a grid.
The columns in this view are:
#(Index)- Test Name
- Status
- Input
- Expected
- Result
Each row is color-coded based on the test status (green for passed, red for failed) for quick visual scanning.