Upload
kyle-hodgson
View
464
Download
1
Tags:
Embed Size (px)
Citation preview
@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 worth my time,
So that I can avoid doing them.
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.html └── items.json
Testability
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 promised
• Chai: assertions o Chai as promised
• Duck Angular: interaction testing
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.angularjs.org www.yearofmoo.com www.egghead.io www.pluralsight.com github.com/asengupta/duck-angular github.com/kylehodgson/angular-toy