DEV Community

Cover image for Badge Action

Posted on • Updated on


Badge Action

My Workflow

I have published a serverless SPA & PWA made with React, which is deployed directly to GitHub Pages using it's own GitHub Workflow. I wanted to generate a test coverage badge automatically during CI/CD, and store it into the same repository (no 3rd parties servers involved).

First, I saw Angular Coverage Badges, which was mostly what I wanted:

  • Take a test coverage result file
  • Extract relevant info from it
  • Generate the badge
  • Upload the badge to my repo, to the same branch that fired the build pipeline

Then, I made some additions and created a Pull Request to fulfill my needs (basically, parse test coverage XML files). After waiting for a response (still waiting), I decided it was not exactly what I wanted: I prefer to use mini-actions and re-use their results as inputs for other mini-actions. This way, I can easily change the pipeline, having code split into as small actions as possible and then compositing them, like the way React works.

So now, my workflow looks like:

  • Build & test process (has not changed build nor deploy)
  • Process XML coverage data using a mini PHP action gha-clover-test-coverage-check. It needed some minimal additions.
  • Get processed data from previous Action Output into a self-made action to generate the badge Badge Action. Here, coverage data is used to fill badge value (coverage percentage) and to decide value background color.
  • Save generated badge into a dedicated branch, which stores the badges generated from testing any branch.

Next steps: Generate container actions (no other code than action.yml) to join mini-actions and glue-actions (little run to get, parse or adapt a value) and help me and others to do the same, in a much easier way, adaptable to everyone needs.

Submission Category:

  • Maintainer Must-Haves
  • DIY Deployments
  • Phone Friendly

Yaml File or Link to Code

  • Code of the first action I submitted code to:

    Add ability to parse XML clover files #3

    I have added:

    • xml2json dependency in package.json. It forces to add dist/build/Release/node_expat.node to the repo
    • TS models for the imported XML
    • A translating function from the XML to the already used coverage-summary.json structure
    • Some tests

    I have changed:

    • Default file to parse: coverage/clover.xml
    • Github workflow to generate and parse self coverage test
    • README, action.yml and package.json to reflect repo change and differences

    Also, the process has added automatically the coverage badges to .github/badges/ using the results from nuning npm test -- --coverage ;)

    It will probably be better to make a generic parser dispatcher and put there the 2 existing parsers and the new ones. Also add an option to let the user force the parser type. Now it's autodetected by file extension: if file name ends with .json, use original, if not, use clover XML parser.

    <div class="gh-btn-container"><a class="gh-btn" href="">View on GitHub</a></div>
    Enter fullscreen mode Exit fullscreen mode

  • Code of the second action I submitted code to:

    Fix #1 - Export processed value as GitHub Action Output


    Fix #1

    <div class="gh-btn-container"><a class="gh-btn" href="">View on GitHub</a></div>
    Enter fullscreen mode Exit fullscreen mode

  • Code of the action I made

    GitHub logo


    Create a badge using GitHub Actions and GitHub Workflow CPU time (no 3rd parties servers)

    .github/workflows/test.yml .github/workflows/test.yml

    Badge action

    This action generates a SVG badge using GitHub Actions and GitHub Workflow CPU time (no 3rd parties servers). The badge is generated using the NPM package gradient-badge.



    Required The left label of the badge, usually static.


    Required Hex or named color for the label. Default: 555


    Required The right status as the badge, usually based on results.


    Required An array (comma separated) with hex or named colors of the badge value background. More than one creates gradient background. Default: blue.


    Required Badge style: flat or classic. Default: classic


    Use icon.


    Set this if icon is not square. Default: 13


    Set badge scale. Default: 1


    The file path to store the badge image file. Only output to badge action output if not defined.



    The badge SVG contents.

    Example usage

    uses: emibcn/badge-action@v1
      label: 'Test coverage'

  • Code of the JS PWA app using those actions

    GitHub logo


    React.js app to play Rac1 radio station podcasts

    Node.js CI Build Status coverage

    Web APP to listen to Rac1 radio station podcasts. Uses React as JS frontend library and GitHub pages to publish it at Rac1 podcast player at Github Pages. There, you will find this repo's gh-pages branch contents, which are the results of executing yarn build on this project's GitHub workflow/Actions using this project's source application (See more in the Install section).

    The podcasts lister is a pure JS lib, which only depends on abortcontroller-polyfill to help GoogleBot execute modern JS, so you can easily re-use it for other JS projects.


    I made this app for 3 reasons:

    • I needed a better way to listen to those podcasts (because the official app is not useful to me) and I wanted it to be easily compatible with all my devices.
    • Learn modern JavaScript (and some other modern stuff): I've been using JavaScript (mostly with JQuery) since a long time ago…

  • Production deploy of this app at GitHub Pages

  • Additional Resources / Info

    The action I made is a KISS interface for a JS package that generates an SVG file from passed attributes. The JS package is gradient-badge.

Top comments (0)

Visualizing Promises and Async/Await 🤯

async await

Learn the ins and outs of Promises and Async/Await!