如何使用 JsTestDriver 测试 AngularJS 控制器？答案

【问题标题】：How to test AngularJS controller with JsTestDriver?如何使用 JsTestDriver 测试 AngularJS 控制器？
【发布时间】：2011-10-27 17:00:00
【问题描述】：

我有以下代码：

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.

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

【问题讨论】：

标签： javascript angularjs js-test-driver

【解决方案1】：

来自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。

【讨论】：

是的，这是测试控制器的正确方法，它使用范围的 api，如 $watch。
"另外，请务必在 jsTestDriver.conf 文件中加载 angular-mocks.js。"你能扩展一下吗？这个 .conf 文件在哪里？

【解决方案2】：

我不确定 Angular 是做什么的，但在我看来，您的问题出在这段代码中：

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

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

【讨论】：