Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add code test coverage badge into README.md #2709

Open
ImBIOS opened this issue Dec 4, 2024 · 6 comments · May be fixed by #2734
Open

add code test coverage badge into README.md #2709

ImBIOS opened this issue Dec 4, 2024 · 6 comments · May be fixed by #2734
Labels
Feature request Wish or idea good first issue A GitHub standard for inviting (new) contributors *Congratulations in advance!* help wanted Just an old github standard we add automatically. (The team can remove it when working on it.) up-for-grabs (a github standard for inviting new contributors) - Welcome! ♥

Comments

@ImBIOS
Copy link

ImBIOS commented Dec 4, 2024

Problem:
It's unclear whether this project requires test contributions or if the existing test coverage is healthy (above 60%). Contributors lack visibility into the project's testing status.

Solution:
Add a test coverage badge to the README.md file. This badge should provide a clear, real-time indicator of the test coverage percentage, helping contributors assess the current status at a glance.

Alternatives:

  • Provide test coverage data in a separate CONTRIBUTING.md file.
  • Periodically update contributors about test coverage in project communications (e.g., via issues or discussions).

Relevance/Scope:
This would benefit 100% of potential test contributors by offering critical insights into the testing status and encouraging contributions to improve test coverage.

"Side Effects":
Displaying low test coverage may prompt contributors to add more tests, improving the overall quality of the project.

Context:
Adding a coverage badge is a common practice in open-source projects and helps set a standard for transparency and contribution guidance.

@ImBIOS ImBIOS added Feature request Wish or idea good first issue A GitHub standard for inviting (new) contributors *Congratulations in advance!* help wanted Just an old github standard we add automatically. (The team can remove it when working on it.) up-for-grabs (a github standard for inviting new contributors) - Welcome! ♥ labels Dec 4, 2024
@Ankush1oo8
Copy link

What to do in this issue can you explain

@ImBIOS
Copy link
Author

ImBIOS commented Dec 10, 2024

Personally I would use Codecov, but I asked ChatGPT and found simpler way:

To add Jest test coverage information to a GitHub README.md file, follow these steps:

1. Enable Jest Coverage Reporting

  • Update your Jest configuration (jest.config.js, jest.config.ts, or package.json):
    module.exports = {
      collectCoverage: true,
      coverageDirectory: 'coverage',
      coverageReporters: ['json', 'lcov', 'text', 'clover'], // Customize as needed
    };
    This will generate coverage data when you run your tests.

2. Run Tests with Coverage

  • Run the following command:
    npx jest --coverage
  • This generates a coverage folder in your project with coverage reports in various formats, such as lcov and text-summary.

3. Generate a Coverage Badge

Use a tool like [Shields.io](https://shields.io/) or an npm package like jest-coverage-badger to create a badge.

Option A: Shields.io (Manual)

  1. Extract the coverage percentage from the text-summary output or coverage/lcov-report/index.html.
  2. Generate a badge using this URL format:
    https://img.shields.io/badge/coverage-80%25-brightgreen
    
    Replace 80% with your coverage percentage and adjust the color based on your desired thresholds.

Option B: Automate with jest-coverage-badger

  1. Install the package:
    npm install --save-dev jest-coverage-badger
  2. Add it to your package.json scripts:
    "scripts": {
      "test:coverage": "jest --coverage",
      "coverage:badge": "jest-coverage-badger -o ./"
    }
  3. Run the following command to generate a badge:
    npm run coverage:badge
    This generates a coverage-badge.svg file.

4. Update Your README

  • Add the badge to your README.md:
    ![Coverage](./coverage-badge.svg)
  • If using Shields.io:
    ![Coverage](https://img.shields.io/badge/coverage-80%25-brightgreen)

5. Automate Coverage Updates (Optional)

  • Use a GitHub Action to automatically update the coverage badge:
    1. Create a workflow file .github/workflows/test-coverage.yml:
      name: Test Coverage
      
      on:
        push:
          branches:
            - main
      
      jobs:
        coverage:
          runs-on: ubuntu-latest
          steps:
            - name: Checkout code
              uses: actions/checkout@v3
      
            - name: Set up Node.js
              uses: actions/setup-node@v3
              with:
                node-version: 16
      
            - name: Install dependencies
              run: npm install
      
            - name: Run tests with coverage
              run: npm run test:coverage
      
            - name: Generate coverage badge
              run: npm run coverage:badge
      
            - name: Commit and push changes
              run: |
                git config --global user.name "github-actions"
                git config --global user.email "[email protected]"
                git add .
                git commit -m "Update coverage badge"
                git push
              env:
                GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    2. Push this file to your repository. The action will update the badge automatically on new commits.

You're now set up with test coverage reporting in your GitHub README.md!

@Ankush1oo8
Copy link

@ImBIOS it is showing 0% courage

@ImBIOS
Copy link
Author

ImBIOS commented Dec 10, 2024

@ImBIOS it is showing 0% courage

I think you're correct, the current coverage might near to 0%.

We need more test contribution or even migration to typescript to help new contributor adapt faster.

@Ankush1oo8
Copy link

@ImBIOS it is showing 0% courage

I think you're correct, the current coverage might near to 0%.

We need more test contribution or even migration to typescript to help new contributor adapt faster.

yes

@ImBIOS
Copy link
Author

ImBIOS commented Dec 15, 2024

I've prepared the GitHub Action we can use to generate the code coverage badge:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature request Wish or idea good first issue A GitHub standard for inviting (new) contributors *Congratulations in advance!* help wanted Just an old github standard we add automatically. (The team can remove it when working on it.) up-for-grabs (a github standard for inviting new contributors) - Welcome! ♥
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants