Generate code coverage badge

[cristianrgreco]

Idea

Similar to https://dev.to/thejaredwilcurt/coverage-badge-with-github-actions-finally-59fa and https://nedbatchelder.com/blog/202209/making_a_coverage_badge.html, it would be awesome if this action could create/update a code coverage badge, that could be embedded into the README.

Description

This library requires the jest coverage to be in a JSON file, and it is not easy to pull out an overall % number to manually create a badge with. Because this library already calculates everything from the coverage map, it could make creating a badge easy.

Perhaps the gist URL and colour thresholds and other such variables could be inputs to the action.

Alternatives

I've tried implementing the solutions from the 2 websites above, but it's tricky to get the coverage numbers from jest when the output is in JSON.

Additional context

[ArtiomTr]

Hello @cristianrgreco 👋,

Thank you for the feature request! I was considering something similar, and have some thoughts on this:

1. Using a gist to store coverage isn't very good, because all badges will show the same coverage. This means, if you use this badge in PRs and README when you create a new PR, the badge in README will be updated.

2. shields.io have an API, for generating custom badges. So action can set the badge URL as output. For instance, the URL: https://img.shields.io/badge/Test%20Coverage-87.75%25-green?logo=jest will look like this:

   

Generating just a badge URL is simple, but it still needs an algorithm on how to inject this URL into the README file. Currently, I don't know how to correctly do this, perhaps some other action could modify the README file?

[cristianrgreco]

Thanks for the quick response @ArtiomTr!

I didn't understand this:

Using a gist to store coverage isn't very good, because all badges will show the same coverage. This means, if you use this badge in PRs and README when you create a new PR, the badge in README will be updated.

This article shows for example how a unique badge could be created for master/PRs. This action could for example create the badge in the user's gist and output the link to it. I'm imagining multiple runs against the master branch would update the same code coverage bade, so that users could link to it in their READMEs

Generating just a badge URL is simple, but it still needs an algorithm on how to inject this URL into the README file.

Ah, you are one step ahead of me, I was thinking simply that this action could output the link.

[gadicc]

For reference, there's also https://github.com/MishaKav/jest-coverage-comment.

It uses the gist approach, but only on commits to main, because of

   if: github.ref == 'refs/heads/main'

Here's a sample from my workflow:

      - name: Jest Coverage Comment
        id: coverageComment
        uses: MishaKav/jest-coverage-comment@main
        with:
          # hide-comment: true
          coverage-summary-path: ./coverage/coverage-summary.json

      - name: Check the output coverage
        run: |
          echo "Coverage Percentage - ${{ steps.coverageComment.outputs.coverage }}"
          echo "Coverage Color - ${{ steps.coverageComment.outputs.color }}"
          echo "Summary HTML - ${{ steps.coverageComment.outputs.summaryHtml }}"

      - name: Create the badge
        if: github.ref == 'refs/heads/main'
        uses: schneegans/dynamic-badges-action@v1.6.0
        with:
          auth: ${{ secrets.GH_TOKEN_GISTS }}
          gistID: 26d0f88b04b6883e1a6bba5b9b344fab
          filename: jest-coverage-comment__main.json
          label: Coverage
          message: ${{ steps.coverageComment.outputs.coverage }}%
          color: ${{ steps.coverageComment.outputs.color }}
          namedLogo: javascript

The initial gist, token/secret and badge link in README have to be set up manually, i.e.

![Coverage](https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/gadicc/26d0f88b04b6883e1a6bba5b9b344fab/raw/jest-coverage-comment__main.json)`

and of course https://gist.github.com/gadicc/26d0f88b04b6883e1a6bba5b9b344fab contains:

{"schemaVersion":1,"label":"Coverage","message":"65%","color":"yellow","namedLogo":"javascript"}

Hope this helps!