Javascript unit tests with angular 1.x
-
Upload
ron-apelbaum -
Category
Technology
-
view
112 -
download
1
Transcript of Javascript unit tests with angular 1.x
![Page 1: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/1.jpg)
javascript Unit Tests with Angular 1.x
Ron ApelbaumAppPulse, HPE
July 2016
![Page 2: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/2.jpg)
2
Agenda• javascript dangers• Testable code
Motivation
• Test framework
Jasmine
• Understand angular 1.x
Angular unit test
• Karma, IntelliJReal world
![Page 3: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/3.jpg)
3
github.com/ronapelbaum/angular-jasmine
![Page 4: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/4.jpg)
4
Software TestingE2E
Component
Unit TestCode Quality
Functionality
![Page 5: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/5.jpg)
5
Unit testingGiven
When
Then
![Page 6: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/6.jpg)
6
When
<code>
Then
Given
![Page 7: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/7.jpg)
7
javascript: welcome to runtime errors
![Page 10: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/10.jpg)
10
JavaScript Unit Testing1 Runtime Compilation
2
3
Modular coding
Very Fast
![Page 11: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/11.jpg)
11
Questions?
![Page 12: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/12.jpg)
12
Jasmine introduction
![Page 13: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/13.jpg)
13
Specs (1)
![Page 14: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/14.jpg)
14
Specs (2)
![Page 15: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/15.jpg)
15
![Page 16: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/16.jpg)
16
toBe() || not.toBe()
![Page 17: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/17.jpg)
17
Matchers (2): toEqual
![Page 18: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/18.jpg)
18
Matchers (3)
![Page 19: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/19.jpg)
19
Matchers (4)
![Page 20: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/20.jpg)
20
1. test a function
2. test an object
3. testable code
![Page 21: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/21.jpg)
21
Questions?
![Page 22: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/22.jpg)
22
![Page 23: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/23.jpg)
23
Spies (1): spyOnSpy on an existing object member
![Page 24: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/24.jpg)
24
Spies (2): spyOn
![Page 25: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/25.jpg)
25
Spies (3): createSpy
![Page 26: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/26.jpg)
26
Spies (4): createSpyObj
Create an object and Spy on ‘virtual’ members
![Page 27: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/27.jpg)
27
1. Testable code?
2. spyOn
3. createSpyObj
4. CallFake
![Page 28: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/28.jpg)
28
Questions?
![Page 29: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/29.jpg)
29
Jasmine + angular
![Page 30: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/30.jpg)
30
Constructor definition:
Usage:New()
![Page 31: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/31.jpg)
31
Constructor definition:
Usage:
DI definition:Where is new()?
Angular 101
![Page 32: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/32.jpg)
32
angular
angular.module()
$injector
![Page 33: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/33.jpg)
33
ngMock
angular.mock.module()
angular.mock.inject()
![Page 34: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/34.jpg)
34
Services
![Page 35: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/35.jpg)
35
test a service namespace
get instance
![Page 36: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/36.jpg)
36
test a service: inject() + spyOn()
spyOn the instance from DI
![Page 37: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/37.jpg)
37
1. Test a service
2. inject () + spyOn()
![Page 38: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/38.jpg)
38
$provide
Registering components with the $injector
angular.module(...).service(...)
angular.module(...).factory(...)
![Page 39: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/39.jpg)
39
test a service: createSpyObj() + $provide
Create another module
Override namespace
Gets mock instance
![Page 41: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/41.jpg)
41
Questions?
![Page 42: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/42.jpg)
42
Controllers
![Page 43: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/43.jpg)
43
test a controller$controller
test
![Page 44: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/44.jpg)
44
test a controller ($scope)$controller
test
$rootScope
DI
![Page 45: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/45.jpg)
45
1. Stateless controller
2. Controller as
3. $scope
![Page 46: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/46.jpg)
46
Directives
![Page 47: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/47.jpg)
47
$compile
Compiles DOM into a template and produces a template function
![Page 48: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/48.jpg)
48
test a directive Create element
test
$compile with scope
Change scopeTest element
![Page 49: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/49.jpg)
49
1. Directive + attrs2. Directive + scope + watch
![Page 50: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/50.jpg)
50
Patterns
![Page 51: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/51.jpg)
51
1. $http
2. $timeout
3. Events
4. Promises
![Page 52: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/52.jpg)
52
Real Life (demo)
![Page 53: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/53.jpg)
53
Summary
Core Angular
• Service
• Controller
• Directive
Patters
• $http• $watch• $q• Events
Real Life
• Karma
• Debug
• coverage
![Page 54: Javascript unit tests with angular 1.x](https://reader035.fdocuments.in/reader035/viewer/2022062302/58e7f5ad1a28abf13f8b4989/html5/thumbnails/54.jpg)
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