Testing AngularJS

960 views
769 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
960
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Testing AngularJS

  1. 1. @kylehodgson www.kylehodgson.com
  2. 2. +
  3. 3. Testable Angular Writing testable code
  4. 4. Toy App: ToDontList Story Epic As a busy executive with too much to do, I would like to see a list of things that are not worth my time, So that I can avoid doing them.
  5. 5. How do you get at this code? Testability
  6. 6. Namespace = {}; Testability
  7. 7. Unit tests should test your code Testability
  8. 8. . ├── app │ ├── app.js │ ├── controllers │ │ └── list-controller.js │ └── services │ └── list-items-service.js ├── index.html └── items.json Testability
  9. 9. app/services/list-items-service.js app/services/list-items-service.js
  10. 10. app/app.js app/app.js
  11. 11. specs/services/list-items_test.js
  12. 12. Testing Dependencies Mocking
  13. 13. Open Source Libraries •  RequireJS •  Sinon: mocking •  Karma: test runner •  Jasmine: unit test framework o  Jasmine as promised •  Chai: assertions o  Chai as promised •  Duck Angular: interaction testing
  14. 14. Duck Angular Angular Integration Testing
  15. 15. Duck Angular Run it in Karma Get it with Bower bower install duck-angular
  16. 16. Duck Angular & Karma
  17. 17. Duck Angular: Bindings
  18. 18. Duck Angular: Interactions
  19. 19. Anatomy of a Duck Angular spec Duck Angular
  20. 20. •  Keep DOM manipulation in specific pieces; for instance, Directives, or in a service where required DOM Manipulation
  21. 21. End to End AngularJS
  22. 22. E2E http://docs.angularjs.org/guide/e2e-testing sic: depricated is mis-spelled on angular’s site
  23. 23. Selenium • Mature • Well understood • “Enterprise strength” • Terrible “SPA” support
  24. 24. Protractor Functional Testing for AngularJS https://github.com/angular/protractor
  25. 25. Protractor Not good (with) Karma.
  26. 26. searches for elements by matching binding names, either from ng-bind or {{}} notation in the template by.binding
  27. 27. by.model by.model searches for elements by input ng-model
  28. 28. by.repeater by.repeater searches for ng-repeat elements.
  29. 29. Web server Selenium Java Protractor pre-reqs
  30. 30. Kyle Hodgson www.kylehodgson.com @kylehodgson Avishek “Mojo” Sen Gupta www.avishek.net @avisheksengupta Questions? www.angularjs.org www.yearofmoo.com www.egghead.io www.pluralsight.com github.com/asengupta/duck-angular github.com/kylehodgson/angular-toy

×