@tanstack/angular-query-experimental 5.15.5 → 5.16.1

package/src/__tests__/inject-mutation.test.ts

@@ -1,52 +1,304 @@
-import { TestBed, fakeAsync, flush } from '@angular/core/testing'
+import { signal } from '@angular/core'
 import { QueryClient } from '@tanstack/query-core'
-import { vi } from 'vitest'
-import { expect } from 'vitest'
+import { TestBed } from '@angular/core/testing'
+import { expect, test, vi } from 'vitest'
 import { injectMutation } from '../inject-mutation'
 import { provideAngularQuery } from '../providers'
-import { QUERY_CLIENT } from '../inject-query-client'
+import { errorMutator, expectSignals, successMutator } from './test-utils'
+
+const MUTATION_DURATION = 1000
+
+const resolveMutations = () => vi.advanceTimersByTimeAsync(MUTATION_DURATION)
 
 describe('injectMutation', () => {
   let queryClient: QueryClient
 
   beforeEach(() => {
+    queryClient = new QueryClient()
+    vi.useFakeTimers()
     TestBed.configureTestingModule({
-      providers: [provideAngularQuery(new QueryClient())],
+      providers: [provideAngularQuery(queryClient)],
     })
+  })
 
-    queryClient = TestBed.inject(QUERY_CLIENT)
+  afterEach(() => {
+    vi.useRealTimers()
   })
 
-  it('should run mutation', fakeAsync(() => {
-    const mutationFn = vi.fn()
+  describe('callback helpers', () => {
+    test('can access client from options callback', async () => {
+      const mutation = TestBed.runInInjectionContext(() => {
+        return injectMutation((client) => ({
+          mutationFn: () => {
+            expect(client).toBe(queryClient)
+            return Promise.resolve()
+          },
+        }))
+      })
 
+      mutation.mutate()
+      expect(mutation.status()).toBe('pending')
+    })
+  })
+
+  test('should be in idle state initially', () => {
     const mutation = TestBed.runInInjectionContext(() => {
       return injectMutation(() => ({
-        mutationFn,
+        mutationFn: (params) => successMutator(params),
       }))
     })
 
-    mutation().mutate({
-      par1: 'par1',
+    expectSignals(mutation, {
+      isIdle: true,
+      isPending: false,
+      isError: false,
+      isSuccess: false,
+    })
+  })
+
+  test('should change state after invoking mutate', () => {
+    const result = 'Mock data'
+
+    const mutation = TestBed.runInInjectionContext(() => {
+      return injectMutation(() => ({
+        mutationFn: (params: string) => successMutator(params),
+      }))
     })
 
-    flush()
-    expect(mutation().status).toBe('pending')
-  }))
+    mutation.mutate(result)
+
+    expectSignals(mutation, {
+      isIdle: false,
+      isPending: true,
+      isError: false,
+      isSuccess: false,
+      data: undefined,
+      error: null,
+    })
+  })
+
+  test('should return error when request fails', async () => {
+    const mutation = TestBed.runInInjectionContext(() => {
+      return injectMutation(() => ({
+        mutationFn: errorMutator,
+      }))
+    })
+    mutation.mutate({})
+
+    await resolveMutations()
+
+    expectSignals(mutation, {
+      isIdle: false,
+      isPending: false,
+      isError: true,
+      isSuccess: false,
+      data: undefined,
+      error: Error('Some error'),
+    })
+  })
 
-  it('can access client from options callback', fakeAsync(() => {
+  test('should return data when request succeeds', async () => {
+    const result = 'Mock data'
     const mutation = TestBed.runInInjectionContext(() => {
-      return injectMutation((client) => ({
-        mutationFn: () => {
-          expect(client).toBe(queryClient)
-          return Promise.resolve()
-        },
+      return injectMutation(() => ({
+        mutationFn: (params: string) => successMutator(params),
+      }))
+    })
+
+    mutation.mutate(result)
+
+    await resolveMutations()
+
+    expectSignals(mutation, {
+      isIdle: false,
+      isPending: false,
+      isError: false,
+      isSuccess: true,
+      data: result,
+      error: null,
+    })
+  })
+
+  test('reactive options should update mutation', async () => {
+    const mutationCache = queryClient.getMutationCache()
+    const mutationKey = signal(['foo'])
+    const mutation = TestBed.runInInjectionContext(() => {
+      return injectMutation(() => ({
+        mutationKey: mutationKey(),
+        mutationFn: (params: string) => successMutator(params),
+      }))
+    })
+
+    mutationKey.set(['bar'])
+
+    TestBed.flushEffects()
+
+    await resolveMutations()
+
+    mutation.mutate('xyz')
+
+    await resolveMutations()
+
+    const mutations = mutationCache.find({ mutationKey: ['bar'] })
+
+    expect(mutations?.options.mutationKey).toEqual(['bar'])
+  })
+
+  test('should reset state after invoking mutation.reset', async () => {
+    const mutation = TestBed.runInInjectionContext(() => {
+      return injectMutation(() => ({
+        mutationFn: (params: string) => errorMutator(params),
       }))
     })
 
-    mutation().mutate()
+    mutation.mutate('')
 
-    flush()
-    expect(mutation().status).toBe('pending')
-  }))
+    await resolveMutations()
+
+    expect(mutation.isError()).toBe(true)
+
+    mutation.reset()
+
+    expectSignals(mutation, {
+      isIdle: true,
+      isPending: false,
+      isError: false,
+      isSuccess: false,
+      data: undefined,
+      error: null,
+    })
+  })
+
+  describe('side effects', () => {
+    beforeEach(() => {
+      vi.clearAllMocks()
+    })
+
+    test('should call onMutate when passed as an option', async () => {
+      const onMutate = vi.fn()
+      const mutation = TestBed.runInInjectionContext(() => {
+        return injectMutation(() => ({
+          mutationFn: (params: string) => successMutator(params),
+          onMutate,
+        }))
+      })
+
+      mutation.mutate('')
+
+      await resolveMutations()
+
+      expect(onMutate).toHaveBeenCalledTimes(1)
+    })
+
+    test('should call onError when passed as an option', async () => {
+      const onError = vi.fn()
+      const mutation = TestBed.runInInjectionContext(() => {
+        return injectMutation(() => ({
+          mutationFn: (params: string) => errorMutator(params),
+          onError,
+        }))
+      })
+
+      mutation.mutate('')
+
+      await resolveMutations()
+
+      expect(onError).toHaveBeenCalledTimes(1)
+    })
+
+    test('should call onSuccess when passed as an option', async () => {
+      const onSuccess = vi.fn()
+      const mutation = TestBed.runInInjectionContext(() => {
+        return injectMutation(() => ({
+          mutationFn: (params: string) => successMutator(params),
+          onSuccess,
+        }))
+      })
+
+      mutation.mutate('')
+
+      await resolveMutations()
+
+      expect(onSuccess).toHaveBeenCalledTimes(1)
+    })
+
+    test('should call onSettled when passed as an option', async () => {
+      const onSettled = vi.fn()
+      const mutation = TestBed.runInInjectionContext(() => {
+        return injectMutation(() => ({
+          mutationFn: (params: string) => successMutator(params),
+          onSettled,
+        }))
+      })
+
+      mutation.mutate('')
+
+      await resolveMutations()
+
+      expect(onSettled).toHaveBeenCalledTimes(1)
+    })
+
+    test('should call onError when passed as an argument of mutate function', async () => {
+      const onError = vi.fn()
+      const mutation = TestBed.runInInjectionContext(() => {
+        return injectMutation(() => ({
+          mutationFn: (params: string) => errorMutator(params),
+        }))
+      })
+
+      mutation.mutate('', { onError })
+
+      await resolveMutations()
+
+      expect(onError).toHaveBeenCalledTimes(1)
+    })
+
+    test('should call onSuccess when passed as an argument of mutate function', async () => {
+      const onSuccess = vi.fn()
+      const mutation = TestBed.runInInjectionContext(() => {
+        return injectMutation(() => ({
+          mutationFn: (params: string) => successMutator(params),
+        }))
+      })
+
+      mutation.mutate('', { onSuccess })
+
+      await resolveMutations()
+
+      expect(onSuccess).toHaveBeenCalledTimes(1)
+    })
+
+    test('should call onSettled when passed as an argument of mutate function', async () => {
+      const onSettled = vi.fn()
+      const mutation = TestBed.runInInjectionContext(() => {
+        return injectMutation(() => ({
+          mutationFn: (params: string) => successMutator(params),
+        }))
+      })
+
+      mutation.mutate('', { onSettled })
+
+      await resolveMutations()
+
+      expect(onSettled).toHaveBeenCalledTimes(1)
+    })
+
+    test('should fire both onSettled functions', async () => {
+      const onSettled = vi.fn()
+      const onSettledOnFunction = vi.fn()
+      const mutation = TestBed.runInInjectionContext(() => {
+        return injectMutation(() => ({
+          mutationFn: (params: string) => successMutator(params),
+          onSettled,
+        }))
+      })
+
+      mutation.mutate('', { onSettled: onSettledOnFunction })
+
+      await resolveMutations()
+
+      expect(onSettled).toHaveBeenCalledTimes(1)
+      expect(onSettledOnFunction).toHaveBeenCalledTimes(1)
+    })
+  })
 })

package/src/__tests__/inject-query.test.ts

@@ -35,7 +35,7 @@ describe('injectQuery', () => {
     flush()
   }))
 
-  it('should resolve to success and update signal: createQuery', fakeAsync(() => {
+  it('should resolve to success and update signal: injectQuery()', fakeAsync(() => {
     const query = TestBed.runInInjectionContext(() => {
       return injectQuery(() => ({
         queryKey: ['key2'],
@@ -97,7 +97,7 @@ describe('injectQuery', () => {
     flush()
   }))
 
-  it('should only run query once enabled is set to true', fakeAsync(() => {
+  it('should only run query once enabled signal is set to true', fakeAsync(() => {
     const spy = vi.fn(simpleFetcher)
     const enabled = signal(false)
 
@@ -160,7 +160,7 @@ describe('injectQuery', () => {
   }))
 
   it('should use the current value for the queryKey when refetch is called', fakeAsync(() => {
-    const fetchFn = vi.fn()
+    const fetchFn = vi.fn(simpleFetcher)
     const keySignal = signal('key11')
 
     const query = TestBed.runInInjectionContext(() => {

package/src/__tests__/test-utils.ts

@@ -1,3 +1,6 @@
+import { untracked } from '@angular/core'
+import { isReactive } from '@angular/core/primitives/signals'
+
 export function simpleFetcher(): Promise<string> {
   return new Promise((resolve) => {
     setTimeout(() => {
@@ -35,3 +38,36 @@ export function successMutator<T>(param: T): Promise<T> {
     }, 0)
   })
 }
+
+export function errorMutator(_parameter?: unknown): Promise<Error> {
+  return rejectFetcher()
+}
+
+// Evaluate all signals on an object and return the result
+function evaluateSignals<T extends Record<string, any>>(
+  obj: T,
+): { [K in keyof T]: ReturnType<T[K]> } {
+  const result: Partial<{ [K in keyof T]: ReturnType<T[K]> }> = {}
+
+  untracked(() => {
+    for (const key in obj) {
+      if (
+        Object.prototype.hasOwnProperty.call(obj, key) &&
+        // Only evaluate signals, not normal functions
+        isReactive(obj[key])
+      ) {
+        const func = obj[key]
+        result[key] = func()
+      }
+    }
+  })
+
+  return result as { [K in keyof T]: ReturnType<T[K]> }
+}
+
+export const expectSignals = <T extends Record<string, any>>(
+  obj: T,
+  expected: Partial<{ [K in keyof T]: ReturnType<T[K]> }>,
+): void => {
+  expect(evaluateSignals(obj)).toMatchObject(expected)
+}

package/src/inject-is-fetching.ts

@@ -1,6 +1,6 @@
 import { DestroyRef, inject, signal } from '@angular/core'
 import { type QueryFilters, notifyManager } from '@tanstack/query-core'
-import { assertInjector } from 'ngxtension/assert-injector'
+import { assertInjector } from './util/assert-injector/assert-injector'
 import { injectQueryClient } from './inject-query-client'
 import type { Injector, Signal } from '@angular/core'
 

package/src/inject-is-mutating.ts

@@ -1,6 +1,6 @@
 import { DestroyRef, inject, signal } from '@angular/core'
 import { type MutationFilters, notifyManager } from '@tanstack/query-core'
-import { assertInjector } from 'ngxtension/assert-injector'
+import { assertInjector } from './util/assert-injector/assert-injector'
 import { injectQueryClient } from './inject-query-client'
 import type { Injector, Signal } from '@angular/core'
 

package/src/inject-mutation.ts

@@ -1,6 +1,7 @@
 import { DestroyRef, computed, effect, inject, signal } from '@angular/core'
-import { MutationObserver, notifyManager } from '@tanstack/query-core'
-import { assertInjector } from 'ngxtension/assert-injector'
+import { MutationObserver } from '@tanstack/query-core'
+import { assertInjector } from './util/assert-injector/assert-injector'
+import { signalProxy } from './signal-proxy'
 import { injectQueryClient } from './inject-query-client'
 import type { DefaultError, QueryClient } from '@tanstack/query-core'
 import type { Injector } from '@angular/core'
@@ -43,19 +44,17 @@ export function injectMutation<
 
     const result = signal(observer.getCurrentResult())
 
-    const unsubscribe = observer.subscribe(
-      notifyManager.batchCalls((val) => {
-        result.set(val)
-      }),
-    )
+    const unsubscribe = observer.subscribe(result.set)
 
     destroyRef.onDestroy(unsubscribe)
 
-    return computed(() => ({
+    const resultSignal = computed(() => ({
       ...result(),
       mutate,
       mutateAsync: result().mutate,
     }))
+
+    return signalProxy(resultSignal)
   })
 }
 

package/src/inject-queries.ts

@@ -1,6 +1,6 @@
 import { QueriesObserver, notifyManager } from '@tanstack/query-core'
 import { DestroyRef, computed, effect, inject, signal } from '@angular/core'
-import { assertInjector } from 'ngxtension/assert-injector'
+import { assertInjector } from './util/assert-injector/assert-injector'
 import { injectQueryClient } from './inject-query-client'
 import type { Injector, Signal } from '@angular/core'
 import type {

package/src/inject-query-client.ts

@@ -1,4 +1,4 @@
-import { createNoopInjectionToken } from 'ngxtension/create-injection-token'
+import { createNoopInjectionToken } from './util/create-injection-token/create-injection-token'
 import type { QueryClient } from '@tanstack/query-core'
 
 const [injectQueryClient, provideQueryClient, QUERY_CLIENT] =

package/src/inject-query.ts

@@ -1,5 +1,5 @@
 import { QueryObserver } from '@tanstack/query-core'
-import { assertInjector } from 'ngxtension/assert-injector'
+import { assertInjector } from './util/assert-injector/assert-injector'
 import { injectQueryClient } from './inject-query-client'
 import { createBaseQuery } from './create-base-query'
 import type { DefaultError, QueryClient, QueryKey } from '@tanstack/query-core'

package/src/signal-proxy.ts

@@ -1,7 +1,7 @@
 import { computed, untracked } from '@angular/core'
 import type { Signal } from '@angular/core'
 
-type MapToSignals<T> = {
+export type MapToSignals<T> = {
   [K in keyof T]: T[K] extends Function ? T[K] : Signal<T[K]>
 }
 

package/src/test-setup.ts

@@ -1,13 +1,12 @@
 import '@analogjs/vite-plugin-angular/setup-vitest'
-import '@angular/compiler'
 
-import { TestBed } from '@angular/core/testing'
 import {
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting,
 } from '@angular/platform-browser-dynamic/testing'
+import { getTestBed } from '@angular/core/testing'
 
-TestBed.initTestEnvironment(
+getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting(),
 )

package/src/types.ts

@@ -12,6 +12,7 @@ import type {
   QueryObserverOptions,
   QueryObserverResult,
 } from '@tanstack/query-core'
+import type { MapToSignals } from './signal-proxy'
 
 /** Options for createBaseQuery */
 export type CreateBaseQueryOptions<
@@ -27,9 +28,7 @@ export type CreateBaseQueryResult<
   TData = unknown,
   TError = DefaultError,
   State = QueryObserverResult<TData, TError>,
-> = {
-  [K in keyof State]: State[K] extends Function ? State[K] : Signal<State[K]>
-}
+> = MapToSignals<State>
 /** Result from createBaseQuery */
 
 /** Options for createQuery */
@@ -74,11 +73,7 @@ export type DefinedCreateBaseQueryResult<
   TData = unknown,
   TError = DefaultError,
   DefinedQueryObserver = DefinedQueryObserverResult<TData, TError>,
-> = {
-  [K in keyof DefinedQueryObserver]: DefinedQueryObserver[K] extends Function
-    ? DefinedQueryObserver[K]
-    : Signal<DefinedQueryObserver[K]>
-}
+> = MapToSignals<DefinedQueryObserver>
 
 /** Options for createQuery with initialData */
 export type DefinedCreateQueryResult<
@@ -131,6 +126,6 @@ export type CreateMutationResult<
   TError = DefaultError,
   TVariables = unknown,
   TContext = unknown,
-> = Signal<CreateBaseMutationResult<TData, TError, TVariables, TContext>>
+> = MapToSignals<CreateBaseMutationResult<TData, TError, TVariables, TContext>>
 
 type Override<A, B> = { [K in keyof A]: K extends keyof B ? B[K] : A[K] }

package/src/util/assert-injector/assert-injector.test.ts

@@ -0,0 +1,72 @@
+/**
+ * The code in this file is adapted from NG Extension Platform at https://ngxtension.netlify.app.
+ *
+ * Original Author: Chau Tran
+ *
+ * NG Extension Platform is an open-source project licensed under the MIT license.
+ *
+ * For more information about the original code, see
+ * https://github.com/nartc/ngxtension-platform
+ */
+
+import {
+  InjectionToken,
+  Injector,
+  inject,
+  runInInjectionContext,
+} from '@angular/core'
+import { TestBed } from '@angular/core/testing'
+import { assertInjector } from './assert-injector'
+
+describe(assertInjector.name, () => {
+  const token = new InjectionToken('token', {
+    factory: () => 1,
+  })
+
+  function injectDummy(injector?: Injector) {
+    injector = assertInjector(injectDummy, injector)
+    return runInInjectionContext(injector, () => inject(token))
+  }
+
+  function injectDummyTwo(injector?: Injector) {
+    return assertInjector(injectDummyTwo, injector, () => inject(token) + 1)
+  }
+
+  it('given no custom injector, when run in injection context, then return value', () => {
+    TestBed.runInInjectionContext(() => {
+      const value = injectDummy()
+      const valueTwo = injectDummyTwo()
+      expect(value).toEqual(1)
+      expect(valueTwo).toEqual(2)
+    })
+  })
+
+  it('given no custom injector, when run outside injection context, then throw', () => {
+    expect(() => injectDummy()).toThrowError(
+      /injectDummy\(\) can only be used within an injection context/i,
+    )
+    expect(() => injectDummyTwo()).toThrowError(
+      /injectDummyTwo\(\) can only be used within an injection context/i,
+    )
+  })
+
+  it('given a custom injector, when run in that injector context without providing number, then throw', () => {
+    expect(() => injectDummy(Injector.create({ providers: [] }))).toThrowError(
+      /No provider for InjectionToken/i,
+    )
+    expect(() =>
+      injectDummyTwo(Injector.create({ providers: [] })),
+    ).toThrowError(/No provider for InjectionToken/i)
+  })
+
+  it('given a custom injector, when run in that injector context and providing number, then return value', () => {
+    const value = injectDummy(
+      Injector.create({ providers: [{ provide: token, useValue: 2 }] }),
+    )
+    const valueTwo = injectDummyTwo(
+      Injector.create({ providers: [{ provide: token, useValue: 2 }] }),
+    )
+    expect(value).toEqual(2)
+    expect(valueTwo).toEqual(3)
+  })
+})