JavaCro'14 - Unit testing in AngularJS – Slaven Tomac

1,919 views
1,814 views

Published on

Unit testing in JavaScript? There is no such thing.” This is something most of the Java developers would say. With AngularJS coming more and more to scene and Google standing behind it, testing is starting to be core part of all AngularJS project. I would like to show how you can do unit testing in pure JavaScript (AngularJS) application (together with backend mocking…).

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,919
On SlideShare
0
From Embeds
0
Number of Embeds
1,309
Actions
Shares
0
Downloads
11
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

JavaCro'14 - Unit testing in AngularJS – Slaven Tomac

  1. 1. Slaven Tomac (Amphinicy Technologies) slaven.tomac@amphinicy.com @slaventomac
  2. 2. JavaScript unit testing AngularJS application testing tools Karma Jasmine Angular MockAngular Mock What to test Example
  3. 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. 4. Karma – test launcher Assertion frameworks (Jasmine, Mocha, QUnit …) AngularMock library (optional) Prerequsitions:Prerequsitions: ◦ Node.js ◦ NPM (Node Package Manager)
  5. 5. Test runner ◦ launches HTTP 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. 6. Assertion library Karma supports it 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. 7. AngularJS mocking library Injecting and 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. 8. Directives Services Controllers Filters InterceptorsInterceptors 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(if includes backend requests, $httpBackend mock required)
  11. 11. Scope – variable instantiation Scope – function definitions and functionality Application workflow Note: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’)(dependency injection with suffix ‘Filter’) beforeEach (inject(function(ageRangeFilter) { myAgeRangeFilter = ageRangeFilter; }));
  13. 13. Application for displaying JavaCro atendees and filtering them by agefiltering them by age
  14. 14. E2E tests How to make 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. 15. 60% 75% 75% 90% 60% 70% 80% 90% 100% WebUI unit testing 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. 16. Use Karma as test 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. 17. Thank you!

×