Badge Action

emibcn — Wed, 09 Sep 2020 12:24:36 +0000

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.

DEV Community: emibcn

Badge Action

My Workflow

Submission Category:

Yaml File or Link to Code

Add ability to parse XML clover files #3

Fix #1 - Export processed value as GitHub Action Output

#3

emibcn
/
badge-action

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

Badge action

Inputs

`label`

`label-color`

`status`

`color`

`style`

`icon`

`icon-width`

`scale`

`path`

Outputs

`badge`

Example usage

emibcn
/
Rac1.js

React.js app to play Rac1 radio station podcasts

Motivation

Additional Resources / Info

DEV Community: emibcn

Badge Action

My Workflow

Submission Category:

Yaml File or Link to Code

Add ability to parse XML clover files #3

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

emibcn / badge-action

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

Badge action

Inputs

label

label-color

status

color

style

icon

icon-width

scale

path

Outputs

badge

Example usage

emibcn / Rac1.js

React.js app to play Rac1 radio station podcasts

Motivation

Additional Resources / Info

Fix #1 - Export processed value as GitHub Action Output

#3

emibcn
/
badge-action

`label`

`label-color`

`status`

`color`

`style`

`icon`

`icon-width`

`scale`

`path`

`badge`

emibcn
/
Rac1.js