how to test and mock an xmlhttprequest returning an arraybuffer

Question

I have an angular app where a user can select a file from their dropbox account and then the application downloads the file. Here's the code.

$scope.$watchCollection('dropBoxFiles', function (newDBFiles) {
    $scope.invalidResume = false;
    if (newDBFiles.length > 0) {
        var mimeType = $scope.validateFile(newDBFiles[newDBFiles.length - 1].name);
        if (mimeType === ''){
            return false;
        }
        var remote = new XMLHttpRequest();
        remote.open('GET', newDBFiles[newDBFiles.length - 1].link);
        remote.responseType = "arraybuffer";
        remote.onload = function() {
            $scope.filename = newDBFiles[newDBFiles.length - 1].name;
            $scope.fileBlob = new Blob([remote.response], {type: mimeType});
            $scope.$digest();
        };
        remote.send();
    }
});

I'm struggling trying to get a test written to cover the xmlhttprequest section. Here's what I have so far but I'm getting this error -

TypeError: 'undefined' is not an object (evaluating 'request.respondWith')

I know what the error means, but I'm not sure why I would be getting it. Here's the test.

describe('dropbox watch collection ', function () {

    var testResponses = {
        results: {
            success: {
                status: 200,
                responseText: 'test text',
                response: '<html><body>hello</body></html>'
            }
        }
    };

    beforeEach(inject(function ($rootScope, $controller) {
        jasmine.Ajax.install();
        scope = $rootScope.$new();
        $controller('ApplyController', { $scope: scope});
    }));

    afterEach(function() {
        jasmine.Ajax.uninstall();
    });

    it('sets the scope filename to selected file if using a valid file type', function () {
        var selectedFile = {
            name: 'test.html',
            link: 'http://dropbox.com',
            mimeType: 'text/html'
        };

        scope.dropBoxFiles.push(selectedFile);
        scope.$digest();

        var request = jasmine.Ajax.requests.mostRecent();
        request.respondWith(testResponses.results.success);

        expect(scope.filename).toBe(selectedFile.name);
        expect(typeof scope.fileBlob).toBe('blob');
    });
});

how to test and mock an xmlhttprequest returning an arraybuffer

0 Answers0