Set-Up Automatic Testing
Github Actions
Continuing off from my previous blog, How to write JavaScript unit test using Jest, I will explain how to set up automatic testing using GitHub Actions.
Setting up automatic testing is a must, in my opinion, too many times I forget to run the command npm run test and ensure that all my tests cases pass before merging to the main branch. It is crazy to think after all the work I did to create tests I still forget to run them and push faulty code. This is made even worse when working on group projects, where bugs are more likely.
Getting Started
Before we begin we need to have our code in a GitHub repository. If you do not know how to add your code to a GitHub repository you can follow this guide.
Once you have your code hosted on GitHub, we can begin creating a Github Action. The action I will create will simply just run all the Jest tests whenever a Pull Request (PR) is made against the main branch. This action will block all merges into the main branch unless all tests pass, decreasing the chances of random bugs appearing on the main branch.
When inside your repository click on the actions tab located at the top.
GitHub offers many popular actions, you can see them all here. However, we will be creating our own GitHub action from scratch. To do this click on “set up workflow yourself”.
This will bring up a UI where we can create our own GitHub action. The default code will look something like this:
It definitely looks intimidating the first time you see it but I promise it is not that bad (the comments are pretty great themselves explaining each step). If you would like to get more information on all the commands you see visit the Github Actions page located here.
We can replace the code above with the following code:
After writing this code, click on “Start Commit” and merge this code into the main branch.
With this code, we have successfully created a GitHub Action which will run every time we create a PR. To test this create a new branch and create a PR. It should look something like this:
Here we can see the GitHub action running all of our Jests tests. However, as you can see, we are able to merge this PR before all of our tests are complete. We would obviously want to block all merges into the main branch until our tests pass. To do this we will have set up “Branch Protection rules”.
To do this click on “Settings”.
Next click on “Branches”.
And lastly on “Add Rule”.
On this page, we will be able to set up rules to protect our branch. In this case, I will only be setting up a rule that requires our Jests tests to pass before merging onto the main branch.
To do this we will first specify the branch we want to protect. To do this, in the “Branch name pattern” input field write main.
After, we will need to specify the “status checks that need to pass before merging”. To do this, simply search for the name of the Github action and select the action.
Lastly, we will also need to specify this rule to be applied to administrators. If you do not check this box, administrators will be able to merge branches regardless of whether the test pass or fail.
After doing this click on “Create” and this will add the GitHub action status to pass before merging is allowed onto the main branch.
Finally, we will test this again. Once again, create a random PR.
While the GitHub action is running you should see the “Merge pull request” button as disabled.
After the action ends, if all tests pass the “Merge pull request” button will become enabled otherwise it will stay disabled.
This wraps up how to set up automatic testing on GitHub. Until next time. Happy coding!
