角度单元测试建议

Question

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

我已经查看了很多 httpBackend 教程，但其中的部分并不适合。我知道我必须使用 whenGet 和 expectGet 但仍然不明白它们是什么以及何时应该使用它们，甚至不知道我应该测试什么——请求、响应？它们应该在 it 函数的 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();

然后用它来调用作用域方法。