docs(unit testing): improve unit testing guide

This commit adds to the unit testing guide:

- add explicit section on additional libraries: Karma, Jasmine and
  angular-mocks and link to the docs for those projects too. Explain the
  benefit and use case for each of these libaries
- Add more fully featured test examples and add more documentation
  around them, in particular the controller test
- more clearly distinguish between the section on principles of testing
  and actual tutorial on writing a test

This should close #8220.

Author: jackfranklin

docs/content/guide/unit-testing.ngdoc

@@ -8,28 +8,26 @@ comes with almost no help from the compiler. For this reason we feel very strong
 written in JavaScript needs to come with a strong set of tests. We have built many features into
 Angular which makes testing your Angular applications easy. So there is no excuse for not testing.
 
-# Separation of Concerns
+## Separation of Concerns
 
-Unit testing as the name implies is about testing individual units of code. Unit tests try to
+Unit testing, as the name implies, is about testing individual units of code. Unit tests try to
 answer questions such as "Did I think about the logic correctly?" or "Does the sort function order
 the list in the right order?"
 
 In order to answer such a question it is very important that we can isolate the unit of code under test.
 That is because when we are testing the sort function we don't want to be forced into creating
-related pieces such as the DOM elements, or making any XHR calls in getting the data to sort.
+related pieces such as the DOM elements, or making any XHR calls to fetch the data to sort.
 
 While this may seem obvious it can be very difficult to call an individual function on a
 typical project. The reason is that the developers often mix concerns resulting in a
 piece of code which does everything. It makes an XHR request, it sorts the response data and then it
 manipulates the DOM.
 
 With Angular we try to make it easy for you to do the right thing, and so we
-provide dependency injection for your XHR (which you can mock out) and we created abstractions which
-allow you to sort your model without having to resort to manipulating the DOM. So that in the end,
-it is easy to write a sort function which sorts some data, so that your test can create a data set,
-apply the function, and assert that the resulting model is in the correct order. The test does not
-have to wait for the XHR response to arrive, create the right kind of test DOM, nor assert that your
-function has mutated the DOM in the right way.
+provide dependency injection for your XHR requests, which can be mocked, and we provide abstractions which
+allow you to test your model without having to resort to manipulating the DOM. The test can then
+assert that the data has been sorted without having to create or look at the state of the DOM or
+wait for any XHR requests to return data. The individual sort function can be tested in isolation.
 
 ## With great power comes great responsibility
 
@@ -182,86 +180,179 @@ Notice that no global variables were harmed in the writing of this test.
 Angular comes with {@link di dependency injection} built-in, making the right thing
 easy to do, but you still need to do it if you wish to take advantage of the testability story.
 
-## Controllers
-What makes each application unique is its logic, and the logic is what we would like to test. If the logic
-for your application contains DOM manipulation, it will be hard to test. See the example
-below:
+## Additional libraries for testing Angular applications
+
+For testing Angular applications there are libraries that you should use that will make testing much
+easier to set up and run.
+
+### Karma
+
+[Karma](http://karma-runner.github.io/) is a JavaScript command line tool that can be used to spawn
+a web server which loads your application's source code and executes your tests. You can configure
+Karma to run against a number of browsers, which is useful for being confident that your application
+works on all browsers you need to support. Karma is executed on the command line and will display
+the results of your tests on the command line once they have run in the browser.
+
+Karma is a NodeJS application, and should be installed through npm. Full installation instructions
+are available on [the Karma website](http://karma-runner.github.io/0.12/intro/installation.html).
+
+### Jasmine
+
+[Jasmine](http://jasmine.github.io/2.0/introduction.html) is a test driven development framework for
+JavaScript that has become the most popular choice for testing Angular applications. Jasmine
+provides functions to help with structuring your tests and also making assertions. As your tests
+grow, keeping them well structured and documented is vital, and Jasmine helps achieve this.
+
+In Jasmine we use the `describe` function to group our tests together:
 
 ```js
-function PasswordCtrl() {
-  // get references to DOM elements
-  var msg = $('.ex1 span');
-  var input = $('.ex1 input');
-  var strength;
-
-  this.grade = function() {
-    msg.removeClass(strength);
-    var pwd = input.val();
-    password.text(pwd);
-    if (pwd.length > 8) {
-      strength = 'strong';
-    } else if (pwd.length > 3) {
-      strength = 'medium';
-    } else {
-      strength = 'weak';
-    }
-    msg
-     .addClass(strength)
-     .text(strength);
-  }
-}
+describe("sorting the list of users", function() {
+  // individual tests go here
+});
 ```
 
-The code above is problematic from a testability point of view since it requires your test to have the right kind
-of DOM present when the code executes. The test would look like this:
+And then each individual test is defined within a call to the `it` function:
 
 ```js
-var input = $('<input type="text"/>');
-var span = $('<span>');
-$('body').html('<div class="ex1">')
-  .find('div')
-    .append(input)
-    .append(span);
-var pc = new PasswordCtrl();
-input.val('abc');
-pc.grade();
-expect(span.text()).toEqual('weak');
-$('body').empty();
+describe("sorting the list of users", function() {
+  it("sorts in descending order by default", function() {
+    // your test assertion goes here
+  });
+});
 ```
 
-In angular the controllers are strictly separated from the DOM manipulation logic and this results in
-a much easier testability story as the following example shows:
+By grouping related tests within `describe` blocks, and describing each individual test within an
+`it` call, this keeps your tests self documented. Finally, Jasmine provides matchers which let you
+make assertions:
 
 ```js
-function PasswordCtrl($scope) {
-  $scope.password = '';
-  $scope.grade = function() {
-    var size = $scope.password.length;
-    if (size > 8) {
-      $scope.strength = 'strong';
-    } else if (size > 3) {
-      $scope.strength = 'medium';
-    } else {
-      $scope.strength = 'weak';
-    }
-  };
-}
+describe("sorting the list of users", function() {
+  it("sorts in descending order by default", function() {
+    var users = ['jack', 'igor', 'jeff'];
+    var sorted = sortUsers(users);
+    expect(sorted).toEqual(['jeff', 'jack', 'igor']);
+  });
+});
+```
+
+Jasmine comes with a number of matchers that help you make a variety of assertions. You should [read
+the Jasmine documentation](http://jasmine.github.io/2.0/introduction.html#section-Matchers) to see
+what they are.
+
+### angular-mocks
+
+Angular also provides the {@link ngMock} module, which provides mocking for your tests. This is used
+to inject and mock Angular services within unit tests. In addition, it is able to extend other
+modules so they are synchronous. Having tests synchronous keeps them much cleaner and easier to work
+with. One of the most useful parts of ngMock is {@link ngMock.$httpBackend}, which lets us mock XHR
+requests in tests, and return sample data instead.
+
+## Testing a Controller
+
+Because Angular separates logic from the view layer, it keeps controllers easy to test. Let's take a
+look at how we might test the controller below, which provides `$scope.grade`, which sets a property
+on the scope based on the length of the password.
+
+```js
+angular
+  .module('app')
+  .controller('PasswordController', function PasswordController($scope) {
+    $scope.password = '';
+    $scope.grade = function() {
+      var size = $scope.password.length;
+      if (size > 8) {
+        $scope.strength = 'strong';
+      } else if (size > 3) {
+        $scope.strength = 'medium';
+      } else {
+        $scope.strength = 'weak';
+      }
+    };
+  });
 ```
 
-and the test is straight forward:
+The test below assumes that you have your controllers available on the global scope. If this isn't
+the case, you can use {@link angular.mock.inject} to inject the controller into the test. We can use
+Jasmine to structure our test:
 
 ```js
-var $scope = {};
-var pc = $controller('PasswordCtrl', { $scope: $scope });
-$scope.password = 'abc';
-$scope.grade();
-expect($scope.strength).toEqual('weak');
+describe('PasswordController', function() {
+  describe('$scope.grade', function() {
+    it('sets the strength to "strong" if the password length is >8 chars', function() {
+      var $scope = {};
+      var ctrl = $controller('PasswordController', { $scope: $scope });
+      $scope.password = 'longerthaneightchars';
+      $scope.grade();
+      expect($scope.strength).toEqual('strong');
+    });
+  });
+});
 ```
 
-Notice that the test is not only much shorter, it is also easier to follow what is happening. We say
-that such a test tells a story, rather than asserting random bits which don't seem to be related.
+Notice how by nesting the `describe` calls and being descriptive when calling them with strings, the
+test is very clear. It documents exactly what it is testing, and at a glance you can quickly see
+what is happening. Now let's add the test for when the password is less than three characters, which
+should see `$scope.strength` set to "weak":
 
-## Filters
+```js
+describe('PasswordController', function() {
+  describe('$scope.grade', function() {
+    it('sets the strength to "strong" if the password length is >8 chars', function() {
+      var $scope = {};
+      var ctrl = $controller('PasswordController', { $scope: $scope });
+      $scope.password = 'longerthaneightchars';
+      $scope.grade();
+      expect($scope.strength).toEqual('strong');
+    });
+
+    it('sets the strength to "weak" if the password length <3 chars', function() {
+      var $scope = {};
+      var ctrl = $controller('PasswordController', { $scope: $scope });
+      $scope.password = 'a';
+      $scope.grade();
+      expect($scope.strength).toEqual('weak');
+    });
+  });
+});
+```
+
+Now we have two tests, but notice the duplication between the tests. Both have to
+create the `$scope` variable and create the controller. As we add new tests, this duplication is
+only going to get worse. Thankfully, Jasmine provides `beforeEach`, which lets us run a function
+before each individual test. Let's see how that would tidy up our tests:
+
+```js
+describe('PasswordController', function() {
+  describe('$scope.grade', function() {
+    var $scope, ctrl;
+
+    beforeEach(function() {
+      $scope = {};
+      ctrl = $controller('PasswordController', { $scope: $scope });
+    });
+
+    it('sets the strength to "strong" if the password length is >8 chars', function() {
+      $scope.password = 'longerthaneightchars';
+      $scope.grade();
+      expect($scope.strength).toEqual('strong');
+    });
+
+    it('sets the strength to "weak" if the password length <3 chars', function() {
+      $scope.password = 'a';
+      $scope.grade();
+      expect($scope.strength).toEqual('weak');
+    });
+  });
+});
+```
+
+The duplication is now gone, and encapsulated within the `beforeEach`. Each individual test now only
+contains the code specific to that test, and not code that is general across all tests. As you
+expand your tests, keep an eye out for locations where you can use `beforeEach` to tidy up tests.
+`beforeEach` isn't the only function of this sort that Jasmine provides, and the [documentation
+lists the others](http://jasmine.github.io/2.0/introduction.html#section-Setup_and_Teardown).
+
+## Testing Filters
 {@link ng.$filterProvider Filters} are functions which transform the data into a user readable
 format. They are important because they remove the formatting responsibility from the application
 logic, further simplifying the application logic.
@@ -273,12 +364,20 @@ myModule.filter('length', function() {
   }
 });
 
-var length = $filter('length');
-expect(length(null)).toEqual(0);
-expect(length('abc')).toEqual(3);
+describe('length filter', function() {
+  it('returns 0 when given null', function() {
+    var length = $filter('length');
+    expect(length(null)).toEqual(0);
+  });
+
+  it('returns the correct value when given a string of chars', function() {
+    var length = $filter('length');
+    expect(length('abc')).toEqual(3);
+  });
+});
 ```
 
-## Directives
+## Testing Directives
 Directives in angular are responsible for encapsulating complex functionality within custom HTML tags,
 attributes, classes or comments. Unit tests are very important for directives because the components
 you create with directives may be used throughout your application and in many different contexts.
@@ -309,28 +408,28 @@ verify this functionality. Note that the expression `{{1 + 1}}` times will also
 
 ```js
 describe('Unit testing great quotes', function() {
-    var $compile;
-    var $rootScope;
-
-    // Load the myApp module, which contains the directive
-    beforeEach(module('myApp'));
-
-    // Store references to $rootScope and $compile
-    // so they are available to all tests in this describe block
-    beforeEach(inject(function(_$compile_, _$rootScope_){
-      // The injector unwraps the underscores (_) from around the parameter names when matching
-      $compile = _$compile_;
-      $rootScope = _$rootScope_;
-    }));
-
-    it('Replaces the element with the appropriate content', function() {
-        // Compile a piece of HTML containing the directive
-        var element = $compile("<a-great-eye></a-great-eye>")($rootScope);
-        // fire all the watches, so the scope expression {{1 + 1}} will be evaluated
-        $rootScope.$digest();
-        // Check that the compiled element contains the templated content
-        expect(element.html()).toContain("lidless, wreathed in flame, 2 times");
-    });
+  var $compile;
+  var $rootScope;
+
+  // Load the myApp module, which contains the directive
+  beforeEach(module('myApp'));
+
+  // Store references to $rootScope and $compile
+  // so they are available to all tests in this describe block
+  beforeEach(inject(function(_$compile_, _$rootScope_){
+    // The injector unwraps the underscores (_) from around the parameter names when matching
+    $compile = _$compile_;
+    $rootScope = _$rootScope_;
+  }));
+
+  it('Replaces the element with the appropriate content', function() {
+    // Compile a piece of HTML containing the directive
+    var element = $compile("<a-great-eye></a-great-eye>")($rootScope);
+    // fire all the watches, so the scope expression {{1 + 1}} will be evaluated
+    $rootScope.$digest();
+    // Check that the compiled element contains the templated content
+    expect(element.html()).toContain("lidless, wreathed in flame, 2 times");
+  });
 });
 ```
 
@@ -431,4 +530,3 @@ Otherwise you may run into issues if the test directory hierarchy differs from t
 
 ## Sample project
 See the [angular-seed](https://github.com/angular/angular-seed) project for an example.
-