如何用茉莉花来测试这种角度方法

Question

I have the following method in my angular controller. Note that the Upload.upload method is within the apply method.

$scope.apply = function () {
    $scope.validationErrors.reset();

    if ($scope.firstName.trim() === '') {
        $scope.validationErrors.firstName = 'First name is required.';
    }

    if ($scope.validationErrors.isValid()){

        Upload.upload({
            url: '/apply',
            fields: {
                'first_name': $scope.firstName,
                'last_name': $scope.lastName
            },
            file: $scope.localFile,
            fileName: $scope.filename
        }).success(function(data){
            if (data === 'successfully saved application'){
                $location.path('/thanks/' + $scope.jobId);
            }else{
                $scope.errorMessage = 'Woops, something went wrong with your application. ' + data;
            }
        });
    }
};

I can't figure out how to test the success portion of the method. This is what I have so far but it throws an error on the scope.apply() line saying success is undefined.

describe('apply calls the uploader upload method', function () {
    var upload;
    var returnMessage = 'successfully saved application';
    var deferred;

    beforeEach(inject(function ($rootScope, $controller, $httpBackend, $http, $q, Upload) {
        deferred = $q.defer();
        upload = Upload;
        httpBackend = $httpBackend;
        scope = $rootScope.$new();
        httpBackend.when('POST', '/apply').respond(returnMessage);
        $controller('ApplyController', {
            $scope: scope,
            $routeParams: { id: 1 },
            $http: $http,
            $q: $q,
            Upload: Upload,
            jobService: jobService
        });
        spyOn(upload, 'upload').and.returnValue(deferred);
    }));

    it('calls the Upload upload method', function () {
        scope.firstName = scope.lastName = scope.phoneNumber = scope.zipCode = scope.filename = 'test';
        scope.jobId = 1;
        scope.emailAddress = 'test@test.com';
        scope.apply();
        expect(upload.upload).toHaveBeenCalled();
    });
});

How can I test the success portion of this method? Thanks.

Answer 1

You will have to do $httpBackend.flush() to get the mocked http response. Assuming everything else is correct, the below test should pass. See more information here

it('calls the Upload upload method', function () {
        scope.firstName = scope.lastName = scope.phoneNumber = scope.zipCode = scope.filename = 'test';
        scope.jobId = 1;
        scope.emailAddress = 'test@test.com';
        scope.apply();
        httpBackend.flush();
        expect(upload.upload).toHaveBeenCalled();
    });

Aside:- after each test verify that all of the requests defined via the expect api were made and also that there are no outstanding requests that need to be flushed.

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

EDIT: Spotted another issue. When setting up the spy, you should return deferred.promise and not deferred. Try this:-

spyOn(upload, 'upload').and.returnValue(deferred.promise);

If this also doesn't work, could you share a plunker for this?