角度單位測試http請求問題

Question

我正在嘗試為我的http請求編寫單元測試

在我的控制器中，我有類似

     $scope.test1 = function(url) {
         productFactory.getProduct(url)
             .then(function(products){
                 $scope.result = products;
              })
    } 

在我的單位工廠文件中

    angular.module('myApp').factory('productFactory', function($http) {
        var factoryObj = {};
        factoryObj.getProduct = function(url) {
            return http.get('/product/' + url)
        }
        return factoryObj
    })

在我的單元測試中，我不確定如何編寫測試，因為url是動態的

describe('test here', function () {
var testCtrl, scope, httpBackend, mockFactory;

// Initialize the controller and a mock scope
beforeEach(inject(function (_$controller_, _$rootScope_, _$httpBackend_,  _productFactory_) {
    scope = _$rootScope_.$new();
    httpBackend = _$httpBackend_;
    mockFactory = _productFactory_;

    testCtrl = _$controller_('testCtrl', {
        $scope: scope
    });


// the url is dynamic so I am not sure what to write here.

   var url = 12345 <----dynamic product id
   httpBackend.whenGet('/product/' + url).response({'name':'product1'}) 
   var promise = mockFactory.getProduct('/product/' + url);
   promise.then(function (prod) {
       var products = prod;
   });
   $httpBackend.flush();
   expect(products).toBeTruthy();
}));

當我運行測試時，我得到了

Error: Unexpected request: GET /product/undefined
Expected GET /product/12345

我不確定在我的情況下如何編寫http請求。 有人可以幫我嗎？ 謝謝！

Answer 1

看來您要測試productFactory而不是控制器。 我可以看到的唯一測試是確保發出適當的HTTP請求。

describe('productFactory test', function() {
    beforeEach(module('myApp'));

    it('getProduct requests /product/:id', inject(function($httpBackend, productFactory) {
        var id = 123;
        $httpBackend.expectGET('/product/' + id);

        productFactory.getProduct(id);
        $httpBackend.flush();
    }));
});

另外，您在productFactory.getProduct有一個錯字。 應該是$http.get ，而不是http.get 。

---

假設您的工廠使用Cookie服務來獲取ID。 像這樣

.factory('productFactory', function($http, cookieService) {
    return {
        getProduct: function() {
            return $http.get('/product/' + cookieService.getProductid());
        }
    };
});

然后，您可以像這樣測試它（假設茉莉花v2）...

describe('...', function() {
    var cookieService;

    beforeEach(module('myApp', function($provide) {
        $provide.value('cookieService',
            cookieService = jasmine.createSpyObj('cookieService', ['getProductId']));
    });

    it('...', inject(function($httpBackend, productFactory) {
        cookieService.getProductId.and.returnValue(123);
        $httpBackend.expectGET('/product/123');

        productFactory.getProduct();
        expect(cookieService.getProductId).toHaveBeenCalled();

        $httpBackend.flush();
    }));
});