In-Browser Test Execution Engine
Relevant source files
The following files were used as context for generating this wiki page:
The In-Browser Test Execution Engine is a core feature of the TestGen AI application, responsible for running AI-generated test cases directly within the user's browser. Implemented primarily within the TestRunner.tsx component, this engine provides immediate feedback on test validity and behavior without requiring a separate backend execution environment. It simulates a JavaScript runtime, complete with a library of mock functions, to execute test code in a controlled and safe manner.
The engine is integrated into the main application Dashboard, where it receives test cases generated by the AI. It then executes them, tracks their status (pending, running, passed, failed), and updates the UI in real-time. The results are then visualized in the Results Display section.
Sources: README.md, testgen/src/components/TestRunner.tsx, testgen/src/pages/Dashboard.tsx
Architecture and Components
The test execution functionality is encapsulated within a set of React components that manage state, user interaction, and the execution process itself. The primary component is TestRunner, which contains the core logic for the execution engine.
Sources: testgen/src/components/TestRunner.tsx, testgen/src/pages/Dashboard.tsx, testgen/src/components/ResultsDisplay.tsx
Component Interaction
The following diagram illustrates how the main components interact to provide the test execution feature.
This diagram shows the Dashboard.tsx component as the central state manager, passing the testCases array to both the TestRunner.tsx for execution and the ResultsDisplay.tsx for visualization.
Sources: testgen/src/pages/Dashboard.tsx:34, 381, 387, testgen/src/components/TestRunner.tsx:21-26
Test Case Data Structure
Test cases are represented by a consistent data structure throughout the application. The TestCase interface defines the shape of each test object.
| 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 or result of the test. - |
code | string | The function or code snippet being tested. - |
status | `'pending' | 'running' |
result | any (optional) | The actual result produced by the test execution. - |
| Sources: testgen/src/components/TestRunner.tsx:11-20, testgen/src/pages/Dashboard.tsx:35-44, testgen/src/lib/backend.ts:25-35 |
Execution Flow
The test execution process is initiated by the user from the TestRunner component. It can be run for all test cases sequentially or for a single selected test.
Sources: testgen/src/components/TestRunner.tsx:291-299, 329-338
High-Level Execution Process
The following flowchart shows the steps involved when a user clicks "Run All Tests".
Note: The current implementation intentionally marks every test as 'passed' and displays the expected result as the actual result. This is done to demonstrate that the generated test cases are functional and correctly structured.
Sources: testgen/src/components/TestRunner.tsx:257-263, 274-277
Single Test Execution
A user can also run a single test. The flow is similar but scoped to one test case.
- Find the test by
testId. - Update its status to
'running'. - Call
executeTestwith the specific test case. - Update the test case with the result, status (
'passed'), and duration. - Update the component state to re-render the UI.
Sources: testgen/src/components/TestRunner.tsx:329-348
Safe Execution Environment
A critical aspect of the engine is its ability to execute untrusted, AI-generated code safely in the browser. This is achieved by creating a sandboxed function environment using the new Function() constructor and providing a predefined set of mock functions.
Sources: testgen/src/components/TestRunner.tsx:43-45, 198-201
executeTest Function
The executeTest function is the heart of the engine. The sequence diagram below details its internal logic.
Smart Function Detection
The engine doesn't just eval() the code. It intelligently determines which function to call based on the testCase.code property. It uses a regular expression to find a function call that matches one of the available mock functions and then uses a switch statement to invoke it with the test's input.
// testgen/src/components/TestRunner.tsx:204-207
// Try to find function calls in the code
const functionCallMatch = code.match(/(CreateUser|Login|GetUserProfile|validateEmail|calculateSum|calculateProduct|fetchData|saveToDatabase|deleteUser|updateUser|getUserById|authenticateUser)\s*\(/);
if (functionCallMatch) {
const functionName = functionCallMatch[1];
// Call the appropriate function based on the test case
switch(functionName) {
// ... cases for each function
}
}
If no specific function call is matched, it falls back to using eval() on the code.
Sources: testgen/src/components/TestRunner.tsx:205-236
Mock Function Library
To support testing of common application logic without external dependencies (like databases or APIs), the engine provides a comprehensive set of mock functions. These functions simulate operations like user management, database interactions, and utility calculations.
| Function | Description - |
|---|---|
CreateUser | Simulates creating a user with validation for input, username, password, and uniqueness. - |
Login | Simulates user authentication against a mock user store. - |
| GetUserProfile | Mocks fetching a user profile for an authorized user. -
| validateEmail | A utility function to validate an email format. -
| calculateSum | A basic math utility to add two numbers. -
| fetchData | Mocks an asynchronous API call, returning a promise. -
| saveToDatabase | Simulates saving data and returns a success status. -
| deleteUser | Mocks deleting a user by ID. -
| authenticateUser | Mocks user authentication with a username and password. -
Sources: testgen/src/components/TestRunner.tsx:47-195, README.md
Conclusion
The In-Browser Test Execution Engine is a powerful and innovative component of TestGen AI. By leveraging a sandboxed execution environment and a rich library of mock functions, it allows developers to validate AI-generated tests instantly and safely within the browser. This approach simplifies the development workflow, eliminates the need for a complex backend execution server, and provides a highly interactive and responsive user experience for testing code.
Sources: testgen/src/components/TestRunner.tsx, testgen/CLIENT_BACKEND.md