Prevent empty or whitespace-only todos

[agrwalh]

This PR prevents creating or updating todo items with empty or whitespace-only
titles by trimming input and validating at the reducer and edit level. This
ensures state consistency and improves UX.

[graysoncooper]

Hi! Hope you don't mind me adding to the repo, trying to build something for automated QA testing on individual PRs. Here's a summary of my testing. What I did here: create dev container, build a test plan, run test agent against the actual app, and the results below all look good.

TodoMVC React - Test Results Report

Test Execution Date:* 2026-01-19
Total Tests: 20
Passed: 20
Failed: 0
Pass Rate: 100%

---

Summary

All 20 test cases passed successfully. The TodoMVC React application correctly handles:

• Adding, editing, and deleting todos
• Input validation (whitespace trimming, minimum length)
• XSS protection via React's JSX escaping
• Routing/filtering (All, Active, Completed views)
• Bulk operations (Toggle all, Clear completed)
• Unique ID generation for todos

---

Test Results

ADD Tests - Adding Todos

ID	Test	Result	Notes
ADD-1	Add valid todo item	PASSED	"Buy groceries" added successfully, input cleared, footer shows count
ADD-2	Add todo with leading/trailing whitespace	PASSED	Whitespace correctly trimmed on save
ADD-3	Reject whitespace-only todo	PASSED	No todo added when only spaces entered
ADD-4	Reject single character todo	PASSED	Single character "a" rejected (min 2 chars required)
ADD-5	Add todo with exactly 2 characters	PASSED	"Go" (2 chars) accepted successfully

SEC Tests - Security

ID	Test	Result	Notes
SEC-1	XSS script tag injection	PASSED	<script>alert("XSS")</script> displayed as literal text, no execution
SEC-2	XSS HTML injection	PASSED	<img src=x onerror=alert(1)> displayed as literal text, no execution
SEC-3	Special characters in todo	PASSED	Ampersands, quotes, angle brackets all render correctly

EDIT Tests - Editing Todos

ID	Test	Result	Notes
EDIT-1	Edit existing todo with valid text	PASSED	Double-click to edit, Enter to save works correctly
EDIT-2	Edit todo with trimming	PASSED	Whitespace trimmed when editing
EDIT-3	Edit todo to empty string deletes it	PASSED	Clearing text and pressing Enter removes the todo
EDIT-4	Edit todo to whitespace-only deletes it	PASSED	Entering only spaces deletes the todo
EDIT-5	Edit mode blur behavior	PASSED	Clicking away exits edit mode without saving changes

ROUTE Tests - Filtering/Routing

ID	Test	Result	Notes
ROUTE-1	All filter displays all todos	PASSED	Both active and completed todos visible in All view
ROUTE-2	Active filter shows only incomplete	PASSED	Only uncompleted todos visible in Active view
ROUTE-3	Completed filter shows only completed	PASSED	Only completed todos visible with strikethrough

TOGGLE & CLEAR Tests - Bulk Operations

ID	Test	Result	Notes
TOGGLE-1	Toggle all todos complete	PASSED	All 3 todos marked complete, shows "0 items left!"
CLEAR-1	Clear completed removes completed	PASSED	Completed todo removed, active todo remains

PERSIST Tests - Data Persistence

ID	Test	Result	Notes
PERSIST-1	Verify unique IDs for todos	PASSED	5 rapidly added todos all display separately with unique IDs

---

Key Findings

Security

• XSS Protection: React's JSX escaping successfully prevents XSS attacks even after the explicit sanitize() function was removed from the codebase. Script tags, img onerror handlers, and other XSS vectors are safely escaped.

Input Validation

• Trimming: Both adding and editing todos correctly trim whitespace
• Minimum Length: 2-character minimum enforced correctly
• Empty/Whitespace Handling: Empty or whitespace-only inputs are rejected for new todos, and editing to empty/whitespace deletes the todo

Functionality

• Edit Behavior: Double-click to edit, Enter to save, blur to cancel (without saving)
• Filters: All three filter views (All, Active, Completed) work correctly
• Bulk Operations: Toggle all and Clear completed function as expected
• ID Generation: The simplified nanoid implementation generates unique IDs reliably

---

Artifacts

Screenshots

Located in ./screenshots/:

• {TEST-ID}-start.png - Initial state before test
• {TEST-ID}-final.png - Final state after test execution

Videos

Located in ./videos/:

• Per-test video recordings (where available)

https://drive.google.com/drive/u/0/folders/1msJEwzqvQT5U52QgM18jzVamYDnDfyk7