使用 Jasmine 和 Chutzpah 对 AngularJs 控制器进行单元测试答案

【问题标题】：Using Jasmine and Chutzpah to unit test a AngularJs controller使用 Jasmine 和 Chutzpah 对 AngularJs 控制器进行单元测试
【发布时间】：2014-05-13 07:12:11
【问题描述】：

我正在使用 VS2013 进行编程，并且想在我的 AngularJs 控制器上进行单元测试。例如，我有一个 taController.js，它看起来像：

var module = angular.module("MyApp", []);

var TAController = ["$scope", 
function ($scope) {
    $scope.myNumber = 2;
    $scope.add = function (number) {
        $scope.myNumber = $scope.myNumber + number;
    };
}];

一个使用这个的 HTML 页面看起来像：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="MyApp">
<head>
    <title></title>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/taController.js"></script>
</head>
<body>
    <div id="myDiv" data-ng-controller="TAController">
        {{myNumber}}<br />
        <a href="" ng-click="add(2)">Add 2</a><br />
    </div>
</body>
</html>

我想使用 Jasmine 和 Chutzpah 创建一个单元测试。我在我的测试项目的 specs 目录中创建了一个 AngularTest.js，看起来像这样

/// <reference path="../scripts/jasmine.js" />
/// <reference path="../../unittestingwithjasmine/scripts/tacontroller.js" />

describe("My Tacontroller", function () {
    var element;
    var myScope;

    beforeEach(inject(function($scope) {
        myScope = $scope;
    }));

    it("should be able to add 2 plus 2", function () {
        myScope.add(2)
        expect(myScope.myNumber).toBe(4);
    });
});

我认为上面的代码有很多错误。其中第一个是测试失败 – 我的 Tacontroler 遇到声明异常。消息：RefferenceError：找不到 cariable：inject in file:///C....../specs/angulaertest.js（第 10 行）

我的问题是如何编写我的 AngularTest.js 以通过在我的 Tacontroller 上添加功能来正确测试

【问题讨论】：

标签： javascript angularjs visual-studio jasmine chutzpah

【解决方案1】：

inject 是在哪里定义的？您需要让 Chutzpah 知道在哪里可以找到所有依赖项。推荐的方法是使用 chutzpah.json 文件及其references setting。您可以阅读有关设置references in Chutzpah here

chutzpah.json 的示例如下所示：

{
   "Framework": "jasmine",
   "References" : [
       {"Path" : "someReference.js" }, 
       {"Path" : "someCode.js" }
   ],
   "Tests" : [
     {"Include": "tests/*.js"}
   ]
}

【讨论】：

感谢您的回答，我认为注入是在 angular-mocks.js 中定义的。这是我应该包含的 js 文件之一。

【解决方案2】：

错误是我需要包含 angular 和 angular-mocks。我还需要从根范围获取范围。以下代码有效

/// <reference path="../scripts/jasmine.js" />
/// <reference path="../scripts/angular.js" />
/// <reference path="../scripts/angular-mocks.js" />

/// <reference path="../../unittestingwithjasmine/scripts/tacontroller.js" />

describe("My Tacontroller", function () {

    var myScope;

    beforeEach(inject(function($rootScope, $httpBackend, $controller) {

        myScope = $rootScope.$new();

        $controller('TAController', { $scope: myScope});

    }));

    it("should be able to add 2 plus 2", function () {
        myScope.add(2);
        expect(myScope.myNumber).toBe(4);
    });
});

我已经找到了 2 个非常好的博客条目来证明这一点以及如何将其带到下一步 http://odetocode.com/blogs/scott/archive/2013/06/10/simple-unit-tests-with-angularjs.aspx http://odetocode.com/blogs/scott/archive/2013/06/11/angularjs-tests-with-an-http-mock.aspx

我希望这对其他人有所帮助...

【讨论】：