{"id":1504,"date":"2014-10-09T07:42:27","date_gmt":"2014-10-09T11:42:27","guid":{"rendered":"http:\/\/qxf2.com\/blog\/?p=1504"},"modified":"2015-04-12T08:40:59","modified_gmt":"2015-04-12T12:40:59","slug":"javascript-unit-testing-jasmine","status":"publish","type":"post","link":"https:\/\/qxf2.com\/blog\/javascript-unit-testing-jasmine\/","title":{"rendered":"JavaScript unit testing tutorial using Jasmine"},"content":{"rendered":"<p>This post will teach you to write JavaScript unit tests using Jasmine in under 60 minutes. This tutorial is aimed at absolute beginners. <a href=\"http:\/\/www.qxf2.com\/?utm_source=jasmine_tutorial&#038;utm_medium=click&#038;utm_campaign=From%20blog\">Team Qxf2<\/a> member, Rupesh Mishra, is learning to write unit tests in different languages. He is sharing his learning here in the hope that more testers get started with unit testing. This is one in <a href=\"http:\/\/qxf2.com\/blog\/category\/unit-testing\/\">a series of posts<\/a> on getting started with unit testing in various languages. The rest of this post is by Rupesh.<\/p>\n<hr>\n<h3>Overview<\/h3>\n<p>Jasmine is an extremely popular behavior-driven development (BDD) unit testing framework for JavaScript. Jasmine can run on any JavaScript-enabled platform and is easy to read.<\/p>\n<p>At a high level, these are the steps we cover:<br \/>\n1. Install Jasmine<br \/>\n2. Write a JavaScript program to use as the program under test<br \/>\n3. Write the Jasmine unit test<br \/>\n4. Execute the test and view results<\/p>\n<p><strong>1. Install Jasmine<\/strong><br \/>\nDownload Jasmine <a href=\"https:\/\/github.com\/pivotal\/jasmine\/tree\/master\/dist\">here<\/a>. I downloaded the latest version of jasmine-standalone in zip format and unzipped it. For me latest version was jasmine-standalone-2.0.3 .<br \/>\nNow in the jasmine-standalone folder($JASMINE_DIR):<\/p>\n<ul>\n<li><span style=\"text-decoration: underline;\">\/lib\u00a0<\/span> folder contains all the libraries for Jasmine.<\/li>\n<li><span style=\"text-decoration: underline;\">\/spec<\/span>\u00a0 folder to write test file.<\/li>\n<li><span style=\"text-decoration: underline;\">\/src\u00a0<\/span> folder to contain Javascript source file,but I can keep my Javascript file any where in my project.<\/li>\n<li><span style=\"text-decoration: underline;\">SpecRunner.HTML<\/span>\u00a0 to execute my test which is already created in spec folder and it will take the path of my source Javascript file .<\/li>\n<\/ul>\n<p>I emptied the <span style=\"text-decoration: underline;\">\/spec<\/span> folder. I also deleted the <span style=\"text-decoration: underline;\">\/src<\/span> folder. These two folders had examples and I did not need them.<\/p>\n<p><strong>2. Write a JavaScript program<\/strong><br \/>\nTo write my JavaScript program, I created a JavaScript project <span style=\"text-decoration: underline;\">JasmineUnitTesting<\/span> in Eclipse and added a new file with name <span style=\"text-decoration: underline;\">ExampleCode.js<\/span> .<\/p>\n<pre lang=\"java\">function AddTwoNumbers(a,b) {\r\n  return a + b; \/\/Function to return addition of two numbers a and b.\r\n}\r\n\r\nfunction MultiplyTwoNumbers(a,b) {\r\n\t  return a * b; \/\/Function to return product of two numbers a and b.\r\n}\r\n<\/pre>\n<p>I have created two simple programs for addition and product of two numbers in <span style=\"text-decoration: underline;\">ExampleCode.js<\/span> .<\/p>\n<p><strong>3. Write the Jasmine unit test<\/strong><br \/>\nBefore I wrote my test program, I added the <span style=\"text-decoration: underline;\">jasmine-standalone-2.0.3<\/span> folder to my project by doing simple copy-paste of folder. I can also do it by using Import option in Eclipse. I then added a new file <span style=\"text-decoration: underline;\">UnitTest.js<\/span> in the <span style=\"text-decoration: underline;\">$JASMINE_DIR\/spec<\/span> folder.<br \/>\nMy project files structure looks like this.<\/p>\n<p><a href=\"http:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/jasmineProject.jpg\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1573\" src=\"http:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/jasmineProject.jpg\" alt=\"jasmineProject\" width=\"241\" height=\"167\" \/><\/a><\/p>\n<p>Jasmine tests consists of two parts primarily:<br \/>\n1. <span style=\"text-decoration: underline;\">describe<\/span> blocks to describes a suite of tests<br \/>\n2. <span style=\"text-decoration: underline;\">it<\/span> blocks for individual test specification<\/p>\n<p>Both the <span style=\"text-decoration: underline;\">describe<\/span> and <span style=\"text-decoration: underline;\">it<\/span> functions take two parameters<br \/>\n1. A text string to explain the purpose of our test (e.g.: test name)<br \/>\n2. function()<\/p>\n<p>Here is my complete <span style=\"text-decoration: underline;\">UnitTest.js<\/span>. In this program I am testing my functions written in <span style=\"text-decoration: underline;\">ExampleCode.js<\/span>.<\/p>\n<pre lang=\"java\">describe(\"Testing Two Numbers\", function() {\r\n\tvar a = 4;\r\n\tvar b = 3;\r\n    it(\"Add Numbers\", function() {\r\n        expect(AddTwoNumbers(a,b)).toEqual(7);\r\n    });\r\n    it(\"Multiply Numbers\", function() {\r\n        expect(MultiplyTwoNumbers(a,b)).toEqual(12);\r\n    });\r\n    \r\n    it(\"Compare Numbers to be Greater Than\", function() {\r\n    \texpect(a).toBeGreaterThan(b);\r\n    });\r\n    \r\n    it(\"Compare Numbers to be Less Than\", function() {\r\n    \texpect(b).toBeLessThan(a);\r\n    });\r\n});\r\n<\/pre>\n<p>The methods toEqual, toBeLessThan, toBeGreater are known as matchers &#8211; assert methods that increase the readability of code. In Jasmine each matcher implements a Boolean comparison between the actual value and expected value. It is responsible for reporting to Jasmine if the expectation is True or False. Jasmine will then pass or fail the Spec.<br \/>\nHere is the list of some popular matchers in Jasmine:-<\/p>\n<ol>\n<li>\n<div>expect(a).toBe(b);<\/div>\n<\/li>\n<li>\n<div>expect(a).not.toBe(b);<\/div>\n<\/li>\n<li>\n<div>expect(a).toMatch(b);<\/div>\n<\/li>\n<li>\n<div>expect(a).toBeDefined();<\/div>\n<\/li>\n<li>\n<div>expect(a).toBeNull();<\/div>\n<\/li>\n<li>\n<div>expect(a).toContain(&#8220;value&#8221;);<\/div>\n<\/li>\n<li>\n<div>expect(a).toBeLessThan(b);<\/div>\n<\/li>\n<li>\n<div>expect(a).toBeTruthy();<\/div>\n<\/li>\n<li>\n<div>expect(a).toBeFalsy();<\/div>\n<\/li>\n<li>\n<div>expect(a).not.toBeNull();<\/div>\n<\/li>\n<\/ol>\n<p><strong>4. Execute the test and view results<\/strong><br \/>\nTo execute this test I have to run <span style=\"text-decoration: underline;\">$JASMINE_DIR\/SpecRunner.html<\/span>. But before that, lets update the source file and spec file location.<\/p>\n<pre lang=\"html\">\r\n\r\n<!DOCTYPE HTML>\r\n<html>\r\n<head>\r\n  <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\r\n  <title>Jasmine Spec Runner v2.0.3<\/title>\r\n\r\n  <link rel=\"shortcut icon\" type=\"image\/png\" href=\"lib\/jasmine-2.0.3\/jasmine_favicon.png\">\r\n  <link rel=\"stylesheet\" type=\"text\/css\" href=\"lib\/jasmine-2.0.3\/jasmine.css\">\r\n\r\n  <script type=\"text\/javascript\" src=\"lib\/jasmine-2.0.3\/jasmine.js\"><\/script>\r\n  <script type=\"text\/javascript\" src=\"lib\/jasmine-2.0.3\/jasmine-html.js\"><\/script>\r\n  <script type=\"text\/javascript\" src=\"lib\/jasmine-2.0.3\/boot.js\"><\/script>\r\n\r\n  <!-- include source files here... -->\r\n  <script type=\"text\/javascript\" src=\"..\/ExampleCode.js\"><\/script>\r\n\r\n  <!-- include spec files here... -->\r\n  <script type=\"text\/javascript\" src=\"spec\/UnitTest.js\"><\/script>\r\n\r\n<\/head>\r\n\r\n<body>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n<p>In this HTML file, I put the exact files location of my source and spec files. <\/p>\n<p>To view results, I have to open <u>SpecRunner.html<\/u> with a browser.<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/result_jasmine_1.jpg\" data-rel=\"lightbox-image-1\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-1665\" src=\"http:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/result_jasmine_1-300x102.jpg\" alt=\"result_jasmine_1\" width=\"300\" height=\"102\" srcset=\"https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/result_jasmine_1-300x102.jpg 300w, https:\/\/qxf2.com\/blog\/wp-content\/uploads\/2014\/09\/result_jasmine_1.jpg 753w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>I now have information about all the specs and number of failures. I also get the information about jasmine-standalone version and total time taken by Jasmine to finish this test.<\/p>\n<hr>\n<h3>References:<\/h3>\n<p>Here are some useful references that I used to learn Jasmine.<br \/>\n1. <a href=\"http:\/\/jasmine.github.io\/2.0\/introduction.html\">Official Jasmine documentation<\/a><br \/>\n2. <a href=\"http:\/\/evanhahn.com\/how-do-i-jasmine\/\">An excellent (but somewhat advanced) tutorial by Evan Hahn<\/a><\/p>\n<hr>\n","protected":false},"excerpt":{"rendered":"<p>This post will teach you to write JavaScript unit tests using Jasmine in under 60 minutes. This tutorial is aimed at absolute beginners. Team Qxf2 member, Rupesh Mishra, is learning to write unit tests in different languages. He is sharing his learning here in the hope that more testers get started with unit testing. This is one in a series [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[68,69,66],"tags":[],"class_list":["post-1504","post","type-post","status-publish","format-standard","hentry","category-jasmine","category-javascript","category-unit-testing"],"_links":{"self":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/1504","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/comments?post=1504"}],"version-history":[{"count":38,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/1504\/revisions"}],"predecessor-version":[{"id":10907,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/1504\/revisions\/10907"}],"wp:attachment":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/media?parent=1504"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/categories?post=1504"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/tags?post=1504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}