+ >()
+ })
})
})
diff --git a/packages/angular-query-experimental/src/__tests__/inject-mutation.test.ts b/packages/angular-query-experimental/src/__tests__/inject-mutation.test.ts
index 7af34970928..f0c53602b1d 100644
--- a/packages/angular-query-experimental/src/__tests__/inject-mutation.test.ts
+++ b/packages/angular-query-experimental/src/__tests__/inject-mutation.test.ts
@@ -7,9 +7,10 @@ import {
signal,
} from '@angular/core'
import { TestBed } from '@angular/core/testing'
-import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { By } from '@angular/platform-browser'
-import { sleep } from '@tanstack/query-test-utils'
+import { render } from '@testing-library/angular'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
import { QueryClient, injectMutation, provideTanStackQuery } from '..'
import { expectSignals, setFixtureSignalInputs } from './test-utils'
@@ -31,7 +32,7 @@ describe('injectMutation', () => {
vi.useRealTimers()
})
- test('should be in idle state initially', () => {
+ it('should be in idle state initially', () => {
const mutation = TestBed.runInInjectionContext(() => {
return injectMutation(() => ({
mutationFn: (params) => sleep(0).then(() => params),
@@ -46,79 +47,113 @@ describe('injectMutation', () => {
})
})
- test('should change state after invoking mutate', async () => {
+ it('should change state after invoking mutate', async () => {
const result = 'Mock data'
- const mutation = TestBed.runInInjectionContext(() => {
- return injectMutation(() => ({
+ @Component({
+ template: `
+ isIdle: {{ mutation.isIdle() }}
+ isPending: {{ mutation.isPending() }}
+ isError: {{ mutation.isError() }}
+ isSuccess: {{ mutation.isSuccess() }}
+ data: {{ mutation.data() ?? 'none' }}
+ error: {{ mutation.error()?.message ?? 'none' }}
+ `,
+ })
+ class Page {
+ readonly mutation = injectMutation(() => ({
mutationFn: (params: string) => sleep(10).then(() => params),
}))
- })
+ }
- TestBed.tick()
+ const rendered = await render(Page)
- mutation.mutate(result)
+ rendered.fixture.componentInstance.mutation.mutate(result)
await vi.advanceTimersByTimeAsync(0)
-
- expectSignals(mutation, {
- isIdle: false,
- isPending: true,
- isError: false,
- isSuccess: false,
- data: undefined,
- error: null,
- })
+ rendered.fixture.detectChanges()
+
+ expect(rendered.getByText('isIdle: false')).toBeInTheDocument()
+ expect(rendered.getByText('isPending: true')).toBeInTheDocument()
+ expect(rendered.getByText('isError: false')).toBeInTheDocument()
+ expect(rendered.getByText('isSuccess: false')).toBeInTheDocument()
+ expect(rendered.getByText('data: none')).toBeInTheDocument()
+ expect(rendered.getByText('error: none')).toBeInTheDocument()
})
- test('should return error when request fails', async () => {
- const mutation = TestBed.runInInjectionContext(() => {
- return injectMutation(() => ({
+ it('should return error when request fails', async () => {
+ @Component({
+ template: `
+ isIdle: {{ mutation.isIdle() }}
+ isPending: {{ mutation.isPending() }}
+ isError: {{ mutation.isError() }}
+ isSuccess: {{ mutation.isSuccess() }}
+ data: {{ mutation.data() ?? 'none' }}
+ error: {{ mutation.error()?.message ?? 'none' }}
+ `,
+ })
+ class Page {
+ readonly mutation = injectMutation(() => ({
mutationFn: () =>
sleep(10).then(() => Promise.reject(new Error('Some error'))),
}))
- })
+ }
- mutation.mutate()
+ const rendered = await render(Page)
- await vi.advanceTimersByTimeAsync(11)
+ rendered.fixture.componentInstance.mutation.mutate()
- expectSignals(mutation, {
- isIdle: false,
- isPending: false,
- isError: true,
- isSuccess: false,
- data: undefined,
- error: Error('Some error'),
- })
+ await vi.advanceTimersByTimeAsync(11)
+ rendered.fixture.detectChanges()
+
+ expect(rendered.getByText('isIdle: false')).toBeInTheDocument()
+ expect(rendered.getByText('isPending: false')).toBeInTheDocument()
+ expect(rendered.getByText('isError: true')).toBeInTheDocument()
+ expect(rendered.getByText('isSuccess: false')).toBeInTheDocument()
+ expect(rendered.getByText('data: none')).toBeInTheDocument()
+ expect(rendered.getByText('error: Some error')).toBeInTheDocument()
})
- test('should return data when request succeeds', async () => {
+ it('should return data when request succeeds', async () => {
const result = 'Mock data'
- const mutation = TestBed.runInInjectionContext(() => {
- return injectMutation(() => ({
+
+ @Component({
+ template: `
+ isIdle: {{ mutation.isIdle() }}
+ isPending: {{ mutation.isPending() }}
+ isError: {{ mutation.isError() }}
+ isSuccess: {{ mutation.isSuccess() }}
+ data: {{ mutation.data() ?? 'none' }}
+ error: {{ mutation.error()?.message ?? 'none' }}
+ `,
+ })
+ class Page {
+ readonly mutation = injectMutation(() => ({
mutationFn: (params: string) => sleep(10).then(() => params),
}))
- })
+ }
- mutation.mutate(result)
+ const rendered = await render(Page)
- await vi.advanceTimersByTimeAsync(11)
+ rendered.fixture.componentInstance.mutation.mutate(result)
- expectSignals(mutation, {
- isIdle: false,
- isPending: false,
- isError: false,
- isSuccess: true,
- data: result,
- error: null,
- })
+ await vi.advanceTimersByTimeAsync(11)
+ rendered.fixture.detectChanges()
+
+ expect(rendered.getByText('isIdle: false')).toBeInTheDocument()
+ expect(rendered.getByText('isPending: false')).toBeInTheDocument()
+ expect(rendered.getByText('isError: false')).toBeInTheDocument()
+ expect(rendered.getByText('isSuccess: true')).toBeInTheDocument()
+ expect(rendered.getByText(`data: ${result}`)).toBeInTheDocument()
+ expect(rendered.getByText('error: none')).toBeInTheDocument()
})
- test('reactive options should update mutation', () => {
+ it('should update mutation when reactive options change', () => {
const mutationCache = queryClient.getMutationCache()
// Signal will be updated before the mutation is called
// this test confirms that the mutation uses the updated value
- const mutationKey = signal(['1'])
+ const key1 = queryKey()
+ const key2 = queryKey()
+ const mutationKey = signal(key1)
const mutation = TestBed.runInInjectionContext(() => {
return injectMutation(() => ({
mutationKey: mutationKey(),
@@ -126,41 +161,54 @@ describe('injectMutation', () => {
}))
})
- mutationKey.set(['2'])
+ mutationKey.set(key2)
mutation.mutate('xyz')
- const mutations = mutationCache.find({ mutationKey: ['2'] })
+ const mutations = mutationCache.find({ mutationKey: key2 })
- expect(mutations?.options.mutationKey).toEqual(['2'])
+ expect(mutations?.options.mutationKey).toEqual(key2)
})
- test('should reset state after invoking mutation.reset', async () => {
- const mutation = TestBed.runInInjectionContext(() => {
- return injectMutation(() => ({
+ it('should reset state after invoking mutation.reset', async () => {
+ @Component({
+ template: `
+ isIdle: {{ mutation.isIdle() }}
+ isPending: {{ mutation.isPending() }}
+ isError: {{ mutation.isError() }}
+ isSuccess: {{ mutation.isSuccess() }}
+ data: {{ mutation.data() ?? 'none' }}
+ error: {{ mutation.error()?.message ?? 'none' }}
+ `,
+ })
+ class Page {
+ readonly mutation = injectMutation(() => ({
mutationFn: () =>
sleep(10).then(() => Promise.reject(new Error('Some error'))),
}))
- })
+ }
+
+ const rendered = await render(Page)
- mutation.mutate()
+ rendered.fixture.componentInstance.mutation.mutate()
await vi.advanceTimersByTimeAsync(11)
+ rendered.fixture.detectChanges()
- expect(mutation.isError()).toBe(true)
+ expect(rendered.getByText('isError: true')).toBeInTheDocument()
+ expect(rendered.getByText('error: Some error')).toBeInTheDocument()
- mutation.reset()
+ rendered.fixture.componentInstance.mutation.reset()
await vi.advanceTimersByTimeAsync(0)
-
- expectSignals(mutation, {
- isIdle: true,
- isPending: false,
- isError: false,
- isSuccess: false,
- data: undefined,
- error: null,
- })
+ rendered.fixture.detectChanges()
+
+ expect(rendered.getByText('isIdle: true')).toBeInTheDocument()
+ expect(rendered.getByText('isPending: false')).toBeInTheDocument()
+ expect(rendered.getByText('isError: false')).toBeInTheDocument()
+ expect(rendered.getByText('isSuccess: false')).toBeInTheDocument()
+ expect(rendered.getByText('data: none')).toBeInTheDocument()
+ expect(rendered.getByText('error: none')).toBeInTheDocument()
})
describe('side effects', () => {
@@ -168,7 +216,7 @@ describe('injectMutation', () => {
vi.clearAllMocks()
})
- test('should call onMutate when passed as an option', async () => {
+ it('should call onMutate when passed as an option', async () => {
const onMutate = vi.fn()
const mutation = TestBed.runInInjectionContext(() => {
return injectMutation(() => ({
@@ -184,7 +232,7 @@ describe('injectMutation', () => {
expect(onMutate).toHaveBeenCalledTimes(1)
})
- test('should call onError when passed as an option', async () => {
+ it('should call onError when passed as an option', async () => {
const onError = vi.fn()
const mutation = TestBed.runInInjectionContext(() => {
return injectMutation(() => ({
@@ -201,7 +249,7 @@ describe('injectMutation', () => {
expect(onError).toHaveBeenCalledTimes(1)
})
- test('should call onSuccess when passed as an option', async () => {
+ it('should call onSuccess when passed as an option', async () => {
const onSuccess = vi.fn()
const mutation = TestBed.runInInjectionContext(() => {
return injectMutation(() => ({
@@ -217,7 +265,7 @@ describe('injectMutation', () => {
expect(onSuccess).toHaveBeenCalledTimes(1)
})
- test('should call onSettled when passed as an option', async () => {
+ it('should call onSettled when passed as an option', async () => {
const onSettled = vi.fn()
const mutation = TestBed.runInInjectionContext(() => {
return injectMutation(() => ({
@@ -233,7 +281,7 @@ describe('injectMutation', () => {
expect(onSettled).toHaveBeenCalledTimes(1)
})
- test('should call onError when passed as an argument of mutate function', async () => {
+ it('should call onError when passed as an argument of mutate function', async () => {
const onError = vi.fn()
const mutation = TestBed.runInInjectionContext(() => {
return injectMutation(() => ({
@@ -249,7 +297,7 @@ describe('injectMutation', () => {
expect(onError).toHaveBeenCalledTimes(1)
})
- test('should call onSuccess when passed as an argument of mutate function', async () => {
+ it('should call onSuccess when passed as an argument of mutate function', async () => {
const onSuccess = vi.fn()
const mutation = TestBed.runInInjectionContext(() => {
return injectMutation(() => ({
@@ -264,7 +312,7 @@ describe('injectMutation', () => {
expect(onSuccess).toHaveBeenCalledTimes(1)
})
- test('should call onSettled when passed as an argument of mutate function', async () => {
+ it('should call onSettled when passed as an argument of mutate function', async () => {
const onSettled = vi.fn()
const mutation = TestBed.runInInjectionContext(() => {
return injectMutation(() => ({
@@ -279,7 +327,7 @@ describe('injectMutation', () => {
expect(onSettled).toHaveBeenCalledTimes(1)
})
- test('should fire both onSettled functions', async () => {
+ it('should fire both onSettled functions', async () => {
const onSettled = vi.fn()
const onSettledOnFunction = vi.fn()
const mutation = TestBed.runInInjectionContext(() => {
@@ -298,7 +346,7 @@ describe('injectMutation', () => {
})
})
- test('should support required signal inputs', async () => {
+ it('should support required signal inputs', async () => {
const mutationCache = queryClient.getMutationCache()
@Component({
@@ -338,7 +386,7 @@ describe('injectMutation', () => {
expect(mutation!.options.mutationKey).toStrictEqual(['fake', 'value'])
})
- test('should update options on required signal input change', async () => {
+ it('should update options on required signal input change', async () => {
const mutationCache = queryClient.getMutationCache()
@Component({
@@ -390,12 +438,13 @@ describe('injectMutation', () => {
})
describe('throwOnError', () => {
- test('should evaluate throwOnError when mutation is expected to throw', async () => {
+ it('should evaluate throwOnError when mutation is expected to throw', async () => {
+ const key = queryKey()
const err = new Error('Expected mock error. All is well!')
const boundaryFn = vi.fn()
const { mutate } = TestBed.runInInjectionContext(() => {
return injectMutation(() => ({
- mutationKey: ['fake'],
+ mutationKey: key,
mutationFn: () => {
return Promise.reject(err)
},
@@ -413,10 +462,11 @@ describe('injectMutation', () => {
expect(boundaryFn).toHaveBeenCalledWith(err)
})
- test('should throw when throwOnError is true and mutate is used', async () => {
+ it('should throw when throwOnError is true and mutate is used', async () => {
+ const key = queryKey()
const { mutate } = TestBed.runInInjectionContext(() => {
return injectMutation(() => ({
- mutationKey: ['fake'],
+ mutationKey: key,
mutationFn: () => {
return Promise.reject(
new Error('Expected mock error. All is well!'),
@@ -436,11 +486,12 @@ describe('injectMutation', () => {
})
})
- test('should throw when throwOnError is true', async () => {
+ it('should throw when throwOnError is true', async () => {
+ const key = queryKey()
const err = new Error('Expected mock error. All is well!')
const { mutateAsync } = TestBed.runInInjectionContext(() => {
return injectMutation(() => ({
- mutationKey: ['fake'],
+ mutationKey: key,
mutationFn: () => {
return Promise.reject(err)
},
@@ -448,14 +499,15 @@ describe('injectMutation', () => {
}))
})
- await expect(() => mutateAsync()).rejects.toThrowError(err)
+ await expect(() => mutateAsync()).rejects.toThrow(err)
})
- test('should throw when throwOnError function returns true', async () => {
+ it('should throw when throwOnError function returns true', async () => {
+ const key = queryKey()
const err = new Error('Expected mock error. All is well!')
const { mutateAsync } = TestBed.runInInjectionContext(() => {
return injectMutation(() => ({
- mutationKey: ['fake'],
+ mutationKey: key,
mutationFn: () => {
return Promise.reject(err)
},
@@ -463,24 +515,41 @@ describe('injectMutation', () => {
}))
})
- await expect(() => mutateAsync()).rejects.toThrowError(err)
+ await expect(() => mutateAsync()).rejects.toThrow(err)
+ })
+
+ it('should resolve mutateAsync with the value returned from mutationFn', async () => {
+ const key = queryKey()
+ const { mutateAsync } = TestBed.runInInjectionContext(() => {
+ return injectMutation(() => ({
+ mutationKey: key,
+ mutationFn: (params: string) => sleep(10).then(() => params),
+ }))
+ })
+
+ const promise = mutateAsync('Mock data')
+ await vi.advanceTimersByTimeAsync(11)
+
+ await expect(promise).resolves.toBe('Mock data')
})
describe('injection context', () => {
- test('throws NG0203 with descriptive error outside injection context', () => {
+ it('should throw NG0203 with descriptive error outside injection context', () => {
+ const key = queryKey()
expect(() => {
injectMutation(() => ({
- mutationKey: ['injectionContextError'],
+ mutationKey: key,
mutationFn: () => Promise.resolve(),
}))
- }).toThrowError(/NG0203(.*?)injectMutation/)
+ }).toThrow(/NG0203(.*?)injectMutation/)
})
- test('can be used outside injection context when passing an injector', () => {
+ it('should be usable outside injection context when passing an injector', () => {
+ const key = queryKey()
expect(() => {
injectMutation(
() => ({
- mutationKey: ['injectionContextError'],
+ mutationKey: key,
mutationFn: () => Promise.resolve(),
}),
{
@@ -490,14 +559,15 @@ describe('injectMutation', () => {
}).not.toThrow()
})
- test('should complete mutation before whenStable() resolves', async () => {
+ it('should complete mutation before whenStable() resolves', async () => {
const app = TestBed.inject(ApplicationRef)
let mutationStarted = false
let mutationCompleted = false
+ const key = queryKey()
const mutation = TestBed.runInInjectionContext(() =>
injectMutation(() => ({
- mutationKey: ['pendingTasksTest'],
+ mutationKey: key,
mutationFn: async (data: string) => {
mutationStarted = true
await sleep(50)
@@ -526,15 +596,7 @@ describe('injectMutation', () => {
expect(mutation.data()).toBe('processed: test')
})
- test('should handle synchronous mutation with retry', async () => {
- TestBed.resetTestingModule()
- TestBed.configureTestingModule({
- providers: [
- provideZonelessChangeDetection(),
- provideTanStackQuery(queryClient),
- ],
- })
-
+ it('should handle synchronous mutation with retry', async () => {
const app = TestBed.inject(ApplicationRef)
let attemptCount = 0
@@ -576,21 +638,15 @@ describe('injectMutation', () => {
expect(attemptCount).toBe(3) // Initial + 2 retries
})
- test('should handle multiple synchronous mutations on same key', async () => {
- TestBed.resetTestingModule()
- TestBed.configureTestingModule({
- providers: [
- provideZonelessChangeDetection(),
- provideTanStackQuery(queryClient),
- ],
- })
-
+ it('should handle multiple synchronous mutations on same key', async () => {
const app = TestBed.inject(ApplicationRef)
let callCount = 0
+ const key = queryKey()
+
const mutation1 = TestBed.runInInjectionContext(() =>
injectMutation(() => ({
- mutationKey: ['sync-mutation-key'],
+ mutationKey: key,
mutationFn: async (data: string) => {
callCount++
return `mutation1: ${data}`
@@ -600,7 +656,7 @@ describe('injectMutation', () => {
const mutation2 = TestBed.runInInjectionContext(() =>
injectMutation(() => ({
- mutationKey: ['sync-mutation-key'],
+ mutationKey: key,
mutationFn: async (data: string) => {
callCount++
return `mutation2: ${data}`
@@ -628,17 +684,9 @@ describe('injectMutation', () => {
expect(callCount).toBe(2)
})
- test('should handle synchronous mutation with optimistic updates', async () => {
- TestBed.resetTestingModule()
- TestBed.configureTestingModule({
- providers: [
- provideZonelessChangeDetection(),
- provideTanStackQuery(queryClient),
- ],
- })
-
+ it('should handle synchronous mutation with optimistic updates', async () => {
const app = TestBed.inject(ApplicationRef)
- const testQueryKey = ['sync-optimistic']
+ const testQueryKey = queryKey()
let onMutateCalled = false
let onSuccessCalled = false
@@ -680,20 +728,13 @@ describe('injectMutation', () => {
expect(queryClient.getQueryData(testQueryKey)).toBe('final: test')
})
- test('should handle synchronous mutation cancellation', async () => {
- TestBed.resetTestingModule()
- TestBed.configureTestingModule({
- providers: [
- provideZonelessChangeDetection(),
- provideTanStackQuery(queryClient),
- ],
- })
-
+ it('should handle synchronous mutation cancellation', async () => {
const app = TestBed.inject(ApplicationRef)
+ const key = queryKey()
const mutation = TestBed.runInInjectionContext(() =>
injectMutation(() => ({
- mutationKey: ['cancel-sync'],
+ mutationKey: key,
mutationFn: async (data: string) => `processed: ${data}`, // Synchronous resolution
})),
)
diff --git a/packages/angular-query-experimental/src/__tests__/inject-queries.test-d.ts b/packages/angular-query-experimental/src/__tests__/inject-queries.test-d.ts
index 62547fd9e09..b133575746c 100644
--- a/packages/angular-query-experimental/src/__tests__/inject-queries.test-d.ts
+++ b/packages/angular-query-experimental/src/__tests__/inject-queries.test-d.ts
@@ -1,177 +1,196 @@
import { describe, expectTypeOf, it } from 'vitest'
+import { queryKey } from '@tanstack/query-test-utils'
import { skipToken } from '..'
import { injectQueries } from '../inject-queries'
import { queryOptions } from '../query-options'
import type { CreateQueryOptions, CreateQueryResult, OmitKeyof } from '..'
import type { Signal } from '@angular/core'
-describe('InjectQueries config object overload', () => {
- it('TData should always be defined when initialData is provided as an object', () => {
- const query1 = {
- queryKey: ['key1'],
- queryFn: () => {
- return {
- wow: true,
- }
- },
- initialData: {
- wow: false,
- },
- }
-
- const query2 = {
- queryKey: ['key2'],
- queryFn: () => 'Query Data',
- initialData: 'initial data',
- }
-
- const query3 = {
- queryKey: ['key2'],
- queryFn: () => 'Query Data',
- }
-
- const queryResults = injectQueries(() => ({
- queries: [query1, query2, query3],
- }))
-
- const query1Data = queryResults()[0].data()
- const query2Data = queryResults()[1].data()
- const query3Data = queryResults()[2].data()
-
- expectTypeOf(query1Data).toEqualTypeOf<{ wow: boolean }>()
- expectTypeOf(query2Data).toEqualTypeOf()
- expectTypeOf(query3Data).toEqualTypeOf()
- })
+describe('injectQueries', () => {
+ describe('config object overload', () => {
+ it('TData should always be defined when initialData is provided as an object', () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+ const key3 = queryKey()
+
+ const query1 = {
+ queryKey: key1,
+ queryFn: () => {
+ return {
+ wow: true,
+ }
+ },
+ initialData: {
+ wow: false,
+ },
+ }
- it('TData should be defined when passed through queryOptions', () => {
- const options = queryOptions({
- queryKey: ['key'],
- queryFn: () => {
- return {
- wow: true,
- }
- },
- initialData: {
- wow: true,
- },
- })
- const queryResults = injectQueries(() => ({ queries: [options] }))
+ const query2 = {
+ queryKey: key2,
+ queryFn: () => 'Query Data',
+ initialData: 'initial data',
+ }
+
+ const query3 = {
+ queryKey: key3,
+ queryFn: () => 'Query Data',
+ }
- const data = queryResults()[0].data()
+ const queryResults = injectQueries(() => ({
+ queries: [query1, query2, query3],
+ }))
- expectTypeOf(data).toEqualTypeOf<{ wow: boolean }>()
- })
+ const query1Data = queryResults()[0].data()
+ const query2Data = queryResults()[1].data()
+ const query3Data = queryResults()[2].data()
- it('should be possible to define a different TData than TQueryFnData using select with queryOptions spread into injectQuery', () => {
- const query1 = queryOptions({
- queryKey: ['key'],
- queryFn: () => Promise.resolve(1),
- select: (data) => data > 1,
+ expectTypeOf(query1Data).toEqualTypeOf<{ wow: boolean }>()
+ expectTypeOf(query2Data).toEqualTypeOf()
+ expectTypeOf(query3Data).toEqualTypeOf()
})
- const query2 = {
- queryKey: ['key'],
- queryFn: () => Promise.resolve(1),
- select: (data: number) => data > 1,
- }
+ it('TData should be defined when passed through queryOptions', () => {
+ const key = queryKey()
+ const options = queryOptions({
+ queryKey: key,
+ queryFn: () => {
+ return {
+ wow: true,
+ }
+ },
+ initialData: {
+ wow: true,
+ },
+ })
+ const queryResults = injectQueries(() => ({ queries: [options] }))
- const queryResults = injectQueries(() => ({ queries: [query1, query2] }))
- const query1Data = queryResults()[0].data()
- const query2Data = queryResults()[1].data()
+ const data = queryResults()[0].data()
- expectTypeOf(query1Data).toEqualTypeOf()
- expectTypeOf(query2Data).toEqualTypeOf()
- })
+ expectTypeOf(data).toEqualTypeOf<{ wow: boolean }>()
+ })
- it('TData should have undefined in the union when initialData is provided as a function which can return undefined', () => {
- const queryResults = injectQueries(() => ({
- queries: [
- {
- queryKey: ['key'],
- queryFn: () => {
- return {
- wow: true,
- }
- },
- initialData: () => undefined as { wow: boolean } | undefined,
- },
- ],
- }))
+ it('should be possible to define a different TData than TQueryFnData using select with queryOptions spread into injectQuery', () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
- const data = queryResults()[0].data()
+ const query1 = queryOptions({
+ queryKey: key1,
+ queryFn: () => Promise.resolve(1),
+ select: (data) => data > 1,
+ })
- expectTypeOf(data).toEqualTypeOf<{ wow: boolean } | undefined>()
- })
+ const query2 = {
+ queryKey: key2,
+ queryFn: () => Promise.resolve(1),
+ select: (data: number) => data > 1,
+ }
+
+ const queryResults = injectQueries(() => ({ queries: [query1, query2] }))
+ const query1Data = queryResults()[0].data()
+ const query2Data = queryResults()[1].data()
+
+ expectTypeOf(query1Data).toEqualTypeOf()
+ expectTypeOf(query2Data).toEqualTypeOf()
+ })
- describe('custom injectable', () => {
- it('should allow custom hooks using UseQueryOptions', () => {
- type Data = string
-
- const injectCustomQueries = (
- options?: OmitKeyof, 'queryKey' | 'queryFn'>,
- ) => {
- return injectQueries(() => ({
- queries: [
- {
- ...options,
- queryKey: ['todos-key'],
- queryFn: () => Promise.resolve('data'),
+ it('TData should have undefined in the union when initialData is provided as a function which can return undefined', () => {
+ const key = queryKey()
+ const queryResults = injectQueries(() => ({
+ queries: [
+ {
+ queryKey: key,
+ queryFn: () => {
+ return {
+ wow: true,
+ }
},
- ],
- }))
- }
+ initialData: () => undefined as { wow: boolean } | undefined,
+ },
+ ],
+ }))
- const queryResults = injectCustomQueries()
const data = queryResults()[0].data()
- expectTypeOf(data).toEqualTypeOf()
+ expectTypeOf(data).toEqualTypeOf<{ wow: boolean } | undefined>()
})
- })
- it('TData should have correct type when conditional skipToken is passed', () => {
- const queryResults = injectQueries(() => ({
- queries: [
- {
- queryKey: ['withSkipToken'],
- queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5),
- },
- ],
- }))
+ describe('custom injectable', () => {
+ it('should allow custom hooks using UseQueryOptions', () => {
+ type Data = string
+ const key = queryKey()
+
+ const injectCustomQueries = (
+ options?: OmitKeyof, 'queryKey' | 'queryFn'>,
+ ) => {
+ return injectQueries(() => ({
+ queries: [
+ {
+ ...options,
+ queryKey: key,
+ queryFn: () => Promise.resolve('data'),
+ },
+ ],
+ }))
+ }
- const firstResult = queryResults()[0]
+ const queryResults = injectCustomQueries()
+ const data = queryResults()[0].data()
- expectTypeOf(firstResult).toEqualTypeOf>()
- expectTypeOf(firstResult.data()).toEqualTypeOf()
- })
+ expectTypeOf(data).toEqualTypeOf()
+ })
+ })
- it('should return correct data for dynamic queries with mixed result types', () => {
- const Queries1 = {
- get: () =>
- queryOptions({
- queryKey: ['key1'],
- queryFn: () => Promise.resolve(1),
- }),
- }
- const Queries2 = {
- get: () =>
- queryOptions({
- queryKey: ['key2'],
- queryFn: () => Promise.resolve(true),
- }),
- }
-
- const queries1List = [1, 2, 3].map(() => ({ ...Queries1.get() }))
- const result = injectQueries(() => ({
- queries: [...queries1List, { ...Queries2.get() }],
- }))
-
- expectTypeOf(result).branded.toEqualTypeOf<
- Signal<
- [
- ...Array>,
- CreateQueryResult,
- ]
- >
- >()
+ it('TData should have correct type when conditional skipToken is passed', () => {
+ const key = queryKey()
+ const queryResults = injectQueries(() => ({
+ queries: [
+ {
+ queryKey: key,
+ queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5),
+ },
+ ],
+ }))
+
+ const firstResult = queryResults()[0]
+
+ expectTypeOf(firstResult).toEqualTypeOf<
+ CreateQueryResult
+ >()
+ expectTypeOf(firstResult.data()).toEqualTypeOf()
+ })
+
+ it('should return correct data for dynamic queries with mixed result types', () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+
+ const Queries1 = {
+ get: () =>
+ queryOptions({
+ queryKey: key1,
+ queryFn: () => Promise.resolve(1),
+ }),
+ }
+ const Queries2 = {
+ get: () =>
+ queryOptions({
+ queryKey: key2,
+ queryFn: () => Promise.resolve(true),
+ }),
+ }
+
+ const queries1List = [1, 2, 3].map(() => ({ ...Queries1.get() }))
+ const result = injectQueries(() => ({
+ queries: [...queries1List, { ...Queries2.get() }],
+ }))
+
+ expectTypeOf(result).branded.toEqualTypeOf<
+ Signal<
+ [
+ ...Array>,
+ CreateQueryResult,
+ ]
+ >
+ >()
+ })
})
})
diff --git a/packages/angular-query-experimental/src/__tests__/inject-queries.test.ts b/packages/angular-query-experimental/src/__tests__/inject-queries.test.ts
index d85e1985b3e..523bda69f06 100644
--- a/packages/angular-query-experimental/src/__tests__/inject-queries.test.ts
+++ b/packages/angular-query-experimental/src/__tests__/inject-queries.test.ts
@@ -3,31 +3,32 @@ import {
Component,
effect,
provideZonelessChangeDetection,
+ signal,
} from '@angular/core'
import { TestBed } from '@angular/core/testing'
import { render } from '@testing-library/angular'
import { queryKey, sleep } from '@tanstack/query-test-utils'
-import { QueryClient, provideTanStackQuery } from '..'
+import { QueryClient, provideIsRestoring, provideTanStackQuery } from '..'
import { injectQueries } from '../inject-queries'
-let queryClient: QueryClient
+describe('injectQueries', () => {
+ let queryClient: QueryClient
-beforeEach(() => {
- vi.useFakeTimers()
- queryClient = new QueryClient()
- TestBed.configureTestingModule({
- providers: [
- provideZonelessChangeDetection(),
- provideTanStackQuery(queryClient),
- ],
+ beforeEach(() => {
+ vi.useFakeTimers()
+ queryClient = new QueryClient()
+ TestBed.configureTestingModule({
+ providers: [
+ provideZonelessChangeDetection(),
+ provideTanStackQuery(queryClient),
+ ],
+ })
})
-})
-afterEach(() => {
- vi.useRealTimers()
-})
+ afterEach(() => {
+ vi.useRealTimers()
+ })
-describe('injectQueries', () => {
it('should return the correct states', async () => {
const key1 = queryKey()
const key2 = queryKey()
@@ -44,7 +45,7 @@ describe('injectQueries', () => {
`,
})
class Page {
- result = injectQueries(() => ({
+ readonly result = injectQueries(() => ({
queries: [
{
queryKey: key1,
@@ -57,18 +58,15 @@ describe('injectQueries', () => {
],
}))
- _ = effect(() => {
- const snapshot = this.result().map((q) => ({ data: q.data() }))
- results.push(snapshot)
- })
+ constructor() {
+ effect(() => {
+ const snapshot = this.result().map((q) => ({ data: q.data() }))
+ results.push(snapshot)
+ })
+ }
}
- const rendered = await render(Page, {
- providers: [
- provideZonelessChangeDetection(),
- provideTanStackQuery(queryClient),
- ],
- })
+ const rendered = await render(Page)
await vi.advanceTimersByTimeAsync(101)
rendered.fixture.detectChanges()
@@ -80,4 +78,163 @@ describe('injectQueries', () => {
expect(results[1]).toMatchObject([{ data: 1 }, { data: undefined }])
expect(results[2]).toMatchObject([{ data: 1 }, { data: 2 }])
})
+
+ it('should return the combined result when combine is provided', async () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+ const results: Array> = []
+
+ @Component({
+ template: `
+ data: {{ combined().data.join(',') }}
+ isPending: {{ combined().isPending }}
+ `,
+ })
+ class Page {
+ readonly combined = injectQueries(() => ({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () => sleep(10).then(() => 1),
+ },
+ {
+ queryKey: key2,
+ queryFn: () => sleep(10).then(() => 2),
+ },
+ ],
+ combine: (queries) => ({
+ data: queries.map((q) => q.data),
+ isPending: queries.some((q) => q.isPending),
+ }),
+ }))
+
+ constructor() {
+ effect(() => {
+ results.push({ ...this.combined() })
+ })
+ }
+ }
+
+ const rendered = await render(Page)
+
+ expect(rendered.getByText('data: ,')).toBeInTheDocument()
+ expect(rendered.getByText('isPending: true')).toBeInTheDocument()
+ expect(results[0]).toMatchObject({
+ data: [undefined, undefined],
+ isPending: true,
+ })
+
+ await vi.advanceTimersByTimeAsync(11)
+ rendered.fixture.detectChanges()
+
+ expect(rendered.getByText('data: 1,2')).toBeInTheDocument()
+ expect(rendered.getByText('isPending: false')).toBeInTheDocument()
+ expect(results[results.length - 1]).toMatchObject({
+ data: [1, 2],
+ isPending: false,
+ })
+ expect(results.length).toBeGreaterThanOrEqual(2)
+ })
+
+ it('should reflect error state when one of the queries rejects', async () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+
+ @Component({
+ template: `
+
+ status1: {{ result()[0].status() }}, error1:
+ {{ result()[0].error()?.message ?? 'none' }}
+
+
+ status2: {{ result()[1].status() }}, data2:
+ {{ result()[1].data() ?? 'none' }}
+
+ `,
+ })
+ class Page {
+ readonly result = injectQueries(() => ({
+ queries: [
+ {
+ queryKey: key1,
+ queryFn: () =>
+ sleep(10).then(() => Promise.reject(new Error('Some error'))),
+ retry: false,
+ },
+ {
+ queryKey: key2,
+ queryFn: () => sleep(10).then(() => 2),
+ },
+ ],
+ }))
+ }
+
+ const rendered = await render(Page)
+
+ await vi.advanceTimersByTimeAsync(11)
+ rendered.fixture.detectChanges()
+
+ expect(
+ rendered.getByText('status1: error, error1: Some error'),
+ ).toBeInTheDocument()
+ expect(rendered.getByText('status2: success, data2: 2')).toBeInTheDocument()
+ })
+
+ describe('isRestoring', () => {
+ it('should not fetch for the duration of the restoring period when isRestoring is true', async () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+ const queryFn1 = vi.fn().mockImplementation(() => sleep(10).then(() => 1))
+ const queryFn2 = vi.fn().mockImplementation(() => sleep(10).then(() => 2))
+
+ TestBed.configureTestingModule({
+ providers: [provideIsRestoring(signal(true).asReadonly())],
+ })
+
+ @Component({
+ template: `
+
+ status1: {{ queries()[0].status() }}, fetchStatus1:
+ {{ queries()[0].fetchStatus() }}
+
+
+ status2: {{ queries()[1].status() }}, fetchStatus2:
+ {{ queries()[1].fetchStatus() }}
+
+ `,
+ })
+ class Page {
+ readonly queries = injectQueries(() => ({
+ queries: [
+ { queryKey: key1, queryFn: queryFn1 },
+ { queryKey: key2, queryFn: queryFn2 },
+ ],
+ }))
+ }
+
+ const rendered = await render(Page)
+
+ await vi.advanceTimersByTimeAsync(0)
+ rendered.fixture.detectChanges()
+ expect(
+ rendered.getByText('status1: pending, fetchStatus1: idle'),
+ ).toBeInTheDocument()
+ expect(
+ rendered.getByText('status2: pending, fetchStatus2: idle'),
+ ).toBeInTheDocument()
+ expect(queryFn1).toHaveBeenCalledTimes(0)
+ expect(queryFn2).toHaveBeenCalledTimes(0)
+
+ await vi.advanceTimersByTimeAsync(11)
+ rendered.fixture.detectChanges()
+ expect(
+ rendered.getByText('status1: pending, fetchStatus1: idle'),
+ ).toBeInTheDocument()
+ expect(
+ rendered.getByText('status2: pending, fetchStatus2: idle'),
+ ).toBeInTheDocument()
+ expect(queryFn1).toHaveBeenCalledTimes(0)
+ expect(queryFn2).toHaveBeenCalledTimes(0)
+ })
+ })
})
diff --git a/packages/angular-query-experimental/src/__tests__/inject-query.test-d.ts b/packages/angular-query-experimental/src/__tests__/inject-query.test-d.ts
index 541ad65f148..c0864c0c99e 100644
--- a/packages/angular-query-experimental/src/__tests__/inject-query.test-d.ts
+++ b/packages/angular-query-experimental/src/__tests__/inject-query.test-d.ts
@@ -1,179 +1,194 @@
-import { describe, expectTypeOf, it, test } from 'vitest'
-import { sleep } from '@tanstack/query-test-utils'
+import { describe, expectTypeOf, it } from 'vitest'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
import { injectQuery, queryOptions } from '..'
import type { Signal } from '@angular/core'
-describe('initialData', () => {
- describe('Config object overload', () => {
- it('TData should always be defined when initialData is provided as an object', () => {
- const { data } = injectQuery(() => ({
- queryKey: ['key'],
- queryFn: () => ({ wow: true }),
- initialData: { wow: true },
- }))
+describe('injectQuery', () => {
+ describe('initialData', () => {
+ describe('Config object overload', () => {
+ it('TData should always be defined when initialData is provided as an object', () => {
+ const key = queryKey()
+ const { data } = injectQuery(() => ({
+ queryKey: key,
+ queryFn: () => ({ wow: true }),
+ initialData: { wow: true },
+ }))
+
+ expectTypeOf(data).toEqualTypeOf>()
+ })
- expectTypeOf(data).toEqualTypeOf>()
- })
+ it('TData should be defined when passed through queryOptions', () => {
+ const key = queryKey()
+ const options = () =>
+ queryOptions({
+ queryKey: key,
+ queryFn: () => {
+ return {
+ wow: true,
+ }
+ },
+ initialData: {
+ wow: true,
+ },
+ })
+ const { data } = injectQuery(options)
+
+ expectTypeOf(data).toEqualTypeOf>()
+ })
+
+ it('should be possible to define a different TData than TQueryFnData using select with queryOptions spread into useQuery', () => {
+ const key = queryKey()
+ const options = queryOptions({
+ queryKey: key,
+ queryFn: () => Promise.resolve(1),
+ })
+
+ const query = injectQuery(() => ({
+ ...options,
+ select: (data) => data > 1,
+ }))
- it('TData should be defined when passed through queryOptions', () => {
- const options = () =>
- queryOptions({
- queryKey: ['key'],
+ expectTypeOf(query.data).toEqualTypeOf>()
+ })
+
+ it('TData should always be defined when initialData is provided as a function which ALWAYS returns the data', () => {
+ const key = queryKey()
+ const { data } = injectQuery(() => ({
+ queryKey: key,
queryFn: () => {
return {
wow: true,
}
},
- initialData: {
+ initialData: () => ({
wow: true,
+ }),
+ }))
+
+ expectTypeOf(data).toEqualTypeOf>()
+ })
+
+ it('TData should have undefined in the union when initialData is NOT provided', () => {
+ const key = queryKey()
+ const { data } = injectQuery(() => ({
+ queryKey: key,
+ queryFn: () => {
+ return {
+ wow: true,
+ }
},
- })
- const { data } = injectQuery(options)
+ }))
- expectTypeOf(data).toEqualTypeOf>()
- })
+ expectTypeOf(data).toEqualTypeOf>()
+ })
+
+ it('TData should have undefined in the union when initialData is provided as a function which can return undefined', () => {
+ const key = queryKey()
+ const { data } = injectQuery(() => ({
+ queryKey: key,
+ queryFn: () => {
+ return {
+ wow: true,
+ }
+ },
+ initialData: () => undefined as { wow: boolean } | undefined,
+ }))
- it('should be possible to define a different TData than TQueryFnData using select with queryOptions spread into useQuery', () => {
- const options = queryOptions({
- queryKey: ['key'],
- queryFn: () => Promise.resolve(1),
+ expectTypeOf(data).toEqualTypeOf>()
})
- const query = injectQuery(() => ({
- ...options,
- select: (data) => data > 1,
- }))
+ it('TData should be narrowed after an isSuccess check when initialData is provided as a function which can return undefined', () => {
+ const key = queryKey()
+ const query = injectQuery(() => ({
+ queryKey: key,
+ queryFn: () => {
+ return {
+ wow: true,
+ }
+ },
+ initialData: () => undefined as { wow: boolean } | undefined,
+ }))
- expectTypeOf(query.data).toEqualTypeOf>()
+ if (query.isSuccess()) {
+ expectTypeOf(query.data).toEqualTypeOf>()
+ }
+ })
})
- it('TData should always be defined when initialData is provided as a function which ALWAYS returns the data', () => {
- const { data } = injectQuery(() => ({
- queryKey: ['key'],
- queryFn: () => {
- return {
- wow: true,
- }
- },
- initialData: () => ({
- wow: true,
- }),
- }))
-
- expectTypeOf(data).toEqualTypeOf>()
+ describe('structuralSharing', () => {
+ it('should be able to use structuralSharing with unknown types', () => {
+ const key = queryKey()
+ // https://github.com/TanStack/query/issues/6525#issuecomment-1938411343
+ injectQuery(() => ({
+ queryKey: key,
+ queryFn: () => 5,
+ structuralSharing: (oldData, newData) => {
+ expectTypeOf(oldData).toBeUnknown()
+ expectTypeOf(newData).toBeUnknown()
+ return newData
+ },
+ }))
+ })
})
+ })
- it('TData should have undefined in the union when initialData is NOT provided', () => {
- const { data } = injectQuery(() => ({
- queryKey: ['key'],
- queryFn: () => {
- return {
- wow: true,
- }
- },
+ describe('Discriminated union return type', () => {
+ it('data should be possibly undefined by default', () => {
+ const key = queryKey()
+ const query = injectQuery(() => ({
+ queryKey: key,
+ queryFn: () => sleep(0).then(() => 'Some data'),
}))
- expectTypeOf(data).toEqualTypeOf>()
+ expectTypeOf(query.data).toEqualTypeOf>()
})
- it('TData should have undefined in the union when initialData is provided as a function which can return undefined', () => {
- const { data } = injectQuery(() => ({
- queryKey: ['key'],
- queryFn: () => {
- return {
- wow: true,
- }
- },
- initialData: () => undefined as { wow: boolean } | undefined,
+ it('data should be defined when query is success', () => {
+ const key = queryKey()
+ const query = injectQuery(() => ({
+ queryKey: key,
+ queryFn: () => sleep(0).then(() => 'Some data'),
}))
- expectTypeOf(data).toEqualTypeOf>()
+ if (query.isSuccess()) {
+ expectTypeOf(query.data).toEqualTypeOf>()
+ }
})
- it('TData should be narrowed after an isSuccess check when initialData is provided as a function which can return undefined', () => {
+ it('error should be null when query is success', () => {
+ const key = queryKey()
const query = injectQuery(() => ({
- queryKey: ['key'],
- queryFn: () => {
- return {
- wow: true,
- }
- },
- initialData: () => undefined as { wow: boolean } | undefined,
+ queryKey: key,
+ queryFn: () => sleep(0).then(() => 'Some data'),
}))
if (query.isSuccess()) {
- expectTypeOf(query.data).toEqualTypeOf>()
+ expectTypeOf(query.error).toEqualTypeOf>()
}
})
- })
- describe('structuralSharing', () => {
- it('should be able to use structuralSharing with unknown types', () => {
- // https://github.com/TanStack/query/issues/6525#issuecomment-1938411343
- injectQuery(() => ({
- queryKey: ['key'],
- queryFn: () => 5,
- structuralSharing: (oldData, newData) => {
- expectTypeOf(oldData).toBeUnknown()
- expectTypeOf(newData).toBeUnknown()
- return newData
- },
+ it('data should be undefined when query is pending', () => {
+ const key = queryKey()
+ const query = injectQuery(() => ({
+ queryKey: key,
+ queryFn: () => sleep(0).then(() => 'Some data'),
}))
- })
- })
-})
-describe('Discriminated union return type', () => {
- test('data should be possibly undefined by default', () => {
- const query = injectQuery(() => ({
- queryKey: ['key'],
- queryFn: () => sleep(0).then(() => 'Some data'),
- }))
-
- expectTypeOf(query.data).toEqualTypeOf>()
- })
-
- test('data should be defined when query is success', () => {
- const query = injectQuery(() => ({
- queryKey: ['key'],
- queryFn: () => sleep(0).then(() => 'Some data'),
- }))
-
- if (query.isSuccess()) {
- expectTypeOf(query.data).toEqualTypeOf>()
- }
- })
-
- test('error should be null when query is success', () => {
- const query = injectQuery(() => ({
- queryKey: ['key'],
- queryFn: () => sleep(0).then(() => 'Some data'),
- }))
-
- if (query.isSuccess()) {
- expectTypeOf(query.error).toEqualTypeOf>()
- }
- })
-
- test('data should be undefined when query is pending', () => {
- const query = injectQuery(() => ({
- queryKey: ['key'],
- queryFn: () => sleep(0).then(() => 'Some data'),
- }))
-
- if (query.isPending()) {
- expectTypeOf(query.data).toEqualTypeOf>()
- }
- })
+ if (query.isPending()) {
+ expectTypeOf(query.data).toEqualTypeOf>()
+ }
+ })
- test('error should be defined when query is error', () => {
- const query = injectQuery(() => ({
- queryKey: ['key'],
- queryFn: () => sleep(0).then(() => 'Some data'),
- }))
+ it('error should be defined when query is error', () => {
+ const key = queryKey()
+ const query = injectQuery(() => ({
+ queryKey: key,
+ queryFn: () => sleep(0).then(() => 'Some data'),
+ }))
- if (query.isError()) {
- expectTypeOf(query.error).toEqualTypeOf>()
- }
+ if (query.isError()) {
+ expectTypeOf(query.error).toEqualTypeOf>()
+ }
+ })
})
})
diff --git a/packages/angular-query-experimental/src/__tests__/inject-query.test.ts b/packages/angular-query-experimental/src/__tests__/inject-query.test.ts
index 82702e15c24..fb7fd80a7b7 100644
--- a/packages/angular-query-experimental/src/__tests__/inject-query.test.ts
+++ b/packages/angular-query-experimental/src/__tests__/inject-query.test.ts
@@ -20,9 +20,10 @@ import {
describe,
expect,
expectTypeOf,
- test,
+ it,
vi,
} from 'vitest'
+import { render } from '@testing-library/angular'
import { queryKey, sleep } from '@tanstack/query-test-utils'
import { lastValueFrom } from 'rxjs'
import {
@@ -38,6 +39,7 @@ import type { CreateQueryOptions, OmitKeyof, QueryFunction } from '..'
describe('injectQuery', () => {
let queryCache: QueryCache
let queryClient: QueryClient
+
beforeEach(() => {
vi.useFakeTimers()
queryCache = new QueryCache()
@@ -54,7 +56,7 @@ describe('injectQuery', () => {
vi.useRealTimers()
})
- test('should return the correct types', () => {
+ it('should return the correct types', () => {
const key = queryKey()
// unspecified query function should default to unknown
const noQueryFn = TestBed.runInInjectionContext(() =>
@@ -266,10 +268,11 @@ describe('injectQuery', () => {
>()
})
- test('should return pending status initially', () => {
+ it('should return pending status initially', () => {
+ const key = queryKey()
const query = TestBed.runInInjectionContext(() => {
return injectQuery(() => ({
- queryKey: ['key1'],
+ queryKey: key,
queryFn: () => sleep(10).then(() => 'Some data'),
}))
})
@@ -281,46 +284,138 @@ describe('injectQuery', () => {
expect(query.isFetched()).toBe(false)
})
- test('should resolve to success and update signal: injectQuery()', async () => {
- const query = TestBed.runInInjectionContext(() => {
- return injectQuery(() => ({
- queryKey: ['key2'],
+ it('should resolve to success and update signal: injectQuery()', async () => {
+ const key = queryKey()
+
+ @Component({
+ template: `
+ status: {{ query.status() }}
+ data: {{ query.data() ?? 'none' }}
+ isPending: {{ query.isPending() }}
+ isFetching: {{ query.isFetching() }}
+ isFetched: {{ query.isFetched() }}
+ isSuccess: {{ query.isSuccess() }}
+ `,
+ })
+ class Page {
+ readonly query = injectQuery(() => ({
+ queryKey: key,
queryFn: () => sleep(10).then(() => 'result2'),
}))
- })
+ }
+
+ const rendered = await render(Page)
await vi.advanceTimersByTimeAsync(11)
- expect(query.status()).toBe('success')
- expect(query.data()).toBe('result2')
- expect(query.isPending()).toBe(false)
- expect(query.isFetching()).toBe(false)
- expect(query.isFetched()).toBe(true)
- expect(query.isSuccess()).toBe(true)
+ rendered.fixture.detectChanges()
+
+ expect(rendered.getByText('status: success')).toBeInTheDocument()
+ expect(rendered.getByText('data: result2')).toBeInTheDocument()
+ expect(rendered.getByText('isPending: false')).toBeInTheDocument()
+ expect(rendered.getByText('isFetching: false')).toBeInTheDocument()
+ expect(rendered.getByText('isFetched: true')).toBeInTheDocument()
+ expect(rendered.getByText('isSuccess: true')).toBeInTheDocument()
})
- test('should reject and update signal', async () => {
- const query = TestBed.runInInjectionContext(() => {
- return injectQuery(() => ({
+ it('should reject and update signal', async () => {
+ const key = queryKey()
+
+ @Component({
+ template: `
+ status: {{ query.status() }}
+ data: {{ query.data() ?? 'none' }}
+ error: {{ query.error()?.message ?? 'none' }}
+ isPending: {{ query.isPending() }}
+ isFetching: {{ query.isFetching() }}
+ isError: {{ query.isError() }}
+ failureCount: {{ query.failureCount() }}
+ failureReason: {{ query.failureReason()?.message ?? 'none' }}
+ `,
+ })
+ class Page {
+ readonly query = injectQuery(() => ({
retry: false,
- queryKey: ['key3'],
+ queryKey: key,
queryFn: () =>
sleep(10).then(() => Promise.reject(new Error('Some error'))),
}))
+ }
+
+ const rendered = await render(Page)
+
+ await vi.advanceTimersByTimeAsync(11)
+ rendered.fixture.detectChanges()
+
+ expect(rendered.getByText('status: error')).toBeInTheDocument()
+ expect(rendered.getByText('data: none')).toBeInTheDocument()
+ expect(rendered.getByText('error: Some error')).toBeInTheDocument()
+ expect(rendered.getByText('isPending: false')).toBeInTheDocument()
+ expect(rendered.getByText('isFetching: false')).toBeInTheDocument()
+ expect(rendered.getByText('isError: true')).toBeInTheDocument()
+ expect(rendered.getByText('failureCount: 1')).toBeInTheDocument()
+ expect(rendered.getByText('failureReason: Some error')).toBeInTheDocument()
+ })
+
+ it('should be able to select a part of the data with select', async () => {
+ const key = queryKey()
+
+ @Component({
+ template: `data: {{ query.data() ?? 'none' }}
`,
+ })
+ class Page {
+ readonly query = injectQuery<{ name: string }, Error, string>(() => ({
+ queryKey: key,
+ queryFn: () => sleep(10).then(() => ({ name: 'test' })),
+ select: (data) => data.name,
+ }))
+ }
+
+ const rendered = await render(Page)
+
+ expect(rendered.getByText('data: none')).toBeInTheDocument()
+
+ await vi.advanceTimersByTimeAsync(11)
+ rendered.fixture.detectChanges()
+
+ expect(rendered.getByText('data: test')).toBeInTheDocument()
+ })
+
+ it('should show placeholderData until queryFn resolves and then expose real data', async () => {
+ const key = queryKey()
+
+ @Component({
+ template: `
+ data: {{ query.data() }}
+ isPlaceholderData: {{ query.isPlaceholderData() }}
+ isSuccess: {{ query.isSuccess() }}
+ `,
})
+ class Page {
+ readonly query = injectQuery(() => ({
+ queryKey: key,
+ queryFn: () => sleep(10).then(() => 'real-data'),
+ placeholderData: 'placeholder',
+ }))
+ }
+
+ const rendered = await render(Page)
+
+ expect(rendered.getByText('data: placeholder')).toBeInTheDocument()
+ expect(rendered.getByText('isPlaceholderData: true')).toBeInTheDocument()
+ expect(rendered.getByText('isSuccess: true')).toBeInTheDocument()
await vi.advanceTimersByTimeAsync(11)
- expect(query.status()).toBe('error')
- expect(query.data()).toBe(undefined)
- expect(query.error()).toMatchObject({ message: 'Some error' })
- expect(query.isPending()).toBe(false)
- expect(query.isFetching()).toBe(false)
- expect(query.isError()).toBe(true)
- expect(query.failureCount()).toBe(1)
- expect(query.failureReason()).toMatchObject({ message: 'Some error' })
+ rendered.fixture.detectChanges()
+
+ expect(rendered.getByText('data: real-data')).toBeInTheDocument()
+ expect(rendered.getByText('isPlaceholderData: false')).toBeInTheDocument()
+ expect(rendered.getByText('isSuccess: true')).toBeInTheDocument()
})
- test('should update query on options contained signal change', async () => {
- const key = signal(['key6', 'key7'])
+ it('should update query on options contained signal change', async () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+ const key = signal(key1)
const spy = vi.fn(() => sleep(10).then(() => 'Some data'))
const query = TestBed.runInInjectionContext(() => {
@@ -336,26 +431,27 @@ describe('injectQuery', () => {
await vi.advanceTimersByTimeAsync(11)
expect(query.status()).toBe('success')
- key.set(['key8'])
+ key.set(key2)
TestBed.tick()
expect(spy).toHaveBeenCalledTimes(2)
// should call queryFn with context containing the new queryKey
- expect(spy).toBeCalledWith({
+ expect(spy).toHaveBeenCalledWith({
client: queryClient,
meta: undefined,
- queryKey: ['key8'],
+ queryKey: key2,
signal: expect.anything(),
})
})
- test('should only run query once enabled signal is set to true', async () => {
+ it('should only run query once enabled signal is set to true', async () => {
+ const key = queryKey()
const spy = vi.fn(() => sleep(10).then(() => 'Some data'))
const enabled = signal(false)
const query = TestBed.runInInjectionContext(() => {
return injectQuery(() => ({
- queryKey: ['key9'],
+ queryKey: key,
queryFn: spy,
enabled: enabled(),
}))
@@ -371,10 +467,13 @@ describe('injectQuery', () => {
expect(query.status()).toBe('success')
})
- test('should properly execute dependent queries', async () => {
+ it('should properly execute dependent queries', async () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+
const query1 = TestBed.runInInjectionContext(() => {
return injectQuery(() => ({
- queryKey: ['dependent1'],
+ queryKey: key1,
queryFn: () => sleep(10).then(() => 'Some data'),
}))
})
@@ -386,7 +485,7 @@ describe('injectQuery', () => {
const query2 = TestBed.runInInjectionContext(() => {
return injectQuery(
computed(() => ({
- queryKey: ['dependent2'],
+ queryKey: key2,
queryFn: dependentQueryFn,
enabled: !!query1.data(),
})),
@@ -408,17 +507,18 @@ describe('injectQuery', () => {
expect(query2.status()).toStrictEqual('success')
expect(dependentQueryFn).toHaveBeenCalledTimes(1)
expect(dependentQueryFn).toHaveBeenCalledWith(
- expect.objectContaining({ queryKey: ['dependent2'] }),
+ expect.objectContaining({ queryKey: key2 }),
)
})
- test('should use the current value for the queryKey when refetch is called', async () => {
+ it('should use the current value for the queryKey when refetch is called', async () => {
+ const key = queryKey()
const fetchFn = vi.fn(() => sleep(10).then(() => 'Some data'))
const keySignal = signal('key11')
const query = TestBed.runInInjectionContext(() => {
return injectQuery(() => ({
- queryKey: ['key10', keySignal()],
+ queryKey: [...key, keySignal()],
queryFn: fetchFn,
enabled: false,
}))
@@ -430,7 +530,7 @@ describe('injectQuery', () => {
expect(fetchFn).toHaveBeenCalledTimes(1)
expect(fetchFn).toHaveBeenCalledWith(
expect.objectContaining({
- queryKey: ['key10', 'key11'],
+ queryKey: [...key, 'key11'],
}),
)
})
@@ -443,7 +543,7 @@ describe('injectQuery', () => {
expect(fetchFn).toHaveBeenCalledTimes(2)
expect(fetchFn).toHaveBeenCalledWith(
expect.objectContaining({
- queryKey: ['key10', 'key12'],
+ queryKey: [...key, 'key12'],
}),
)
})
@@ -452,11 +552,12 @@ describe('injectQuery', () => {
})
describe('throwOnError', () => {
- test('should evaluate throwOnError when query is expected to throw', async () => {
+ it('should evaluate throwOnError when query is expected to throw', async () => {
+ const key = queryKey()
const boundaryFn = vi.fn()
TestBed.runInInjectionContext(() => {
return injectQuery(() => ({
- queryKey: ['key12'],
+ queryKey: key,
queryFn: () =>
sleep(10).then(() => Promise.reject(new Error('Some error'))),
retry: false,
@@ -474,10 +575,11 @@ describe('injectQuery', () => {
)
})
- test('should throw when throwOnError is true', async () => {
+ it('should throw when throwOnError is true', async () => {
+ const key = queryKey()
TestBed.runInInjectionContext(() => {
return injectQuery(() => ({
- queryKey: ['key13'],
+ queryKey: key,
queryFn: () =>
sleep(0).then(() => Promise.reject(new Error('Some error'))),
throwOnError: true,
@@ -487,10 +589,11 @@ describe('injectQuery', () => {
await expect(vi.runAllTimersAsync()).rejects.toThrow('Some error')
})
- test('should throw when throwOnError function returns true', async () => {
+ it('should throw when throwOnError function returns true', async () => {
+ const key = queryKey()
TestBed.runInInjectionContext(() => {
return injectQuery(() => ({
- queryKey: ['key14'],
+ queryKey: key,
queryFn: () =>
sleep(0).then(() => Promise.reject(new Error('Some error'))),
throwOnError: () => true,
@@ -501,24 +604,7 @@ describe('injectQuery', () => {
})
})
- test('should set state to error when queryFn returns reject promise', async () => {
- const query = TestBed.runInInjectionContext(() => {
- return injectQuery(() => ({
- retry: false,
- queryKey: ['key15'],
- queryFn: () =>
- sleep(10).then(() => Promise.reject(new Error('Some error'))),
- }))
- })
-
- expect(query.status()).toBe('pending')
-
- await vi.advanceTimersByTimeAsync(11)
-
- expect(query.status()).toBe('error')
- })
-
- test('should render with required signal inputs', async () => {
+ it('should render with required signal inputs', async () => {
@Component({
selector: 'app-fake',
template: `{{ query.data() }}`,
@@ -546,19 +632,14 @@ describe('injectQuery', () => {
})
describe('isRestoring', () => {
- test('should not fetch for the duration of the restoring period when isRestoring is true', async () => {
+ it('should not fetch for the duration of the restoring period when isRestoring is true', async () => {
const key = queryKey()
const queryFn = vi
.fn()
.mockImplementation(() => sleep(10).then(() => 'data'))
- TestBed.resetTestingModule()
TestBed.configureTestingModule({
- providers: [
- provideZonelessChangeDetection(),
- provideTanStackQuery(queryClient),
- provideIsRestoring(signal(true).asReadonly()),
- ],
+ providers: [provideIsRestoring(signal(true).asReadonly())],
})
const query = TestBed.runInInjectionContext(() =>
@@ -583,19 +664,21 @@ describe('injectQuery', () => {
})
describe('injection context', () => {
- test('throws NG0203 with descriptive error outside injection context', () => {
+ it('should throw NG0203 with descriptive error outside injection context', () => {
+ const key = queryKey()
expect(() => {
injectQuery(() => ({
- queryKey: ['injectionContextError'],
+ queryKey: key,
queryFn: () => sleep(0).then(() => 'Some data'),
}))
- }).toThrowError(/NG0203(.*?)injectQuery/)
+ }).toThrow(/NG0203(.*?)injectQuery/)
})
- test('can be used outside injection context when passing an injector', () => {
+ it('should be usable outside injection context when passing an injector', () => {
+ const key = queryKey()
const query = injectQuery(
() => ({
- queryKey: ['manualInjector'],
+ queryKey: key,
queryFn: () => sleep(0).then(() => 'Some data'),
}),
{
@@ -606,16 +689,14 @@ describe('injectQuery', () => {
expect(query.status()).toBe('pending')
})
- test('should complete queries before whenStable() resolves', async () => {
+ it('should complete queries before whenStable() resolves', async () => {
+ const key = queryKey()
const app = TestBed.inject(ApplicationRef)
const query = TestBed.runInInjectionContext(() =>
injectQuery(() => ({
- queryKey: ['pendingTasksTest'],
- queryFn: async () => {
- await sleep(50)
- return 'test data'
- },
+ queryKey: key,
+ queryFn: () => sleep(50).then(() => 'test data'),
})),
)
@@ -630,15 +711,9 @@ describe('injectQuery', () => {
expect(query.data()).toBe('test data')
})
- test('should complete HttpClient-based queries before whenStable() resolves', async () => {
- TestBed.resetTestingModule()
+ it('should complete HttpClient-based queries before whenStable() resolves', async () => {
TestBed.configureTestingModule({
- providers: [
- provideZonelessChangeDetection(),
- provideTanStackQuery(queryClient),
- provideHttpClient(),
- provideHttpClientTesting(),
- ],
+ providers: [provideHttpClient(), provideHttpClientTesting()],
})
const app = TestBed.inject(ApplicationRef)
@@ -646,9 +721,10 @@ describe('injectQuery', () => {
const httpTestingController = TestBed.inject(HttpTestingController)
// Create a query using HttpClient
+ const key = queryKey()
const query = TestBed.runInInjectionContext(() =>
injectQuery(() => ({
- queryKey: ['httpClientTest'],
+ queryKey: key,
queryFn: () =>
lastValueFrom(httpClient.get<{ message: string }>('/api/test')),
})),
@@ -675,21 +751,14 @@ describe('injectQuery', () => {
httpTestingController.verify()
})
- test('should handle synchronous queryFn with staleTime', async () => {
- TestBed.resetTestingModule()
- TestBed.configureTestingModule({
- providers: [
- provideZonelessChangeDetection(),
- provideTanStackQuery(queryClient),
- ],
- })
-
+ it('should handle synchronous queryFn with staleTime', async () => {
const app = TestBed.inject(ApplicationRef)
let callCount = 0
+ const key = queryKey()
const query = TestBed.runInInjectionContext(() =>
injectQuery(() => ({
- queryKey: ['sync-stale'],
+ queryKey: key,
staleTime: 1000,
queryFn: () => {
callCount++
@@ -718,22 +787,15 @@ describe('injectQuery', () => {
expect(callCount).toBe(2)
})
- test('should handle enabled/disabled transitions with synchronous queryFn', async () => {
- TestBed.resetTestingModule()
- TestBed.configureTestingModule({
- providers: [
- provideZonelessChangeDetection(),
- provideTanStackQuery(queryClient),
- ],
- })
-
+ it('should handle enabled/disabled transitions with synchronous queryFn', async () => {
const app = TestBed.inject(ApplicationRef)
const enabledSignal = signal(false)
let callCount = 0
+ const key = queryKey()
const query = TestBed.runInInjectionContext(() =>
injectQuery(() => ({
- queryKey: ['sync-enabled'],
+ queryKey: key,
enabled: enabledSignal(),
queryFn: () => {
callCount++
@@ -759,17 +821,9 @@ describe('injectQuery', () => {
expect(callCount).toBe(1)
})
- test('should handle query invalidation with synchronous data', async () => {
- TestBed.resetTestingModule()
- TestBed.configureTestingModule({
- providers: [
- provideZonelessChangeDetection(),
- provideTanStackQuery(queryClient),
- ],
- })
-
+ it('should handle query invalidation with synchronous data', async () => {
const app = TestBed.inject(ApplicationRef)
- const testKey = ['sync-invalidate']
+ const testKey = queryKey()
let callCount = 0
const query = TestBed.runInInjectionContext(() =>
diff --git a/packages/angular-query-experimental/src/__tests__/mutation-options.test-d.ts b/packages/angular-query-experimental/src/__tests__/mutation-options.test-d.ts
index 968eda7b30d..89691bf81a4 100644
--- a/packages/angular-query-experimental/src/__tests__/mutation-options.test-d.ts
+++ b/packages/angular-query-experimental/src/__tests__/mutation-options.test-d.ts
@@ -1,4 +1,5 @@
import { assertType, describe, expectTypeOf, it } from 'vitest'
+import { queryKey } from '@tanstack/query-test-utils'
import { QueryClient } from '@tanstack/query-core'
import {
injectIsMutating,
@@ -16,10 +17,11 @@ import type { CreateMutationOptions, CreateMutationResult } from '../types'
describe('mutationOptions', () => {
it('should not allow excess properties', () => {
+ const key = queryKey()
// @ts-expect-error this is a good error, because onMutates does not exist!
mutationOptions({
mutationFn: () => Promise.resolve(5),
- mutationKey: ['key'],
+ mutationKey: key,
onMutates: 1000,
onSuccess: (data) => {
expectTypeOf(data).toEqualTypeOf()
@@ -28,9 +30,10 @@ describe('mutationOptions', () => {
})
it('should infer types for callbacks', () => {
+ const key = queryKey()
mutationOptions({
mutationFn: () => Promise.resolve(5),
- mutationKey: ['key'],
+ mutationKey: key,
onSuccess: (data) => {
expectTypeOf(data).toEqualTypeOf()
},
@@ -38,11 +41,12 @@ describe('mutationOptions', () => {
})
it('should infer types for onError callback', () => {
+ const key = queryKey()
mutationOptions({
mutationFn: () => {
throw new Error('fail')
},
- mutationKey: ['key'],
+ mutationKey: key,
onError: (error) => {
expectTypeOf(error).toEqualTypeOf()
},
@@ -50,19 +54,21 @@ describe('mutationOptions', () => {
})
it('should infer types for variables', () => {
+ const key = queryKey()
mutationOptions({
mutationFn: (vars) => {
expectTypeOf(vars).toEqualTypeOf<{ id: string }>()
return Promise.resolve(5)
},
- mutationKey: ['with-vars'],
+ mutationKey: key,
})
})
it('should infer result type correctly', () => {
+ const key = queryKey()
mutationOptions({
mutationFn: () => Promise.resolve(5),
- mutationKey: ['key'],
+ mutationKey: key,
onMutate: () => {
return { name: 'onMutateResult' }
},
@@ -73,12 +79,13 @@ describe('mutationOptions', () => {
})
it('should infer context type correctly', () => {
+ const key = queryKey()
mutationOptions({
mutationFn: (_variables, context) => {
expectTypeOf(context).toEqualTypeOf()
return Promise.resolve(5)
},
- mutationKey: ['key'],
+ mutationKey: key,
onMutate: (_variables, context) => {
expectTypeOf(context).toEqualTypeOf()
},
@@ -113,10 +120,11 @@ describe('mutationOptions', () => {
})
it('should infer all types when not explicitly provided', () => {
+ const key = queryKey()
expectTypeOf(
mutationOptions({
mutationFn: (id: string) => Promise.resolve(id.length),
- mutationKey: ['key'],
+ mutationKey: key,
onSuccess: (data) => {
expectTypeOf(data).toEqualTypeOf()
},
@@ -140,9 +148,10 @@ describe('mutationOptions', () => {
})
it('should infer types when used with injectMutation', () => {
+ const key = queryKey()
const mutation = injectMutation(() =>
mutationOptions({
- mutationKey: ['key'],
+ mutationKey: key,
mutationFn: () => Promise.resolve('data'),
onSuccess: (data) => {
expectTypeOf(data).toEqualTypeOf()
@@ -166,9 +175,10 @@ describe('mutationOptions', () => {
})
it('should infer types when used with injectIsMutating', () => {
+ const key = queryKey()
const isMutating = injectIsMutating(
mutationOptions({
- mutationKey: ['key'],
+ mutationKey: key,
mutationFn: () => Promise.resolve(5),
}),
)
@@ -183,11 +193,12 @@ describe('mutationOptions', () => {
})
it('should infer types when used with queryClient.isMutating', () => {
+ const key = queryKey()
const queryClient = new QueryClient()
const isMutating = queryClient.isMutating(
mutationOptions({
- mutationKey: ['key'],
+ mutationKey: key,
mutationFn: () => Promise.resolve(5),
}),
)
@@ -202,9 +213,10 @@ describe('mutationOptions', () => {
})
it('should infer types when used with injectMutationState', () => {
+ const key = queryKey()
const mutationState = injectMutationState(() => ({
filters: mutationOptions({
- mutationKey: ['key'],
+ mutationKey: key,
mutationFn: () => Promise.resolve(5),
}),
}))
diff --git a/packages/angular-query-experimental/src/__tests__/mutation-options.test.ts b/packages/angular-query-experimental/src/__tests__/mutation-options.test.ts
index e07b371c6a6..538e353852b 100644
--- a/packages/angular-query-experimental/src/__tests__/mutation-options.test.ts
+++ b/packages/angular-query-experimental/src/__tests__/mutation-options.test.ts
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { provideZonelessChangeDetection } from '@angular/core'
import { TestBed } from '@angular/core/testing'
import { QueryClient } from '@tanstack/query-core'
-import { sleep } from '@tanstack/query-test-utils'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
import {
injectIsMutating,
injectMutation,
@@ -31,8 +31,9 @@ describe('mutationOptions', () => {
})
it('should return the object received as a parameter without any modification (with mutationKey in mutationOptions)', () => {
+ const key = queryKey()
const object: CreateMutationOptions = {
- mutationKey: ['key'],
+ mutationKey: key,
mutationFn: () => sleep(10).then(() => 5),
} as const
@@ -48,8 +49,9 @@ describe('mutationOptions', () => {
})
it('should return the number of fetching mutations when used with injectIsMutating (with mutationKey in mutationOptions)', async () => {
+ const key = queryKey()
const mutationOpts = mutationOptions({
- mutationKey: ['key'],
+ mutationKey: key,
mutationFn: () => sleep(50).then(() => 'data'),
})
@@ -89,8 +91,9 @@ describe('mutationOptions', () => {
})
it('should return the number of fetching mutations when used with injectIsMutating', async () => {
+ const key = queryKey()
const mutationOpts1 = mutationOptions({
- mutationKey: ['key'],
+ mutationKey: key,
mutationFn: () => sleep(50).then(() => 'data1'),
})
const mutationOpts2 = mutationOptions({
@@ -117,8 +120,9 @@ describe('mutationOptions', () => {
})
it('should return the number of fetching mutations when used with injectIsMutating (filter mutationOpts1.mutationKey)', async () => {
+ const key = queryKey()
const mutationOpts1 = mutationOptions({
- mutationKey: ['key'],
+ mutationKey: key,
mutationFn: () => sleep(50).then(() => 'data1'),
})
const mutationOpts2 = mutationOptions({
@@ -145,8 +149,9 @@ describe('mutationOptions', () => {
})
it('should return the number of fetching mutations when used with queryClient.isMutating (with mutationKey in mutationOptions)', async () => {
+ const key = queryKey()
const mutationOpts = mutationOptions({
- mutationKey: ['mutation'],
+ mutationKey: key,
mutationFn: () => sleep(500).then(() => 'data'),
})
@@ -180,8 +185,9 @@ describe('mutationOptions', () => {
})
it('should return the number of fetching mutations when used with queryClient.isMutating', async () => {
+ const key = queryKey()
const mutationOpts1 = mutationOptions({
- mutationKey: ['mutation'],
+ mutationKey: key,
mutationFn: () => sleep(500).then(() => 'data1'),
})
const mutationOpts2 = mutationOptions({
@@ -203,8 +209,9 @@ describe('mutationOptions', () => {
})
it('should return the number of fetching mutations when used with queryClient.isMutating (filter mutationOpt1.mutationKey)', async () => {
+ const key = queryKey()
const mutationOpts1 = mutationOptions({
- mutationKey: ['mutation'],
+ mutationKey: key,
mutationFn: () => sleep(500).then(() => 'data1'),
})
const mutationOpts2 = mutationOptions({
@@ -232,8 +239,9 @@ describe('mutationOptions', () => {
})
it('should return the number of fetching mutations when used with injectMutationState (with mutationKey in mutationOptions)', async () => {
+ const key = queryKey()
const mutationOpts = mutationOptions({
- mutationKey: ['mutation'],
+ mutationKey: key,
mutationFn: () => sleep(10).then(() => 'data'),
})
@@ -273,8 +281,9 @@ describe('mutationOptions', () => {
})
it('should return the number of fetching mutations when used with injectMutationState', async () => {
+ const key = queryKey()
const mutationOpts1 = mutationOptions({
- mutationKey: ['mutation'],
+ mutationKey: key,
mutationFn: () => sleep(10).then(() => 'data1'),
})
const mutationOpts2 = mutationOptions({
@@ -302,8 +311,9 @@ describe('mutationOptions', () => {
})
it('should return the number of fetching mutations when used with injectMutationState (filter mutationOpt1.mutationKey)', async () => {
+ const key = queryKey()
const mutationOpts1 = mutationOptions({
- mutationKey: ['mutation'],
+ mutationKey: key,
mutationFn: () => sleep(10).then(() => 'data1'),
})
const mutationOpts2 = mutationOptions({
diff --git a/packages/angular-query-experimental/src/__tests__/pending-tasks.test.ts b/packages/angular-query-experimental/src/__tests__/pending-tasks.test.ts
index 92f70aed9f3..c5a1f58d81f 100644
--- a/packages/angular-query-experimental/src/__tests__/pending-tasks.test.ts
+++ b/packages/angular-query-experimental/src/__tests__/pending-tasks.test.ts
@@ -9,8 +9,8 @@ import {
HttpTestingController,
provideHttpClientTesting,
} from '@angular/common/http/testing'
-import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
-import { sleep } from '@tanstack/query-test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { queryKey, sleep } from '@tanstack/query-test-utils'
import { lastValueFrom } from 'rxjs'
import {
QueryClient,
@@ -47,17 +47,18 @@ describe('PendingTasks Integration', () => {
afterEach(() => {
onlineManager.setOnline(true)
- vi.useRealTimers()
queryClient.clear()
+ vi.useRealTimers()
})
describe('Synchronous Resolution', () => {
- test('should handle synchronous queryFn with whenStable()', async () => {
+ it('should handle synchronous queryFn with whenStable()', async () => {
const app = TestBed.inject(ApplicationRef)
+ const key = queryKey()
const query = TestBed.runInInjectionContext(() =>
injectQuery(() => ({
- queryKey: ['sync'],
+ queryKey: key,
queryFn: () => 'instant-data', // Resolves synchronously
})),
)
@@ -77,12 +78,13 @@ describe('PendingTasks Integration', () => {
expect(query.data()).toBe('instant-data')
})
- test('should handle synchronous error with whenStable()', async () => {
+ it('should handle synchronous error with whenStable()', async () => {
const app = TestBed.inject(ApplicationRef)
+ const key = queryKey()
const query = TestBed.runInInjectionContext(() =>
injectQuery(() => ({
- queryKey: ['sync-error'],
+ queryKey: key,
queryFn: () => {
throw new Error('instant-error')
}, // Throws synchronously
@@ -99,7 +101,7 @@ describe('PendingTasks Integration', () => {
expect(query.error()).toEqual(new Error('instant-error'))
})
- test('should handle synchronous mutationFn with whenStable()', async () => {
+ it('should handle synchronous mutationFn with whenStable()', async () => {
const app = TestBed.inject(ApplicationRef)
let mutationFnCalled = false
@@ -127,7 +129,7 @@ describe('PendingTasks Integration', () => {
expect(mutation.data()).toBe('processed: test')
})
- test('should handle synchronous mutation error with whenStable()', async () => {
+ it('should handle synchronous mutation error with whenStable()', async () => {
const app = TestBed.inject(ApplicationRef)
const mutation = TestBed.runInInjectionContext(() =>
@@ -154,7 +156,8 @@ describe('PendingTasks Integration', () => {
})
describe('Race Conditions', () => {
- test('should handle query that completes during initial subscription', async () => {
+ it('should handle query that completes during initial subscription', async () => {
+ const key = queryKey()
const app = TestBed.inject(ApplicationRef)
let resolveQuery: (value: string) => void
@@ -164,7 +167,7 @@ describe('PendingTasks Integration', () => {
const query = TestBed.runInInjectionContext(() =>
injectQuery(() => ({
- queryKey: ['race-condition'],
+ queryKey: key,
queryFn: () => queryPromise,
})),
)
@@ -181,13 +184,14 @@ describe('PendingTasks Integration', () => {
expect(query.data()).toBe('race-data')
})
- test('should handle rapid refetches without task leaks', async () => {
+ it('should handle rapid refetches without task leaks', async () => {
const app = TestBed.inject(ApplicationRef)
let callCount = 0
+ const key = queryKey()
const query = TestBed.runInInjectionContext(() =>
injectQuery(() => ({
- queryKey: ['rapid-refetch'],
+ queryKey: key,
queryFn: async () => {
callCount++
await sleep(10)
@@ -209,13 +213,14 @@ describe('PendingTasks Integration', () => {
expect(query.data()).toMatch(/^data-\d+$/)
})
- test('should keep PendingTasks active while query retry is paused offline', async () => {
+ it('should keep PendingTasks active while query retry is paused offline', async () => {
const app = TestBed.inject(ApplicationRef)
let attempt = 0
+ const key = queryKey()
const query = TestBed.runInInjectionContext(() =>
injectQuery(() => ({
- queryKey: ['paused-offline'],
+ queryKey: key,
retry: 1,
retryDelay: 50, // Longer delay to ensure we can go offline before retry
queryFn: async () => {
@@ -283,21 +288,16 @@ describe('PendingTasks Integration', () => {
class TestComponent {
query = injectQuery(() => ({
queryKey: ['component-query'],
- queryFn: async () => {
- await sleep(100)
- return 'component-data'
- },
+ queryFn: () => sleep(100).then(() => 'component-data'),
}))
mutation = injectMutation(() => ({
- mutationFn: async (data: string) => {
- await sleep(100)
- return `processed: ${data}`
- },
+ mutationFn: (data: string) =>
+ sleep(100).then(() => `processed: ${data}`),
}))
}
- test('should cleanup pending tasks when component with active query is destroyed', async () => {
+ it('should cleanup pending tasks when component with active query is destroyed', async () => {
const app = TestBed.inject(ApplicationRef)
const fixture = TestBed.createComponent(TestComponent)
@@ -314,7 +314,7 @@ describe('PendingTasks Integration', () => {
await expect(stablePromise).resolves.toEqual(undefined)
})
- test('should cleanup pending tasks when component with active mutation is destroyed', async () => {
+ it('should cleanup pending tasks when component with active mutation is destroyed', async () => {
const app = TestBed.inject(ApplicationRef)
const fixture = TestBed.createComponent(TestComponent)
@@ -332,32 +332,29 @@ describe('PendingTasks Integration', () => {
})
describe('Concurrent Operations', () => {
- test('should handle multiple queries running simultaneously', async () => {
+ it('should handle multiple queries running simultaneously', async () => {
+ const key1 = queryKey()
+ const key2 = queryKey()
+ const key3 = queryKey()
const app = TestBed.inject(ApplicationRef)
const query1 = TestBed.runInInjectionContext(() =>
injectQuery(() => ({
- queryKey: ['concurrent-1'],
- queryFn: async () => {
- await sleep(30)
- return 'data-1'
- },
+ queryKey: key1,
+ queryFn: () => sleep(30).then(() => 'data-1'),
})),
)
const query2 = TestBed.runInInjectionContext(() =>
injectQuery(() => ({
- queryKey: ['concurrent-2'],
- queryFn: async () => {
- await sleep(50)
- return 'data-2'
- },
+ queryKey: key2,
+ queryFn: () => sleep(50).then(() => 'data-2'),
})),
)
const query3 = TestBed.runInInjectionContext(() =>
injectQuery(() => ({
- queryKey: ['concurrent-3'],
+ queryKey: key3,
queryFn: () => 'instant-data', // Synchronous
})),
)
@@ -380,24 +377,20 @@ describe('PendingTasks Integration', () => {
expect(query3.data()).toBe('instant-data')
})
- test('should handle multiple mutations running simultaneously', async () => {
+ it('should handle multiple mutations running simultaneously', async () => {
const app = TestBed.inject(ApplicationRef)
const mutation1 = TestBed.runInInjectionContext(() =>
injectMutation(() => ({
- mutationFn: async (data: string) => {
- await sleep(30)
- return `processed-1: ${data}`
- },
+ mutationFn: (data: string) =>
+ sleep(30).then(() => `processed-1: ${data}`),
})),
)
const mutation2 = TestBed.runInInjectionContext(() =>
injectMutation(() => ({
- mutationFn: async (data: string) => {
- await sleep(50)
- return `processed-2: ${data}`
- },
+ mutationFn: (data: string) =>
+ sleep(50).then(() => `processed-2: ${data}`),
})),
)
@@ -430,25 +423,21 @@ describe('PendingTasks Integration', () => {
expect(mutation3.data()).toBe('processed-3: test3')
})
- test('should handle mixed queries and mutations', async () => {
+ it('should handle mixed queries and mutations', async () => {
const app = TestBed.inject(ApplicationRef)
+ const key = queryKey()
const query = TestBed.runInInjectionContext(() =>
injectQuery(() => ({
- queryKey: ['mixed-query'],
- queryFn: async () => {
- await sleep(40)
- return 'query-data'
- },
+ queryKey: key,
+ queryFn: () => sleep(40).then(() => 'query-data'),
})),
)
const mutation = TestBed.runInInjectionContext(() =>
injectMutation(() => ({
- mutationFn: async (data: string) => {
- await sleep(60)
- return `mutation: ${data}`
- },
+ mutationFn: (data: string) =>
+ sleep(60).then(() => `mutation: ${data}`),
})),
)
@@ -469,25 +458,22 @@ describe('PendingTasks Integration', () => {
describe('HttpClient Integration', () => {
beforeEach(() => {
- TestBed.resetTestingModule()
TestBed.configureTestingModule({
- providers: [
- provideZonelessChangeDetection(),
- provideTanStackQuery(queryClient),
- provideHttpClient(),
- provideHttpClientTesting(),
- ],
+ providers: [provideHttpClient(), provideHttpClientTesting()],
})
})
- test('should handle multiple HttpClient requests with lastValueFrom', async () => {
+ it('should handle multiple HttpClient requests with lastValueFrom', async () => {
const app = TestBed.inject(ApplicationRef)
const httpClient = TestBed.inject(HttpClient)
const httpTestingController = TestBed.inject(HttpTestingController)
+ const key1 = queryKey()
+ const key2 = queryKey()
+
const query1 = TestBed.runInInjectionContext(() =>
injectQuery(() => ({
- queryKey: ['http-1'],
+ queryKey: key1,
queryFn: () =>
lastValueFrom(httpClient.get<{ id: number }>('/api/1')),
})),
@@ -495,7 +481,7 @@ describe('PendingTasks Integration', () => {
const query2 = TestBed.runInInjectionContext(() =>
injectQuery(() => ({
- queryKey: ['http-2'],
+ queryKey: key2,
queryFn: () =>
lastValueFrom(httpClient.get<{ id: number }>('/api/2')),
})),
@@ -522,14 +508,15 @@ describe('PendingTasks Integration', () => {
httpTestingController.verify()
})
- test('should handle HttpClient request cancellation', async () => {
+ it('should handle HttpClient request cancellation', async () => {
const app = TestBed.inject(ApplicationRef)
const httpClient = TestBed.inject(HttpClient)
const httpTestingController = TestBed.inject(HttpTestingController)
+ const key = queryKey()
const query = TestBed.runInInjectionContext(() =>
injectQuery(() => ({
- queryKey: ['http-cancel'],
+ queryKey: key,
queryFn: () =>
lastValueFrom(httpClient.get<{ data: string }>('/api/cancel')),
})),
@@ -555,22 +542,20 @@ describe('PendingTasks Integration', () => {
})
describe('Edge Cases', () => {
- test('should handle query cancellation mid-flight', async () => {
+ it('should handle query cancellation mid-flight', async () => {
+ const key = queryKey()
const app = TestBed.inject(ApplicationRef)
const query = TestBed.runInInjectionContext(() =>
injectQuery(() => ({
- queryKey: ['cancel-test'],
- queryFn: async () => {
- await sleep(100)
- return 'data'
- },
+ queryKey: key,
+ queryFn: () => sleep(100).then(() => 'data'),
})),
)
// Cancel the query after a short delay
setTimeout(() => {
- queryClient.cancelQueries({ queryKey: ['cancel-test'] })
+ queryClient.cancelQueries({ queryKey: key })
}, 20)
// Advance to the cancellation point
@@ -587,13 +572,14 @@ describe('PendingTasks Integration', () => {
expect(query.fetchStatus()).toBe('idle')
})
- test('should handle query retry and pending task tracking', async () => {
+ it('should handle query retry and pending task tracking', async () => {
const app = TestBed.inject(ApplicationRef)
let attemptCount = 0
+ const key = queryKey()
const query = TestBed.runInInjectionContext(() =>
injectQuery(() => ({
- queryKey: ['retry-test'],
+ queryKey: key,
retry: 2,
retryDelay: 10,
queryFn: async () => {
@@ -615,18 +601,15 @@ describe('PendingTasks Integration', () => {
expect(attemptCount).toBe(3) // Initial + 2 retries
})
- test('should handle mutation with optimistic updates', async () => {
+ it('should handle mutation with optimistic updates', async () => {
const app = TestBed.inject(ApplicationRef)
- const testQueryKey = ['optimistic-test']
+ const testQueryKey = queryKey()
queryClient.setQueryData(testQueryKey, 'initial-data')
const mutation = TestBed.runInInjectionContext(() =>
injectMutation(() => ({
- mutationFn: async (newData: string) => {
- await sleep(50)
- return newData
- },
+ mutationFn: (newData: string) => sleep(50).then(() => newData),
onMutate: async (newData) => {
// Optimistic update
const previousData = queryClient.getQueryData(testQueryKey)
diff --git a/packages/angular-query-experimental/src/__tests__/provide-query-client.test.ts b/packages/angular-query-experimental/src/__tests__/provide-query-client.test.ts
index 2ea84e4b3f9..5253274de34 100644
--- a/packages/angular-query-experimental/src/__tests__/provide-query-client.test.ts
+++ b/packages/angular-query-experimental/src/__tests__/provide-query-client.test.ts
@@ -1,11 +1,11 @@
import { TestBed } from '@angular/core/testing'
-import { describe, expect, test } from 'vitest'
+import { describe, expect, it } from 'vitest'
import { InjectionToken, provideZonelessChangeDetection } from '@angular/core'
import { QueryClient } from '@tanstack/query-core'
import { provideQueryClient } from '../providers'
describe('provideQueryClient', () => {
- test('should provide a QueryClient instance directly', () => {
+ it('should provide a QueryClient instance directly', () => {
const queryClient = new QueryClient()
TestBed.configureTestingModule({
@@ -19,7 +19,7 @@ describe('provideQueryClient', () => {
expect(providedQueryClient).toBe(queryClient)
})
- test('should provide a QueryClient instance using an InjectionToken', () => {
+ it('should provide a QueryClient instance using an InjectionToken', () => {
const queryClient = new QueryClient()
const CUSTOM_QUERY_CLIENT = new InjectionToken('', {
factory: () => queryClient,
diff --git a/packages/angular-query-experimental/src/__tests__/provide-tanstack-query.test.ts b/packages/angular-query-experimental/src/__tests__/provide-tanstack-query.test.ts
index 1f6cf582ba5..ff1cf4324fc 100644
--- a/packages/angular-query-experimental/src/__tests__/provide-tanstack-query.test.ts
+++ b/packages/angular-query-experimental/src/__tests__/provide-tanstack-query.test.ts
@@ -1,11 +1,11 @@
import { TestBed } from '@angular/core/testing'
-import { describe, expect, test } from 'vitest'
+import { describe, expect, it } from 'vitest'
import { InjectionToken, provideZonelessChangeDetection } from '@angular/core'
import { QueryClient } from '@tanstack/query-core'
import { provideTanStackQuery } from '../providers'
describe('provideTanStackQuery', () => {
- test('should provide a QueryClient instance directly', () => {
+ it('should provide a QueryClient instance directly', () => {
const queryClient = new QueryClient()
TestBed.configureTestingModule({
@@ -19,7 +19,7 @@ describe('provideTanStackQuery', () => {
expect(providedQueryClient).toBe(queryClient)
})
- test('should provide a QueryClient instance using an InjectionToken', () => {
+ it('should provide a QueryClient instance using an InjectionToken', () => {
const queryClient = new QueryClient()
const CUSTOM_QUERY_CLIENT = new InjectionToken('', {
factory: () => queryClient,
diff --git a/packages/angular-query-experimental/src/__tests__/query-options.test-d.ts b/packages/angular-query-experimental/src/__tests__/query-options.test-d.ts
index 350ab3dda28..8642cf07d72 100644
--- a/packages/angular-query-experimental/src/__tests__/query-options.test-d.ts
+++ b/packages/angular-query-experimental/src/__tests__/query-options.test-d.ts
@@ -1,15 +1,17 @@
-import { assertType, describe, expectTypeOf, test } from 'vitest'
+import { assertType, describe, expectTypeOf, it } from 'vitest'
+import { queryKey } from '@tanstack/query-test-utils'
import { QueryClient, dataTagSymbol, injectQuery, queryOptions } from '..'
import type { Signal } from '@angular/core'
describe('queryOptions', () => {
- test('should not allow excess properties', () => {
+ it('should not allow excess properties', () => {
expectTypeOf(queryOptions).parameter(0).not.toHaveProperty('stallTime')
})
- test('should infer types for callbacks', () => {
+ it('should infer types for callbacks', () => {
+ const key = queryKey()
queryOptions({
- queryKey: ['key'],
+ queryKey: key,
queryFn: () => Promise.resolve(5),
staleTime: 1000,
select: (data) => {
@@ -18,10 +20,11 @@ describe('queryOptions', () => {
})
})
- test('should allow undefined response in initialData', () => {
+ it('should allow undefined response in initialData', () => {
+ const key = queryKey()
const options = (id: string | null) =>
queryOptions({
- queryKey: ['todo', id],
+ queryKey: [...key, id],
queryFn: () =>
Promise.resolve({
id: '1',
@@ -42,9 +45,10 @@ describe('queryOptions', () => {
})
})
-test('should work when passed to injectQuery', () => {
+it('should work when passed to injectQuery', () => {
+ const key = queryKey()
const options = queryOptions({
- queryKey: ['key'],
+ queryKey: key,
queryFn: () => Promise.resolve(5),
})
@@ -52,9 +56,10 @@ test('should work when passed to injectQuery', () => {
expectTypeOf(data).toEqualTypeOf