Improve test reliability with semantic selectors and data attributes

[markmur]

Summary

This PR improves test reliability and maintainability by replacing fragile CSS selectors and class-based queries with semantic HTML attributes, test IDs, and accessible queries. The changes span both e2e tests and unit tests, making them more resilient to styling changes.

Key Changes

E2E Tests (e2e/app.spec.ts)

• Replaced animation class selectors (.strike-animated) with data-completed attribute checks for task completion verification
• Updated toast dismissal check from waitForDismiss() to expect().toBeHidden() for better reliability
• Replaced complex CSS position selectors with getByTestId() for settings and completed panels
• Updated drag handle selector from .cursor-grab class to data-testid="drag-handle"
• Simplified panel CSS assertions by extracting locator to variable for reuse

Unit Tests

• Task.spec.tsx: Updated selectors to use aria-label attributes instead of data-tooltip-content and class names
• ToggleButton.spec.tsx: Changed from testing implementation details (CSS classes) to testing accessible behavior (aria-label)
• Toast.spec.tsx: Migrated from document.querySelector to screen queries for better testing practices
• List.spec.tsx: Updated drag handle selector to use data-testid instead of class name

Source Code Changes

• Added data-testid attributes to key elements:
  • task-title on task title display element
  • drag-handle on reorderable list handles
  • completed-panel and settings-panel on sidebar panels
  • header-date on header date element
• Added aria-label attributes to form inputs:
  • "Task title" on textarea input
• Added data-completed attribute to task title element for completion state tracking
• Improved semantic HTML with getByRole() queries in e2e tests

Benefits

• Tests are now decoupled from CSS styling changes
• Improved accessibility by using semantic selectors
• Better test maintainability with explicit test IDs
• More reliable assertions using accessible queries
• Reduced brittle selectors based on implementation details

https://claude.ai/code/session_01ArE4Fhc46FgTh63NCGPpeS

[netlify]

✅ Deploy Preview for what-todo-web ready!

Name	Link
🔨 Latest commit	cde64ff
🔍 Latest deploy log	https://app.netlify.com/projects/what-todo-web/deploys/69dbaf7eaffe9e0008c91c0a
😎 Deploy Preview	https://deploy-preview-124--what-todo-web.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.