test driven angularjs development
DESCRIPTION
An introduction to angularjs development. It explains how to organise and test your code baseTRANSCRIPT
ANGULARJS Adetunji Sunmonu
T e s t D r i v e n D e v e l o p m e n t
Any application that can be written in JavaScript, will eventually be written in
JavaScript.
2
Jeff Atwood
WHY ANGULARJS?
3
EMBEDDABLE AngularJS works great with other technologies
4
POJO Just JavaScript
5
TESTING Easy to test
6
DEPENDENCY INJECTION Getting things to work effectively together
7
DATA BINDING Automatic synchronization of data between model and the view components
8
STRUCTURE YOUR CODE Organize your code for efficiency.
9
PILES ON THE FLOOR
• Js/ ● app.js ● controllers.js ● directives.js ● filters.js ● services.js
10
SOCK THE DRAWER
■ Controllers
● LoginController.js
● RegistrationController.js
● ProductDetailCOntroller.js
■ Directive.js
■ Filters.js
■ Services/
● CartService.js
● UserService.js
● ProductService.js
11
MODULARITY
12
§ Cart/
§ CartService.js § CartController.js
§ Common/ § Directive.js § Filter.js § Product/
§ ProductDetailController.js § ProductService.js § Search/ § SerachResultsController § SearchResultsService.js
§ User/ § LoginController.js § RegistrationController.js § UserService.js
13
TOOLS 14
UNIT TEST
• Jasmine – JavaScript testing framework o http://jasmine.github.io/1.3/introduction.html
• Mocha/chai/sinon o http://visionmedia.github.io/mocha/ - test Framework
o http://chaijs.com/ - assertion library
o http://sinonjs.org/ - test spies, stubs and mocks
15
FUNCTIONAL/END-TO-END TEST
Ø Selenium Ø http://docs.seleniumhq.org/
Ø Protractor Ø https://github.com/angular/protractor
16
OTHER TOOLS
• Test Runner o Karma - http://karma-runner.github.io/0.12/index.html
o Chutpzah - http://chutzpah.codeplex.com/
• Task Runner o Grunt – http://gruntjs.com/
o Gulp - http://gulpjs.com/
17
START YOUR APP
18
CONTROLLERS Set up the initial state of the scope object and add behaviour to it
19
CONTROLLER
20
VIEW
21
CONTROLLER TEST
22
SERVICES
23
To organize and share code across your application Lazily instantiated Singletons
SERVICES
24
SERVICE TEST
25
PROMISES A promise represents the eventual result of an asynchronous operation
26
CALLBACK HELL!
27
WONDERS OF PROMISES
28
SERVICE USING PROMISES
CONTROLLER TEST
CONTROLLER TEST USING MOCKS
SERVICE TEST
THANK YOU Questions or suggestions: