Automate unit testing with github actions and get coveralls badge for an npm package
Tags: actionshackathon21, testing, github, coveralls
Published: 2021-12-07 01:04:25

## 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](https://coveralls.io) for getting a badge of how much my tests covers relevant lines.

![pick action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vwhx0azcpvfuvpjciqmj.png)

**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](https://github.com/JinSSJ3/dynamicss) as a template. [Dynamicss](https://www.npmjs.com/package/@dynamicss/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".

![Add repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmn390bb5h950mz7y6js.png)

Click on the switch to enable the access to the desired repo. In my case, I filter the repos to get `dynamicss`.
![Enable repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ubnjkmunzqz5bbggzfl.png)

 Copy the repo token because we will need it for the set up.
![Copy token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qv1bty0a3fkfrmu7jc9z.png)

#### 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". 

![Nodejs action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9kw2eufha3wv3mz8dx2.png)

Then we need to edit the code to get something like this:
![yml file edition](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/90ne778xxyy7vd57r4fz.png)
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:

![Commit .yml](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwctpr180pght3bqqtyk.png)
 

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.
![job result part 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vg7ycyr8gsfz5mht82q6.png)
![job result part 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6f2jl06cqj62q0lgi8jf.png)
  

 

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

![Coveralls result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1w8z845xda3mq3c3hu3.png)
 
#### 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](https://github.com/JinSSJ3/dynamicss#readme) file.
![Badge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uc5k1zd1ne3jo6qaw2ev.png)
Click on `Embed` button and copy the markdown code:
![Embed badge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ujcirn64h9jvs2sw36he.png).

Finally we can add the badge in our readme file, commit, push and we'll get something like this.
![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gezzlmymamvnz6ybhm6g.png)
 

### Submission Category: 

**DIY Deployments**


### Yaml File or Link to Code

The coveralls result can be accessed [here](https://coveralls.io/github/JinSSJ3/dynamicss).
The coveralls .yml file can be accessed [here](https://github.com/JinSSJ3/dynamicss/blob/master/.coveralls.yml).
The github action .yml file can be accessed [here](https://github.com/JinSSJ3/dynamicss/blob/master/.github/workflows/node.js.yml).
The repo can be accessed [here](https://github.com/JinSSJ3/dynamicss).

{% github https://github.com/JinSSJ3/dynamicss %} 


### Additional Resources / Info

- 
Unit test info was taken from [wikipedia](https://en.wikipedia.org/wiki/Unit_testing#Advantages).