Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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
■  Directi...
MODULARITY
12
§  Cart/
§  CartService.js
§  CartController.js
§  Common/
§  Directive.js
§  Filter.js
§  Product/
§...
13
TOOLS
14
UNIT TEST
•  Jasmine – JavaScript testing framework
o  http://jasmine.github.io/1.3/introduction.html
•  Mocha/chai/sinon
...
FUNCTIONAL/END-TO-END TEST
Ø  Selenium
Ø  http://docs.seleniumhq.org/
Ø  Protractor
Ø  https://github.com/angular/prot...
OTHER TOOLS
•  Test Runner
o  Karma - http://karma-runner.github.io/0.12/index.html
o  Chutpzah - http://chutzpah.codeplex...
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:
Prochain SlideShare
Chargement dans…5
×

Test driven angularjs development

427 vues

Publié le

An introduction to angularjs development. It explains how to organise and test your code base

Publié dans : Technologie
  • Identifiez-vous pour voir les commentaires

Test driven angularjs development

  1. 1. ANGULARJS Adetunji Sunmonu T e s t D r i v e n D e v e l o p m e n t
  2. 2. Any application that can be written in JavaScript, will eventually be written in JavaScript. 2 Jeff Atwood
  3. 3. WHY ANGULARJS? 3
  4. 4. EMBEDDABLE AngularJS works great with other technologies 4
  5. 5. POJO Just JavaScript 5
  6. 6. TESTING Easy to test 6
  7. 7. DEPENDENCY INJECTION Getting things to work effectively together 7
  8. 8. DATA BINDING Automatic synchronization of data between model and the view components 8
  9. 9. STRUCTURE YOUR CODE Organize your code for efficiency. 9
  10. 10. PILES ON THE FLOOR •  Js/ ●  app.js ●  controllers.js ●  directives.js ●  filters.js ●  services.js 10
  11. 11. SOCK THE DRAWER ■  Controllers ●  LoginController.js ●  RegistrationController.js ●  ProductDetailCOntroller.js ■  Directive.js ■  Filters.js ■  Services/ ●  CartService.js ●  UserService.js ●  ProductService.js 11
  12. 12. 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. 13. 13
  14. 14. TOOLS 14
  15. 15. 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
  16. 16. FUNCTIONAL/END-TO-END TEST Ø  Selenium Ø  http://docs.seleniumhq.org/ Ø  Protractor Ø  https://github.com/angular/protractor 16
  17. 17. 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
  18. 18. START YOUR APP 18
  19. 19. CONTROLLERS Set up the initial state of the scope object and add behaviour to it 19
  20. 20. CONTROLLER 20
  21. 21. VIEW 21
  22. 22. CONTROLLER TEST 22
  23. 23. SERVICES 23 To organize and share code across your application Lazily instantiated Singletons
  24. 24. SERVICES 24
  25. 25. SERVICE TEST 25
  26. 26. PROMISES A promise represents the eventual result of an asynchronous operation 26
  27. 27. CALLBACK HELL! 27
  28. 28. WONDERS OF PROMISES 28
  29. 29. SERVICE USING PROMISES
  30. 30. CONTROLLER TEST
  31. 31. CONTROLLER TEST USING MOCKS
  32. 32. SERVICE TEST
  33. 33. THANK YOU Questions or suggestions:

×