acrylblends 0.3.0 → 0.4.0

package/plugins/acryl-router/src/core/client/client.test.ts

@@ -0,0 +1,2313 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { HttpResponse, http } from 'msw'
+import { setupServer } from 'msw/node'
+import { expectTypeOf, vi } from 'vitest'
+import { defineWebSocketHelper } from '../helper/websocket/index.ts'
+import { App } from '../app.ts'
+import { parse } from '../utils/cookie.ts'
+import type { Equal, Expect, JSONValue, SimplifyDeepArray } from '../utils/types.ts'
+import { validator } from '../validator/index.ts'
+import { hc } from './client.ts'
+import type {
+  ClientResponse,
+  InferRequestType,
+  InferResponseType,
+  ApplyGlobalResponse,
+  PickResponseByStatusCode,
+} from './types.ts'
+
+// The Deno adapter is not part of ACRYL; these tests only build client URLs, so a helper that never upgrades stands in for it.
+const upgradeWebSocket = defineWebSocketHelper(async () => {})
+
+class SafeBigInt {
+  unsafe = BigInt(42)
+
+  toJSON() {
+    return {
+      value: '42n',
+    }
+  }
+}
+
+describe('Basic - JSON', () => {
+  const app = new App()
+
+  const route = app
+    .post(
+      '/posts',
+      validator('cookie', () => {
+        return {} as {
+          debug: string
+        }
+      }),
+      validator('header', () => {
+        return {} as {
+          'x-message': string
+        }
+      }),
+      validator('json', () => {
+        return {} as {
+          id: number
+          title: string
+        }
+      }),
+      (c) => {
+        return c.json({
+          success: true,
+          message: 'dummy',
+          requestContentType: 'dummy',
+          requestApp: 'dummy',
+          requestMessage: 'dummy',
+          requestBody: {
+            id: 123,
+            title: 'dummy',
+          },
+        })
+      }
+    )
+    .get('/hello-not-found', (c) => c.notFound())
+    .get('/null', (c) => c.json(null))
+    .get('/empty', (c) => c.json({}))
+    .get('/bigint', (c) => c.json({ value: BigInt(42) }))
+    .get('/safe-bigint', (c) => c.json(new SafeBigInt()))
+
+  type AppType = typeof route
+
+  const server = setupServer(
+    http.post('http://localhost/posts', async ({ request }) => {
+      const requestContentType = request.headers.get('content-type')
+      const requestApp = request.headers.get('x-acryl')
+      const requestMessage = request.headers.get('x-message')
+      const requestBody = await request.json()
+      const payload = {
+        message: 'Hello!',
+        success: true,
+        requestContentType,
+        requestApp,
+        requestMessage,
+        requestBody,
+      }
+      return HttpResponse.json(payload)
+    }),
+    http.get('http://localhost/hello-not-found', () => {
+      return HttpResponse.text(null, {
+        status: 404,
+      })
+    }),
+    http.get('http://localhost/null', () => {
+      return HttpResponse.json(null)
+    }),
+    http.get('http://localhost/empty', () => {
+      return HttpResponse.json({})
+    }),
+    http.get('http://localhost/bigint', () => {
+      return HttpResponse.json({ value: BigInt(42) })
+    }),
+    http.get('http://localhost/safe-bigint', () => {
+      return HttpResponse.json(new SafeBigInt())
+    }),
+    http.get('http://localhost/api/string', () => {
+      return HttpResponse.json('a-string')
+    }),
+    http.get('http://localhost/api/number', async () => {
+      return HttpResponse.json(37)
+    }),
+    http.get('http://localhost/api/boolean', async () => {
+      return HttpResponse.json(true)
+    }),
+    http.get('http://localhost/api/generic', async () => {
+      return HttpResponse.json(Math.random() > 0.5 ? Boolean(Math.random()) : Math.random())
+    })
+  )
+
+  beforeAll(() => server.listen())
+  afterEach(() => server.resetHandlers())
+  afterAll(() => server.close())
+
+  const payload = {
+    id: 123,
+    title: 'Hello! App!',
+  }
+
+  const client = hc<AppType>('http://localhost', { headers: { 'x-acryl': 'acryl' } })
+
+  it('Should get 200 response', async () => {
+    const res = await client.posts.$post(
+      {
+        json: payload,
+        header: {
+          'x-message': 'foobar',
+        },
+        cookie: {
+          debug: 'true',
+        },
+      },
+      {}
+    )
+
+    expect(res.ok).toBe(true)
+    const data = await res.json()
+    expect(data.success).toBe(true)
+    expect(data.message).toBe('Hello!')
+    expect(data.requestContentType).toBe('application/json')
+    expect(data.requestApp).toBe('acryl')
+    expect(data.requestMessage).toBe('foobar')
+    expect(data.requestBody).toEqual(payload)
+  })
+
+  it('Should get 404 response', async () => {
+    const res = await client['hello-not-found'].$get()
+    expect(res.status).toBe(404)
+  })
+
+  it('Should get a `null` content', async () => {
+    const client = hc<AppType>('http://localhost')
+    const res = await client.null.$get()
+    const data = await res.json()
+    expectTypeOf(data).toMatchTypeOf<null>()
+    expect(data).toBe(null)
+  })
+
+  it('Should get a `{}` content', async () => {
+    const client = hc<AppType>('http://localhost')
+    const res = await client.empty.$get()
+    const data = await res.json()
+    expectTypeOf(data).toMatchTypeOf<{}>()
+    expect(data).toStrictEqual({})
+  })
+
+  it('Should get a `{}` content', async () => {
+    const client = hc<AppType>('http://localhost')
+    const res = await client['safe-bigint'].$get()
+    const data = await res.json()
+    expectTypeOf(data).toMatchTypeOf<{ value: string }>()
+    expect(data).toStrictEqual({ value: '42n' })
+  })
+
+  it('Should get an error response', async () => {
+    const client = hc<AppType>('http://localhost')
+    const res = await client.bigint.$get()
+    const data = await res.json()
+    expectTypeOf(data).toMatchTypeOf<never>()
+    expect(res.status).toBe(500)
+    expect(data).toMatchObject({
+      message: 'Do not know how to serialize a BigInt',
+      name: 'TypeError',
+    })
+  })
+
+  it('Should have correct types - primitives', async () => {
+    const app = new App()
+    const route = app
+      .get('/api/string', (c) => c.json('a-string'))
+      .get('/api/number', (c) => c.json(37))
+      .get('/api/boolean', (c) => c.json(true))
+      .get('/api/generic', (c) =>
+        c.json(Math.random() > 0.5 ? Boolean(Math.random()) : Math.random())
+      )
+    type AppType = typeof route
+    const client = hc<AppType>('http://localhost')
+    const stringFetch = await client.api.string.$get()
+    const stringRes = await stringFetch.json()
+    const numberFetch = await client.api.number.$get()
+    const numberRes = await numberFetch.json()
+    const booleanFetch = await client.api.boolean.$get()
+    const booleanRes = await booleanFetch.json()
+    const genericFetch = await client.api.generic.$get()
+    const genericRes = await genericFetch.json()
+    type stringVerify = Expect<Equal<'a-string', typeof stringRes>>
+    expect(stringRes).toBe('a-string')
+    type numberVerify = Expect<Equal<37, typeof numberRes>>
+    expect(numberRes).toBe(37)
+    type booleanVerify = Expect<Equal<true, typeof booleanRes>>
+    expect(booleanRes).toBe(true)
+    type genericVerify = Expect<Equal<number | boolean, typeof genericRes>>
+    expect(typeof genericRes === 'number' || typeof genericRes === 'boolean').toBe(true)
+
+    // using .text() on json endpoint should return string
+    type textTest = Expect<Equal<Promise<string>, ReturnType<typeof genericFetch.text>>>
+  })
+})
+
+describe('Basic - query, queries, form, path params, header and cookie', () => {
+  const app = new App()
+
+  const route = app
+    .get(
+      '/search',
+      validator('query', () => {
+        return {} as { q: string; tag: string[]; filter: string }
+      }),
+      (c) => {
+        return c.json({
+          q: 'fake',
+          tag: ['fake'],
+          filter: 'fake',
+        })
+      }
+    )
+    .put(
+      '/posts/:id',
+      validator('form', () => {
+        return {
+          title: 'Hello',
+        }
+      }),
+      (c) => {
+        const data = c.req.valid('form')
+        return c.json(data)
+      }
+    )
+    .get(
+      '/header',
+      validator('header', () => {
+        return {
+          'x-message-id': 'Hello',
+        }
+      }),
+      (c) => {
+        const data = c.req.valid('header')
+        return c.json(data)
+      }
+    )
+    .get(
+      '/cookie',
+      validator('cookie', () => {
+        return {
+          hello: 'world',
+          goodbye: 'moon',
+        }
+      }),
+      (c) => {
+        const data = c.req.valid('cookie')
+        return c.json(data)
+      }
+    )
+
+  const server = setupServer(
+    http.get('http://localhost/api/search', ({ request }) => {
+      const url = new URL(request.url)
+      const query = url.searchParams.get('q')
+      const tag = url.searchParams.getAll('tag')
+      const filter = url.searchParams.get('filter')
+      return HttpResponse.json({
+        q: query,
+        tag,
+        filter,
+      })
+    }),
+    http.get('http://localhost/api/posts', ({ request }) => {
+      const url = new URL(request.url)
+      const tags = url.searchParams.getAll('tags')
+      return HttpResponse.json({
+        tags: tags,
+      })
+    }),
+    http.put('http://localhost/api/posts/123', async ({ request }) => {
+      const buffer = await request.arrayBuffer()
+      // @ts-ignore
+      const string = String.fromCharCode.apply('', new Uint8Array(buffer))
+      return HttpResponse.text(string)
+    }),
+    http.get('http://localhost/api/header', async ({ request }) => {
+      const message = await request.headers.get('x-message-id')
+      return HttpResponse.json({ 'x-message-id': message })
+    }),
+    http.get('http://localhost/api/cookie', async ({ request }) => {
+      return HttpResponse.json(parse(request.headers.get('cookie') || ''))
+    })
+  )
+
+  beforeAll(() => server.listen())
+  afterEach(() => server.resetHandlers())
+  afterAll(() => server.close())
+
+  type AppType = typeof route
+
+  const client = hc<AppType>('http://localhost/api')
+
+  it('Should get 200 response - query', async () => {
+    const res = await client.search.$get({
+      query: {
+        q: 'foobar',
+        tag: ['a', 'b'],
+        // @ts-expect-error
+        filter: undefined,
+      },
+    })
+
+    expect(res.status).toBe(200)
+    expect(await res.json()).toEqual({
+      q: 'foobar',
+      tag: ['a', 'b'],
+      filter: null,
+    })
+  })
+
+  it('Should get 200 response - form, params', async () => {
+    const res = await client.posts[':id'].$put({
+      form: {
+        title: 'Good Night',
+      },
+      param: {
+        id: '123',
+      },
+    })
+
+    expect(res.status).toBe(200)
+    expect(await res.text()).toMatch('Good Night')
+  })
+
+  it('Should get 200 response - header', async () => {
+    const header = {
+      'x-message-id': 'Hello',
+    }
+    const res = await client.header.$get({
+      header,
+    })
+
+    expect(res.status).toBe(200)
+    expect(await res.json()).toEqual(header)
+  })
+
+  it('Should get 200 response - cookie', async () => {
+    const cookie = {
+      hello: 'world',
+      goodbye: 'moon',
+    }
+    const res = await client.cookie.$get({
+      cookie,
+    })
+
+    expect(res.status).toBe(200)
+    expect(await res.json()).toEqual(cookie)
+  })
+})
+
+describe('Basic - $url()', () => {
+  const api = new App().get('/', (c) => c.text('API')).get('/posts/:id', (c) => c.text('Post'))
+  const content = new App().get(
+    '/search',
+    validator('query', () => {
+      return { page: '1', limit: '10' }
+    }),
+    (c) => c.text('Search')
+  )
+  const app = new App()
+    .get('/', (c) => c.text('Index'))
+    .route('/api', api)
+    .route('/content', content)
+
+  it('Should return a correct url via $url().href', async () => {
+    const client = hc<typeof app>('http://fake')
+    expect(client.index.$url().href).toBe('http://fake/')
+    expect(
+      client.index.$url({
+        query: {
+          page: '123',
+          limit: '20',
+        },
+      }).href
+    ).toBe('http://fake/?page=123&limit=20')
+    expect(client.api.$url().href).toBe('http://fake/api')
+    expect(
+      client.api.posts[':id'].$url({
+        param: {
+          id: '123',
+        },
+      }).href
+    ).toBe('http://fake/api/posts/123')
+    expect(
+      client.content.search.$url({
+        query: {
+          page: '123',
+          limit: '20',
+        },
+      }).href
+    ).toBe('http://fake/content/search?page=123&limit=20')
+  })
+
+  it.each(['http://fake', 'http://fake/', 'http://fake//', 'http://fake/api'])(
+    'Should return a correct path via $path() regardless of %s',
+    async (baseURL) => {
+      const client = hc<typeof app>(baseURL)
+      expect(client.index.$path()).toBe('/')
+      expect(
+        client.index.$path({
+          query: {
+            page: '123',
+            limit: '20',
+          },
+        })
+      ).toBe('/?page=123&limit=20')
+      expect(client.api.$path()).toBe('/api')
+      expect(
+        client.api.posts[':id'].$path({
+          param: {
+            id: '123',
+          },
+        })
+      ).toBe('/api/posts/123')
+      expect(
+        client.content.search.$path({
+          query: {
+            page: '123',
+            limit: '20',
+          },
+        })
+      ).toBe('/content/search?page=123&limit=20')
+    }
+  )
+})
+
+describe('Form - Multiple Values', () => {
+  const server = setupServer(
+    http.post('http://localhost/multiple-values', async ({ request }) => {
+      const data = await request.formData()
+      return HttpResponse.json(data.getAll('key'))
+    })
+  )
+
+  beforeAll(() => server.listen())
+  afterEach(() => server.resetHandlers())
+  afterAll(() => server.close())
+
+  const client = hc('http://localhost/')
+
+  it('Should get 200 response - query', async () => {
+    // @ts-expect-error `client['multiple-values'].$post` is not typed
+    const res = await client['multiple-values'].$post({
+      form: {
+        key: ['foo', 'bar'],
+      },
+    })
+    expect(res.status).toBe(200)
+    expect(await res.json()).toEqual(['foo', 'bar'])
+  })
+})
+
+describe('Form - Undefined Values', () => {
+  const server = setupServer(
+    http.post('http://localhost/form-undefined', async ({ request }) => {
+      const data = await request.formData()
+      return HttpResponse.json({
+        keys: [...data.keys()],
+        title: data.get('title'),
+        optional: data.get('optional'),
+      })
+    })
+  )
+
+  beforeAll(() => server.listen())
+  afterEach(() => server.resetHandlers())
+  afterAll(() => server.close())
+
+  const client = hc('http://localhost/')
+
+  it('Should skip undefined values in form data', async () => {
+    // @ts-expect-error `client['form-undefined'].$post` is not typed
+    const res = await client['form-undefined'].$post({
+      form: {
+        title: 'Hello',
+        optional: undefined,
+      },
+    })
+    expect(res.status).toBe(200)
+    const json = await res.json()
+    expect(json).toEqual({
+      keys: ['title'],
+      title: 'Hello',
+      optional: null,
+    })
+  })
+})
+
+describe('Form arrays containing undefined', () => {
+  const app = new App().post(
+    '/',
+    validator('form', () => ({}) as { tag: (string | undefined)[] | undefined }),
+    async (c) => {
+      const body = await c.req.parseBody({ all: true })
+      return c.json({ tag: body['tag'] })
+    }
+  )
+  const client = hc<typeof app>('', { fetch: app.request })
+
+  it('Should not send the literal string "undefined" for an absent entry', async () => {
+    const res = await client.index.$post({
+      form: {
+        tag: ['a', undefined, 'b'],
+      },
+    })
+    expect(res.status).toBe(200)
+    expect(await res.json()).toEqual({ tag: ['a', 'b'] })
+  })
+
+  it('Should keep an empty string in an array', async () => {
+    const res = await client.index.$post({
+      form: {
+        tag: ['a', '', 'b'],
+      },
+    })
+    expect(res.status).toBe(200)
+    expect(await res.json()).toEqual({ tag: ['a', '', 'b'] })
+  })
+})
+
+describe('Optional header and cookie values', () => {
+  const app = new App().get(
+    '/',
+    validator('header', () => {
+      return {} as {
+        'x-required': string
+        'x-optional'?: string
+      }
+    }),
+    validator('cookie', () => {
+      return {} as {
+        required: string
+        optional?: string
+      }
+    }),
+    (c) =>
+      c.json({
+        requiredHeader: c.req.header('x-required'),
+        optionalHeader: c.req.header('x-optional') ?? null,
+        cookies: parse(c.req.header('cookie') ?? ''),
+      })
+  )
+  const client = hc<typeof app>('', { fetch: app.request })
+
+  it('Should skip undefined header and cookie values', async () => {
+    const res = await client.index.$get({
+      header: {
+        'x-required': 'header-value',
+        'x-optional': undefined,
+      },
+      cookie: {
+        required: 'cookie-value',
+        optional: undefined,
+      },
+    })
+
+    expect(res.status).toBe(200)
+    expect(await res.json()).toEqual({
+      requiredHeader: 'header-value',
+      optionalHeader: null,
+      cookies: {
+        required: 'cookie-value',
+      },
+    })
+  })
+
+  it('Should not send a Cookie header if all cookie values are undefined', async () => {
+    const app = new App().get(
+      '/',
+      validator('cookie', () => {
+        return {} as {
+          optional?: string
+        }
+      }),
+      (c) => c.json({ cookieHeader: c.req.header('cookie') ?? null })
+    )
+    const client = hc<typeof app>('', { fetch: app.request })
+
+    const res = await client.index.$get({
+      cookie: {
+        optional: undefined,
+      },
+    })
+
+    expect(res.status).toBe(200)
+    expect(await res.json()).toEqual({ cookieHeader: null })
+  })
+})
+
+describe('Infer the response/request type', () => {
+  const app = new App()
+  const route = app.get(
+    '/',
+    validator('query', () => {
+      return {
+        name: 'dummy',
+        age: 'dummy',
+      }
+    }),
+    validator('header', () => {
+      return {
+        'x-request-id': 'dummy',
+      }
+    }),
+    validator('cookie', () => {
+      return {
+        name: 'dummy',
+      }
+    }),
+    (c) =>
+      c.json({
+        id: 123,
+        title: 'Morning!',
+      })
+  )
+
+  type AppType = typeof route
+
+  it('Should infer response type the type correctly', () => {
+    const client = hc<AppType>('/')
+    const req = client.index.$get
+
+    type Actual = InferResponseType<typeof req>
+    type Expected = {
+      id: number
+      title: string
+    }
+    type verify = Expect<Equal<Expected, Actual>>
+  })
+
+  it('Should infer request type the type correctly', () => {
+    const client = hc<AppType>('/')
+    const req = client.index.$get
+
+    type Actual = InferRequestType<typeof req>
+    type Expected = {
+      age: string | string[]
+      name: string | string[]
+    }
+    type verify = Expect<Equal<Expected, Actual['query']>>
+  })
+
+  it('Should infer request header type the type correctly', () => {
+    const client = hc<AppType>('/')
+    const req = client.index.$get
+    type c = typeof req
+
+    type Actual = InferRequestType<c>
+    type Expected = {
+      'x-request-id': string
+    }
+    type verify = Expect<Equal<Expected, Actual['header']>>
+  })
+
+  it('Should infer request cookie type the type correctly', () => {
+    const client = hc<AppType>('/')
+    const req = client.index.$get
+    type c = typeof req
+
+    type Actual = InferRequestType<c>
+    type Expected = {
+      name: string
+    }
+    type verify = Expect<Equal<Expected, Actual['cookie']>>
+  })
+
+  describe('Without input', () => {
+    const route = app.get('/', (c) => c.json({ ok: true }))
+    type AppType = typeof route
+
+    it('Should infer response type the type correctly', () => {
+      const client = hc<AppType>('/')
+      const req = client.index.$get
+
+      type Actual = InferResponseType<typeof req>
+      type Expected = { ok: true }
+      type verify = Expect<Equal<Expected, Actual>>
+    })
+
+    it('Should infer request type the type correctly', () => {
+      const client = hc<AppType>('/')
+      const req = client.index.$get
+
+      type Actual = InferRequestType<typeof req>
+      type Expected = {}
+      type verify = Expect<Equal<Expected, Actual>>
+    })
+  })
+})
+
+describe('Merge path with `app.route()`', () => {
+  const server = setupServer(
+    http.get('http://localhost/api/search', async () => {
+      return HttpResponse.json({
+        ok: true,
+      })
+    }),
+    http.get('http://localhost/api/searchArray', async () => {
+      return HttpResponse.json([
+        {
+          ok: true,
+        },
+      ])
+    }),
+    http.get('http://localhost/api/foo', async () => {
+      return HttpResponse.json({
+        ok: true,
+      })
+    }),
+    http.post('http://localhost/api/bar', async () => {
+      return HttpResponse.json({
+        ok: true,
+      })
+    }),
+    http.get('http://localhost/v1/book', async () => {
+      return HttpResponse.json({
+        ok: true,
+      })
+    })
+  )
+
+  beforeAll(() => server.listen())
+  afterEach(() => server.resetHandlers())
+  afterAll(() => server.close())
+
+  type Env = {
+    Bindings: {
+      TOKEN: string
+    }
+  }
+
+  it('Should have correct types', async () => {
+    const api = new App<Env>().get('/search', (c) => c.json({ ok: true }))
+    const app = new App<Env>().route('/api', api)
+    type AppType = typeof app
+    const client = hc<AppType>('http://localhost')
+    const res = await client.api.search.$get()
+    const data = await res.json()
+    type verify = Expect<Equal<true, typeof data.ok>>
+    expect(data.ok).toBe(true)
+  })
+
+  it('Should have correct types - basePath() then get()', async () => {
+    const base = new App<Env>().basePath('/api')
+    const app = base.get('/search', (c) => c.json({ ok: true }))
+    type AppType = typeof app
+    const client = hc<AppType>('http://localhost')
+    const res = await client.api.search.$get()
+    const data = await res.json()
+    type verify = Expect<Equal<true, typeof data.ok>>
+    expect(data.ok).toBe(true)
+  })
+
+  it('Should have correct types - basePath(), route(), get()', async () => {
+    const book = new App().get('/', (c) => c.json({ ok: true }))
+    const app = new App().basePath('/v1').route('/book', book)
+    type AppType = typeof app
+    const client = hc<AppType>('http://localhost')
+    const res = await client.v1.book.$get()
+    const data = await res.json()
+    type verify = Expect<Equal<true, typeof data.ok>>
+    expect(data.ok).toBe(true)
+  })
+
+  it('Should have correct types - with interface', async () => {
+    interface Result {
+      ok: boolean
+      okUndefined?: boolean
+    }
+    const result: Result = { ok: true }
+    const base = new App<Env>().basePath('/api')
+    const app = base.get('/search', (c) => c.json(result))
+    type AppType = typeof app
+    const client = hc<AppType>('http://localhost')
+    const res = await client.api.search.$get()
+    const data = await res.json()
+    type verify = Expect<Equal<Result, typeof data>>
+    expect(data.ok).toBe(true)
+
+    // A few more types only tests
+    interface DeepInterface {
+      l2: {
+        l3: Result
+      }
+    }
+    interface ExtraDeepInterface {
+      l4: DeepInterface
+    }
+    type verifyDeepInterface = Expect<
+      Equal<SimplifyDeepArray<DeepInterface> extends JSONValue ? true : false, true>
+    >
+    type verifyExtraDeepInterface = Expect<
+      Equal<SimplifyDeepArray<ExtraDeepInterface> extends JSONValue ? true : false, true>
+    >
+  })
+
+  it('Should have correct types - with array of interfaces', async () => {
+    interface Result {
+      ok: boolean
+      okUndefined?: boolean
+    }
+    type Results = Result[]
+
+    const results: Results = [{ ok: true }]
+    const base = new App<Env>().basePath('/api')
+    const app = base.get('/searchArray', (c) => c.json(results))
+    type AppType = typeof app
+    const client = hc<AppType>('http://localhost')
+    const res = await client.api.searchArray.$get()
+    const data = await res.json()
+    type verify = Expect<Equal<Results, typeof data>>
+    expect(data[0].ok).toBe(true)
+
+    // A few more types only tests
+    type verifyNestedArrayTyped = Expect<
+      Equal<SimplifyDeepArray<[string, Results]> extends JSONValue ? true : false, true>
+    >
+    type verifyNestedArrayInterfaceArray = Expect<
+      Equal<SimplifyDeepArray<[string, Result[]]> extends JSONValue ? true : false, true>
+    >
+    type verifyExtraNestedArrayTyped = Expect<
+      Equal<SimplifyDeepArray<[string, Results[]]> extends JSONValue ? true : false, true>
+    >
+    type verifyExtraNestedArrayInterfaceArray = Expect<
+      Equal<SimplifyDeepArray<[string, Result[][]]> extends JSONValue ? true : false, true>
+    >
+  })
+
+  it('Should allow a Date object and return it as a string', async () => {
+    const app = new App()
+    const route = app.get('/api/foo', (c) => c.json({ datetime: new Date() }))
+    type AppType = typeof route
+    const client = hc<AppType>('http://localhost')
+    const res = await client.api.foo.$get()
+    const { datetime } = await res.json()
+    type verify = Expect<Equal<string, typeof datetime>>
+  })
+
+  describe('Multiple endpoints', () => {
+    const api = new App()
+      .get('/foo', (c) => c.json({ foo: '' }))
+      .post('/bar', (c) => c.json({ bar: 0 }))
+    const app = new App().route('/api', api)
+    type AppType = typeof app
+    const client = hc<typeof app>('http://localhost')
+
+    it('Should return correct types - GET /api/foo', async () => {
+      const res = await client.api.foo.$get()
+      const data = await res.json()
+      type verify = Expect<Equal<string, typeof data.foo>>
+    })
+
+    it('Should return correct types - POST /api/bar', async () => {
+      const res = await client.api.bar.$post()
+      const data = await res.json()
+      type verify = Expect<Equal<number, typeof data.bar>>
+    })
+    it('Should work with $url', async () => {
+      const url = client.api.bar.$url()
+      expect(url.href).toBe('http://localhost/api/bar')
+    })
+    it('Should work with $path', async () => {
+      const path = client.api.bar.$path()
+      expect(path).toBe('/api/bar')
+    })
+  })
+
+  describe('With a blank path', () => {
+    const app = new App().basePath('/api/v1')
+    const routes = app.route(
+      '/me',
+      new App().route(
+        '',
+        new App().get('', async (c) => {
+          return c.json({ name: 'acryl' })
+        })
+      )
+    )
+    const client = hc<typeof routes>('http://localhost')
+
+    it('Should infer paths correctly', async () => {
+      // Should not a throw type error
+      const url = client.api.v1.me.$url()
+      expectTypeOf<URL>(url)
+      expect(url.href).toBe('http://localhost/api/v1/me')
+
+      const path = client.api.v1.me.$path()
+      expectTypeOf<'/api/v1/me'>(path)
+      expect(path).toBe('/api/v1/me')
+    })
+  })
+
+  describe('With endpoint pathname', () => {
+    const app = new App().basePath('/api/v1')
+    const routes = app.route(
+      '/me',
+      new App().route(
+        '',
+        new App().get('', async (c) => {
+          return c.json({ name: 'acryl' })
+        })
+      )
+    )
+    const client = hc<typeof routes>('http://localhost/proxy')
+
+    it('Should infer paths correctly', async () => {
+      // Should not a throw type error
+      const url = client.api.v1.me.$url()
+      expectTypeOf<URL>(url)
+      expect(url.href).toBe('http://localhost/proxy/api/v1/me')
+
+      const path = client.api.v1.me.$path()
+      expectTypeOf<'/api/v1/me'>(path)
+      expect(path).toBe('/api/v1/me')
+    })
+  })
+})
+
+describe('Use custom fetch method', () => {
+  it('Should call the custom fetch method when provided', async () => {
+    const fetchMock = vi.fn()
+
+    const api = new App().get('/search', (c) => c.json({ ok: true }))
+    const app = new App().route('/api', api)
+    type AppType = typeof app
+    const client = hc<AppType>('http://localhost', { fetch: fetchMock })
+    await client.api.search.$get()
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('Should return Response from custom fetch method', async () => {
+    const fetchMock = vi.fn()
+    const returnValue = new Response(null, { status: 200 })
+    fetchMock.mockReturnValueOnce(returnValue)
+
+    const api = new App().get('/search', (c) => c.json({ ok: true }))
+    const app = new App().route('/api', api)
+    type AppType = typeof app
+    const client = hc<AppType>('http://localhost', { fetch: fetchMock })
+    const res = await client.api.search.$get()
+    expect(res.ok).toBe(true)
+    expect(res).toEqual(returnValue)
+  })
+})
+
+describe('Use custom fetch (app.request) method', () => {
+  it('Should return Response from app request method', async () => {
+    const app = new App().get('/search', (c) => c.json({ ok: true }))
+    type AppType = typeof app
+    const client = hc<AppType>('', { fetch: app.request })
+    const res = await client.search.$get()
+    expect(res.ok).toBe(true)
+  })
+
+  it.each([false, 0, '', null])('Should send falsy JSON value: %j', async (json) => {
+    const app = new App().post(
+      '/json',
+      validator('json', (value) => value as boolean | number | string | null),
+      (c) => c.json(c.req.valid('json'))
+    )
+    const client = hc<typeof app>('', { fetch: app.request })
+
+    const res = await client.json.$post({ json })
+
+    expect(res.status).toBe(200)
+    expect(await res.json()).toBe(json)
+  })
+})
+
+describe('Optional parameters in JSON response', () => {
+  it('Should return the correct type', async () => {
+    const app = new App().get('/', (c) => {
+      return c.json({ message: 'foo' } as { message?: string })
+    })
+    type AppType = typeof app
+    const client = hc<AppType>('', { fetch: app.request })
+    const res = await client.index.$get()
+    const data = await res.json()
+    expectTypeOf(data).toEqualTypeOf<{
+      message?: string
+    }>()
+  })
+})
+
+describe('ClientResponse<T>.json() returns a Union type correctly', () => {
+  const condition = () => true
+  const app = new App().get('/', async (c) => {
+    const ok = condition()
+    if (ok) {
+      return c.json({ data: 'foo' })
+    }
+    return c.json({ message: 'error' })
+  })
+
+  const client = hc<typeof app>('', { fetch: app.request })
+  it('Should be a Union type', async () => {
+    const res = await client.index.$get()
+    const json = await res.json()
+    expectTypeOf(json).toEqualTypeOf<{ data: string } | { message: string }>()
+  })
+})
+
+describe('Response with different status codes', () => {
+  const condition = () => true
+  const app = new App().get('/', async (c) => {
+    const ok = condition()
+    if (ok) {
+      return c.json({ data: 'foo' }, 200)
+    }
+    if (!ok) {
+      return c.json({ message: 'error' }, 400)
+    }
+    return c.json(null)
+  })
+
+  const client = hc<typeof app>('', { fetch: app.request })
+
+  it('all', async () => {
+    const res = await client.index.$get()
+    const json = await res.json()
+    expectTypeOf(json).toEqualTypeOf<{ data: string } | { message: string } | null>()
+  })
+
+  it('status 200', async () => {
+    const res = await client.index.$get()
+    if (res.status === 200) {
+      const json = await res.json()
+      expectTypeOf(json).toEqualTypeOf<{ data: string } | null>()
+    }
+  })
+
+  it('status 400', async () => {
+    const res = await client.index.$get()
+    if (res.status === 400) {
+      const json = await res.json()
+      expectTypeOf(json).toEqualTypeOf<{ message: string } | null>()
+    }
+  })
+
+  it('response is ok', async () => {
+    const res = await client.index.$get()
+    if (res.ok) {
+      const json = await res.json()
+      expectTypeOf(json).toEqualTypeOf<{ data: string } | null>()
+    }
+  })
+
+  it('response is not ok', async () => {
+    const res = await client.index.$get()
+    if (!res.ok) {
+      const json = await res.json()
+      expectTypeOf(json).toEqualTypeOf<{ message: string } | null>()
+    }
+  })
+})
+
+describe('Infer the response type with different status codes', () => {
+  const condition = () => true
+  const app = new App().get('/', async (c) => {
+    const ok = condition()
+    if (ok) {
+      return c.json({ data: 'foo' }, 200)
+    }
+    if (!ok) {
+      return c.json({ message: 'error' }, 400)
+    }
+    return c.json(null)
+  })
+
+  const client = hc<typeof app>('', { fetch: app.request })
+
+  it('Should infer response type correctly', () => {
+    const req = client.index.$get
+
+    type Actual = InferResponseType<typeof req>
+    type Expected =
+      | {
+          data: string
+        }
+      | {
+          message: string
+        }
+      | null
+    type verify = Expect<Equal<Expected, Actual>>
+  })
+
+  it('Should infer response type of status 200 correctly', () => {
+    const req = client.index.$get
+
+    type Actual = InferResponseType<typeof req, 200>
+    type Expected = {
+      data: string
+    } | null
+    type verify = Expect<Equal<Expected, Actual>>
+  })
+})
+
+describe('Infer the response types from middlewares', () => {
+  const app = new App()
+    .get(
+      '/',
+      validator('query', (input, c) => {
+        if (!input.page || typeof input.page !== 'string') {
+          return c.json({ error: 'Bad request' as const }, 400)
+        }
+
+        return input as { page: string }
+      }),
+      async (c) => {
+        const query = c.req.valid('query')
+        return c.json({ data: 'foo', page: query.page }, 200)
+      }
+    )
+    .post(
+      '/posts',
+      async (c, next) => {
+        const auth = c.req.header('authorization')
+        if (!auth || !auth.startsWith('Bearer ')) {
+          return c.json({ error: 'Unauthorized' as const }, 401)
+        }
+        return next()
+      },
+      validator('json', (input, c) => {
+        if (!input.title) {
+          return c.json({ error: 'Bad request' as const }, 400)
+        }
+
+        return input as { title: string }
+      }),
+      (c) => {
+        const data = c.req.valid('json')
+        return c.json(data, 200)
+      }
+    )
+
+  type AppType = typeof app
+  const client = hc<AppType>('', { fetch: app.request })
+
+  it('Should infer response type of status 200 correctly', () => {
+    const req = client.posts.$post
+
+    type Actual = InferResponseType<typeof req, 200>
+    type Expected = {
+      title: string
+    }
+    type verify = Expect<Equal<Expected, Actual>>
+  })
+
+  it('Should infer response type of status 400 correctly', () => {
+    const req = client.posts.$post
+
+    type Actual = InferResponseType<typeof req, 400>
+    type Expected = {
+      error: 'Bad request'
+    }
+    type verify = Expect<Equal<Expected, Actual>>
+  })
+
+  it('Should infer response type of status 401 correctly', () => {
+    const req = client.posts.$post
+
+    type Actual = InferResponseType<typeof req, 401>
+    type Expected = {
+      error: 'Unauthorized'
+    }
+    type verify = Expect<Equal<Expected, Actual>>
+  })
+
+  it('Should infer all possible response statuses', async () => {
+    const req = await client.posts.$post({
+      json: {
+        title: 'hello',
+      },
+    })
+
+    type Actual = typeof req.status
+    type Expected = 200 | 400 | 401
+    type verify = Expect<Equal<Expected, Actual>>
+  })
+
+  it('Should properly assign response to corresponding status', async () => {
+    const req = await client.posts.$post({
+      json: {
+        title: 'hello',
+      },
+    })
+
+    if (req.status === 200) {
+      const data = await req.json()
+
+      expectTypeOf(data).toEqualTypeOf<{ title: string }>()
+    } else if (req.status === 400) {
+      const data = await req.json()
+
+      expectTypeOf(data).toEqualTypeOf<{ error: 'Bad request' }>()
+    } else if (req.status === 401) {
+      const data = await req.json()
+
+      expectTypeOf(data).toEqualTypeOf<{ error: 'Unauthorized' }>()
+    }
+  })
+})
+
+const pathname = <T extends URL | string>(value: T): string =>
+  value instanceof URL ? value.pathname : value
+
+describe.each(['$path', '$url'] as const)('%s() with a param option', (cmd) => {
+  const app = new App()
+    .get('/posts/:id/comments', (c) => c.json({ ok: true }))
+    .get('/something/:firstId/:secondId/:version?', (c) => c.json({ ok: true }))
+    .get('/docs/:page', (c) => c.json({ ok: true }))
+    .get('/files/:dir/', (c) => c.json({ ok: true }))
+    .get('/:page', (c) => c.json({ ok: true }))
+    .get('/index/:v?', (c) => c.json({ ok: true }))
+  type AppType = typeof app
+  const client = hc<AppType>('http://localhost')
+
+  it('Should return the correct url path - /posts/123/comments', async () => {
+    const value = client.posts[':id'].comments[cmd]({
+      param: {
+        id: '123',
+      },
+    })
+    expect(pathname(value)).toBe('/posts/123/comments')
+  })
+
+  it('Should return the correct path - /posts/:id/comments', async () => {
+    const value = client.posts[':id'].comments[cmd]()
+    expect(pathname(value)).toBe('/posts/:id/comments')
+  })
+
+  it('Should return the correct path - /something/123/456', async () => {
+    const value = client.something[':firstId'][':secondId'][':version?'][cmd]({
+      param: {
+        firstId: '123',
+        secondId: '456',
+        version: undefined,
+      },
+    })
+    expect(pathname(value)).toBe('/something/123/456')
+  })
+
+  it('Should keep a param value of "index" - /docs/index', async () => {
+    const value = client.docs[':page'][cmd]({
+      param: {
+        page: 'index',
+      },
+    })
+    expect(pathname(value)).toBe('/docs/index')
+  })
+
+  it('Should keep a root-level param value of "index" - /index', async () => {
+    const value = client[':page'][cmd]({
+      param: {
+        page: 'index',
+      },
+    })
+    expect(pathname(value)).toBe('/index')
+  })
+
+  it('Should keep a literal index segment when an optional param is omitted - /index', async () => {
+    const value = client.index[':v?'][cmd]({
+      param: {
+        v: undefined,
+      },
+    })
+    expect(pathname(value)).toBe('/index')
+  })
+
+  it('Should still drop the index alias of a route with a param - /files/123', async () => {
+    const value = client.files[':dir'].index[cmd]({
+      param: {
+        dir: '123',
+      },
+    })
+    expect(pathname(value)).toBe('/files/123')
+  })
+})
+
+describe('$url() / $path() with a query option', () => {
+  const app = new App()
+    .get(
+      '/posts',
+      validator('query', () => {
+        return {} as { filter: 'test' }
+      }),
+      (c) => c.json({ ok: true })
+    )
+    .get('/docs/:page', (c) => c.json({ ok: true }))
+  type AppType = typeof app
+  const client = hc<AppType>('http://localhost')
+
+  it('Should return the correct path - /posts?filter=test', async () => {
+    const url = client.posts.$url({
+      query: {
+        filter: 'test',
+      },
+    })
+    expect(url.search).toBe('?filter=test')
+
+    const path = client.posts.$path({
+      query: {
+        filter: 'test',
+      },
+    })
+    expect(path).toBe('/posts?filter=test')
+  })
+
+  it('Should return the correct path - /docs/index?filter=test', async () => {
+    const url = client.docs[':page'].$url({
+      param: {
+        page: 'index',
+      },
+      query: {
+        filter: 'test',
+      },
+    })
+    expect(url.href).toBe('http://localhost/docs/index?filter=test')
+
+    const path = client.docs[':page'].$path({
+      param: {
+        page: 'index',
+      },
+      query: {
+        filter: 'test',
+      },
+    })
+    expect(path).toBe('/docs/index?filter=test')
+  })
+})
+
+describe('Client can be awaited', () => {
+  it('Can be awaited without side effects', async () => {
+    const client = hc('http://localhost')
+
+    const awaited = await client
+
+    expect(awaited).toEqual(client)
+  })
+})
+
+describe('Dynamic headers', () => {
+  const app = new App()
+
+  const route = app.post('/posts', (c) => {
+    return c.json({
+      requestDynamic: 'dummy',
+      requestApp: 'dummy',
+    })
+  })
+
+  type AppType = typeof route
+
+  const server = setupServer(
+    http.post('http://localhost/posts', async ({ request }) => {
+      const requestDynamic = request.headers.get('x-dynamic')
+      const requestApp = request.headers.get('x-acryl')
+      const payload = {
+        requestDynamic,
+        requestApp,
+      }
+      return HttpResponse.json(payload)
+    })
+  )
+
+  beforeAll(() => server.listen())
+  afterEach(() => server.resetHandlers())
+  afterAll(() => server.close())
+
+  let dynamic = ''
+
+  const client = hc<AppType>('http://localhost', {
+    headers: () => ({ 'x-acryl': 'acryl', 'x-dynamic': dynamic }),
+  })
+
+  it('Should have "x-dynamic": "one"', async () => {
+    dynamic = 'one'
+
+    const res = await client.posts.$post()
+
+    expect(res.ok).toBe(true)
+    const data = await res.json()
+    expect(data.requestDynamic).toEqual('one')
+  })
+
+  it('Should have "x-dynamic": "two"', async () => {
+    dynamic = 'two'
+
+    const res = await client.posts.$post()
+
+    expect(res.ok).toBe(true)
+    const data = await res.json()
+    expect(data.requestDynamic).toEqual('two')
+  })
+
+  it('Should merge function headers with per-request object headers', async () => {
+    const clientWithFn = hc<AppType>('http://localhost', {
+      headers: async () => ({ 'x-acryl': 'acryl' }),
+    })
+
+    const res = await clientWithFn.posts.$post({}, { headers: { 'x-dynamic': 'request' } })
+
+    expect(res.ok).toBe(true)
+    const data = await res.json()
+    expect(data.requestApp).toEqual('acryl')
+    expect(data.requestDynamic).toEqual('request')
+  })
+
+  it('Should merge function headers with per-request function headers', async () => {
+    const clientWithFn = hc<AppType>('http://localhost', {
+      headers: () => ({ 'x-acryl': 'acryl' }),
+    })
+
+    const res = await clientWithFn.posts.$post(
+      {},
+      { headers: async () => ({ 'x-dynamic': 'request' }) }
+    )
+
+    expect(res.ok).toBe(true)
+    const data = await res.json()
+    expect(data.requestApp).toEqual('acryl')
+    expect(data.requestDynamic).toEqual('request')
+  })
+
+  it('Should merge object headers with per-request function headers', async () => {
+    const clientWithObject = hc<AppType>('http://localhost', {
+      headers: { 'x-acryl': 'acryl' },
+    })
+
+    const res = await clientWithObject.posts.$post(
+      {},
+      { headers: async () => ({ 'x-dynamic': 'request' }) }
+    )
+
+    expect(res.ok).toBe(true)
+    const data = await res.json()
+    expect(data.requestApp).toEqual('acryl')
+    expect(data.requestDynamic).toEqual('request')
+  })
+
+  it('Should prioritize per-request headers when the keys conflict', async () => {
+    const clientWithFn = hc<AppType>('http://localhost', {
+      headers: async () => ({ 'x-acryl': 'client' }),
+    })
+
+    const res = await clientWithFn.posts.$post({}, { headers: { 'x-acryl': 'request' } })
+
+    expect(res.ok).toBe(true)
+    const data = await res.json()
+    expect(data.requestApp).toEqual('request')
+  })
+})
+
+describe('RequestInit work as expected', () => {
+  const app = new App()
+
+  const route = app
+    .get('/credentials', (c) => {
+      return c.text('' as RequestCredentials)
+    })
+    .get('/headers', (c) => {
+      return c.json({} as Record<string, string>)
+    })
+    .post('/headers', (c) => c.text('Not found', 404))
+
+  type AppType = typeof route
+
+  const server = setupServer(
+    http.get('http://localhost/credentials', ({ request }) => {
+      return HttpResponse.text(request.credentials)
+    }),
+    http.get('http://localhost/headers', ({ request }) => {
+      const allHeaders: Record<string, string> = {}
+      for (const [k, v] of request.headers.entries()) {
+        allHeaders[k] = v
+      }
+
+      return HttpResponse.json(allHeaders)
+    }),
+    http.post('http://localhost/headers', () => {
+      return HttpResponse.text('Should not be here', {
+        status: 400,
+      })
+    })
+  )
+
+  beforeAll(() => server.listen())
+  afterEach(() => server.resetHandlers())
+  afterAll(() => server.close())
+
+  const client = hc<AppType>('http://localhost', {
+    headers: { 'x-acryl': 'fire' },
+    init: {
+      credentials: 'include',
+    },
+  })
+
+  it('Should overwrite method and fail', async () => {
+    const res = await client.headers.$get(undefined, { init: { method: 'POST' } })
+
+    expect(res.ok).toBe(false)
+  })
+
+  it('Should clear headers', async () => {
+    const res = await client.headers.$get(undefined, { init: { headers: undefined } })
+
+    expect(res.ok).toBe(true)
+    const data = await res.json()
+    expect(data).toEqual({})
+  })
+
+  it('Should overwrite headers', async () => {
+    const res = await client.headers.$get(undefined, {
+      init: { headers: new Headers({ 'x-acryl': 'awesome' }) },
+    })
+
+    expect(res.ok).toBe(true)
+    const data = await res.json()
+    expect(data).toEqual({ 'x-acryl': 'awesome' })
+  })
+
+  it('credentials is include', async () => {
+    const res = await client.credentials.$get()
+
+    expect(res.ok).toBe(true)
+    const data = await res.text()
+    expect(data).toEqual('include')
+  })
+
+  it('deepMerge should works and not unset credentials', async () => {
+    const res = await client.credentials.$get(undefined, { init: { headers: { hi: 'hello' } } })
+
+    expect(res.ok).toBe(true)
+    const data = await res.text()
+    expect(data).toEqual('include')
+  })
+
+  it('Should unset credentials', async () => {
+    const res = await client.credentials.$get(undefined, { init: { credentials: undefined } })
+
+    expect(res.ok).toBe(true)
+    const data = await res.text()
+    expect(data).toEqual('same-origin')
+  })
+})
+
+describe('WebSocket URL Protocol Translation', () => {
+  const app = new App()
+  const route = app.get(
+    '/',
+    upgradeWebSocket((c) => ({
+      onMessage(event, ws) {
+        console.log(`Message from client: ${event.data}`)
+        ws.send('Hello from server!')
+      },
+      onClose: () => {
+        console.log('Connection closed')
+      },
+    }))
+  )
+
+  type AppType = typeof route
+
+  const server = setupServer()
+  const webSocketMock = vi.fn()
+
+  beforeAll(() => server.listen())
+  beforeEach(() => {
+    vi.stubGlobal('WebSocket', webSocketMock)
+  })
+  afterEach(() => {
+    vi.clearAllMocks()
+    server.resetHandlers()
+  })
+  afterAll(() => server.close())
+
+  it('Translates HTTP to ws', async () => {
+    const client = hc<AppType>('http://localhost')
+    client.index.$ws()
+    expect(webSocketMock).toHaveBeenCalledWith('ws://localhost/')
+  })
+
+  it('Translates HTTPS to wss', async () => {
+    const client = hc<AppType>('https://localhost')
+    client.index.$ws()
+    expect(webSocketMock).toHaveBeenCalledWith('wss://localhost/')
+  })
+
+  it('Keeps ws unchanged', async () => {
+    const client = hc<AppType>('ws://localhost')
+    client.index.$ws()
+    expect(webSocketMock).toHaveBeenCalledWith('ws://localhost/')
+  })
+
+  it('Keeps wss unchanged', async () => {
+    const client = hc<AppType>('wss://localhost')
+    client.index.$ws()
+    expect(webSocketMock).toHaveBeenCalledWith('wss://localhost/')
+  })
+
+  it('Preserves an index path parameter value', async () => {
+    const dynamicRoute = new App().get(
+      '/:id',
+      upgradeWebSocket(() => ({}))
+    )
+    const client = hc<typeof dynamicRoute>('http://localhost')
+
+    client[':id'].$ws({ param: { id: 'index' } })
+
+    expect(webSocketMock).toHaveBeenCalledWith('ws://localhost/index')
+  })
+})
+
+describe('WebSocket URL Protocol Translation with Query Parameters', () => {
+  const app = new App()
+  const route = app.get(
+    '/',
+    upgradeWebSocket((c) => ({
+      onMessage(event, ws) {
+        ws.send('Hello from server!')
+      },
+      onClose: () => {
+        console.log('Connection closed')
+      },
+    }))
+  )
+
+  type AppType = typeof route
+
+  const server = setupServer()
+  const webSocketMock = vi.fn()
+
+  beforeAll(() => server.listen())
+  beforeEach(() => {
+    vi.stubGlobal('WebSocket', webSocketMock)
+  })
+  afterEach(() => {
+    vi.clearAllMocks()
+    server.resetHandlers()
+  })
+  afterAll(() => server.close())
+
+  it('Translates HTTP to ws and includes query parameters', async () => {
+    const client = hc<AppType>('http://localhost')
+    client.index.$ws({
+      query: {
+        id: '123',
+        type: 'test',
+        tag: ['a', 'b'],
+      },
+    })
+    expect(webSocketMock).toHaveBeenCalledWith('ws://localhost/?id=123&type=test&tag=a&tag=b')
+  })
+
+  it('Translates HTTPS to wss and includes query parameters', async () => {
+    const client = hc<AppType>('https://localhost')
+    client.index.$ws({
+      query: {
+        id: '456',
+        type: 'secure',
+      },
+    })
+    expect(webSocketMock).toHaveBeenCalledWith('wss://localhost/?id=456&type=secure')
+  })
+
+  it('Keeps ws unchanged and includes query parameters', async () => {
+    const client = hc<AppType>('ws://localhost')
+    client.index.$ws({
+      query: {
+        id: '789',
+        type: 'plain',
+      },
+    })
+    expect(webSocketMock).toHaveBeenCalledWith('ws://localhost/?id=789&type=plain')
+  })
+
+  it('Keeps wss unchanged and includes query parameters', async () => {
+    const client = hc<AppType>('wss://localhost')
+    client.index.$ws({
+      query: {
+        id: '1011',
+        type: 'secure',
+      },
+    })
+    expect(webSocketMock).toHaveBeenCalledWith('wss://localhost/?id=1011&type=secure')
+  })
+})
+
+describe('Client can be console.log in react native', () => {
+  it('Returns a function name with function.name.toString', async () => {
+    const client = hc('http://localhost')
+    // @ts-ignore
+    expect(client.posts.name.toString()).toEqual('posts')
+  })
+
+  it('Returns a function name with function.name.valueOf', async () => {
+    const client = hc('http://localhost')
+    // @ts-ignore
+    expect(client.posts.name.valueOf()).toEqual('posts')
+  })
+
+  it('Returns a function with function.valueOf', async () => {
+    const client = hc('http://localhost')
+    expect(typeof client.posts.valueOf()).toEqual('function')
+  })
+
+  it('Returns a function source with function.toString', async () => {
+    const client = hc('http://localhost')
+    expect(client.posts.toString()).toMatch('function proxyCallback')
+  })
+})
+
+describe('Text response', () => {
+  const text = 'My name is App'
+  const obj = { ok: true }
+  const server = setupServer(
+    http.get('http://localhost/about/me', async () => {
+      return HttpResponse.text(text)
+    }),
+    http.get('http://localhost/api', async ({ request }) => {
+      return HttpResponse.json(obj)
+    })
+  )
+
+  beforeAll(() => server.listen())
+  afterEach(() => server.resetHandlers())
+  afterAll(() => server.close())
+
+  const app = new App().get('/about/me', (c) => c.text(text)).get('/api', (c) => c.json(obj))
+  const client = hc<typeof app>('http://localhost/')
+
+  it('Should be never with res.json() - /about/me', async () => {
+    const res = await client.about.me.$get()
+    type Actual = ReturnType<typeof res.json>
+    type Expected = Promise<never>
+    type verify = Expect<Equal<Expected, Actual>>
+  })
+
+  it('Should be "Hello, World!" with res.text() - /about/me', async () => {
+    const res = await client.about.me.$get()
+    const data = await res.text()
+    expectTypeOf(data).toEqualTypeOf<'My name is App'>()
+    expect(data).toBe(text)
+  })
+
+  /**
+   * Also check the type of JSON response with res.text().
+   */
+  it('Should be string with res.text() - /api', async () => {
+    const res = await client.api.$get()
+    type Actual = ReturnType<typeof res.text>
+    type Expected = Promise<string>
+    type verify = Expect<Equal<Expected, Actual>>
+  })
+})
+
+describe('Redirect response - only types', () => {
+  const server = setupServer(
+    http.get('http://localhost/', async () => {
+      return HttpResponse.redirect('/')
+    })
+  )
+
+  beforeAll(() => server.listen())
+  afterEach(() => server.resetHandlers())
+  afterAll(() => server.close())
+
+  const condition = () => true
+  const app = new App().get('/', async (c) => {
+    const ok = condition()
+    const temporary = condition()
+    if (ok) {
+      return c.json({ ok: true }, 200)
+    }
+    if (temporary) {
+      return c.redirect('/302')
+    }
+    return c.redirect('/301', 301)
+  })
+
+  const client = hc<typeof app>('http://localhost/')
+  const req = client.index.$get
+
+  it('Should infer request type the type correctly', () => {
+    type Actual = InferResponseType<typeof req>
+    type Expected =
+      | {
+          ok: true
+        }
+      | undefined
+    type verify = Expect<Equal<Expected, Actual>>
+  })
+
+  it('Should infer response type correctly', async () => {
+    const res = await req()
+    if (res.ok) {
+      const data = await res.json()
+      expectTypeOf(data).toMatchTypeOf({ ok: true })
+    }
+    if (res.status === 301) {
+      type Expected = ClientResponse<undefined, 301, 'redirect'>
+      type verify = Expect<Equal<Expected, typeof res>>
+    }
+    if (res.status === 302) {
+      type Expected = ClientResponse<undefined, 302, 'redirect'>
+      type verify = Expect<Equal<Expected, typeof res>>
+    }
+  })
+})
+
+describe('WebSocket Provider Integration', () => {
+  const app = new App()
+  const route = app.get(
+    '/',
+    upgradeWebSocket((c) => ({
+      onMessage(event, ws) {
+        ws.send('Hello from server!')
+      },
+      onClose() {
+        console.log('Connection closed')
+      },
+    }))
+  )
+
+  type AppType = typeof route
+
+  const server = setupServer()
+  beforeAll(() => server.listen())
+  afterEach(() => {
+    vi.clearAllMocks()
+    server.resetHandlers()
+  })
+  afterAll(() => server.close())
+
+  it.each([
+    {
+      description: 'should initialize the WebSocket provider correctly',
+      url: 'http://localhost',
+      query: undefined,
+      expectedUrl: 'ws://localhost/',
+    },
+    {
+      description: 'should correctly add query parameters to the WebSocket URL',
+      url: 'http://localhost',
+      query: { id: '123', type: 'test', tag: ['a', 'b'] },
+      expectedUrl: 'ws://localhost/?id=123&type=test&tag=a&tag=b',
+    },
+  ])('$description', ({ url, expectedUrl, query }) => {
+    const webSocketMock = vi.fn()
+    const client = hc<AppType>(url, {
+      webSocket(url, options) {
+        return webSocketMock(url, options)
+      },
+    })
+    client.index.$ws({ query })
+    expect(webSocketMock).toHaveBeenCalledWith(expectedUrl, undefined)
+  })
+})
+
+describe('Query arrays containing undefined', () => {
+  // A validator whose query field is an optional union gives the client an input
+  // type of `(string | undefined)[] | undefined`, so this compiles with no cast.
+  const app = new App().get(
+    '/search',
+    validator('query', () => ({}) as { tag: (string | undefined)[] | undefined }),
+    (c) => c.json({ ok: true })
+  )
+  type AppType = typeof app
+
+  it('Should not send the literal string "undefined" for an absent entry', async () => {
+    let requestedUrl = ''
+    const client = hc<AppType>('http://localhost', {
+      fetch: (input: RequestInfo | URL) => {
+        requestedUrl = input.toString()
+        return Promise.resolve(new Response('{}'))
+      },
+    })
+
+    await client.search.$get({ query: { tag: ['a', undefined, 'b'] } })
+
+    expect(requestedUrl).toBe('http://localhost/search?tag=a&tag=b')
+  })
+})
+
+describe('Empty serialized query', () => {
+  const app = new App().get(
+    '/search',
+    validator('query', () => ({}) as { q?: string }),
+    (c) => c.json({ ok: true })
+  )
+  const input = { query: { q: undefined } }
+
+  it('Should omit the query delimiter when no query values are serialized', async () => {
+    let requestedUrl = ''
+    const client = hc<typeof app>('http://localhost', {
+      fetch: (input: RequestInfo | URL) => {
+        requestedUrl = input.toString()
+        return Promise.resolve(new Response('{}'))
+      },
+    })
+
+    await client.search.$get(input)
+
+    expect(requestedUrl).toBe('http://localhost/search')
+    expect(client.search.$url(input).href).toBe('http://localhost/search')
+    expect(client.search.$path(input)).toBe('/search')
+  })
+
+  it('Should omit the query delimiter when a custom serializer returns no values', async () => {
+    let requestedUrl = ''
+    const client = hc<typeof app>('http://localhost', {
+      buildSearchParams: () => new URLSearchParams(),
+      fetch: (input: RequestInfo | URL) => {
+        requestedUrl = input.toString()
+        return Promise.resolve(new Response('{}'))
+      },
+    })
+    const customInput = { query: { q: 'ignored' } }
+
+    await client.search.$get(customInput)
+
+    expect(requestedUrl).toBe('http://localhost/search')
+    expect(client.search.$url(customInput).href).toBe('http://localhost/search')
+    expect(client.search.$path(customInput)).toBe('/search')
+  })
+
+  it('Should preserve empty-string query values', async () => {
+    let requestedUrl = ''
+    const client = hc<typeof app>('http://localhost', {
+      fetch: (input: RequestInfo | URL) => {
+        requestedUrl = input.toString()
+        return Promise.resolve(new Response('{}'))
+      },
+    })
+    const emptyStringInput = { query: { q: '' } }
+
+    await client.search.$get(emptyStringInput)
+
+    expect(requestedUrl).toBe('http://localhost/search?q=')
+    expect(client.search.$url(emptyStringInput).href).toBe('http://localhost/search?q=')
+    expect(client.search.$path(emptyStringInput)).toBe('/search?q=')
+  })
+})
+
+describe('Custom buildSearchParams', () => {
+  const app = new App()
+  const route = app.get(
+    '/search',
+    validator('query', () => {
+      return {} as { q: string; tags: string[] }
+    }),
+    (c) => {
+      return c.json({
+        message: 'success',
+        queryString: '',
+      })
+    }
+  )
+
+  type AppType = typeof route
+
+  const server = setupServer(
+    http.get('http://localhost/search', ({ request }) => {
+      const url = new URL(request.url)
+      return HttpResponse.json({
+        message: 'success',
+        queryString: url.search,
+      })
+    })
+  )
+
+  beforeAll(() => server.listen())
+  afterEach(() => server.resetHandlers())
+  afterAll(() => server.close())
+
+  // Custom buildSearchParams that uses bracket notation for arrays (key[]=value)
+  const customBuildSearchParams = (query: Record<string, string | string[]>) => {
+    const searchParams = new URLSearchParams()
+    for (const [k, v] of Object.entries(query)) {
+      if (v === undefined) {
+        continue
+      }
+      if (Array.isArray(v)) {
+        v.forEach((item) => searchParams.append(`${k}[]`, item))
+      } else {
+        searchParams.set(k, v)
+      }
+    }
+    return searchParams
+  }
+
+  it('Should use custom buildSearchParams for query serialization', async () => {
+    const client = hc<AppType>('http://localhost', { buildSearchParams: customBuildSearchParams })
+    const res = await client.search.$get({ query: { q: 'test', tags: ['tag1', 'tag2', 'tag3'] } })
+    const data = await res.json()
+
+    expect(res.status).toBe(200)
+    expect(data.queryString).toBe('?q=test&tags%5B%5D=tag1&tags%5B%5D=tag2&tags%5B%5D=tag3')
+  })
+
+  it('Should use default buildSearchParams when custom one is not provided', async () => {
+    const client = hc<AppType>('http://localhost')
+    const res = await client.search.$get({ query: { q: 'test', tags: ['tag1', 'tag2'] } })
+    const data = await res.json()
+
+    expect(res.status).toBe(200)
+    expect(data.queryString).toBe('?q=test&tags=tag1&tags=tag2')
+  })
+
+  it('Should use custom buildSearchParams in $url() method', () => {
+    const client = hc<AppType>('http://localhost', { buildSearchParams: customBuildSearchParams })
+    const url = client.search.$url({ query: { q: 'test', tags: ['tag1', 'tag2'] } })
+
+    expect(url.href).toBe('http://localhost/search?q=test&tags%5B%5D=tag1&tags%5B%5D=tag2')
+  })
+
+  it('Should use default buildSearchParams in $url() when custom one is not provided', () => {
+    const client = hc<AppType>('http://localhost')
+    const url = client.search.$url({ query: { q: 'test', tags: ['tag1', 'tag2'] } })
+
+    expect(url.href).toBe('http://localhost/search?q=test&tags=tag1&tags=tag2')
+  })
+
+  it('Should use custom buildSearchParams in $ws() method', () => {
+    const webSocketMock = vi.fn()
+    const client = hc<AppType>('http://localhost', {
+      buildSearchParams: customBuildSearchParams,
+      webSocket(url, options) {
+        return webSocketMock(url, options)
+      },
+    })
+    // @ts-expect-error search route does not explicitly define $ws in mock AppType
+    client.search.$ws({ query: { q: 'test', tags: ['tag1', 'tag2'] } })
+
+    expect(webSocketMock).toHaveBeenCalledWith(
+      'ws://localhost/search?q=test&tags%5B%5D=tag1&tags%5B%5D=tag2',
+      undefined
+    )
+  })
+
+  it('Should filter out undefined query parameters in $ws()', () => {
+    const webSocketMock = vi.fn()
+    const client = hc<AppType>('http://localhost', {
+      webSocket(url, options) {
+        return webSocketMock(url, options)
+      },
+    })
+    // @ts-expect-error search route does not explicitly define $ws in mock AppType
+    client.search.$ws({ query: { q: 'test', tags: undefined as any } })
+
+    expect(webSocketMock).toHaveBeenCalledWith('ws://localhost/search?q=test', undefined)
+  })
+})
+
+describe('ApplyGlobalResponse Type Helper', () => {
+  const server = setupServer(
+    http.get('http://localhost/api/users', () => {
+      return HttpResponse.json({ users: ['alice', 'bob'] })
+    }),
+    http.get('http://localhost/api/error', () => {
+      return HttpResponse.json(
+        { error: 'Internal Server Error', message: 'Something went wrong' },
+        { status: 500 }
+      )
+    }),
+    http.get('http://localhost/api/unauthorized', () => {
+      return HttpResponse.json({ error: 'Unauthorized', message: 'Please login' }, { status: 401 })
+    })
+  )
+
+  beforeAll(() => server.listen())
+  afterEach(() => server.resetHandlers())
+  afterAll(() => server.close())
+
+  it('Should add global error response types to all routes', () => {
+    // Use explicit status codes for proper type narrowing
+    const app = new App().get('/api/users', (c) => c.json({ users: ['alice', 'bob'] }, 200))
+
+    // Apply global error responses with new object syntax
+    type AppWithGlobalErrors = ApplyGlobalResponse<
+      typeof app,
+      {
+        401: { json: { error: string; message: string } }
+        500: { json: { error: string; message: string } }
+      }
+    >
+
+    const client = hc<AppWithGlobalErrors>('http://localhost')
+    const req = client.api.users.$get
+
+    // Type should be a union of normal response and global errors
+    type ResponseType = InferResponseType<typeof req>
+    type Expected = { users: string[] } | { error: string; message: string }
+
+    type verify = Expect<Equal<ResponseType, Expected>>
+  })
+
+  it('Should support multiple global error status codes', async () => {
+    const app = new App()
+      .get('/api/users', (c) => c.json({ users: ['alice', 'bob'] }, 200))
+      .get('/api/unauthorized', (c) =>
+        c.json({ error: 'Unauthorized', message: 'Please login' }, 401)
+      )
+      .get('/api/error', (c) =>
+        c.json({ error: 'Internal Server Error', message: 'Something went wrong' }, 500)
+      )
+
+    // Apply multiple global error types in one definition
+    type AppWithGlobalErrors = ApplyGlobalResponse<
+      typeof app,
+      {
+        401: { json: { error: string; message: string } }
+        500: { json: { error: string; message: string } }
+      }
+    >
+
+    const client = hc<AppWithGlobalErrors>('http://localhost')
+
+    // Verify runtime behavior for different status codes
+    const usersRes = await client.api.users.$get()
+    expect(usersRes.status).toBe(200)
+
+    const unauthorizedRes = await client.api.unauthorized.$get()
+    expect(unauthorizedRes.status).toBe(401)
+    expect(await unauthorizedRes.json()).toEqual({ error: 'Unauthorized', message: 'Please login' })
+
+    const errorRes = await client.api.error.$get()
+    expect(errorRes.status).toBe(500)
+    expect(await errorRes.json()).toEqual({
+      error: 'Internal Server Error',
+      message: 'Something went wrong',
+    })
+  })
+
+  it('Should work with onError handler pattern', () => {
+    // Simulating typical App app with onError handler
+    // Use explicit status code for proper type narrowing
+    const app = new App().get('/api/users', (c) => c.json({ users: ['alice', 'bob'] }, 200))
+
+    // In real app: app.onError((err, c) => c.json({ error: err.message }, 500))
+    type AppWithOnError = ApplyGlobalResponse<
+      typeof app,
+      {
+        500: { json: { error: string } }
+      }
+    >
+
+    const client = hc<AppWithOnError>('http://localhost')
+    const req = client.api.users.$get
+
+    // RPC client should know about the error format
+    type ResponseType = InferResponseType<typeof req>
+    type Expected = { users: string[] } | { error: string }
+
+    type verify = Expect<Equal<ResponseType, Expected>>
+  })
+
+  it('Should keep route() paths when global responses are applied', () => {
+    const users = new App().get('/users', (c) => c.json({ users: ['alice', 'bob'] }, 200))
+    const app = new App().route('/api', users)
+
+    type AppWithGlobalErrors = ApplyGlobalResponse<
+      typeof app,
+      {
+        500: { json: { error: string } }
+      }
+    >
+
+    const client = hc<AppWithGlobalErrors>('http://localhost')
+    const req = client.api.users.$get
+
+    type ResponseType = InferResponseType<typeof req>
+    type Expected = { users: string[] } | { error: string }
+
+    type verify = Expect<Equal<ResponseType, Expected>>
+  })
+})
+
+describe('PickResponseByStatusCode Type Helper', () => {
+  it('Should keep only specified status code responses', () => {
+    const app = new App().get('/api/users', (c) => {
+      try {
+        return c.json({ users: ['alice', 'bob'] }, 200)
+      } catch {
+        return c.json({ error: 'Internal Server Error' }, 500)
+      }
+    })
+
+    type AppSuccessOnly = PickResponseByStatusCode<typeof app, 200>
+
+    const client = hc<AppSuccessOnly>('http://localhost')
+    const req = client.api.users.$get
+
+    type ResponseType = InferResponseType<typeof req>
+    type Expected = { users: string[] }
+    type verify = Expect<Equal<ResponseType, Expected>>
+
+    type Res = Awaited<ReturnType<typeof req>>
+    type verifyOk = Expect<Equal<Res['ok'], true>>
+    type verifyStatus = Expect<Equal<Res['status'], 200>>
+  })
+
+  it('Should work with ApplyGlobalResponse', () => {
+    const app = new App().get('/api/users', (c) => {
+      try {
+        return c.json({ users: ['alice', 'bob'] }, 200)
+      } catch {
+        return c.json({ error: 'Not Found' }, 404)
+      }
+    })
+
+    type AppWithGlobalErrors = ApplyGlobalResponse<
+      typeof app,
+      {
+        401: { json: { error: string; message: string } }
+        500: { json: { error: string; message: string } }
+      }
+    >
+
+    type AppSuccessOnly = PickResponseByStatusCode<AppWithGlobalErrors, 200>
+
+    const client = hc<AppSuccessOnly>('http://localhost')
+    const req = client.api.users.$get
+
+    type ResponseType = InferResponseType<typeof req>
+    type Expected = { users: string[] }
+    type verify = Expect<Equal<ResponseType, Expected>>
+  })
+
+  it('Should work with route() paths', () => {
+    const users = new App().get('/users', (c) => {
+      try {
+        return c.json({ users: ['alice', 'bob'] }, 200)
+      } catch {
+        return c.json({ error: 'error' }, 500)
+      }
+    })
+    const app = new App().route('/api', users)
+
+    type AppSuccessOnly = PickResponseByStatusCode<typeof app, 200>
+
+    const client = hc<AppSuccessOnly>('http://localhost')
+    const req = client.api.users.$get
+
+    type ResponseType = InferResponseType<typeof req>
+    type Expected = { users: string[] }
+    type verify = Expect<Equal<ResponseType, Expected>>
+  })
+
+  it('Should pick multiple status codes', () => {
+    const app = new App().get('/api/users', (c) => {
+      try {
+        return c.json({ users: ['alice', 'bob'] }, 200)
+      } catch {
+        return c.json({ error: 'Bad Request' }, 400)
+      }
+    })
+
+    type AppWithGlobalErrors = ApplyGlobalResponse<
+      typeof app,
+      {
+        500: { json: { error: string } }
+      }
+    >
+
+    type AppFiltered = PickResponseByStatusCode<AppWithGlobalErrors, 200 | 400>
+
+    const client = hc<AppFiltered>('http://localhost')
+    const req = client.api.users.$get
+
+    type ResponseType = InferResponseType<typeof req>
+    type Expected = { users: string[] } | { error: string }
+    type verify = Expect<Equal<ResponseType, Expected>>
+  })
+})