This document discusses using Jasmine for unit testing JavaScript and Angular 1.x applications. It covers setting up a test framework with Jasmine and Karma, writing testable code, and testing Angular services, controllers, directives, and common patterns. Real-world examples are provided for testing Angular services using spies and dependency injection. The document emphasizes writing tests with a Given-When-Then structure, using matchers like toBe() and toEqual(), and spies for method stubs. Links are included for code samples, exercises, and the author's blog for further information on testing Angular applications with Jasmine.

1. javascript Unit Tests with
Angular 1.x
Ron Apelbaum
AppPulse, HPE
July 2016

2. Agenda
• javascript dangers
• Testable code
Motivation
• Test framework
Jasmine
• Understand angular 1.x
Angular unit test
• Karma, IntelliJ
Real world
2

3. 3
github.com/ronapelbaum/angular-jasmine

4. Software Testing
4
Code Quality
Functionality

5. Unit testing
5
Given
When
Then

6. 6
When
<code>
Then
Given

7. javascript: welcome to runtime errors
7

8. Scripting language
8
jsFiddle

9. Modular Coding
9
jsFiddle

10. JavaScript Unit Testing
10
1 Runtime Compilation
2
3
Modular coding
Very Fast

11. Questions?
11

12. Jasmine introduction
12

13. Specs (1)
13

14. 14
Specs (2)

15. 15

16. toBe() || not.toBe()
16

17. Matchers (2): toEqual
17

18. Matchers (3)
18

19. Matchers (4)
19

20. 20
1. test a function
2. test an object
3. testable code

21. Questions?
21

22. 22

23. 23
Spies (1): spyOn
Spy on an existing object member

24. Spies (2): spyOn
24

25. Spies (3): createSpy
25

26. Spies (4): createSpyObj
26
Create an object and Spy on ‘virtual’ members

27. 27
1. Testable code?
2. spyOn
3. createSpyObj
4. CallFake

28. Questions?
28

29. Jasmine + angular
29

30. 30
Constructor definition:
Usage:
New()

31. 31
Constructor definition:
Usage:
DI definition:
Angular 101

32. angular
angular.module()
$injector
32

33. ngMock
angular.mock.module()
angular.mock.inject()
33

34. 34
Services

35. test a service
35
namespace
get instance

36. test a service:
inject() + spyOn()
36
spyOn the instance from DI

37. 37
1. Test a service
2. inject () + spyOn()

38. $provide
Registering components with the $injector
angular.module(...).service(...)
angular.module(...).factory(...)
38

39. test a service:
createSpyObj() + $provide
39
Create another module
Override namespace
Gets mock instance

40. 40
createSpyObj() + $provide()

41. Questions?
41

42. 42
Controllers

43. test a controller
43
$controller
test

44. test a controller ($scope)
44
$controller
test
$rootScope
DI

45. 45
1. Stateless controller
2. Controller as
3. $scope

46. 46
Directives

47. $compile
Compiles DOM into a template and produces a
template function
47

48. test a directive
48
Create element
test
$compile with scope
Change scope
Test element

49. 49
1. Directive + attrs
2. Directive + scope + watch

50. 50
Patterns

51. 51
1. $http
2. $timeout
3. Events
4. Promises

52. Real Life (demo)
52

53. Summary
Core Angular
• Service
• Controller
• Directive
Patters
• $http
• $watch
• $q
• Events
Real Life
• Karma
• Debug
• coverage
53

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. Thank you
ron.apelbaum@hpe.com
55