BEGINNER • HTML and CSS Basics
Sprint: improve test coverage #22
This lesson focuses on improve test coverage for a search with filters interface. You will use: document.querySelector('.btn') | npx create-react-app my-app | npm run dev. The content is designed for practical frontend development.
Code Example
// Accessible component
<button
aria-label="Add to cart"
aria-pressed={isInCart}
onClick={handleClick}
>
Add to Cart
</button>
// Objective: improve test coverageCommands & References
- document.querySelector('.btn')
- npx create-react-app my-app
- npm run dev
Lab Steps
- Set up with: document.querySelector('.btn')
- Build or refactor the component for the scenario.
- Validate accessibility and performance.
- Propose one improvement for production.
Exercises
- Add one accessibility enhancement.
- Implement one performance optimization.
- Write one unit test for this component.