Slaven tomac unit testing in angular js


Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • no unit to testdon’t know which js file does what and what to expect from itStandardsMVCDOM manipulation only in directivesMaintainable and easy to test codeAngular philosophy encourages developers to create their own directives, turning the HTML into aDSL suited to building their kind of app. The result significantly reduces the amount and complexity of JavaScript needed to build web applications.The Angular philosophy is that UI is best described in declarative form (HTML), and that behavior is best described in imperative form (JavaScript) and that the two should never meet.
  • A test suite begins with a call to the global Jasmine functiondescribe with two parameters: a string and a function. The string is a name or title for a spec suite – usually what is being tested. The function is a block of code that implements the suite.Specs are defined by calling the global Jasmine function it, which, like describe takes a string and a function. The string is the title of the spec and the function is the spec, or test. A spec contains one or more expectations that test the state of the code. An expectation in Jasmine is an assertion that is either true or false. A spec with all true expectations is a passing spec. A spec with one or more false expectations is a failing spec.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.
  • a) Original service b) Mocked service$exceptionHandler –Any uncaught exception in angular expressions is delegated to this service. The default implementation simply delegates to $log.error which logs it into the browser console.This service is overridden by mock $exceptionHandler which aids in testing.$log –Simple service for logging. Default implementation safely writes the message into the browser's console (if present).Mock implementation of $log that gathers all logged messages in arrays (one array per logging level). These arrays are exposed as logs property of each of the level-specific log function, e.g. for level error the array is exposed as $log.error.logs.$interval – Angular'swrapper for window.setInterval. The fn function is executed every delay milliseconds.In tests you can use $interval.flush(millis) to move forward by millis milliseconds and trigger any functions scheduled to run in that time.$timeout –Angular's wrapper for window.setTimeout. The fn function is wrapped into a try/catch block and delegates any exceptions to $exceptionHandler serviceIn tests you can use $timeout.flush() to synchronously flush the queue of deferred functions.$httpBackend – Fake HTTP backend implementation suitable for unit testing applications that use the $http service.During unit testing, we want our unit tests to run quickly and have no external dependencies so we don’t want to send XHR or JSONPrequests to a real server. All we really need is to verify whether a certain request has been sent or not, or alternatively just let the application make requests, respond with pre-trained responses and assert that the end result is what we expect it to be.
  • If you don’t mock $httpBackend karma will throw exception about unexpected request
  • Yeoman – your tests always in same (standard place)Grunt – it will deploy your application in production without all unnecessary testsBower – you don’t need dependencies on your integration server (your tests are not using them)
  • Slaven tomac unit testing in angular js

    1. 1. Slaven Tomac (Amphinicy Technologies) @slaventomac
    2. 2.  JavaScript unit testing  AngularJS application testing tools  Karma  Jasmine  Angular Mock  What to test  Example
    3. 3.  JavaScript testing problems ◦ Mixed JS/DOM ◦ Mixed backend calls into JS functions  AngularJS tries to fight it ◦ DOM manipulations only in directives ◦ Business logic in services ◦ Flow of application in controllers ◦ . . .
    4. 4.  Karma – test launcher  Assertion frameworks (Jasmine, Mocha, QUnit …)  AngularMock library (optional)  Prerequsitions: ◦ Node.js ◦ NPM (Node Package Manager)
    5. 5.  Test runner ◦ launches HTTP server ◦ loads needed files ◦ runs test  All major browsers supported  Available for testing on continuous integration server  Configuration driven npm install karma -g
    6. 6.  Assertion library  Karma supports it via plugin  (Custom) Matchers  Setup and Teardown (beforeEach, afterEach)  Spies describe("One testing suite", function() { it("contains spec with an expectation", function() { var javaCroAtendees = 12; expect(javaCroAtendees).toBe(12, "number of javaCroAtendees should be 12”); }); npm install karma-jasmine -g
    7. 7.  AngularJS mocking library  Injecting and mocking Angular services  Included mocks ◦ $exceptionHandler ◦ $log ◦ $interval ◦ $timeout ◦ $httpBackend $httpBackend .when('GET', '/api/1.0/event') .respond( [ { ‘event_name’ : ’javaCro’, ‘location’ : ’Porec’ }, . . . ] )
    8. 8.  Directives  Services  Controllers  Filters  Interceptors  Resources  . . .  JavaScript
    9. 9.  Layout  Functionalities  Model changes ($apply required)  Scope Note: ($compile required) element = $compile('<card-deck cards="myCards"></card-deck>'); <ul> <li>Ace of Spades</li> <li>Queen of Hearts</li> </ul>
    10. 10.  Function definition  Function testing Note: (if includes backend requests, $httpBackend mock required)
    11. 11.  Scope – variable instantiation  Scope – function definitions and functionality  Application workflow Note: ($controller needed) beforeEach (inject(function ($controller) { MainCtrl = $controller('MainCtrl', { $scope: scope }); }));
    12. 12.  Functionality  DOM changes ($compile needed) Note: (dependency injection with suffix ‘Filter’) beforeEach (inject(function(ageRangeFilter) { myAgeRangeFilter = ageRangeFilter; }));
    13. 13.  Application for displaying JavaCro atendees and filtering them by age
    14. 14.  E2E tests  How to make testing/developing more standard/automated? ◦ Use Yeoman for scaffolding your app structure ◦ Use Grunt for building, deploying and automated testing yo angular grunt serve
    15. 15. 15% 60% 75% 75% 30% 90% 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% 2y ago 6m ago 3m ago EOY 2014 WebUI unit testing strategy Web GUIs Unit tests Automated tests Hey, let’s use AngularJS
    16. 16.  Use Karma as test runner  Write your tests in Jasmine  Integrate Karma on continuous integration server and TEST, TEST, TEST, TEST… you’ll be happier later 
    17. 17. Thank you!