4

How do I test an event that does an XHR request and dispatches an event?

I managed to install the dependencies to mock the xhr using https://github.com/jameslnewell/xhr-mock/tree/master/packages/xhr-mock but having trouble on passing the test case that is inside the addeventlistener that has an event callback. Here's the code.

const xhr = new XMLHttpRequest();

if (xhr.upload) {
            xhr.upload.addEventListener('progress', e => {
                // Upload in-progress
                this.dispatchEvent(new CustomEvent('uploadprogress', {
                    detail: {
                        loaded: e.loaded,
                        total: e.total,
                        percentComplete: e.loaded * 100 / e.total
                    }
                }));
            });
        }
​
xhr.addEventListener('load', e => {
     // Upload complete
     this.dispatchEvent(new CustomEvent('uploadcomplete', {
           detail: {
               status: (xhr.status >= 200 && xhr.status < 300) ? 'SUCCESS' : 'ERROR',
               response: JSON.parse( this.parseResponse(xhr.responseText) )
            }
     }));
}); 
...

And so on and so forth. I managed to pass the open send abort formdata and addEventListener to be called but I can't seem to pass inside the event call back inside addEventListener and dispatchEvent.

  • @Christopher did you get this figured out? If not, please provide the test case and code where the event listener is defined. It looks to me like just a timing issue with waiting long enough for the event to be dispatched. – TrevorBliss Jul 15 at 16:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.