在AngularJS應用中運行Karma單元測試時出現「意外的請求」錯誤

Question

我正在嘗試爲使用$ http服務獲取文章詳細信息的控制器編寫單元測試。

控制器：

.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(); 
     }); 

    });  

}); 

但我一直收到以下錯誤：

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 

這是第一次在寫單元測試，我隨後一起閱讀一些教程。我不知道我做錯了什麼？

Answer 1

你的問題是一個簡單但常見的問題。

當您編寫Jasmine/Karma單元測試時，使用$控制器服務幾乎可以自動創建您的控制器。這意味着，在大多數情況下，你可以從你的單元測試

$controller('ArticleDetailCtrl') 

發言權和AngularJS會找出其相關的服務，將它們注入併爲你創建控制器的一個實例進行單元測試。

有一個例外：

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.

我在你的單元測試發現你創建控制器

ArticleDetailCtrl = $controller('ArticleDetailCtrl', { $scope: scope });

在這一點上

所以，你告訴AngularJS什麼對象使用當控制器要求$範圍作爲從屬服務時。但是在你的控制器中，你還要注入$ routeParams。並根據其articleId創建該請求的URL。

所以，如果你改變你的控制器實例代碼：

ArticleDetailCtrl = $controller('ArticleDetailCtrl', { 
    $scope: scope, 
    $routeParams: articleId: ArticleId 
}); 

那現在應該建立正確的URL（而不是使用未定義條款ArticleID，這是錯誤）

讓我知道這是否幫助。