1. 1. UnitTesting Of JavaScript and Angularjs Application Using Karma-Jasmine Framework -Samyak Bhalerao (smk.bhalerao@gmail.com/samyak.bhalerao@xoriant.com)
2. 2. Agenda What is testing? Black box testing vsWhite box testing What is Unit testing? Prerequisites What is Jasmine? Rules/Specs for writing test cases using jasmine What is Karma? How to configure Karma How to create Karma configuration file Testing sample JavaScript Unit Testing Of JavaScript and Angularjs Application Using Karma-Jasmine Framework 4/17/2015
3. 3. Agenda Testing Angularjs application Testing Controller Testing variables Testing functions Testing Service Testing Directive Directive without external html template Directive with external template Testing filters Testing http requests(GET,POST,etc) Unit Testing Of JavaScript and Angularjs Application Using Karma-Jasmine Framework 4/17/2015
4. 4. What is Testing ? Testing is the process of evaluating a system or its component(s) with the intent to find whether it satisfies the specified requirements or not. Testing is executing a system in order to identify any gaps, errors, or missing requirements in contrary to the actual requirements. Unit Testing Of JavaScript and Angularjs Application Using Karma-Jasmine Framework 4/17/2015
5. 5. Black box testing vs White box testing Black box testing: The technique of testing without having any knowledge of the interior workings of the application is called black-box testing The tester is oblivious to the system architecture and does not have access to the source code Typically, while performing a black-box test, a tester will interact with the system's user interface by providing inputs and examining outputs without knowing how and where the inputs are worked upon. Inefficient testing, due to the fact that the tester only has limited knowledge about an application. Unit Testing Of JavaScript and Angularjs Application Using Karma-Jasmine Framework 4/17/2015
6. 6. Black box testing vs White box testing White box testing White-box testing is the detailed investigation of internal logic and structure of the code. White-box testing is also called glass testing or open-box testing. The tester needs to have a look inside the source code and find out which unit/chunk of the code is behaving inappropriately. It helps in optimizing the code. Extra lines of code can be removed which can bring in hidden defects. Unit Testing Of JavaScript and Angularjs Application Using Karma-Jasmine Framework 4/17/2015
7. 7. What is Unit testing? This type of testing is performed by developers before the setup is handed over to the testing team to formally execute the test cases The goal of unit testing is to isolate each part of the program and show that individual parts are correct in terms of requirements and functionality. There is a limit to the number of scenarios and test data that a developer can use to verify a source code. Unit Testing Of JavaScript and Angularjs Application Using Karma-Jasmine Framework 4/17/2015
8. 8. Prerequisites Install nodejs Install it in any folder of your choice Download nodejs suitable setup file from https://nodejs.org/download/ website Install nodejs using setup file Run node version in command prompt to check node version Install npm Node Package Manager(npm) Run npm version to check installation of npm 4/17/2015Unit Testing Of JavaScript and Angularjs Application Using Karma-Jasmine Framework
9. 9. What is Jasmine? Jasmine is a behavior-driven development framework for testing JavaScript code It does not depend on any other JavaScript frameworks It does not require a DOM http://jasmine.github.io/2.2/introduction.html Unit Testing Of JavaScript and Angularjs Application Using Karma-Jasmine Framework 4/17/2015
10. 10. What is Jasmine? Rules/Specs for writing test cases using jasmine describe(string ,function(){ }) block A test suite begins with a call to the global Jasmine function describe It accepts two parameters first is string and second is function() String is a name or title for test suit or test cases. It usually describes what is being tested Function is block of code that implements test cases Any number of nesting of describe block is possible Eg . describe(Testing sampleApp.js :,function(){ //code to implement test case goes here }); Unit Testing Of JavaScript and Angularjs Application Using Karma-Jasmine Framework 4/17/2015
11. 11. What is Jasmine? Rules/Specs for writing test cases using jasmine beforeEach(function(){ }); This block is executes before test cases It is used to load modules before execution of test cases afterEach(function(){ }); This block is executed after each test cases It is use for task like flushing memory , destroying instance etc. 4/17/2015Unit Testing Of JavaScript and Angularjs Application Using Karma-Jasmine Framework
12. 12. What is Jasmine? Rules/Specs for writing test cases using jasmine it(string , function(){ }) block Specs or test cases are defined by calling jasmine global function it() Variables declared inside describe() block are accessible to all it block within it. It accepts two parameters first is string and second is function() String is a name or title for test suit or test cases. It usually describes the expected behavior or functionality of block of code Function is block of code that implements test cases. It contains one or more expectations that test the state of the code. All assertions to test the code are inside this function A spec with all true expectations is a passing spec. A spec with one or more false expectations is a failing spec. Eg . It(expect true to be true,function(){ expect(true).toBe(true); }); Unit Testing Of JavaScript and Angularjs Application Using Karma-Jasmine Framework 4/17/2015
13. 13. What is Jasmine? Rules/Specs for writing test cases using jasmine Expectations Expectations are built with the function expect() which takes a value, called the actual. It is chained with a Matcher function(eg. .toBe(),.toBeTruthy()), which takes the expected value. Each matcher implements a boolean comparison between the actual value and the expected value. It is responsible for reporting to Jasmine if the expectation is true or false. Jasmine will then pass or fail the spec. Any matcher can evaluate to a negative assertion by chaining the call to expect with a not before calling the matcher. Eg. expect(true).toBe(true); expect(true).not.toBe(false); Unit Testing Of JavaScript and Angularjs Application Using Karma-Jasmine Framework 4/17/2015
14. 14. What is Jasmine? Rules/Specs for writing test cases using jasmine Expectations Jasmine has a rich set of matchers included. expect().toBe(), expect().not.toBe();('toBe' matcher compares with ===) expect().toHaveBeenCalled(),expect().toHaveBeenCalledWith().(it check for method call) expect().toBeDefined(), expect().toBeUndefined().(compares for defined/defination ) expect().toEqual(),expect().not.toEqual();(it is used for simple literals and variables) expectGET(url,data).respond(), expectPOST(url,data).respond(), expectDELETE(url,data).respond(),etc.(it is used for http request assertion) expect().toBeNull().(compared against null) expect().toBeTruthy(),expect().toBeFalsy()..(use for Boolean casting testing) expect().toContain()..(use for pattern matching) expect().toMatch().(it is used for regular expression) Unit Testing Of JavaScript and Angularjs Application Using Karma-Jasmine Framework 4/17/2015
15. 15. What is Karma? Karma is TEST RUNNER Tool to spawn a web server that executes source code against test code Can run tests for different browsers Provides watches for source files, whenever file changes it triggers the test run and run tests again http://karma-runner.github.io/0.12/intro/installation.html 4/17/2015Unit Testing Of JavaScript and Angularjs Application Using Karma-Jasmine Framework
16. 16. Karma Configuration Steps 4/17/2015Unit Testing Of JavaScript and Angularjs Application Using Karma-Jasmine Framework
17. 17. Create Karma Configuration File (karma.config.js) 4/17/2015Unit Testing Of JavaScript and Angularjs Application Using Karma-Jasmine Framework