improving-frontend-coverage

bởi streamlit

Chạy kiểm thử đơn vị frontend với coverage, phân tích báo cáo coverage, và triển khai các bài kiểm thử có ý nghĩa để tăng coverage lên khoảng 0,2%. Sử dụng khi bạn muốn…

npx skills add https://github.com/streamlit/streamlit --skill improving-frontend-coverage

Improving frontend coverage

Increase frontend unit test coverage by ~0.2% through meaningful tests that add real value.

Be fully autonomous — Do NOT stop or pause to ask for confirmation. Keep iterating (analyze → implement → verify) until the 0.2% coverage target is reached. If you encounter ambiguities about what to test, make a reasonable choice and proceed.

Workflow

Step 1: Run tests with coverage

COVERAGE_JSON=1 make frontend-tests  # ~5 min

Reports generated in frontend/coverage/:

  • coverage-summary.json - Per-file percentages (lines, branches, functions)
  • coverage-final.json - Line-level data with uncovered line numbers (hit count 0 in s, f, b maps)

Step 2: Analyze and prioritize

Read coverage-summary.json to find files with:

  1. Large size + below-average coverage (high impact)
  2. Core components in lib/src/components/
  3. Utility functions in utils/src/

Skip: >97% coverage, auto-generated, .d.ts, test files.

Step 3: Implement tests (in subagent)

Launch a subagent to implement tests for each prioritized file. Provide the subagent with:

  • The target file path and its uncovered lines from coverage-final.json
  • Instructions to read the source, existing tests, and write new tests
  • The test selection guidelines below

The subagent should:

  1. Read source and existing tests to understand gaps
  2. Write tests for: conditional rendering, event handlers, error states, edge cases, accessibility
  3. Follow RTL best practices: query by role/label, test behavior not implementation
  4. Run the new tests to verify they pass: cd frontend && yarn test path/to/Component.test.tsx

Step 4: Verify and iterate

cd frontend && yarn test path/to/Component.test.tsx  # Run new tests
COVERAGE_JSON=1 make frontend-tests                   # Measure progress

Repeat steps 2-4 until coverage improves by ≥0.2%, then run make check.

Step 5: Simplify, review, and address feedback

Once all tests pass and coverage target is met:

  1. Run the simplifying-local-changes subagent to clean up and simplify the code changes. Wait for completion.
  2. Run the reviewing-local-changes subagent to review the changes. Wait for completion and read the review output.
  3. Address the review feedback: for each recommendation, implement it if valid and improves code quality; skip with brief reasoning if not applicable or would over-engineer.
  4. Run /checking-changes to verify everything still passes after changes.

Test selection

DO test: Conditional rendering, user interactions, prop variations, error handling, accessibility, edge cases (null, empty, max values).

DON'T test: Pass-through props, styling, library internals, implementation details, already well-covered code.

Coverage exclusions: Use /* istanbul ignore next */ sparingly for code that genuinely doesn't need testing. Always include a reason (e.g., /* istanbul ignore next -- defensive */):

  • Browser-specific branches that can't run in jsdom (/* istanbul ignore next -- browser-only */)
  • Defensive fallbacks that should never execute (/* istanbul ignore next -- defensive */)
  • Framework-required boilerplate (/* istanbul ignore next -- exhaustive */)

Notes

  • Quality > coverage numbers - skip tests that don't catch real bugs
  • Test files: co-located as <Component>.test.tsx
  • Use /checking-changes after implementing tests

Thêm skills từ streamlit

developing-with-streamlit
streamlit
**[BẮT BUỘC]** Sử dụng cho TẤT CẢ các tác vụ Streamlit: tạo, chỉnh sửa, gỡ lỗi, làm đẹp, tạo kiểu, tạo chủ đề hoặc tối ưu hóa ứng dụng Streamlit. Cũng bắt buộc…
official
addressing-pr-review-comments
streamlit
Giải quyết tất cả các nhận xét đánh giá hợp lệ trên một PR cho nhánh hiện tại trong kho lưu trữ streamlit/streamlit. Bao gồm cả nhận xét đánh giá nội dòng và nhận xét PR chung (vấn đề)…
official
checking-changes
streamlit
Xác thực tất cả các thay đổi mã nguồn trước khi commit bằng cách chạy các kiểm tra định dạng, lint, kiểu và kiểm thử đơn vị. Sử dụng sau khi thực hiện thay đổi backend (Python) hoặc frontend (TypeScript)…
official
discovering-make-commands
streamlit
Liệt kê các lệnh make có sẵn cho phát triển Streamlit. Sử dụng cho các tác vụ build, test, lint hoặc format.
official
finalizing-pr
streamlit
Hoàn thiện các thay đổi trên nhánh để chuẩn bị hợp nhất bằng cách đơn giản hóa mã, chạy kiểm tra, xem xét thay đổi và tạo PR nếu cần. Sử dụng khi sẵn sàng hợp nhất các thay đổi vào…
official
fixing-flaky-e2e-tests
streamlit
Chẩn đoán và sửa các bài kiểm tra e2e Playwright không ổn định. Sử dụng khi các bài kiểm tra thất bại không liên tục, hiển thị lỗi hết thời gian chờ, có sự không khớp ảnh chụp nhanh hoặc hiển thị các vấn đề cụ thể theo trình duyệt…
official
fixing-streamlit-ci
streamlit
Phân tích và sửa các công việc CI GitHub Actions bị lỗi cho nhánh/PR hiện tại. Sử dụng khi kiểm tra CI thất bại, kiểm tra PR hiển thị lỗi, hoặc bạn cần chẩn đoán…
official
generating-changelog
streamlit
Tạo ghi chú phát hành trang web được trau chuốt giữa hai thẻ git cho docs.streamlit.io. Sử dụng khi chuẩn bị một bản phát hành Streamlit mới hoặc xem xét các thay đổi giữa…
official