Improve test reliability with data-testid selectors

[SteedMonteiro]

Summary

Refactored component tests to use data-testid attributes for DOM element selection instead of relying on generic selectors like tag names and class names. This improves test reliability and maintainability by making assertions more explicit and less brittle.

Key Changes

• Image.test.tsx: Updated ImageBackground test to use data-testid selectors for both the component and its child span element
• Text.test.tsx:
  • Modified tests to add data-testid attributes to Text components and child elements
  • Enhanced the "render empty when no children" test to explicitly verify the rendered element is a span tag
• View.test.tsx: Refactored className test to use data-testid selector and explicitly check classList instead of relying on querySelector with class selector

Benefits

• More resilient tests: Tests no longer break if CSS classes or DOM structure changes
• Better test clarity: data-testid attributes make it explicit what elements are being tested
• Improved maintainability: Easier to understand test intent and update selectors when needed
• Reduced false positives: Explicit assertions prevent tests from passing for unintended reasons

https://claude.ai/code/session_012rYreUmQGJAkR377wVFM8N

[github-actions]

size-limit report 📦

Path	Size
dist/app-studio.cjs.production.min.js	23.55 KB (0%)
dist/app-studio.esm.js	23.36 KB (0%)
dist/app-studio.umd.production.min.js	23.79 KB (0%)