QA report: mdn/todo-react at f7a0866
The application handles standard task management and filtering reliably, but permits creating and saving empty or whitespace-only tasks.
Testing evaluated core task workflows across 12 exploratory scenarios, covering task creation, completion toggles, editing, deletion, status filtering, keyboard submission, special character handling, and page reloads. Ten of the twelve scenarios passed successfully.
Both confirmed failures stem from missing input validation across task entry points. The application allows blank and whitespace-only entries during new task creation, which increments the active counter and renders empty rows. Likewise, editing an existing task allows saving an empty string, creating an unlabeled task item in the list.
While primary functionality and list state management work as expected, these validation gaps allow blank items to degrade the task list interface and counter accuracy.
Run summary
| Metric | Count |
|---|
| Scenarios executed | 12 |
| Passed | 10 |
| Failed | 2 |
| Blocked | 0 |
| Findings raised | 2 |
| Issues after the audit | 2 |
| Withdrawn by the audit | 0 |
| Critical / high / medium / low | 0 / 0 / 2 / 0 |
Target: http://127.0.0.1:3000 · Testing level: exploratory · Stack: node (vite)
Issues
Medium severity
F1 · Blank and whitespace-only tasks can be added to the task list
Severity: medium · Type: functional · Verdict: confirmed · Scenario: S5
Observations in scenario S5 show that submitting both whitespace-only (' ') and empty strings successfully creates blank todo items and increments the counter.
Expected: Empty or whitespace-only task submissions should be rejected and not added to the task list, and the task counter should not increment.
Actual: Blank tasks are added to the list and the task counter increments (from 3 to 4 on whitespace, and to 5 on empty input).
Steps to reproduce:
- Navigate to http://127.0.0.1:3000/todo-react/
- Click the 'What needs to be done?' input field and type ' ' (three spaces)
- Click the 'Add' button
- Leave the input field empty and click the 'Add' button again
Evidence: screenshots/S5-3.png, screenshots/S5-5.png
F2 · Task can be saved with an empty name when editing
Severity: medium · Type: functional · Verdict: confirmed · Scenario: S8
Observations in scenario S8 confirm that clearing the name input during an edit and submitting saves an empty string and renders a nameless task row.
Expected: The application should prevent saving an empty task name, either by validating the input and keeping the edit form open or by reverting to the original task name.
Actual: The task was updated to have an empty name (''), rendering as a blank row in the task list with buttons labeled 'Edit' and 'Delete' without the task name.
Steps to reproduce:
- Navigate to http://127.0.0.1:3000/todo-react/
- Click the 'Edit Eat' button on the 'Eat' task item
- Clear the text in the 'New name for Eat' input field
- Click the 'Save new name for Eat' button
Evidence: screenshots/S8-5.png
Scenario results
| Scenario | Priority | Result | Issues |
|---|
| S1 Create a new task successfully | high | pass | none |
| S2 Toggle task completion status | high | pass | none |
| S3 Edit an existing task name and save | high | pass | none |
| S4 Delete a task from the list | high | pass | none |
| S5 Attempt to add an empty or whitespace-only task | high | fail | F1 |
| S6 Filter tasks by Active and Completed status | medium | pass | none |
| S7 Cancel editing an existing task | medium | pass | none |
| S8 Attempt to save an empty string when editing a task | medium | fail | F2 |
| S9 Submit new task via Enter keyboard key | medium | pass | none |
| S10 Verify state behavior upon page reload | medium | pass | none |
| S11 Add duplicate task names | low | pass | none |
| S12 Add task containing special characters and HTML strings | low | pass | none |
The audit
The Critic reviewed 2 findings and re-verified 0 of them live in the browser, replaying the reported steps on a fresh page.
- The test suite comprehensively covered core CRUD, filtering, edge inputs, and keyboard interactions with consistent observations.
What to fix first
- F1: Disallow the submission of blank or whitespace-only strings when creating new tasks.
- F2: Prevent saving empty strings when editing existing task names.
Coverage and caveats
In scope: Task creation via Add Task Form; Task editing and cancellation via Edit Task Form; Task deletion and remaining counter calculation; Task completion state toggling; Filtering views across All, Active, and Completed states; Form input edge cases and whitespace validation; Keyboard interactions and state persistence.
Not covered: User authentication and multi-user isolation because the application does not implement authentication; Backend API integrations because state management is fully client-side.
- Application state is maintained in-memory or in browser storage across client interactions
- Default initial tasks may be rendered on initial load as baseline test data