将 $stateParams 和 $state 注入 jasmine angular js 测试变得未定义 [英] Injected $stateParams and $state into jasmine angular js test getting undefined
问题描述
我正在为我的 DetailCtrl 编写一个 jasmine 测试.我有 10 个 json 文件,每个文件名都是这样的
I am writing a jasmine test for my DetailCtrl. I have 10 json file each with file names like this
1.json
2.json
3.json
在我的数据文件夹中
这是我的详细信息 Ctrl
Here is my Detail Ctrl
backpagecontrollers.controller('DetailCtrl', function($scope, $stateParams, $http) {
$http.get('data/' + $stateParams.listingId + '.json').success(function(data) {
$scope.extrainfo = data;
});
});
细节控制器从我的数据文件夹中获取每个 1.json、2.json、3.json 文件.
The detail controller is fetching each 1.json, 2.json, 3.json file from my data folder.
这是我的路线的一部分
.state('listingdetail', {
url: "/listings/:listingId",
templateUrl: "partials/detail.html",
controller: 'DetailCtrl'
})
让我们回到测试,我将 $stateParams
和 $state
都注入到测试中.
Lets head back to the test, I injected both the $stateParams
and the $state
into the test.
我想测试图像上方的每个 json 文件是否存在于我的 json 文件中.我正在设置 httpbackend 以获取本地主机 url 以及来自 $stateparams
的列表 ID,我将其配置为路由的一部分,但 listingId
返回未定义.我应该在我的测试中注入其他东西吗?
I want to test that for each json file above the images exist inside my json file.
I am setting the httpbackend to get the local host url plus the listingId from the $stateparams
which I configured as part of the routes but the listingId
is coming back as undefined. Am I suppose to inject something else into my test?
describe('Detail Ctrl', function() {
var scope, ctrl, httpBackend, stateparams, listingId;
beforeEach(angular.mock.module("backpageApp"));
beforeEach(angular.mock.inject(function($controller, $rootScope, _$httpBackend_, $stateParams, $state) {
httpBackend = _$httpBackend_;
stateparams = $stateParams;
listingId = stateparams.listingId;
httpBackend.expectGET('http://localhost:8000/#/listings/' + listingId).respond([{id: 1 }, {id: 2}, {id:3}, {id:4}, {id:5}, {id:6}, {id:7}, {id:8}, {id:9}, {id:10}]);
scope = $rootScope.$new();
ctrl = $controller("DetailCtrl", {$scope:scope});
}));
it('the images for each listing should exist', function() {
httpBackend.flush();
expect(scope.images).toBe(true)
});
});
我收到此错误
Error: Unexpected request: GET data/undefined.json
Expected GET http://localhost:8000/#/listings/undefined
推荐答案
我想你可能误解了路由器是如何与控制器一起工作的.当您对控制器进行单元测试时,您不是在执行路由或进入 ui-router 状态.当应用程序正常运行时,这些状态和路由将触发控制器执行.但是在单元测试中,您使用 $controller 显式执行控制器.所以你完全跳过了路由部分.这意味着您需要模拟 ui-router 通常会为您创建的对象 $stateparams.
I think you might be misunderstanding how the router is working with the controller. When you're unit testing a controller, you're not executing a route or entering a ui-router state. Those states and routes are what trigger controllers to be executed when the application is running normally. But in a unit test, you're executing the controller explicitly using $controller. So you're skipping the routing part altogether. Which means you need to mock the object that the ui-router would normally create for you, $stateparams.
describe('Detail Ctrl', function() {
var scope, ctrl, httpBackend, stateparams, listingId;
beforeEach(angular.mock.module("backpageApp"));
//don't need to inject state or stateparams here
beforeEach(angular.mock.inject(function($controller, $rootScope, _$httpBackend_) {
httpBackend = _$httpBackend_;
stateparams = { listingId: 1 }; //mock your stateparams object with your id
//you should be expecting the get request url from the controller, not the route
httpBackend.expectGET('data/' + stateparams.listingId + '.json').respond([{id: 1 }, {id: 2}, {id:3}, {id:4}, {id:5}, {id:6}, {id:7}, {id:8}, {id:9}, {id:10}]);
scope = $rootScope.$new();
//pass your mock stateparams object to the controller
ctrl = $controller("DetailCtrl", {$scope:scope, $stateParams:stateparams});
}));
it('the images for each listing should exist', function() {
httpBackend.flush();
//I don't see images set in your controller, but you
//could check scope.extrainfo here
expect(scope.images).toBe(true)
});
});
这篇关于将 $stateParams 和 $state 注入 jasmine angular js 测试变得未定义的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!