Offshore AngularJS- development- Hire-AngularJS-Developers- Outsource-AngularJS-Development
Unit Testing and Coverage for AngularJS
-
Upload
knoldus-software-llp -
Category
Software
-
view
2.678 -
download
0
Transcript of Unit Testing and Coverage for AngularJS
![Page 1: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/1.jpg)
Unit Testing and Coverage for AngularJS
Sumit Khanduri
Software Consultant Knoldus Software LLP
![Page 2: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/2.jpg)
Introduction
● Unit testing, as the name implies, is about testing individual units of code.
● "Did I think about the logic correctly?" or "Does the sort function order the list in the right order?"
● The primary goal of unit testing is to take the smallest piece of testable software in the application.
![Page 3: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/3.jpg)
Testing AngularJS App`s
● AngularJS build around the concept of dependency injection & loose coupling to the DOM which make it testable.
● Angular comes with dependency injection built-in, which makes testing
components much easier, because you can pass in a component's dependencies and mock them as you wish.
● Components that have their dependencies injected allow them to be easily mocked on a test by test basis, without having to mess with any global variables that could accidentally affect another test.
![Page 4: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/4.jpg)
TDD
![Page 5: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/5.jpg)
● Karma is a JavaScript command line tool that can be used to spawn a web server which loads your application's source code and executes your tests.
● You can configure Karma to run against a number of browsers.
● Karma is a NodeJS application, and should be installed through npm.
![Page 6: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/6.jpg)
The main goal for Karma is to bring a productive testing environment todevelopers. The environment being one where they don't have to set up
loads of configurations, but rather a place where developers can just write the code and get instant feedback from their tests. Because getting
quick feedback is what makes you productive and creative.
http://karma-runner.github.io/
![Page 7: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/7.jpg)
Jasmine is a behavior-driven development framework for testingJavaScript code. It does not depend on any other JavaScript
frameworks. It does not require a DOM. And it has a clean, obvioussyntax so that you can easily write tests.
http://jasmine.github.io/
![Page 8: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/8.jpg)
Unit Test Strucuture - Specs
it('should increment a variable', function () {
var foo = 0; // set up the world
foo++; // call your application code
expect(foo).toEqual(1); // passes because foo == 1
});
![Page 9: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/9.jpg)
Unit Test Structure – Suites
Collections of specsYour test files will contain one or more suites, each with one ormore specs.
describe("User Validation", function() { it("requires a name", function() {
//spec content })
it("does not validate invalid names", function() { //spec content
})});
![Page 10: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/10.jpg)
Unit Test Structure – expect()
expect() is the actual 'test'Takes a value, then 'matchers'
it('should increment a variable', function () { var foo = 0; // set up the world foo++; // call your application code expect(foo).toEqual(1); // passes because foo == 1
});
![Page 11: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/11.jpg)
Mocking in Jasmine
A test is not a unit test if:
1. It talks to the database2. It communicates across the network3. It touches the file system4. It can't run correctly at the same time as any of your other unit
tests5. You have to do special things to your environment (such asediting config files) to run it.
~ Michael FeathersNeed to use mocks to simulate calls to external services, files, etcNeed to use mocks to reduce real dependencies in tests.
![Page 12: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/12.jpg)
Mock HTTP ($httpBackend)
● Fake HTTP backend implementation suitable for unit testing applications that use the $http service.
● Example:
mockHttpBackend.expect('POST',config.serverURL+ 'admin/login',{'email':'','password':''}).respond({ data : {} });
![Page 13: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/13.jpg)
Matchers
![Page 14: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/14.jpg)
Mocking in Jasmine – Spies
● Easily inject mock/monitoring objects● Replaces or wraps the function it's spying on● Gives run-time statistics on the spied function● Know how many times a function has been called● Inspect return values● Inspect parameters it('should run Successfully', function() { spyOn(mockState, 'go'); mockScope.addEmployee(); expect(mockState.go).toHaveBeenCalledWith('home');});
![Page 15: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/15.jpg)
Spies
![Page 16: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/16.jpg)
Istanbul
Yet another JS code coverage tool that computes statement, line, function and branch coverage with module loader hooks to transparently add coverage when running tests. Supports all JS coverage use cases including unit tests, server side functional tests
https://www.npmjs.com/package/istanbul
![Page 17: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/17.jpg)
Istanbul-Setup● Install karma-coverage
> sudo npm install -g karma-coverage
● Install istanbul
> sudo npm install istanbul
● Karma.conf.js
> Inside preprocessors json object add the path to your file for which you need coverage report. E.g., preprocessors: 'app/component/add/add.ctrl.js':'coverage',
> Inside reporters add a string named 'coverage', E.g., reporters: ['progress','coverage',].
![Page 18: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/18.jpg)
Istanbul Report
![Page 19: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/19.jpg)
Setup Test Environment
● Install Karma
> npm install -g karma –save-dev
● Install Jasmine
> npm install karma-jasmine jasmine-core –save-dev
● Install ngMock
> npm install angular-mocks –save-dev
● Browser
> npm install karma-chrome-launcher –save-dev
● Create two folders in your working directory
> mkdir app
> mkdir tests
![Page 20: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/20.jpg)
Contd..● Karma.conf.js
> karma init
> Select jasmine as your testing framework
> Select browser, whichever you like
> Specify the paths to your spec files. E.g., 'app/*.js', 'test/*.js'.
> Add the location of angularjs in your karma.conf.js.
> Add the location of ngMock library in your karma.conf.js
● Optional commands
> npm install karma --save-dev
> npm install karma-jasmine karma-chrome-launcher –save-dev
> npm install -g karma-cli
> karma start
![Page 21: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/21.jpg)
Questions ?
![Page 22: Unit Testing and Coverage for AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022050613/58f215231a28ab87258b45f5/html5/thumbnails/22.jpg)
References
● http://www.slideshare.net/timoxley/testing-with-jasmine?next_slideshow=1
● http://www.slideshare.net/nirkaufman/angularjs-unit-testing
● http://java.ociweb.com/mark/other-presentations/AngularJS-Testing.pdf
● https://www.youtube.com/watch?v=f7lIBiLmISQ