Feature/results page

[nerikebosch]

PR Type

Tests, Enhancement, Documentation

---

Description

• Added comprehensive unit tests for GameTest, Instructions, and Results views

• Introduced ADHD_THRESHOLDS constants for clinical research-based metrics

• Added detailed JSDoc documentation to three main view components

• Moved GameTest route outside Layout to prevent navbar display

• Fixed GameTest CSS to use full viewport height

---

Diagram Walkthrough

flowchart LR
  A["Test Components<br/>GameTest, Instructions, Results"] -->|"Add Unit Tests"| B["Test Files<br/>GameTest.test.js<br/>Instructions.test.js<br/>Results.test.js"]
  A -->|"Add JSDoc Comments"| C["Enhanced Documentation<br/>Component Purpose & Flow"]
  D["Results Component"] -->|"Extract Constants"| E["ADHD_THRESHOLDS<br/>Latency, Accuracy, Variability"]
  F["App Routes"] -->|"Restructure"| G["GameTest Outside Layout<br/>No Navbar Display"]

Loading

File Walkthrough

	Relevant files
Tests	GameTest.test.js GameTest component unit tests with mocks                                  src/tests/views/GameTest.test.js Created comprehensive test suite with 118 lines covering GameTest component initialization Mocked IrisFaceMeshTracker, saccadeData utilities, velocityConfig, Firebase, and Fullscreen API Added tests for start modal rendering and test initiation with fullscreen request Configured Redux store with calibration and auth reducers for test environment +118/-0  Instructions.test.js Instructions component unit tests                                                src/tests/views/Instructions.test.js Created test suite with 43 lines for Instructions component Mocked useNavigate hook and Helmet component for test environment Added tests for content rendering and navigation to gameTest route Verified button click triggers correct navigation +43/-0    Results.test.js Results component unit tests with charts                                  src/tests/views/Results.test.js Created comprehensive test suite with 114 lines for Results component Mocked Chart.js components and Firebase Firestore operations Added tests for authentication state, loading state, empty results, and dashboard rendering Verified chart rendering with mock session data containing pro/anti saccade statistics +114/-0
Configuration changes	app.js Restructure GameTest route outside Layout                                src/app.js Moved GameTest route outside the Layout wrapper to prevent navbar display GameTest now renders as a standalone route without Layout context Maintains other routes (Home, Login, Results, Instructions, Calibration) within Layout +1/-1
Documentation	index.js Add JSDoc and improve inline documentation                              src/views/GameTest/index.js Added comprehensive JSDoc documentation explaining component purpose and test flow Updated inline comments for clarity on Firebase metrics saving and test phase initialization Improved comment descriptions for Pro-Saccade and Anti-Saccade test handlers Added comment for main test loop useEffect explaining trial timing logic +19/-3    index.js Add JSDoc documentation block                                                        src/views/Instructions/index.js Added JSDoc documentation block explaining component purpose and functionality Documents that component displays step-by-step instructions for eye-tracking tests Explains visual aids for Pro-Saccade and Anti-Saccade task differentiation +6/-0      index.js Add documentation and extract ADHD thresholds                        src/views/Results/index.js Added comprehensive JSDoc documentation describing component purpose and features Extracted ADHD_THRESHOLDS constant object with four clinical research-based metrics Updated inline comments for Firebase data fetching and chart data preparation Added detailed comment explaining interpretation algorithm for ADHD likelihood assessment Replaced hardcoded threshold values with ADHD_THRESHOLDS constant references +34/-6
Bug fix	GameTest.css Fix GameTest CSS viewport height                                                  src/views/GameTest/GameTest.css Changed min-height from calc(100vh - 60px) to 100vh for full viewport coverage Removes navbar height offset to accommodate GameTest route outside Layout +1/-1

---

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
🔴	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Misleading threshold docs: The new ADHD_THRESHOLDS values (e.g., LATENCY_PRO: 380) conflict with the surrounding explanatory text that still references different thresholds (e.g., “ADHD: >280ms”), making the code/comments self-inconsistent and not self-documenting. Referred Code // Research-based thresholds for ADHD likelihood const ADHD_THRESHOLDS = { LATENCY_PRO: 380, // ms LATENCY_ANTI: 450, // ms ACCURACY_ANTI: 70, // % VARIABILITY_PRO: 35 // ms (Standard Deviation) }; const Results = () => { const user = useSelector(selectUser); const isAuthenticated = useSelector(selectIsAuthenticated); const navigate = useNavigate(); // all the test sessions const [historyData, setHistoryData] = useState([]); const [selectedSession, setSelectedSession] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); // Fetch saccade metrics history from Firebase Firestore ... (clipped 137 lines) Learn more about managing compliance generic rules or creating your own custom rules

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Isolate test mocks for better reliability To improve test isolation and prevent flaky tests, make the getDocs mock generic at the module level and configure its specific behavior within beforeEach or individual tests. src/tests/views/GameTest.test.js [55-63] jest.mock('firebase/firestore', () => ({ collection: jest.fn(), addDoc: jest.fn(), query: jest.fn(), orderBy: jest.fn(), limit: jest.fn(), - getDocs: jest.fn(() => Promise.resolve({ empty: true })), + getDocs: jest.fn(), serverTimestamp: jest.fn(), })); Apply / Chat Suggestion importance[1-10]: 6 __ Why: The suggestion correctly identifies a test isolation issue by pointing out a global mock with a hardcoded implementation, which improves test suite reliability and maintainability.	Low
	Use MemoryRouter in tests Replace BrowserRouter with MemoryRouter in tests to ensure an isolated history and prevent side effects. src/tests/views/Instructions.test.js [24-28] +import { MemoryRouter } from 'react-router-dom'; render( - <BrowserRouter> + <MemoryRouter> <Instructions /> - </BrowserRouter> + </MemoryRouter> ); Apply / Chat Suggestion importance[1-10]: 6 __ Why: The suggestion correctly recommends using MemoryRouter instead of BrowserRouter in tests, which is a best practice for creating an isolated and predictable test environment for routing.	Low
	Avoid using promises that never resolve Avoid using a never-resolving promise to test loading states, as it can cause test runner issues; instead, use a more controllable asynchronous mock. src/tests/views/Results.test.js [52-58] -it('renders loading state initially when authenticated', () => { - // Mock getDocs to never resolve immediately to test loading state - firestore.getDocs.mockImplementation(() => new Promise(() => {})); +it('renders loading state initially when authenticated', async () => { + // Use a promise that we can control to avoid leaving it pending + const neverResolvingPromise = new Promise(() => {}); + firestore.getDocs.mockResolvedValueOnce(neverResolvingPromise); renderWithStore(<Results />, { auth: { isAuthenticated: true, user: { uid: '123' } } }); + + // The loading text should be present immediately expect(screen.getByText(/Loading your progress/i)).toBeInTheDocument(); + + // We don't need to `await` the promise, as we are testing the initial loading state. + // This structure makes the async nature explicit and avoids test runner warnings. }); Apply / Chat Suggestion importance[1-10]: 3 __ Why: The suggestion correctly identifies that a never-resolving promise is a test anti-pattern, but the proposed improved_code is functionally equivalent and does not resolve the underlying issue of a hanging promise.	Low
More