[英]Using Jasmine and Chutzpah to unit test a AngularJs controller
I am programming with VS2013 and would like to make unit tests on my AngularJs controllers. 我正在使用VS2013进行编程,并且想在AngularJs控制器上进行单元测试。 For example I have a taController.js that looks like:
例如,我有一个taController.js,看起来像:
var module = angular.module("MyApp", []);
var TAController = ["$scope",
function ($scope) {
$scope.myNumber = 2;
$scope.add = function (number) {
$scope.myNumber = $scope.myNumber + number;
};
}];
And an HTML page that consumes this that looks like: 使用此内容的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>
I want to create a unit test using Jasmine and Chutzpah. 我想使用Jasmine和Chutzpah创建一个单元测试。 I created an AngularTest.js in the specs directory of my test project that looks like this
我在测试项目的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);
});
});
I think there are a number of mistakes in the above code. 我认为上述代码中存在许多错误。 The first of which being Test Failed – My Tacontrooler encountered a declaration exception.
第一个测试失败-我的Tacontrooler遇到声明异常。 Message: RefferenceError: Can't find cariable: inject in file:///C....../specs/angulaertest.js (line 10)
消息:RefferenceError:找不到龋齿:注入file:///C....../specs/angulaertest.js(第10行)
My question is how can I write my AngularTest.js to correctly test by add function on my Tacontroller 我的问题是如何编写我的AngularTest.js以通过Tacontroller上的add函数正确测试
Where is inject defined? 在哪里定义注入? You need to let Chutzpah know where to find all of your dependencies.
您需要让Chutzpah知道在哪里可以找到所有依赖项。 The recommended way to do this is using a chutzpah.json file and its references setting .
推荐的方法是使用chutzpah.json文件及其引用设置 。 You can read about setting up references in Chutzpah here
您可以在此处阅读有关在Chutzpah中设置参考的信息
An example of a chutzpah.json looks like: chutzpah.json的示例如下所示:
{
"Framework": "jasmine",
"References" : [
{"Path" : "someReference.js" },
{"Path" : "someCode.js" }
],
"Tests" : [
{"Include": "tests/*.js"}
]
}
The mistake was that I needed to include angular and angular-mocks. 错误是我需要包括角度和角度模拟。 Also I needed to get the scope from the root scope.
我还需要从根范围获得范围。 The following code worked
以下代码有效
/// <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);
});
});
I have since found 2 very good blog entries that demonstrate this and how to take it to the next step 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 从那以后,我发现了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
I hope this helps others... 我希望这可以帮助其他人...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.