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