fix(fetch): respect "abort" event on the request signal

src/interceptors/ClientRequest/index.test.ts

@@ -3,6 +3,7 @@ import http from 'http'
 import { HttpServer } from '@open-draft/test-server/http'
 import { DeferredPromise } from '@open-draft/deferred-promise'
 import { ClientRequestInterceptor } from '.'
+import { sleep } from '../../../test/helpers'
 
 const httpServer = new HttpServer((app) => {
   app.get('/', (_req, res) => {
@@ -55,3 +56,30 @@ it('forbids calling "respondWith" multiple times for the same request', async ()
   expect(response.statusCode).toBe(200)
   expect(response.statusMessage).toBe('')
 })
+
+
+it('abort the request if the abort signal is emitted', async () => {
+  const requestUrl = httpServer.http.url('/')
+
+  const requestEmitted = new DeferredPromise<void>()
+  interceptor.on('request', async function delayedResponse({ request }) {
+    requestEmitted.resolve()
+    await sleep(10000)
+    request.respondWith(new Response())
+  })
+
+  const abortController = new AbortController()
+  const request = http.get(requestUrl, { signal: abortController.signal })
+
+  await requestEmitted
+
+  abortController.abort()
+
+  const requestAborted = new DeferredPromise<void>()
+  request.on('error', function(err) {
+    expect(err.name).toEqual('AbortError')
+    requestAborted.resolve()
+  })
+
+  await requestAborted
+})

src/interceptors/fetch/index.test.ts

@@ -0,0 +1,75 @@
+import { DeferredPromise } from '@open-draft/deferred-promise'
+import { HttpServer } from '@open-draft/test-server/http'
+import { afterAll, beforeAll, expect, it } from 'vitest'
+import { FetchInterceptor } from '.'
+import { sleep } from '../../../test/helpers'
+
+const httpServer = new HttpServer((app) => {
+  app.get('/', (_req, res) => {
+    res.status(200).send('/')
+  })
+  app.get('/get', (_req, res) => {
+    res.status(200).send('/get')
+  })
+})
+
+const interceptor = new FetchInterceptor()
+
+beforeAll(async () => {
+  interceptor.apply()
+  await httpServer.listen()
+})
+
+afterAll(async () => {
+  interceptor.dispose()
+  await httpServer.close()
+})
+
+
+it('abort pending requests when manually aborted', async () => {
+  const requestUrl = httpServer.http.url('/')
+
+  interceptor.on('request', async function requestListener() {
+    expect.fail('request should never be received')
+  })
+
+  const controller = new AbortController()
+  const requestAborted = new DeferredPromise<void>()
+
+  const request = fetch(requestUrl, { signal: controller.signal })
+  request.catch((err) => {
+    expect(err.cause.name).toEqual('AbortError')
+    requestAborted.resolve()
+  })
+
+  controller.abort()
+
+  await requestAborted
+})
+
+it('abort ongoing requests when manually aborted', async () => {
+  const requestUrl = httpServer.http.url('/')
+
+  const requestEmitted = new DeferredPromise<void>()
+  interceptor.on('request', async function requestListener({ request }) {
+    requestEmitted.resolve()
+    await sleep(10000)
+    request.respondWith(new Response())
+  })
+
+  const controller = new AbortController()
+  const request = fetch(requestUrl, { signal: controller.signal })
+
+  const requestAborted = new DeferredPromise<void>()
+
+  request.catch((err) => {
+    expect(err.cause.name).toEqual('AbortError')
+    requestAborted.resolve()
+  })
+
+  await requestEmitted
+
+  controller.abort()
+
+  await requestAborted
+})

src/interceptors/fetch/index.ts

@@ -1,3 +1,4 @@
+import { DeferredPromise } from '@open-draft/deferred-promise'
 import { invariant } from 'outvariant'
 import { until } from '@open-draft/until'
 import { HttpRequestEventMap, IS_PATCHED_MODULE } from '../../glossary'
@@ -46,13 +47,21 @@ export class FetchInterceptor extends Interceptor<HttpRequestEventMap> {
 
       this.logger.info('awaiting for the mocked response...')
 
+      const signal = interactiveRequest.signal
+      const rejectWhenRequestAborted = new DeferredPromise<string>()
+
+      signal.addEventListener('abort', () => rejectWhenRequestAborted.reject(signal.reason))
+
       const resolverResult = await until(async () => {
-        await this.emitter.untilIdle(
+        const allListenerResolved = this.emitter.untilIdle(
           'request',
           ({ args: [{ requestId: pendingRequestId }] }) => {
             return pendingRequestId === requestId
           }
         )
+
+        await Promise.race([rejectWhenRequestAborted, allListenerResolved])
+
         this.logger.info('all request listeners have been resolved!')
 
         const [mockedResponse] = await interactiveRequest.respondWith.invoked()