Your SlideShare is downloading. ×
0
@kylehodgson
www.kylehodgson.com
+
Testable Angular
Writing testable code
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
...
How do you get at this code?
Testability
Namespace = {};
Testability
Unit tests should
test your code
Testability
.
├── app
│ ├── app.js
│ ├── controllers
│ │ └── list-controller.js
│ └── services
│ └── list-items-service.js
├── index.h...
app/services/list-items-service.js
app/services/list-items-service.js
app/app.js
app/app.js
specs/services/list-items_test.js
Testing Dependencies
Mocking
Open Source Libraries
•  RequireJS
•  Sinon: mocking
•  Karma: test runner
•  Jasmine: unit test framework
o  Jasmine as p...
Duck Angular
Angular Integration Testing
Duck Angular
Run it in Karma
Get it with Bower
bower install duck-angular
Duck Angular & Karma
Duck Angular: Bindings
Duck Angular: Interactions
Anatomy of a Duck Angular spec
Duck Angular
•  Keep DOM manipulation in specific pieces;
for instance, Directives, or in a service
where required
DOM Manipulation
End to End
AngularJS
E2E
http://docs.angularjs.org/guide/e2e-testing
sic: depricated is mis-spelled on angular’s site
Selenium
• Mature
• Well understood
• “Enterprise strength”
• Terrible “SPA” support
Protractor
Functional Testing for AngularJS
https://github.com/angular/protractor
Protractor
Not good (with) Karma.
searches for elements by matching
binding names, either from ng-bind
or {{}} notation in the template
by.binding
by.model
by.model searches for elements by
input ng-model
by.repeater
by.repeater searches for ng-repeat
elements.
Web server
Selenium
Java
Protractor pre-reqs
Kyle Hodgson
www.kylehodgson.com @kylehodgson
Avishek “Mojo” Sen Gupta
www.avishek.net
@avisheksengupta
Questions?
www.ang...
Testing AngularJS
Testing AngularJS
Testing AngularJS
Testing AngularJS
Testing AngularJS
Testing AngularJS
Testing AngularJS
Testing AngularJS
Testing AngularJS
Testing AngularJS
Testing AngularJS
Testing AngularJS
Testing AngularJS
Upcoming SlideShare
Loading in...5
×

Testing AngularJS

542

Published on

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

No Downloads
Views
Total Views
542
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×