improving-frontend-coverage

Runs frontend unit tests with coverage and implements tests to raise coverage by 0.2%.

45.7k|4.4k|Updated Aug 24, 2019
One-click install
npx skills add https://github.com/streamlit/streamlit --skill improving-frontend-coverage
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: improving-frontend-coverage
Source: https://github.com/streamlit/streamlit/tree/main/.claude/skills/improving-frontend-coverage
Command: npx skills add https://github.com/streamlit/streamlit --skill improving-frontend-coverage

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend codebases accumulate untested code paths over time, and manually identifying which files need tests and writing meaningful ones is slow and repetitive. This Skill automates the loop of measuring coverage, prioritizing high-impact files, and writing tests until a concrete coverage target is reached.

Core Features & Use Cases

  • Coverage Analysis: Runs frontend unit tests with coverage reporting and parses coverage-summary.json and coverage-final.json to find large, under-covered files in core components and utilities.
  • Autonomous Test Implementation: Delegates test writing to subagents that follow React Testing Library best practices, targeting conditional rendering, event handlers, error states, and edge cases.
  • Iterative Verification: Re-runs coverage after each batch of tests, repeating until coverage improves by at least 0.2%, then simplifies and reviews the changes.
  • Use Case: A maintainer wants to steadily raise test coverage in the Streamlit frontend without spending hours triaging reports; the Skill autonomously finds gaps, writes passing tests, and verifies the improvement.

Quick Start

Ask the assistant to improve frontend test coverage by running the coverage workflow and adding meaningful unit tests until coverage rises by 0.2%.

Frequently Asked Questions about improving-frontend-coverage

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I increase frontend unit test coverage systematically?

Run the test suite with coverage enabled, parse the coverage summary to find large files with below-average coverage, then write tests targeting uncovered lines. Repeat the measure-and-test loop until the coverage target is reached.

What should I test in React components with React Testing Library?

Test conditional rendering, user interactions, prop variations, error handling, accessibility, and edge cases like null or empty values. Query elements by role or label and test behavior rather than implementation details.

How do I read Istanbul coverage JSON reports?

coverage-summary.json gives per-file percentages for lines, branches, and functions, while coverage-final.json contains line-level hit counts. Lines with a hit count of 0 in the statement, function, or branch maps are uncovered.

When should I use istanbul ignore comments in tests?

Use sparingly for code that genuinely cannot be tested, such as browser-only branches that cannot run in jsdom or defensive fallbacks. Always include a reason comment explaining the exclusion.

What kinds of tests should be avoided when raising coverage?

Skip tests for pass-through props, styling, library internals, and implementation details, as well as files already above 97% coverage or auto-generated code. Low-value tests inflate coverage numbers without catching real bugs.