How to test angular controller with JsTestDriver?-Collection of common programming errors

I have the following code:

function TestStats($xhr) {
    $xhr(
            'GET',
            '/test-dashboard/get-projects.json',
            angular.bind(this, function(code, response) {
                this.projects = response.projects;
                this.projects.splice(0, 0, undefined);
            }));

    this.$watch('project', angular.bind(this, function() {
        this.testClassStats = undefined;

        if (this.project) {
            $xhr(
                    'GET',
                    '/test-dashboard/get-test-stats.json?project=' + this.project,
                    angular.bind(this, function(code, response) {
                        this.testClassStats = response.testClassStats;
                    }));
        }
    }));
};

TestStats.prototype.greet = function(name) {
  return "Hello " + name + "!";
};

TestStats.$inject = ['$xhr'];

and the following test:

TestDashboardUnitTest = TestCase("TestDashboardUnitTest");

TestDashboardUnitTest.prototype.testAoeu = function() {
    var xhrStub = function(method, url, callback) {
    };
    var testStats = new TestStats(xhrStub);
    assertEquals("Hello World!", testStats.greet("Aoeu"));
};

and the following config:

server: http://localhost:9876

load:
  - http://code.jquery.com/jquery-1.6.2.min.js
  - http://code.angularjs.org/angular-0.9.17.min.js
  - web/*.js
  - test/*.js

When I run the test, JsTestDriver outputs:

Total 1 tests (Passed: 0; Fails: 0; Errors: 1) (0.00 ms)
  Chrome 13.0.782.112 Linux: Run 1 tests (Passed: 0; Fails: 0; Errors 1) (0.00 ms)
    TestDashboardUnitTest.testAoeu error (0.00 ms): TypeError: Object # has no method '$watch'
      TypeError: Object # has no method '$watch'
          at new TestStats (http://127.0.0.1:9876/test/web/test-dashboard.js:13:10)
          at [object Object].testAoeu (http://127.0.0.1:9876/test/test/test-dashboard-unit-test.js:9:21)

Tests failed: Tests failed. See log for details.

What do I need to do to fix this?

1. From http://docs.angularjs.org/#!/tutorial/step_05

   scope = angular.scope();
   $browser = scope.$service('$browser');
   
   $browser.xhr.expectGET('phones/phones.json')
       .respond([{name: 'Nexus S'},
                 {name: 'Motorola DROID'}]);
   ctrl = scope.$new(PhoneListCtrl);
   

   Don’t do the usual thing and pass in mocks. Instead, let the injection system do the work.

   Also, be sure to load angular-mocks.js in the jsTestDriver.conf file.

2. I’m not sure what Angular does, but it seems to me that your problem is in this block of code:

   this.$watch('project', angular.bind(this, function() {
       // snip
   }));
   

   When you are calling this.$watch method, you are calling a method of an object instance of a class TestStats – the class that is described in the first block of code you provided. I don’t see a method called $watch anywhere there, maybe you need some other object reference, not this?