QA Exercise 13

Exercise · Bug Hunt (To-Do List: Filters, Sorting & Persistence)

QA · Hands-on
Create tasks, change priority, mark complete, filter/search, and reload the page. Find defects in persistence, filtering logic, sorting order, XSS safety, and state syncing. Then present a spoken bug report.
Intentionally buggy: completed tasks reappear after refresh, filter logic is inverted, sort order is inconsistent, search is case-sensitive, duplicate tasks aren’t blocked, and unsafe HTML can render in task titles.
Try: <img src=x onerror=alert(1)> (XSS test)
0 tasks
Tip: refresh the page to test whether completion state persists.
🎯 Instructions (Oral) task flow
  1. Create a task: title “Fix login regression”, priority P0, assignee “Dev A”.
  2. Create another task with the same title (duplicate). Check if duplicates are blocked.
  3. Mark one task as completed and switch filters (All / Open / Completed). Observe what appears.
  4. Change sorting (Created / Priority / Title). Check if the ordering matches the selection.
  5. Use search with different casing (e.g., “login” vs “Login”). See if results change.
  6. Refresh the page. Check whether completed tasks remain completed.
  7. Optional security test: create a task title containing HTML. See if it renders unsafely.
  8. Give a spoken bug report: Title → STR → Expected vs Actual → Severity/Priority → Recommendation.
📖 Vocabulary definitions
  • persistence — keeping data/state after refresh or restart (e.g., via localStorage).
  • state — the current data the UI should reflect (open vs completed tasks).
  • filter — showing a subset of items (open only, completed only).
  • sort order — the rule for ordering items (newest first, A→Z, priority).
  • case-sensitive — treating “login” and “Login” as different.
  • duplicate — same item added multiple times unintentionally.
  • XSS — cross-site scripting, when unsafe HTML/JS runs in the page.
  • sanitization — cleaning input to prevent XSS or unsafe rendering.
🧩 Collocations natural pairings
  • persist user state / save to localStorage
  • apply a filter / toggle completed
  • sort by priority / order alphabetically
  • block duplicates / detect repeated entries
  • sanitize user input / prevent XSS
  • sync UI and state / re-render the list
🗣️ Idioms & Phrasal Verbs natural speech
  • show up — appear: “Completed tasks show up under Open.”
  • break down — stop working: “Sorting breaks down after adding tasks.”
  • mess up — handle incorrectly: “The filter messes up the list.”
  • carry over — persist: “Completion state should carry over after refresh.”
  • lock down — secure: “We should lock down input handling to prevent XSS.”
🎤 Model Answer (spoken style) example

Bug title: To-do list filter/sort is inconsistent and completion state does not persist after refresh; potential XSS in task title.

Steps to reproduce: First, add two tasks and mark one as completed. Next, switch the filter to Open and Completed. Then change sorting to Priority and Title. After that, refresh the page. Finally, add a task title with HTML to check rendering.

Expected result: Filters should show the correct subset, sorting should match the selected order, completed state should persist after refresh, and user input should be sanitized to prevent XSS.

Actual result: Completed tasks sometimes show up under Open, sorting becomes inconsistent, completed state resets after refresh, and HTML in the title can render unsafely.

Severity / Priority: High severity, P1 — incorrect task state harms productivity; XSS risk can be Critical (P0) if exploitable.

Recommendation: Persist state properly (including completion flag), fix filter predicates, make sorting deterministic, use case-insensitive search, block duplicates, and sanitize/escape task titles before rendering.