Testing with AngularJS

Slides from a talk given at the London AngularJS Meetup. It describes Rangespan Dev team's experience with setting up a full testing workflow using Testacular (now Karma) for a search engine product built with AngularJS.

Related links:
http://karma-runner.github.com/
http://docs.angularjs.org/guide/dev_guide.e2e-testing
http://phantomjs.org/
http://jenkins-ci.org/
https://www.rangespan.com/

Transcript

1. TESTING WITH ANGULARJS Amir H. Hajizamani @amirhhz
2. How we got to AngularJS •  “We have millions of products … let’s build a search engine!” •  MVP: Backbone.js interface went to protoduction •  Tangled, too DOM-y, difficult to iterate on, no tests L •  Had to do better next time: •  Make coding fun again: better developer work flow (tools, framework) •  Increase confidence in our code: Full suite of tests (unit and end-to- end, CI) •  With Angular we could achieve both
3. What’s a good testing work flow? •  Accommodate for each dev’s style and preferences •  Configurability •  Obvious which tests go where •  Fast tests •  One command to run all tests •  Quick and uniform every time •  Run fully functional app locally •  as close to production as possible •  Automate and document!
4. The Search Engine •  Angular one part of the product •  Django and ElasticSearch under the hood •  Push as much logic down to the server as possible •  Security – proxy and filter requests •  Cleaner interface/abstraction – Angular code only cares about domain-specific GET parameters •  Familiarity – we do love Python •  AngularJS takes care of what it’s best at •  Bindings, resource fetching, routing •  [App Demo]
5. [Workflow demos] •  Local full test suite run •  Isolated unit test and E2E test runs •  Watch mode, manual play •  testacular.conf files •  Reproducible CI run •  Jenkins results page and configuration
6. Deep dive •  Before tests, local ElasticSearch instance spun up •  Filled with dynamically generated data •  E2E tests use extended seed-app script •  Bring up webserver •  Run testacular with e2e conf •  Kill webserver •  [Example of E2E test with dynamic data] •  All servers brought down •  Jenkins box requires custom installations
7. Morals •  Documentation and good practice could be a lot better •  Getting a good testing work flow is worth it once it’s in place •  Being confident that your changes don’t break important things is a great feeling •  Angular + Testacular: a great combination if you care about testing •  Next up: •  Coverage reports and jshint in CI •  Push more tests to unit-level •  Taking a screenshot with PhantomJS on test failure?
8. Django/Web server related gotchas •  Remember to enable CORS for loading templates •  Including CSRF Tokens is dirty/tricky – just have to Google it •  Testacular’s HTTP proxy behaviour will break redirects during E2E tests •  Passing on the static assets URL from Django to Angular a bit of a hack at the moment
9. THANK YOU! QUESTIONS? Amir H. Hajizamani @amirhhz