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.
- 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:
package.json. It forces to add
dist/build/Release/node_expat.nodeto the repo
- TS models for the imported XML
- A translating function from the XML to the already used
- 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
</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
Create a badge using GitHub Actions and GitHub Workflow CPU time (no 3rd parties servers)
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:
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:
Required Badge style: flat or classic. Default:
Set this if icon is not square. Default:
Set badge scale. Default:
The file path to store the badge image file. Only output to
badgeaction output if not defined.
The badge SVG contents.
uses: emibcn/badge-action@v1 with label: 'Test coverage'
- Code of the JS PWA app using those actions
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-pagesbranch contents, which are the results of executing
yarn buildon 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.
- 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)