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

  

  emibcn posted on Jul 16, 2020

  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>
  

  
  

  
  
  
• Code of the second action I submitted code to:
  
  

  
  
  
  
  Fix #1 - Export processed value as GitHub Action Output
  
  #3
  
  

  
  

  
  

  
  
  
  
  

  
  
  emibcn
  posted on Sep 08, 2020
  

  
  

  
  

  
  

  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>
  

  
  

  
  
  
• Code of the action I made
  
  

  
  

  
  
  
  emibcn
  /
  badge-action
  
  

  
  

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

  
  

  
  

  
  

  

  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'

  …

  View on GitHub


• Code of the JS PWA app using those actions
  
  

  
  

  
  
  
  emibcn
  /
  Rac1.js
  
  

  
  

  
  React.js app to play Rac1 radio station podcasts
  

  
  

  
  

  
  

  

  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…

  View on GitHub


• 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.