使用$ http对Angular指令进行单元测试

Question

我有一个Angular指令，当附加到<input>时，在用户输入之后等待一秒钟，然后用$ http查询端点。简而言之，它的目的是检查用户名的唯一性。

看起来像这样：

.directive('sgValidUsername', ['$http', function(http) {
    var waitTimer;
    var checkIfUserExists = function(e, ctrl) {
            http.get('/publicapi/users/' + e.target.value + '/exists')
                .success(function(data) {
                    ctrl.$setValidity('unique', !data.exists);
            });
        };

    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ctrl) {
            element.on('blur keyup', function(e) {
                if (e.target.value) {
                    clearInterval(waitTimer);
                    waitTimer = setTimeout(function() {
                        checkIfUserExists(e, ctrl);
                    }, 1000);
                }
            });
        }
    };
}]);

我尽力编写一个很好的综合性Jasmine单元测试套件，但它没有成功，因为我找不到合适的例子可供学习。我最终以测试形式重构指令，而不是实际测试指令。此外，我收到了一个没有待处理的请求，要求刷新＆＃39;错误。

以下是否有任何建议？

describe('SignupForm directives', function () { 
    var form,       // el to which directive is applied
    $scope,
    $httpBackend, // $http mock
    usernameExistsHandler;

beforeEach(function() {
    module('signupform.directives');
});

beforeEach(function() {
    inject(function ($injector, $rootScope, $compile, $q, $timeout) {
        $scope = $rootScope;
        $httpBackend = $injector.get('$httpBackend');
        usernameExistsHandler = $httpBackend.whenGET(/\/publicapi\/users\/.+?\/exists/);
        var el = angular.element('<form name="form"><input type="text" name="username" ng-model="user.username" sg-username-is-valid /></form>');

        $scope.user = { username: null };
        $compile(el)($scope);
        form = $scope.form;
    });
});

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

   it('should invalidate with existing usernames', function() {
    form.username.$setViewValue('username_in_use');

    $scope.$digest();

    expect($scope.user.username).toEqual('username_in_use');

    usernameExistsHandler.respond('200', { exists: true });
    $httpBackend.expectGET('/publicapi/users/' + $scope.user.username + '/exists/');
    $httpBackend.flush();

    expect(form.username.$valid).toBe(false);
   });