Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Unit Testing in Practice
nirkaufman@gmail.com
Download the reference project at:
https://github.com/nirkaufman/angularjs-unit-testing-demo
contact ...
nirkaufman@gmail.com
Getting Started with Unit Testing
Intruduction
nirkaufman@gmail.com
About Unit Testing
The primary goal of unit testing is to take the smallest piece of testable
softwar...
nirkaufman@gmail.com
Testing AngularJS App`s
AngularJS build around the concept of dependency injection & loose coupling
t...
nirkaufman@gmail.com
Test Driven Developemnt
a software development process that relies on the repetition of a very short
...
nirkaufman@gmail.com
RED
(fail)
Green
(pass)
REFACTO
R
1. write a test that fails
2. write only enougth
code to make it pa...
nirkaufman@gmail.com
The main goal for Karma is to bring a productive testing environment to
developers. The environment b...
nirkaufman@gmail.com
Jasmine is a behavior-driven development framework for testing
JavaScript code. It does not depend on...
nirkaufman@gmail.com
Setting up our TDD Enveirment
Project Setup
nirkaufman@gmail.com
Let`s start from scratch.
First, we need to create a basic project structure with a
folder that conta...
nirkaufman@gmail.com
$ npm install karma
let`s install Karma (and all the plugins your project
needs) locally in the proje...
nirkaufman@gmail.com
$ npm install karma-jasmine
$ npm install karma-chrome-launcher
since we going to use jasmine, let`s ...
nirkaufman@gmail.com
$ npm install -g karma-cli
Finally, we will install the karma command line interface
(cli) globally, ...
nirkaufman@gmail.com
$ karma init
with the karma cli installed, we can create our
configuration file fast and easy.
nirkaufman@gmail.com
$ karma start
$ karma run
Let`s take karma for a test drive:
in webstorm, right click on the configur...
nirkaufman@gmail.com
quick intruduction to the Jasmine framwork
Jasmine 101
nirkaufman@gmail.com
describe("suite name", function() {
it("contains spec with an expectation", function() {
expect(true)...
nirkaufman@gmail.com
describe("suite name", function() {
beforeEach(function () {//excute before each spec})
it("contains ...
nirkaufman@gmail.com
// spy on the method setBar of foo object
spyOn(foo, 'setBar');
it("contains spec with an expectation...
nirkaufman@gmail.com
Test Driven Development in practice
Testing AngularJS
nirkaufman@gmail.com
$ bower install angular
$ bower install angular-mocks
We are going to develop a small Task Manger app...
nirkaufman@gmail.com
Controllers
nirkaufman@gmail.com
// get the module that contain the controller
beforeEach(module('todolist'));
// inject the $controll...
nirkaufman@gmail.com
services
Services
nirkaufman@gmail.com
// get the module that contain the service
beforeEach(module('todolist'));
// inject the $injector
be...
nirkaufman@gmail.com
Directive
nirkaufman@gmail.com
// get the module that contain the service
beforeEach(module('todolist'));
// inject the $compile ser...
nirkaufman@gmail.com
http requests
nirkaufman@gmail.com
// inject the $httpBackend service and the $rootScope
beforeEach(inject(function ($httpBackend) {
// ...
nirkaufman@gmail.com
Productive Tips
Making testing even more easier
nirkaufman@gmail.com
When the number of test suites and specs grows larger,
the overall test speed is affected.
jasmine in...
nirkaufman@gmail.com
in webstorm the run panel enable us some more
featuers like:
Set Auto Test Delay Time
Export Test Res...
nirkaufman@gmail.com
Thank You!
Download the reference project at:
https://github.com/nirkaufman/angularjs-unit-testing-de...
Upcoming SlideShare
Loading in …5
×

of

Angularjs - Unit testing introduction Slide 1 Angularjs - Unit testing introduction Slide 2 Angularjs - Unit testing introduction Slide 3 Angularjs - Unit testing introduction Slide 4 Angularjs - Unit testing introduction Slide 5 Angularjs - Unit testing introduction Slide 6 Angularjs - Unit testing introduction Slide 7 Angularjs - Unit testing introduction Slide 8 Angularjs - Unit testing introduction Slide 9 Angularjs - Unit testing introduction Slide 10 Angularjs - Unit testing introduction Slide 11 Angularjs - Unit testing introduction Slide 12 Angularjs - Unit testing introduction Slide 13 Angularjs - Unit testing introduction Slide 14 Angularjs - Unit testing introduction Slide 15 Angularjs - Unit testing introduction Slide 16 Angularjs - Unit testing introduction Slide 17 Angularjs - Unit testing introduction Slide 18 Angularjs - Unit testing introduction Slide 19 Angularjs - Unit testing introduction Slide 20 Angularjs - Unit testing introduction Slide 21 Angularjs - Unit testing introduction Slide 22 Angularjs - Unit testing introduction Slide 23 Angularjs - Unit testing introduction Slide 24 Angularjs - Unit testing introduction Slide 25 Angularjs - Unit testing introduction Slide 26 Angularjs - Unit testing introduction Slide 27 Angularjs - Unit testing introduction Slide 28 Angularjs - Unit testing introduction Slide 29 Angularjs - Unit testing introduction Slide 30 Angularjs - Unit testing introduction Slide 31 Angularjs - Unit testing introduction Slide 32 Angularjs - Unit testing introduction Slide 33 Angularjs - Unit testing introduction Slide 34
Upcoming SlideShare
TDD Basics with Angular.js and Jasmine
Next
Download to read offline and view in fullscreen.

20 Likes

Share

Download to read offline

Angularjs - Unit testing introduction

Download to read offline

A presentation made for the AngularJS-IL meetup group that took place in May 2014 at Google TLV Campus. its a demonstration of Unit testing an AngularJS component with jasmine and karma.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Angularjs - Unit testing introduction

  1. 1. Unit Testing in Practice
  2. 2. nirkaufman@gmail.com Download the reference project at: https://github.com/nirkaufman/angularjs-unit-testing-demo contact me at: nirkaufman@gmail.com or http://www.linkedin.com/in/nirkaufman
  3. 3. nirkaufman@gmail.com Getting Started with Unit Testing Intruduction
  4. 4. nirkaufman@gmail.com About Unit Testing The primary goal of unit testing is to take the smallest piece of testable software in the application, isolate it from the remainder of the code, and determine whether it behaves exactly as you expect.
  5. 5. nirkaufman@gmail.com Testing AngularJS App`s AngularJS build around the concept of dependency injection & loose coupling to the DOM which make it a very tesable.
  6. 6. nirkaufman@gmail.com Test Driven Developemnt a software development process that relies on the repetition of a very short development cycle: first the developer writes an (initially failing) automated test case that defines a desired improvement or new function, then produces the minimum amount of code to pass that test, and finally refactors the new code to acceptable standards.
  7. 7. nirkaufman@gmail.com RED (fail) Green (pass) REFACTO R 1. write a test that fails 2. write only enougth code to make it pass 3. improve code quality Test Driven Developemnt
  8. 8. nirkaufman@gmail.com The main goal for Karma is to bring a productive testing environment to developers. 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/
  9. 9. nirkaufman@gmail.com 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. And it has a clean, obvious syntax so that you can easily write tests. http://jasmine.github.io/
  10. 10. nirkaufman@gmail.com Setting up our TDD Enveirment Project Setup
  11. 11. nirkaufman@gmail.com Let`s start from scratch. First, we need to create a basic project structure with a folder that contain our sources, and a folder that contains our specs. then we can init a package.json $ npm init
  12. 12. nirkaufman@gmail.com $ npm install karma let`s install Karma (and all the plugins your project needs) locally in the project's directory. (don`t forget to use the --save-dev flags)
  13. 13. nirkaufman@gmail.com $ npm install karma-jasmine $ npm install karma-chrome-launcher since we going to use jasmine, let`s install tha karma adaptor plugin for jasmine. we will also install the chrome launcher plugin to enable karma to launch chrome browser fo us
  14. 14. nirkaufman@gmail.com $ npm install -g karma-cli Finally, we will install the karma command line interface (cli) globally, which enable us to easily configure karma in our project
  15. 15. nirkaufman@gmail.com $ karma init with the karma cli installed, we can create our configuration file fast and easy.
  16. 16. nirkaufman@gmail.com $ karma start $ karma run Let`s take karma for a test drive: in webstorm, right click on the configuration file and choose run. if you don`t use webstorm, start the karma server with start, and run you tests with run
  17. 17. nirkaufman@gmail.com quick intruduction to the Jasmine framwork Jasmine 101
  18. 18. nirkaufman@gmail.com describe("suite name", function() { it("contains spec with an expectation", function() { expect(true).toBe(true); }); }); in jasmine, we begin by creating a test suite with the global describe function that wrap our specs. specs are defined by the global function it. inside the spec we can describe our expextations by using tha expect function chained to a matcher function
  19. 19. nirkaufman@gmail.com describe("suite name", function() { beforeEach(function () {//excute before each spec}) it("contains spec with an expectation", function() { expect(true).toBe(true); }); afterEach(function () {//excute after each spec}) }); we can run code before and after each spec in a suite block using the beforeEach and afterEach functions
  20. 20. nirkaufman@gmail.com // spy on the method setBar of foo object spyOn(foo, 'setBar'); it("contains spec with an expectation", function() { expect(foo.setBar).toHaveBeenCalled(); expect(foo.setBar).toHaveBeenCalledWith(32); }); }); jasmine use spies to track calls to a function with all it`s arguments. There are special matchers for interacting with spies. The toHaveBeenCalled and The toHaveBeenCalledWith
  21. 21. nirkaufman@gmail.com Test Driven Development in practice Testing AngularJS
  22. 22. nirkaufman@gmail.com $ bower install angular $ bower install angular-mocks We are going to develop a small Task Manger app. in the process we will learn how to unit test the building blocks of every AngularJS application: controllers, services, directives, events & http requests. First, let`s get some resources using bower
  23. 23. nirkaufman@gmail.com Controllers
  24. 24. nirkaufman@gmail.com // get the module that contain the controller beforeEach(module('todolist')); // inject the $controller and the rootScope beforeEach(inject(function ($rootScope, $controller) { // create a fresh new scope for the controller scope = $rootScope.$new(); // create a controller with this scope ctrl = $controller('TodoListController',{$scope: scope}); })); In order to test controllers we need to holds an instance of the controller, initialize a scope for it and testing our expectations against that scope.
  25. 25. nirkaufman@gmail.com services Services
  26. 26. nirkaufman@gmail.com // get the module that contain the service beforeEach(module('todolist')); // inject the $injector beforeEach(inject(function ($injector) { // use the $injector to get a hold on the service service = $injector.get(‘ServiceName’); })); In order to test services we need to use the $injector to get an instance of the service
  27. 27. nirkaufman@gmail.com Directive
  28. 28. nirkaufman@gmail.com // get the module that contain the service beforeEach(module('todolist')); // inject the $compile service and the $rootScope beforeEach(inject(function ($compile, $rootScope) { // use the $rootScope to create a scope for the directive scope = $rootScope; // create an angular element from a HTML string element = angular.element(‘<div my-directive ></div>’) // compile the element with the scope $compile(element)(scope) scope.$apply() })); In order to test a directive, we need to create an element that will host the directive and compile it with a scope. in our spec, we need trigger the digest.
  29. 29. nirkaufman@gmail.com http requests
  30. 30. nirkaufman@gmail.com // inject the $httpBackend service and the $rootScope beforeEach(inject(function ($httpBackend) { // use the $rootScope to create a scope for the directive httpBackend = $httpBackend; it("somting that make a request", function() { // expect a request httpBackend.expectGET(‘api’).respond(200); // code that make a request httpBackend.flush(); // do`nt forget to flush.. }); })); the $httpBackend is a fake HTTP Back-end implementaion. in the most basic use we can verify that a request is made & stub responses
  31. 31. nirkaufman@gmail.com Productive Tips Making testing even more easier
  32. 32. nirkaufman@gmail.com When the number of test suites and specs grows larger, the overall test speed is affected. jasmine include some usfull syntax to control it. // run this usite ddescribe() // run this spec iit() // run this spec xit() webstorm users can install the ddescriber for jasmine
  33. 33. nirkaufman@gmail.com in webstorm the run panel enable us some more featuers like: Set Auto Test Delay Time Export Test Results Filter and sort Run / Debug Configuration live templates
  34. 34. nirkaufman@gmail.com Thank You! Download the reference project at: https://github.com/nirkaufman/angularjs-unit-testing-demo contact me at: nirkaufman@gmail.com or http://www.linkedin.com/in/nirkaufman
  • BamaAbougou

    Jul. 20, 2017
  • utcuong3010

    May. 24, 2017
  • selvam4win

    Apr. 11, 2017
  • TheJTjon

    Apr. 6, 2017
  • jcmmleite

    Mar. 29, 2017
  • TiffaniRogers

    Aug. 19, 2016
  • SamehDeabes

    Feb. 24, 2016
  • winggundamth

    Dec. 15, 2015
  • up1

    Dec. 15, 2015
  • surapas

    Nov. 1, 2015
  • pomelo8121

    Jul. 14, 2015
  • njgautam

    Jul. 10, 2015
  • Xerardoo

    May. 9, 2015
  • studoo1

    Apr. 30, 2015
  • theanhhuy

    Apr. 22, 2015
  • JeremySchacherer

    Mar. 24, 2015
  • NitayNeeman

    Nov. 18, 2014
  • tattuanphong

    Jun. 30, 2014
  • mohammadaeno

    Jun. 17, 2014
  • karimofikry1

    Jun. 17, 2014

A presentation made for the AngularJS-IL meetup group that took place in May 2014 at Google TLV Campus. its a demonstration of Unit testing an AngularJS component with jasmine and karma.

Views

Total views

9,593

On Slideshare

0

From embeds

0

Number of embeds

155

Actions

Downloads

474

Shares

0

Comments

0

Likes

20

×