xhr.upload is null about interceptors

[kettanaito]

Hey, @jameskerr. Thank you for raising this up.

The upload property of the XMLHttpRequest override class is currently set to null in the constructor and isn't modifier since then:

interceptors/src/interceptors/XMLHttpRequest/XMLHttpRequestOverride.ts

Line 134 in d693b1e

this.upload = null as any

According to the documentation, XMLHttpRequest.upload is an XMLHttpRequestEventTarget with the support for certain progress events. My initial thought is to introduce a custom event handling for the upload property, similar to how the regular xhr.addEventListner() events are collected and executed at the right stage of the request:

interceptors/src/interceptors/XMLHttpRequest/XMLHttpRequestOverride.ts

Lines 463 to 481 in d693b1e

	public addEventListener<
	K extends keyof InternalXMLHttpRequestEventTargetEventMap
	>(name: K, listener: XMLHttpRequestEventHandler) {
	debug('addEventListener', name, listener)
	this._events.push({
	name,
	listener,
	})
	}
	public removeEventListener<K extends keyof XMLHttpRequestEventMap>(
	name: K,
	listener: (event?: XMLHttpRequestEventMap[K]) => void
	): void {
	debug('removeEventListener', name, listener)
	this._events = this._events.filter((storedEvent) => {
	return storedEvent.name !== name && storedEvent.listener !== listener
	})
	}

interceptors/src/interceptors/XMLHttpRequest/XMLHttpRequestOverride.ts

Line 277 in d693b1e

this.trigger('loadstart')

interceptors/src/interceptors/XMLHttpRequest/XMLHttpRequestOverride.ts

Lines 159 to 183 in d693b1e

	trigger<
	K extends keyof (XMLHttpRequestEventTargetEventMap & {
	readystatechange: ProgressEvent<XMLHttpRequestEventTarget>
	})
	>(eventName: K, options?: ProgressEventInit) {
	debug('trigger "%s" (%d)', eventName, this.readyState)
	debug('resolve listener for event "%s"', eventName)
	// @ts-expect-error XMLHttpRequest class has no index signature.
	const callback = this[`on${eventName}`] as XMLHttpRequestEventHandler
	callback?.call(this, createEvent(this, eventName, options))
	for (const event of this._events) {
	if (event.name === eventName) {
	debug(
	'calling mock event listener "%s" (%d)',
	eventName,
	this.readyState
	)
	event.listener.call(this, createEvent(this, eventName, options))
	}
	}
	return this
	}

What do you think about this approach?

[jameskerr]

Thanks for the update. Sorry I never responded. I hadn't figured out my github notifications back then!

[kettanaito]

We may want to put this issue on hold. It's possible we'll rewrite the XHR interception from the ground-up to extend the native XMLHttpRequest class instead of patching it (similar to what we did with ClientRequest in #164).

[kettanaito]

@johnsonlin has kindly provided us with a temporary fix where this.upload is set to an empty object until we decide to implement a proper polyfill for it (see #187). I'm closing this issue in favor of the said polyfill proposal.