Testing JavaScript on MusicBlocks with Jasmine, Travis, and Karma

Unit tests ensure that individual components work in isolation from each other. Units are typically modules, functions, etc…it also ensures that code added doesnt lead to performance degradation.

GitHub and Travis CI

Travis CI serves as the testing platform.I had already forked the repo so the first thing i did was to visit the https://travis-ci.org/ and sign in with github and added the repository for Travis to run tests against as shown in the image below.

Karma

Firstly i had i to install node.js using nvm(node version manager). Karma is a testing framework and it is used to help us run Jasmine on Travis CI in Firefox(the browser i chose to use). Next i added the following in the package.json file

“karma”: “⁴.1.0”,

“karma-firefox-launcher”: “¹.1.0”,

“karma-jasmine”: “².0.1”,

“jasmine-core”: “².3.2”

$npm install

Running this command installs all packages from above list as well as their dependencies.

After the necessary plugin installed ,karma needs to know about the project and this is done in the

my.conf.js

In the my.conf.js we tell karma about the source code , test files , browser to use after the set up next is configuring the .travis,yml file

Configuring Travis

This tells Travis that we’re using Node.js to test JavaScript and use Firefox as a browser. Besides, we specify that before it begins testing, it should run npm install to grab all of the necessary plugins.

Down the line i had issues setting this up as i encountered some errors and bugs which helped me get more understanding on how travis work

Writing tests with jasmine

Up to this point we have karma and travis properly figured so now its time to tests the code to get a real-time feedback on the the changes added , so i started with the palette.js file which i made changes to recently

In order to test this code, I’ve created the tests directory mentioned in the my.conf.js file, and from there I’ll add the jasmine test files

Testing it is mostly the same as testing synchronous code, except for one key difference: Jasmine needs to know when the asynchronous work is finished.

Jasmine supports three ways of managing asynchronous work: async/await, promises, and callbacks. If Jasmine doesn’t detect one of these, it will assume that the work is synchronous and move on to the next thing in the queue as soon as the function returns.Here is the jasmine documentation https://jasmine.github.io/tutorials/async

Here this is the tests written with jasmine to see if the palette was given time to load .

it didnt pass at first and that brought me back to my code and made me see the error that i made

i made the correcton to the code and it passes now

This is a major importance in unit testing as it shows the errors being made that would have gone unnoticed.

Basically , am still having a build error after pushing to the main repo

Am yet to figure that out but for the mean while this is my week progress would have gone on to write other test make changes to the block,js and write test on it but wanted into the build error