如何使用JsTestDriver测试AngularJS控制器?

时间:2011-08-16 01:22:14

标签: javascript angularjs js-test-driver

我有以下代码:

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'];

以及以下测试:

TestDashboardUnitTest = TestCase("TestDashboardUnitTest");

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

以及以下配置:

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

当我运行测试时,JsTestDriver输出:

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.

我需要做些什么来解决这个问题?

2 个答案:

答案 0 :(得分:5)

来自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);

不要做通常的事情并传递嘲笑。相反,让注射系统完成工作。

另外,请务必在jsTestDriver.conf文件中加载angular-mocks.js.

答案 1 :(得分:1)

我不确定Angular会做什么,但在我看来,你的问题出现在这段代码中:

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

当您调用this.$watch方法时,您正在调用类TestStats的对象实例的方法 - 您提供的第一个代码块中描述的类。我没有在那里看到一个名为$watch的方法,也许你需要一些其他的对象引用,而不是this