Question

我是Angular的单元测试的新手，即使开始测试我也遇到了很多麻烦。我有一个控制器，它调用一个调用远程api的服务来获取一个货币列表，然后使用symbol属性扩充返回的对象并将其分配给一个范围变量。

我一直在看很多httpBackend教程，但这些部分并不合适。我知道我必须使用whenGet和expectGet，但仍然不明白它们是什么，什么时候应该使用它们，甚至我应该测试什么 - 请求，响应？它们应该在它的函数的beforeEach函数中吗？

控制器：

whiskyControllers.controller('currencyCtrlr', ['$scope', 'CurrencyConversion', 'UpdateMiniBasket', 'whiskyList',
    function($scope, CurrencyConversion, UpdateMiniBasket, whiskyList){

        $scope.getCurrencies = function(e){
            e.preventDefault();

            CurrencyConversion.async().then(function(d) { 

                $scope.rates = d.data.rates;

                for(var i = 0, j = $scope.rates.length; i < j; i++){
                    $scope.rates[i]['symbol'] = insertSymbol($scope.rates[i].to);
                }
            });
        }
}]);

我已经从另一个教程复制了下面的大部分测试，但它仍然失败，并显示“错误：没有待处理的待处理请求”

测试：

describe('currencyCtrlr: getCurrencies', function() {
    var scope, CurrencyConversion, UpdateMiniBasket, whiskyList, $httpBackend, $rootScope, createController,
        url = 'http://api.exchangeratelab.com/api/current/GBP?apikey=F06383D65BCBFF52629D059B7D3EEB7D&callback=JSON_CALLBACK';

    beforeEach(module('whiskyControllers'));

    beforeEach(function () {
        module(function ($provide) {
            $provide.value('CurrencyConversion', CurrencyConversion);
            $provide.value('UpdateMiniBasket', UpdateMiniBasket);
            $provide.value('whiskyList', whiskyList);
        });
    });

    beforeEach(inject(function($injector) {
        //scope = $rootScope.$new();
        $httpBackend = $injector.get('$httpBackend');
        $httpBackend.when('GET', url).respond({}, {});

        $rootScope = $injector.get('$rootScope');
        var $controller = $injector.get('$controller');

        createController = function() {
            return $controller('currencyCtrlr', {'$scope' : $rootScope });
        };
    }));

    it('should make an ajax call to http://api.exchangeratelab.com', function() {
        $httpBackend.expectGET(url);
        var controller = createController();
        $httpBackend.flush();
    });

    afterEach(function() {
        $httpBackend.verifyNoOutstandingExpectation();
        $httpBackend.verifyNoOutstandingRequest();
    });

});

任何帮助都将非常感激

Answer 1

使用createController创建控制器时，不会调用getCurrencies方法。因此，$http没有flush次来电。试试这个：

it('should make an ajax call to http://api.exchangeratelab.com', function() {
        $httpBackend.expectGET(url);
        var controller = createController();
        $rootScope.getCurrencies();
        $httpBackend.flush();
});

虽然，上面的代码可能会在e.preventDefault()上出错。所以，你需要传递一些能够满足它的东西，或者删除它（因为它确实不需要它）。

另一件有点奇怪的事情是你使用$rootScope作为$scope。最好创建一个本地scope属性并使用以下命令创建一个新范围：

scope = $rootScope.$new();

然后使用它来调用范围方法。

角度单位测试建议

1 个答案: