获得"意外的请求"错误在AngularJS应用噶运行单元测试时, [英] Getting "Unexpected request" error when running Karma unit test in an AngularJS app
问题描述
我试图写一个控制器使用$ HTTP服务,获取文章详细介绍单元测试。
I'm trying to write a unit test for a controller which fetches article details using $http service.
控制器:
.controller('ArticleDetailCtrl',function($scope, Article, $routeParams, API_URL, ARTICLE_URL, $http, $sce){
$scope.url = API_URL + ARTICLE_URL + '/' + $routeParams.articleId;
$http.get($scope.url).then(function(response) {
//console.log(response.data);
$scope.heading = response.data.Headline;
$scope.rawBody = response.data.Body;
$scope.body = $sce.trustAsHtml($scope.rawBody);
$scope.image = response.data.Assets[0].URL;
});
});
单元测试:
'use strict';
describe('Controller: Article', function () {
var scope,
$httpBackend,
articleEndpoint;
// load the controller's module
beforeEach(module('myApp'));
describe('ArticleDetailCtrl', function () {
var ArticleDetailCtrl,
jsonObject,
ArticleId = '123';
// Initialize the controller and a mock scope
beforeEach(inject(function ($controller, $rootScope, _$httpBackend_, Article, API_URL, ARTICLE_URL) {
scope = $rootScope.$new();
ArticleDetailCtrl = $controller('ArticleDetailCtrl', { $scope: scope });
$httpBackend = _$httpBackend_;
articleEndpoint = API_URL + ARTICLE_URL + '/' + ArticleId;
jsonObject = {
'Headline': 'Headline',
'Body': '<p>Body</p>',
'Assets': [
{
'URL': 'path/to/image/article1.jpg'
}
]
};
$httpBackend.when('GET', articleEndpoint).respond(jsonObject);
}));
afterEach(function() {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
});
it('should fetch article details from the API', function () {
//expect(scope.articles.length).toEqual(3);
$httpBackend.expectGET(articleEndpoint);
$httpBackend.flush();
});
});
});
但我不断收到以下错误:
But I keep on getting the following error:
Error: Unexpected request: GET http://localhost:3000/api/articles/undefined
Expected GET http://localhost:3000/api/articles/123
at $httpBackend (/Users/gill/Documents/projects/angularjs-test/app/bower_components/angular-mocks/angular-mocks.js:1179)
at sendReq (/Users/gill/Documents/projects/angularjs-test/app/bower_components/angular/angular.js:8181)
at /Users/gill/Documents/projects/angularjs-test/app/bower_components/angular/angular.js:7921
at /Users/gill/Documents/projects/angularjs-test/app/bower_components/angular/angular.js:11319
at /Users/gill/Documents/projects/angularjs-test/app/bower_components/angular/angular.js:11405
at /Users/gill/Documents/projects/angularjs-test/app/bower_components/angular/angular.js:12412
at /Users/gill/Documents/projects/angularjs-test/app/bower_components/angular/angular.js:12224
at /Users/gill/Documents/projects/angularjs-test/app/bower_components/angular-mocks/angular-mocks.js:1438
at /Users/gill/Documents/projects/angularjs-test/test/spec/controllers/article.js:77
Error: Unsatisfied requests: GET http://localhost:3000/api/articles/123
at /Users/gill/Documents/projects/angularjs-test/app/bower_components/angular-mocks/angular-mocks.js:1472
at /Users/gill/Documents/projects/angularjs-test/test/spec/controllers/article.js:65
这是第一次在写单元测试,我通过阅读一些教程跟着一起。我不知道我做错了?
This is the first time am writing unit tests which I followed along by reading some tutorials. I don't know what am I doing wrong?
推荐答案
您的问题是一个简单的,但很常见的。
Your problem is a simple, but a common one.
当你写你的茉莉花/噶单元测试,创建控制器几乎是自动使用的 $控制器服务。这意味着,在大多数情况下,你可以从你的单元测试说
When you write your Jasmine / Karma unit tests, creating your controllers are almost automatic using the $controller service. That means, for the most part, you can say from your unit test
$controller('ArticleDetailCtrl')
和AngularJS会找出其相关的服务,把他们注入,并为您创建控制器的一个实例进行单元测试。
And AngularJS will figure out its dependent services, inject them and create an instance of the controller for you to unit test.
有一个例外:
AngularJS不知道如何注入背景下的特定服务,比如$范围和$ routeParams,这改变基于HTML的结构和控制器的每个实例的URL。
AngularJS does not know how to inject context specific services like $scope and $routeParams, which change based on the HTML structure and the URL for each instance of the controller.
我在你的单元测试注意到你创建控制器
I notice in your unit test you create the controller as
ArticleDetailCtrl = $控制器('ArticleDetailCtrl',{$范围:适用范围});
因此,在这一点上,你告诉AngularJS当控制器要求$范围为相关服务使用什么样的对象。但在你的控制器,还注入$ routeParams。并根据其条款ArticleID 创建请求的URL。
So at this point, you tell AngularJS what object to use when the controller asks for $scope as a dependent service. But in your controller, you also inject $routeParams. And based on its articleId you create the URL for the request.
所以,如果你改变你的控制器实例化code为:
So if you change your controller instantiation code to:
ArticleDetailCtrl = $controller('ArticleDetailCtrl', {
$scope: scope,
$routeParams: articleId: ArticleId
});
这是现在应该创建正确的URL(而不是使用未定义条款ArticleID,这是错误)
That should now create the correct URL (instead of using undefined for articleId, which was the error)
让我知道是否有帮助。
这篇关于获得&QUOT;意外的请求&QUOT;错误在AngularJS应用噶运行单元测试时,的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!