JavaCro'14 - Unit testing in AngularJS – Slaven Tomac

JavaCro'14 - Unit testing in AngularJS – Slaven Tomac

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