1

我正在使用 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：注入文件：///C....../specs/angulaertest.js（第 10 行）

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

4

2 回答 2

6

注入定义在哪里？您需要让 Chutzpah 知道在哪里可以找到所有依赖项。推荐的方法是使用 chutzpah.json 文件及其引用设置。您可以在此处阅读有关在 Chutzpah 中设置引用的信息

chutzpah.json 的示例如下所示：

{
   "Framework": "jasmine",
   "References" : [
       {"Path" : "someReference.js" }, 
       {"Path" : "someCode.js" }
   ],
   "Tests" : [
     {"Include": "tests/*.js"}
   ]
}
于 2014-05-13T14:34:16.677 回答
5

错误是我需要包括角度和角度模拟。我还需要从根范围获取范围。以下代码有效

/// <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

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

于 2014-05-13T14:44:14.760 回答