Testing Strategy
Relevant source files
The following files were used as context for generating this wiki page:
The project employs a multi-faceted testing strategy that combines a formal, agent-driven protocol for feature validation with standard frontend testing practices and extensive use of mock data. The core of the strategy is a stateful tracking system managed via a central test_result.md file, which orchestrates testing tasks between a main_agent and a testing_agent.
For the frontend, the project is bootstrapped with Create React App, providing a conventional testing environment using npm test. Development and UI testing are heavily supported by a comprehensive mock data layer, which simulates backend APIs, user data, and analytics events, allowing for isolated component testing.
Agent-Based Testing Protocol
A formal protocol is defined for managing the testing lifecycle of features for both frontend and backend. This system relies on a central file, test_result.md, to maintain the complete testing state and history, acting as the primary communication channel between development (main_agent) and testing (testing_agent).
Sources: test_result.md:1-102
Workflow
The workflow ensures that tasks are implemented, tested, and validated in a structured manner. The main_agent is responsible for implementing features and updating the test file, while the testing_agent executes the tests based on the file's contents.
The following diagram illustrates the communication flow between the agents.
Sources: test_result.md:50-81
test_result.md Data Structure
The testing state is maintained in a YAML format within test_result.md. This structure tracks individual tasks, their status, history, and overall test planning.
| Key | Description |
|---|---|
user_problem_statement | The high-level problem the project aims to solve. |
backend / frontend | Arrays of task objects for each part of the application. |
metadata | Information about the test file itself, such as version and creator. |
test_plan | Guides the testing agent on what to focus on (current_focus, stuck_tasks). |
agent_communication | A log of messages between agents. |
Sources: test_result.md:16-48
A task object within the frontend or backend list has the following structure:
| Field | Type | Description |
|---|---|---|
task | string | A descriptive name for the task. |
implemented | boolean | Whether the feature has been implemented by the main_agent. |
working | boolean / "NA" | The current working status, updated by the testing_agent or user feedback. |
file | string | The primary file path associated with the task. |
stuck_count | integer | A counter for how many times an issue has been reported for this task. |
priority | "high" / "medium" / "low" | The testing priority for the task. |
needs_retesting | boolean | Flag set by the main_agent to signal that a task is ready for testing. |
status_history | array | A log of all status changes, including comments from agents or users. |
Sources: test_result.md:20-33
Frontend Testing
The frontend application, built with Create React App, utilizes standard JavaScript testing tools.
Sources: frontend/README.md:1-3, frontend/package.json
Test Execution
The primary script for running tests is npm test.
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
},
Sources: frontend/package.json:81-85
Executing this command launches the test runner in an interactive watch mode, which automatically re-runs tests when files are changed. This is the standard procedure recommended by Create React App for running tests during development.
Sources: frontend/README.md:15-17
Mock Data Layer
A significant part of the frontend development and testing strategy relies on a comprehensive mock data layer defined in frontend/src/mock.js. This file simulates all necessary backend data and API interactions, allowing the UI to be developed and tested in isolation.
This approach is critical for:
- Rapid UI development without a live backend.
- Writing predictable unit and integration tests for components.
- Simulating various states and edge cases.
The following diagram shows how a component like LandingPage.jsx consumes data from the mock layer.
The mock file provides several data structures and functions:
| Mock Module | Description |
|---|---|
mockCoachData | Provides static data for the coach's profile, bio, and achievements. |
mockServices | An array of service objects with titles, descriptions, and expected results. |
mockTestimonials | A list of client testimonials, including names, roles, and quotes. |
mockStats | Key performance indicators and statistics for the "Success by the Numbers" section. |
mockContactForm | Defines the structure and fields for the contact form. |
mockFormSubmission | An async function that simulates an API call for form submission, returning a success message. |
mockAnalytics | A set of functions (trackPageView, trackButtonClick) that log analytics events to the console. |
Sources: frontend/src/mock.js:5-246
The mockFormSubmission function is a good example of a simulated API call:
// Mock form submission handler
export const mockFormSubmission = {
submitContactForm: async (formData) => {
// Simulate API call delay
await new Promise(resolve => setTimeout(resolve, 1000));
// Mock successful submission
console.log("Form submitted with data:", formData);
return {
success: true,
message: "Thank you! Your strategy session has been scheduled. You'll receive a confirmation email shortly.",
confirmationNumber: `SS-${Date.now()}`
};
}
};
Sources: frontend/src/mock.js:221-237
Analytics and Event Tracking
Testing should also cover the correct implementation of analytics. The application uses PostHog for analytics, which is initialized in the main HTML file.
Sources: frontend/public/index.html:100-103
During testing, especially with the mock data layer, test cases can verify that the corresponding mock analytics functions from mock.js are called. For end-to-end or manual testing, browser developer tools can be used to confirm that real PostHog events are being fired as expected.
Sources: frontend/src/mock.js:240-246