下面是测试规范文件:
describe('Test main controller', function(){
it('Should initialize value to Loading', function(){
$scope = {}
ctrl = new mainNavController($scope)
expect($scope.wksp_name).toBe('Loading')
})
})
下面是控制器文件
function mainNavController($scope) {
$scope.wksp_name = 'Loading...'
$scope.$on('broadCastWkspNameEvent', function (e, args) {
$scope.wksp_name = args
})
}
mainNavController.$inject=['$scope']
但是我的测试失败了,说Object #<Object> has no method '$on'
我使用的是Jasmine的基本设置。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jasmine Spec Runner</title>
<link rel="shortcut icon" type="image/png" href="testlib/jasmine-1.2.0/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="testlib/jasmine-1.2.0/jasmine.css">
<script type="text/javascript" src="testlib/jasmine-1.2.0/jasmine.js"></script>
<script type="text/javascript" src="testlib/jasmine-1.2.0/jasmine-html.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="/static_files/js/test-specs/main-nav-spec.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="/static_files/js/common/jquery/latest.js"></script>
<script type="text/javascript" src="/static_files/js/common/angular/angular-1.0.1.min.js"></script>
<script type="text/javascript" src="/static_files/js/common/angular/angular-resource-1.0.1.min.js"></script>
<script type="text/javascript" src="/static_files/js/section/main-nav-controller.js"></script>
<script type="text/javascript">
(function() {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
var htmlReporter = new jasmine.HtmlReporter();
jasmineEnv.addReporter(htmlReporter);
jasmineEnv.specFilter = function(spec) {
return htmlReporter.specFilter(spec);
};
var currentWindowOnload = window.onload;
window.onload = function() {
if (currentWindowOnload) {
currentWindowOnload();
}
execJasmine();
};
function execJasmine() {
jasmineEnv.execute();
}
})();
</script>
</head>
<body>
</body>
</html>
我做错了什么?我不明白这东西是怎么工作的:)
3条答案
按热度按时间yzxexxkh1#
测试代码的主要问题是它试图使用new操作符“手动”创建控制器的示例。在这样做时,AngularJS没有机会注入依赖项。你应该做的是允许AngularJS注入依赖项:
下面是一个完整的jsFiddle的链接:http://jsfiddle.net/pkozlowski_opensource/7a7KR/3/
在上面的例子中有两件事值得注意:
1.可以使用ngMock模块中的inject()方法注入依赖项:https://docs.angularjs.org/api/ngMock/function/angular.mock.inject
1.要创建一个控制器示例(支持依赖注入),你可以使用$controller服务:http://docs.angularjs.org/api/ng.$controller
正如最后一句话:我建议命名控制器时以大写字母开头--这样我们就不会将它们与变量名混淆。
wa7juj8i2#
@ pkozlowski. opensource的精彩回答。再详细一点...有时,Assert
$scope.$on
确实是由控制器调用的也很方便。在这种情况下,您可以监视$scope.$on
,如下所示:然后你可以Assert
$on
是用你的事件名和一些函数作为参数调用的:ars1skjm3#
我同意pkozowski的回答,但是为了更直接地回答你的问题,你需要把'$on'划掉
如果你的$scope看起来像这样,你的例子就会通过: