fix: refactor useCall with TDD

- setup vitest for unit testing
- setup msw for mocking fetch calls

Author: netchampfaris

package.json

@@ -4,7 +4,7 @@
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
-    "test": "npx prettier --check ./src",
+    "test": "vitest",
     "prettier": "npx prettier -w ./src",
     "bump-and-release": "git pull --rebase origin main && yarn version --patch && git push && git push --tags",
     "dev": "vite",
@@ -66,13 +66,14 @@
     "@histoire/plugin-vue": "^0.17.14",
     "@vitejs/plugin-vue": "^4.0.0",
     "autoprefixer": "^10.4.13",
-    "cross-fetch": "^3.1.5",
     "histoire": "^0.17.14",
     "lint-staged": ">=10",
+    "msw": "^2.7.0",
     "postcss": "^8.4.21",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "tailwindcss": "^3.2.7",
-    "vite": "^4.1.0",
+    "vite": "^6.0.3",
+    "vitest": "^2.1.8",
     "vue": "^3.3.0",
     "vue-router": "^4.1.6"
   },

src/data-fetching/index.ts

@@ -0,0 +1,4 @@
+export { useCall } from './useCall'
+export { useList } from './useList'
+export { useDoc } from './useDoc'
+export { useFrappeFetch } from './useFrappeFetch'

src/data-fetching/useCall.test.ts

@@ -0,0 +1,162 @@
+/**
+ * @vitest-environment node
+ */
+
+import { nextTick, ref } from 'vue'
+import { useCall } from './index'
+import { url } from '../mocks/utils'
+
+describe('msw works', () => {
+  it('ping responds with pong', async () => {
+    const response = await fetch(url('/api/v2/method/ping'))
+
+    expect(response.status).toBe(200)
+    expect(response.statusText).toBe('OK')
+    expect(await response.json()).toEqual({
+      data: 'pong',
+    })
+  })
+})
+
+describe('useCall', () => {
+  it('it returns expected reactive object', async () => {
+    type PingResponse = string
+    let ping = useCall<PingResponse>({
+      url: url('/api/v2/method/ping'),
+      immediate: false,
+    })
+
+    // Verify initial state
+    expect(ping.loading).toBe(false)
+    expect(ping.data).toBe(null)
+    expect(ping.error).toBe(null)
+    expect(typeof ping.execute).toBe('function')
+    expect(typeof ping.submit).toBe('function')
+    expect(typeof ping.reset).toBe('function')
+
+    // Execute the call
+    ping.execute()
+    expect(ping.loading).toBe(true)
+
+    // Wait for response
+    await ping.promise
+
+    // TODO: 3 nextTicks are required to ensure loading is updated
+    // find a better way to handle this
+    await nextTick()
+    await nextTick()
+    await nextTick()
+
+    // Verify final state
+    expect(ping.data).toBe('pong')
+    expect(ping.error).toBe(null)
+    expect(ping.isFinished).toBe(true)
+    expect(ping.loading).toBe(false)
+  })
+
+  it('handles error responses', async () => {
+    const onError = vi.fn()
+    const errorCall = useCall({
+      url: url('/api/v2/method/error'),
+      onError,
+      immediate: false,
+    })
+
+    errorCall.fetch()
+    await errorCall.promise.catch(() => {})
+
+    await nextTick()
+    await nextTick()
+    await nextTick()
+
+    expect(errorCall.loading).toBe(false)
+    expect(errorCall.error).toBeInstanceOf(Error)
+    expect(errorCall.error.message).toEqual(
+      'ServerError: Internal Server Error occurred',
+    )
+    expect(errorCall.data).toBe(null)
+    expect(onError).toHaveBeenCalledWith(errorCall.error)
+  })
+
+  it('handles POST requests with params', async () => {
+    type Response = { success: boolean; received: any }
+    const postCall = useCall<Response>({
+      url: url('/api/v2/method/post'),
+      method: 'POST',
+      params: { name: 'test' },
+      immediate: false,
+    })
+
+    postCall.fetch()
+    await postCall.promise
+
+    expect(postCall.data).toEqual({
+      success: true,
+      received: { name: 'test' },
+    })
+  })
+
+  it('supports dynamic params with reactive values', async () => {
+    const dynamicValue = ref('test')
+    const call = useCall<{ value: string }>({
+      url: url('/api/v2/method/get'),
+      params: () => ({ value: dynamicValue.value }),
+      immediate: false,
+    })
+
+    call.fetch()
+    await call.promise
+
+    expect(call.url).toContain('value=test')
+    expect(call.data).toEqual({ value: 'test' })
+  })
+
+  it('transforms response data correctly', async () => {
+    type Response = { numbers: number[] }
+    const call = useCall<Response>({
+      url: url('/api/v2/method/numbers'),
+      transform: (data) => ({ numbers: data.numbers.map((n) => n * 2) }),
+      refetch: true,
+    })
+    await call.promise
+    expect(call.data).toEqual({ numbers: [2, 4, 6, 8] })
+  })
+
+  it('supports submit with different params', async () => {
+    type Response = { success: boolean; received: any }
+    const call = useCall<Response>({
+      url: url('/api/v2/method/post'),
+      method: 'POST',
+      refetch: true,
+      immediate: false,
+    })
+
+    call.submit({ value: 'first submit' })
+    await call.promise
+    expect(call.data).toEqual({
+      success: true,
+      received: { value: 'first submit' },
+    })
+
+    // submit with another set of params
+    call.submit({ value: 'second submit' })
+    await call.promise
+    expect(call.data).toEqual({
+      success: true,
+      received: { value: 'second submit' },
+    })
+  })
+
+  it('handles abort correctly', async () => {
+    const call = useCall({
+      url: url('/api/v2/method/slow'),
+      immediate: false,
+    })
+
+    call.fetch()
+    expect(call.loading).toBe(true)
+
+    call.abort()
+    expect(call.aborted).toBe(true)
+  })
+})