Basic introduction of Karma-Jasmine framework.How to setup testing environment.

1. UnitTesting Of JavaScript
and Angularjs Application
Using Karma-Jasmine
Framework
-Samyak Bhalerao
(smk.bhalerao@gmail.com/samyak.bhalerao@xoriant.com)

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Karma Configuration Steps
4/17/2015Unit Testing Of JavaScript and Angularjs Application Using Karma-Jasmine Framework

17. Create Karma Configuration File
(karma.config.js)
4/17/2015Unit Testing Of JavaScript and Angularjs Application Using Karma-Jasmine Framework