Testing AngularJS
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
406
On Slideshare
401
From Embeds
5
Number of Embeds
1

Actions

Shares
Downloads
9
Comments
0
Likes
1

Embeds 5

https://twitter.com 5

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. @kylehodgson www.kylehodgson.com
  • 2. +
  • 3. Testable Angular Writing testable code
  • 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. How do you get at this code? Testability
  • 6. Namespace = {}; Testability
  • 7. Unit tests should test your code Testability
  • 8. . ├── app │ ├── app.js │ ├── controllers │ │ └── list-controller.js │ └── services │ └── list-items-service.js ├── index.html └── items.json Testability
  • 9. app/services/list-items-service.js app/services/list-items-service.js
  • 10. app/app.js app/app.js
  • 11. specs/services/list-items_test.js
  • 12. Testing Dependencies Mocking
  • 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. Duck Angular Angular Integration Testing
  • 15. Duck Angular Run it in Karma Get it with Bower bower install duck-angular
  • 16. Duck Angular & Karma
  • 17. Duck Angular: Bindings
  • 18. Duck Angular: Interactions
  • 19. Anatomy of a Duck Angular spec Duck Angular
  • 20. •  Keep DOM manipulation in specific pieces; for instance, Directives, or in a service where required DOM Manipulation
  • 21. End to End AngularJS
  • 22. E2E http://docs.angularjs.org/guide/e2e-testing sic: depricated is mis-spelled on angular’s site
  • 23. Selenium • Mature • Well understood • “Enterprise strength” • Terrible “SPA” support
  • 24. Protractor Functional Testing for AngularJS https://github.com/angular/protractor
  • 25. Protractor Not good (with) Karma.
  • 26. searches for elements by matching binding names, either from ng-bind or {{}} notation in the template by.binding
  • 27. by.model by.model searches for elements by input ng-model
  • 28. by.repeater by.repeater searches for ng-repeat elements.
  • 29. Web server Selenium Java Protractor pre-reqs
  • 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