Testing AngularJS

@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