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.

Javascript unit tests with angular 1.x

199 views

Published on

Explain basic principles of javascript unit testing in angular 1.x, using jasmine test framework.

Published in: Technology
  • Be the first to comment

Javascript unit tests with angular 1.x

  1. 1. javascript Unit Tests with Angular 1.x Ron Apelbaum AppPulse, HPE July 2016
  2. 2. Agenda • javascript dangers • Testable code Motivation • Test framework Jasmine • Understand angular 1.x Angular unit test • Karma, IntelliJ Real world 2
  3. 3. 3 github.com/ronapelbaum/angular-jasmine
  4. 4. Software Testing 4 Code Quality Functionality
  5. 5. Unit testing 5 Given When Then
  6. 6. 6 When <code> Then Given
  7. 7. javascript: welcome to runtime errors 7
  8. 8. Scripting language 8 jsFiddle
  9. 9. Modular Coding 9 jsFiddle
  10. 10. JavaScript Unit Testing 10 1 Runtime Compilation 2 3 Modular coding Very Fast
  11. 11. Questions? 11
  12. 12. Jasmine introduction 12
  13. 13. Specs (1) 13
  14. 14. 14 Specs (2)
  15. 15. 15
  16. 16. toBe() || not.toBe() 16
  17. 17. Matchers (2): toEqual 17
  18. 18. Matchers (3) 18
  19. 19. Matchers (4) 19
  20. 20. 20 1. test a function 2. test an object 3. testable code
  21. 21. Questions? 21
  22. 22. 22
  23. 23. 23 Spies (1): spyOn Spy on an existing object member
  24. 24. Spies (2): spyOn 24
  25. 25. Spies (3): createSpy 25
  26. 26. Spies (4): createSpyObj 26 Create an object and Spy on ‘virtual’ members
  27. 27. 27 1. Testable code? 2. spyOn 3. createSpyObj 4. CallFake
  28. 28. Questions? 28
  29. 29. Jasmine + angular 29
  30. 30. 30 Constructor definition: Usage: New()
  31. 31. 31 Constructor definition: Usage: DI definition: Angular 101
  32. 32. angular angular.module() $injector 32
  33. 33. ngMock angular.mock.module() angular.mock.inject() 33
  34. 34. 34 Services
  35. 35. test a service 35 namespace get instance
  36. 36. test a service: inject() + spyOn() 36 spyOn the instance from DI
  37. 37. 37 1. Test a service 2. inject () + spyOn()
  38. 38. $provide Registering components with the $injector angular.module(...).service(...) angular.module(...).factory(...) 38
  39. 39. test a service: createSpyObj() + $provide 39 Create another module Override namespace Gets mock instance
  40. 40. 40 createSpyObj() + $provide()
  41. 41. Questions? 41
  42. 42. 42 Controllers
  43. 43. test a controller 43 $controller test
  44. 44. test a controller ($scope) 44 $controller test $rootScope DI
  45. 45. 45 1. Stateless controller 2. Controller as 3. $scope
  46. 46. 46 Directives
  47. 47. $compile Compiles DOM into a template and produces a template function 47
  48. 48. test a directive 48 Create element test $compile with scope Change scope Test element
  49. 49. 49 1. Directive + attrs 2. Directive + scope + watch
  50. 50. 50 Patterns
  51. 51. 51 1. $http 2. $timeout 3. Events 4. Promises
  52. 52. Real Life (demo) 52
  53. 53. Summary Core Angular • Service • Controller • Directive Patters • $http • $watch • $q • Events Real Life • Karma • Debug • coverage 53
  54. 54. Links  JsFiddle examples: https://github.com/ronapelbaum/angular-jasmine  Summary exercise: https://github.com/ronapelbaum/mangal  My Blog: https://ronapelbaum.wordpress.com/tag/angular-jasmine 54
  55. 55. Thank you ron.apelbaum@hpe.com 55

×