How to test AngularJS controller with JsTestDriver?

Question

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 #<TestStats> has no method '$watch'
      TypeError: Object #<TestStats> 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?

Goatee

Answer 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.

Goatee

Yep, this is the right approach to test controller which uses scope's api like $watch. – Broadcast

"Also, be sure to load angular-mocks.js in the jsTestDriver.conf file." Can you expand on this? Where is this .conf file? – Dismuke

Answer 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?

Dozer