注入$ stateParams和$状态进入茉莉角JS测试越来越不确定 [英] Injected $stateParams and $state into jasmine angular js test getting undefined
问题描述
我写我的DetailCtrl茉莉花测试。我有10个JSON文件每一个这样的文件名
1.json
2.json
3.json
在我的数据文件夹
下面是我的详细信息Ctrl键
backpagecontrollers.controller（'DetailCtrl'，函数（$范围，$ stateParams，$ HTTP）{
$ http.get（数据/+ $ stateParams.listingId +'以.json'）。成功（功能（数据）{
$ scope.extrainfo =数据;
}）;
}）;
细节控制器读取每个1.json，2.json，3.json从我的数据文件夹中的文件。
下面是我的路线的一部分
.STATE（'房产细节'，{
网址：/人数/：listingId
templateUrl：谐音/ detail.html
控制器：'DetailCtrl
}）
让我们头回测试，我注入这两个 $ stateParams 和 $状态进入测试。
我想测试，对于每个JSON文件上面的json文件中存在的图像。
我设置了httpbackend获取本地主机URL加上从 $ stateparams 我配置为路线的一部分，但在 listingId 是回来为未定义。是我想注入东西进入我的测试？
描述（'详细Ctrl键，功能（）{ VAR范围，CTRL httpBackend，stateparams，listingId; beforeEach（angular.mock.module（backpageApp））;
beforeEach（angular.mock.inject（函数（$控制器，$ rootScope，_ $ httpBackend_，$ stateParams，$州）{
httpBackend = _ $ httpBackend_;
stateparams = $ stateParams;
listingId = stateparams.listingId; httpBackend.expectGET（的http：//本地主机：8000 /＃/人数/+ listingId）.respond（[{ID：1}，{ID：2}，{ID：3}，{ID：4}，{ ID：5}，{ID：6}，{ID：7}，{ID：8}，{ID：9}，{ID：10}]）;
范围= $ rootScope $新的（）。
CTRL = $控制器（DetailCtrl，{$范围：适用范围}）;
}））; 它（'对每个上市的图像应该存在'，函数（）{
httpBackend.flush（）;
期待（scope.images）.toBe（真）
}）;
}）;
我收到此错误
错误：意外的请求：GET数据/ undefined.json
预计GET HTTP：//本地主机：8000 /＃/列表/未定义
我想你可能会误解如何在路由器正在与控制器。当你是单元测试控制器，你不执行路线或进入一个UI路由器的状态。这些州和路线是什么，当应用程序正常运行执行触发控制器。但是，在一个单元测试，你就明确地执行控制器使用$控制器。所以你完全跳过路由部分。这意味着你需要模拟对象的UI路由器通常会为您创建，$ stateparams。
描述（'详细Ctrl键，功能（）{ VAR范围，CTRL httpBackend，stateparams，listingId; beforeEach（angular.mock.module（backpageApp））;
//不需要在这里注入的状态或stateparams
beforeEach（angular.mock.inject（函数（$控制器，$ rootScope，_ $ httpBackend_）{
httpBackend = _ $ httpBackend_;
stateparams = {listingId：1}; //嘲笑你stateparams你的ID对象 //您应该从控制器，而不是路由期待get请求的url
httpBackend.expectGET（数据/+ stateparams.listingId +'以.json）响应（[{ID：1}，{ID：2}，{ID：3}，{ID：4}，{ID：5 }，{ID：6}，{ID：7}，{ID：8}，{ID：9}，{ID：10}]）;
范围= $ rootScope $新的（）。
//通过你的模拟stateparams反对控制器
CTRL = $控制器（DetailCtrl，{$适用范围：适用范围，$ stateParams：stateparams}）;
}））; 它（'对每个上市的图像应该存在'，函数（）{
httpBackend.flush（）;
//我没有看到在你的控制器设定的图像，但你
//可以检查scope.extrainfo这里
期待（scope.images）.toBe（真）
}）;
}）;
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
in my data folder
Here is my Detail Ctrl
backpagecontrollers.controller('DetailCtrl', function($scope, $stateParams, $http) {
$http.get('data/' + $stateParams.listingId + '.json').success(function(data) {
$scope.extrainfo = data;
});
});
The detail controller is fetching each 1.json, 2.json, 3.json file from my data folder.
Here is a part of my route
.state('listingdetail', {
url: "/listings/:listingId",
templateUrl: "partials/detail.html",
controller: 'DetailCtrl'
})
Lets head back to the test, I injected both the $stateParams and the $state into the test.
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)
});
});
I am getting this error
Error: Unexpected request: GET data/undefined.json
Expected GET http://localhost:8000/#/listings/undefined
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和$状态进入茉莉角JS测试越来越不确定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
