Looking for a way to learn AngularJS Unit and End to End tests? How about a compilation of testing resources? This is the place.
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!
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
- Testing overview (a good idea to watch this before: Filters)
- Unit testing “Hello World”
- Unit testing a directive
- Unit testing a directive scope
- Unit testing a controller
E2E testing
Bonus
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
E2E testing
- Testing simple binding with protractor
- Testing with protractor page objects
- 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:
- Angular/Jasmine, Setup
- Angular/Jasmine, Bower
- Angular/Jasmine, Controller Testing
- Angular/Jasmine, Controller Testing ’this’ methods
- Angular/Jasmine, Factory Testing
- Angular/Jasmine, Filter Testing
- Angular/Jasmine, Directive Testing P1
- Angular/Jasmine, Directive Testing P2
- Angular/Jasmine, Testing Watchers
- Angular/Jasmine, Testing Event Listners
- Angular/Jasmine, Spying on Factories
- Angular/Jasmine, Re-tooling Configs
- Angular/Jasmine, Testing Service Calls with Spies
- Angular/Jasmine, Inherited Controller Testing
- Angular/Jasmine, Inherited Directive Testing
- 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:
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!