JASMINE - Writing my first Unit TEST!

After writing and deleting my next blog post titles a few times I decided to write about “Testing” web-application. It is not everything about testing but it will cover a very initial step in knowing where to start. I will talk about why testing is important for a website or application. Also, I will just walk through an example of how to use “Jasmine” to write a simple unit test which I learned in the break imposed in my Juno Bootcamp during a COVID-19 emergency from an online course provided by Udacity.

Finding bug in the software
Finding bug in the software
Photo source: www.edx.org

Before launching any website, companies need to make sure that all the features are working as intended. It is a very important activity in the software development life cycle before the release. Testing ensures that your product is trustworthy for the user and provides security to user-data. This phase of software development makes sure that the final product satisfies customer needs. Mostly this is the job of the QA — Quality Assurance team and as a developer, it is important to know how to write tests for what are you building. Tests are mostly written first before you start coding your application. There are so many types of testing including black-box testing, white box testing, acceptance testing, unit testing. What I learned was Unit testing with easy to understand code.

Jasmine open source logo
Jasmine open source logo
Jasmine Open-Source Logo

So you might be wondering what is “Jasmine” I mentioned earlier. Jasmine is an open-source Java-script Testing framework. It runs on any of the java-script enabled platforms. It was developed by Pivotal Labs and they called it JsUnit before its present name. It’s very easy to read syntax has made it a very popular testing framework among software developers. For example: To test this helloWorld() function in js.

function helloWorld() {
return "Hello world"
}

You will need to write the following specs in the testing spec javascript file and then run the specrunner.html file in your browser to see the result.

describe("Hello world Test", function() {
it("greets hello", function() {
expect(helloWorld()).toEqual("Hello world")
})
})

As you see its plain English meaning method makes it very easy to step through each line. In the first line the test “describe” the name of the current test being performed which is “Hello World Test”, the “it” defines the actual test to be performed and within the call back function this test “expect” the results “toEqual” the string passed inside. So with these three words, a complete test could be performed on the java-script file to test the accuracy of the function.

I will dive a little further to explain how I wrote a test checking addContact() method in address book object. I just wrote the test first with an empty javascript file like this:

describe('Address Book',function(){
it('should be able to add a contact',function(){
let addressBook,thisContact
addressBook = new AddressBook()
thisContact = new Contact()
addressBook.addContact(thisContact)

expect(addressBook.getContact(0)).toBe(thisContact)
})
})

This test looks for objects called AddressBook() and Contact() in the source code and the uses the addContact(contact) method to add the record. Finally it expects the getContact() method from AddressBook() to return the passed contact in above line. When it matches the resulting specrunner.html gives the green light otherwise it is red. For example: at this time I did not start writing any code and I get following result.

Image for post
Image for post
Test failure when the test could not find the AddressBook object

This above test results from specrunner.html shows that one test was executed and it failed. It also shows reason and the line where the error was encountered. So now I go to source code and create an address book with a contact array and contact object to solve object error.

function AddressBook(){
this.contacts = [];
}
function Contact(){
}

It still returns the following error:

Image for post
Image for post
Test failure when the test fails to find the addContact() method

This time the specrunner failed to find the addContact() method it was looking. To solve this error I will add the method required which are addContact and getContact().

AddressBook.addContact = function(contact){
this.contacts.push(contact);
}
AddressBook.getContact = function(index){
return this.contacts[index];
}

Let us see what specRunner return us now.

Image for post
Image for post
Cool!! code has passed all the expectations

Finally, after adding the required methods, we get the expected result from the spec runner. This time the expected function matches the result with the contact given earlier.

Writing tests first gives you a guide to what to do next while writing code. It keeps track of all the results at all the moments and helps keep on track for what to work on next. With this, I will finish my article and I hope you enjoyed reading it. If you wish to pursue testing further with jasmine you could look here, here and if you want to go for the udacity free course you can find it here.

On the way to become Software Developer again…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store