gpt4 book ai didi

jasmine - 如何在 jasmine 测试中为 Angular 项目注入(inject)依赖项

转载 作者:行者123 更新时间:2023-12-03 09:14:48 27 4
gpt4 key购买 nike

这是测试规范文件:

describe('Test main controller', function(){
it('Should initialize value to Loading', function(){
$scope = {}
ctrl = new mainNavController($scope)
expect($scope.wksp_name).toBe('Loading')
})
})

这是 Controller 文件
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>

我做错了什么?我无法理解这件事应该如何工作:)

最佳答案

您的测试代码的主要问题是它尝试使用 new 运算符“手动”创建 Controller 的实例。这样做时,AngularJS 没有机会注入(inject)依赖项。您应该做的是允许 AngularJS 注入(inject)依赖项:

var $scope, ctrl;

//you need to inject dependencies first
beforeEach(inject(function($rootScope) {
$scope = $rootScope.$new();
}));

it('Should initialize value to Loading', inject(function($controller) {
ctrl = $controller('MainNavController', {
$scope: $scope
});
expect($scope.wksp_name).toBe('Loading...');
}));

这是完整 jsFiddle 的链接: http://jsfiddle.net/pkozlowski_opensource/7a7KR/3/

上面的例子有两点值得注意:
  • 您可以使用 ngMock 模块中的 inject() 方法来注入(inject)依赖项:https://docs.angularjs.org/api/ngMock/function/angular.mock.inject
  • 要创建一个 Controller 实例(支持依赖注入(inject)),您可以使用 $controller 服务:http://docs.angularjs.org/api/ng.$controller

  • 最后一点:我建议以大写字母开头命名 Controller - 这样我们就不会将它们与变量名混淆。

    关于jasmine - 如何在 jasmine 测试中为 Angular 项目注入(inject)依赖项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12260906/

    27 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com