DEV Community

loading...
Cover image for Badge Action

Badge Action

emibcn profile image emibcn Updated on ・2 min read

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>
    <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/demyanets/angular-coverage-badges-action/pull/3">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

    #3





    Fix #1

    </div>
    <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/johanvanhelden/gha-clover-test-coverage-check/pull/3">View on GitHub</a></div>
    
    Enter fullscreen mode Exit fullscreen mode



  • Code of the action I made



    GitHub logo

    emibcn
    /
    badge-action



    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.

    Inputs

    label

    Required The left label of the badge, usually static.

    label-color

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

    status

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

    color

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

    style

    Required Badge style: flat or classic. Default: classic

    icon

    Use icon.

    icon-width

    Set this if icon is not square. Default: 13

    scale

    Set badge scale. Default: 1

    path

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

    Outputs

    badge

    The badge SVG contents.

    Example usage

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

  • Code of the JS PWA app using those actions



    GitHub logo

    emibcn
    /
    Rac1.js



    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.

    Motivation

    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.

Discussion

pic
Editor guide