Automate unit testing with github actions and get coveralls badge for an npm package

First of all, let´s see what are unit tests?.

Start with this question: How do you ensure the quality of your project?

The goal of unit testing is to isolate each part of the program and show that the individual parts are correct. A unit test provides a strict, written contract that the piece of code must satisfy. As a result, it affords several benefits.

Unit testing finds problems early in the development cycle. This includes both bugs in the programmer's implementation and flaws or missing parts of the specification for the unit. The process of writing a thorough set of tests forces the author to think through inputs, outputs, and error conditions, and thus more crisply define the unit's desired behavior. The cost of finding a bug before coding begins or when the code is first written is considerably lower than the cost of detecting, identifying, and correcting the bug later. Bugs in released code may also cause costly problems for the end-users of the software. Code can be impossible or difficult to unit test if poorly written, thus unit testing can force developers to structure functions and objects in better ways.

My Workflow

Since there is no need to reinvent the wheel, I will take advantage of an existing github action in the Continuous integration workflows category: Node.js. With this action I will set up this action in one of my public repositories. I will set up Node.js action for automating my unit test and also integrate with coveralls.io for getting a badge of how much my tests covers relevant lines.

What do I need?

A javascript project

Well, first we need to create a public repository for a javascript project on Github. You can use mine as a template. Dynamicss is a javascript project and is an npm package that is used to manage dynamically css stylesheets using javascript (create,edit and delete stylesheets). I will use this project in this example.

A coveralls account:

This is pretty simple. Just go to https://coveralls.io and create an account using your Github account. This is important, since you will need to grant access to coveralls.io to your repo. Finally, enable the permission that allows coveralls.io to acces to your repo like I did. Once the account is created using github, go to the left panel and click on "Add repos".

Click on the switch to enable the access to the desired repo. In my case, I filter the repos to get dynamicss.

Copy the repo token because we will need it for the set up.

Create unit tests

You can take my simple unit tests as a simpe example. Of course, there are more complex unit test when working with react or other libraries.
https://github.com/JinSSJ3/dynamicss/tree/master/tests

Create a .coveralls.yml file

Remember we copied a repo token? Well, in our project, we need to create a .yml file that contains just one line:
https://github.com/JinSSJ3/dynamicss/blob/master/.coveralls.yml

Set up the github action

Now, in your github repo, go to "actions" tab.
Search for Node.js action and click on "Set up this worklow".

Then we need to edit the code to get something like this:

We just need to set the node version. In my case, I'm using node version 16.
After that, we need to set the commands in the last lines, we only need 2:

• npm ci (for installing dependencies)
• npm run test:coveralls (for testing and sending results to coveralls.io). This command was set previously in package.json file.

Finally, make a commit to save the configuration:

This will save the .yml file in this location:
https://github.com/JinSSJ3/dynamicss/blob/master/.github/workflows/node.js.yml
Commiting will also trigger the job to be executed. Now, every time we push a commit, the job will be triggered, execute the unit tests and send results to coveralls.

Results

Let´s check the result of the action. Let´s go to the actiontab again. In my process, I can see that my code passed all tests and sent result to coveralls. I got a 93% of coverage in relevant lines of code. Also, we can see that job finished successfully.

Now, if you go to you coveralls account in your repo you will se something like this:

Final step: get your badge

And you are done! At this point we created a job for testing our code using github actions.
Now we can get our badge an embeb it on our README.md file.

Click on Embed button and copy the markdown code:
.

Finally we can add the badge in our readme file, commit, push and we'll get something like this.

Submission Category:

DIY Deployments

Yaml File or Link to Code

The coveralls result can be accessed here.
The coveralls .yml file can be accessed here.
The github action .yml file can be accessed here.
The repo can be accessed here.

JinSSJ3 / dynamicss

Manage CSS stylesheets dynamically with JavaScript

Description

With DinamiCSS you can manage CSS style sheets dynamically

Installation

DinamiCSS is available as an npm package.

// with npm
npm i @dynamicss/dynamicss

Main Features:

• Insert style sheets from javascript files.
• Edit stylesheets at run-time.
• Remove style sheet.
• Check whether a style sheet has already been inserted into the DOM
• Create a DynamicSheet object rpresentation

Usage (basic example)

Here is a quick example to get you started, it's all you need:

Interactive and live demo:

DynamiCSS Types:

Name	Description	Attributes
DynamicSheet	Object that represents a css style sheet	id: string;
content?: string;
sheetRules?: DynamicSheetRule[];
DynamicSheetRule	Object that represents a set of css rules for a classname	className: string;
rules: DynamicStyle | DynamicPseudoNested | DynamicHyphens;

DynamiCSS namespace Functions:

Function	Description
function insertStyleSheet(dynamicSheet: DynamicSheet): string	Inserts the stylesheet into the DOM
function editStyleSheet(id: string, sheetRules: DynamicSheetRule[]): string	Edits an existing stylesheet in the DOM

…

View on GitHub

Additional Resources / Info

• Unit test info was taken from wikipedia.