CODEWITHSUNDEEP
javascriptangularjsunit-testingkarma-jasmine
Mithun Shreevatsa
Mithun Shreevatsa

Reputation: 3609

How to mock dom element from karma testing

There is an input type file element. During angular file upload multiple times, the value is not being cleared. Hence manually clearing it using plain javascript dom manipulation.

Below is the code:

function removeFromQueue(item) {
        vm.uploads.uploader.removeFromQueue(item);
        // Clearing input file field for re-uploading
        if(!vm.uploadFile) {
            document.getElementById('upload-file-' + vm.type).value = null;
        }
    }

In this case, not able to mock the document.getElementById, hence controlling it using vm.uploadFile undefined variable from unit test case which is wrong. How to mock the dom element here?

Upvotes: 8

Views: 23912

Answers (1)

tanmay
tanmay

Reputation: 7911

You should be able to spyOn the document.getElementById and return the useful properties (i.e. value here). Like this,

spyOn(document, "getElementById").and.callFake(function() {
    return {
        value: 'test'
    }
});

And then if you want, you can expect it to have been called,

expect(document.getElementById).toHaveBeenCalledWith('...')

Upvotes: 17

Related Questions