October 10, 2014

AngularJS Unit and End to End testing resources

Looking for a way to learn AngularJS Unit and End to End tests? How about a compilation of testing resources? This is the place.

AngularJS Unit and End to End testing resources

The post was written by Dan Mindru, the maker of Shipixen—the best Next.js boilerplate.

Setup for the lazy developer

Protractor

Grab & install Protractor demo

Karma-Jasmine

Karma-Jasmine is a popular choice for most boilerplates, so you can just choose one of those to get started. For example, pick: Josh David Miller’s ngbp

  • If you are familiar with MEAN.JS, you can install that because it also runs Karma-Jasmine tests out of the box MEAN.JS Docs
  • Using Yeoman? You can also get Karma-Jasmine tests from the angular-generator: Yeoman Angular

But I want both Protractor and Karma-Jasmine!

  • Grab & install this
  • for a Server-Client solution grab & install this - it’s awesome

Hey! You can do this yourself

Where to start

A good place to start is Matias Niemelä’s post. It’s a bit old, but it has all the right stuff to get you going. If you found it helpful you can read a follow-up blog post (also comes with a video).

Egghead.io

Always a good resource for learning anything AngularJS-related is egghead.io. Check out some of the free short videos:

Unit testing

  1. Testing overview (a good idea to watch this before: Filters)
  2. Unit testing “Hello World”
  3. Unit testing a directive
  4. Unit testing a directive scope
  5. Unit testing a controller

E2E testing

  1. Getting started with Protractor

Bonus

  1. Testing underscores
  2. Protractor interarctive

Pro egghead.io videos

If you have a Pro account, you can dive deeper on egghead.io’s tutorials by watching the following videos:

Unit testing

  1. Unit testing a directive scope binding
  2. Testing a Service
  3. Unit testing a controller with dependecies

E2E testing

  1. Testing simple binding with protractor
  2. Testing with protractor page objects
  3. Running tests on multiple browsers

Neosavvy’s Jasmine series

For a comprehensive overview of unit tests, a series of videos are available on Neosavvy’s youtube channel. They cover everything from setting up your dependecies to advanced techniques, such as factory spying:

  1. Angular/Jasmine, Setup
  2. Angular/Jasmine, Bower
  3. Angular/Jasmine, Controller Testing
  4. Angular/Jasmine, Controller Testing ’this’ methods
  5. Angular/Jasmine, Factory Testing
  6. Angular/Jasmine, Filter Testing
  7. Angular/Jasmine, Directive Testing P1
  8. Angular/Jasmine, Directive Testing P2
  9. Angular/Jasmine, Testing Watchers
  10. Angular/Jasmine, Testing Event Listners
  11. Angular/Jasmine, Spying on Factories
  12. Angular/Jasmine, Re-tooling Configs
  13. Angular/Jasmine, Testing Service Calls with Spies
  14. Angular/Jasmine, Inherited Controller Testing
  15. Angular/Jasmine, Inherited Directive Testing
  16. Angular/Jasmine, ngModelController and $parsers

Protractor e2e testing

Protractor resources are a bit harder to find, but these articles are very good to get you going:

  1. Protactor e2e by @ramonvictor
  2. An Introduction to AngularJS End to End Testing using Protractor

After getting familiar with Protractor I recommend diving deeper by reading this article. It will teach you some tricks and also show how to set up Grunt for Protractor.

Other handy resources

For some cool Protractor demos, check out this repo by Julie Ralph.

Don’t forget about Angular’s own documentation, it has some good pointers: AngularJS e2e testing Docs & AngularJS unit testing Docs

Just for hungry hippos

I want More! I recommend that you go to AngularJS Learning repo for a HUGE collection of articles.

Final words

This should not only get you going with AngularJS Unit and End to End tests, but if you’ll follow the tutorials carefully you’ll end up being pretty good at it too. Good luck!

If you liked the post, you might like Shipixen—a Next.js boilerplate that allows you to ship a beautifully designed Blog, Landing Page, SaaS, Waitlist or anything in between. Today!