Skip to content

Commit 75cb8ca

Browse files
committed
Improve tests
1 parent f911999 commit 75cb8ca

File tree

16 files changed

+216
-248
lines changed

16 files changed

+216
-248
lines changed

docs/framework/angular/guides/testing.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ TanStack Query's `inject*` functions integrate with [`PendingTasks`](https://ang
99

1010
This means tests and SSR can wait until mutations and queries resolve. In unit tests you can use `ApplicationRef.whenStable()` or `fixture.whenStable()` to await query completion. This works for both Zone.js and Zoneless setups.
1111

12-
> This integration requires Angular 19 or later. Earlier versions of Angular do not support `PendingTasks`.
13-
1412
## TestBed setup
1513

1614
Create a fresh `QueryClient` for every spec and provide it with `provideTanStackQuery` or `provideQueryClient`. This keeps caches isolated and lets you change default options per test:
@@ -31,7 +29,7 @@ TestBed.configureTestingModule({
3129

3230
> If your applications actual TanStack Query config is used in unit tests, make sure `withDevtools` is not accidentally included in test providers. This can cause slow tests. It is best to keep test and production configs separate.
3331
34-
If you share helpers, remember to call `queryClient.clear()` (or build a new instance) in `afterEach` so data from one test never bleeds into another.
32+
If you share helpers, remember to call `queryClient.clear()` (or build a new instance) in `afterEach` so data from one test never bleeds into another. Prefer creating a fresh `QueryClient` per test: clearing only removes cached data, not custom defaults or listeners, so a reused client can leak configuration changes between specs and make failures harder to reason about. A new client keeps setup explicit and avoids any “invisible globals” influencing results.
3533

3634
## First query test
3735

docs/framework/angular/installation.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ title: Installation
77
88
### NPM
99

10-
_Angular Query is compatible with Angular v16 and higher_
10+
_Angular Query is compatible with Angular v19 and higher_
1111

1212
```bash
1313
npm i @tanstack/angular-query-experimental

docs/framework/angular/overview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ We are in the process of getting to a stable API for TanStack Query on Angular.
1313

1414
## Supported Angular Versions
1515

16-
TanStack Query is compatible with Angular v16 and higher.
16+
TanStack Query is compatible with Angular v19 and higher.
1717

1818
TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes **fetching, caching, synchronizing and updating server state** in your web applications a breeze.
1919

examples/angular/infinite-query-with-max-pages/src/app/components/example.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export class ExampleComponent {
4242
)
4343

4444
readonly previousButtonDisabled = computed(
45-
() => !this.query.hasPreviousPage() || this.query.isFetchingNextPage(),
45+
() => !this.query.hasPreviousPage() || this.query.isFetchingPreviousPage(),
4646
)
4747
readonly previousButtonText = computed(() =>
4848
this.query.isFetchingPreviousPage()

packages/angular-query-experimental/src/__tests__/inject-devtools-panel.test.ts

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
1-
import {
2-
ElementRef,
3-
provideZonelessChangeDetection,
4-
signal,
5-
} from '@angular/core'
1+
import { ElementRef, signal } from '@angular/core'
62
import { TestBed } from '@angular/core/testing'
73
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
84
import { QueryClient } from '@tanstack/query-core'
9-
import { provideTanStackQuery } from '../providers'
105
import { injectDevtoolsPanel } from '../devtools-panel'
6+
import { setupTanStackQueryTestBed } from './test-utils'
117

128
const mockDevtoolsPanelInstance = {
139
mount: vi.fn(),
@@ -40,12 +36,8 @@ describe('injectDevtoolsPanel', () => {
4036
beforeEach(() => {
4137
queryClient = new QueryClient()
4238
mockElementRef = new ElementRef(document.createElement('div'))
43-
TestBed.configureTestingModule({
44-
providers: [
45-
provideZonelessChangeDetection(),
46-
provideTanStackQuery(queryClient),
47-
{ provide: ElementRef, useValue: signal(mockElementRef) },
48-
],
39+
setupTanStackQueryTestBed(queryClient, {
40+
providers: [{ provide: ElementRef, useValue: signal(mockElementRef) }],
4941
})
5042
})
5143

packages/angular-query-experimental/src/__tests__/inject-infinite-query.test.ts

Lines changed: 19 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,17 @@
11
import { TestBed } from '@angular/core/testing'
22
import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
3-
import {
4-
ChangeDetectionStrategy,
5-
Component,
6-
Injector,
7-
provideZonelessChangeDetection,
8-
} from '@angular/core'
3+
import { ChangeDetectionStrategy, Component, Injector } from '@angular/core'
94
import { sleep } from '@tanstack/query-test-utils'
10-
import { QueryClient, injectInfiniteQuery, provideTanStackQuery } from '..'
11-
import { expectSignals } from './test-utils'
5+
import { QueryClient, injectInfiniteQuery } from '..'
6+
import { expectSignals, setupTanStackQueryTestBed } from './test-utils'
127

138
describe('injectInfiniteQuery', () => {
149
let queryClient: QueryClient
1510

1611
beforeEach(() => {
1712
queryClient = new QueryClient()
1813
vi.useFakeTimers()
19-
TestBed.configureTestingModule({
20-
providers: [
21-
provideZonelessChangeDetection(),
22-
provideTanStackQuery(queryClient),
23-
],
24-
})
14+
setupTanStackQueryTestBed(queryClient)
2515
})
2616

2717
afterEach(() => {
@@ -32,7 +22,6 @@ describe('injectInfiniteQuery', () => {
3222
@Component({
3323
selector: 'app-test',
3424
template: '',
35-
standalone: true,
3625
changeDetection: ChangeDetectionStrategy.OnPush,
3726
})
3827
class TestComponent {
@@ -93,30 +82,21 @@ describe('injectInfiniteQuery', () => {
9382
test('can be used outside injection context when passing an injector', () => {
9483
const injector = TestBed.inject(Injector)
9584

96-
@Component({
97-
selector: 'app-test',
98-
template: '',
99-
standalone: true,
100-
changeDetection: ChangeDetectionStrategy.OnPush,
101-
})
102-
class TestComponent {
103-
query = injectInfiniteQuery(
104-
() => ({
105-
queryKey: ['manualInjector'],
106-
queryFn: ({ pageParam }) =>
107-
sleep(0).then(() => 'data on page ' + pageParam),
108-
initialPageParam: 0,
109-
getNextPageParam: () => 12,
110-
}),
111-
{
112-
injector: injector,
113-
},
114-
)
115-
}
116-
117-
const fixture = TestBed.createComponent(TestComponent)
118-
fixture.detectChanges()
119-
const query = fixture.componentInstance.query
85+
// Call injectInfiniteQuery directly outside any component
86+
const query = injectInfiniteQuery(
87+
() => ({
88+
queryKey: ['manualInjector'],
89+
queryFn: ({ pageParam }) =>
90+
sleep(0).then(() => 'data on page ' + pageParam),
91+
initialPageParam: 0,
92+
getNextPageParam: () => 12,
93+
}),
94+
{
95+
injector: injector,
96+
},
97+
)
98+
99+
TestBed.tick()
120100

121101
expect(query.status()).toBe('pending')
122102
})

packages/angular-query-experimental/src/__tests__/inject-is-fetching.test.ts

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import { TestBed } from '@angular/core/testing'
22
import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
3-
import { Injector, provideZonelessChangeDetection } from '@angular/core'
3+
import { Injector } from '@angular/core'
44
import { sleep } from '@tanstack/query-test-utils'
5-
import {
6-
QueryClient,
7-
injectIsFetching,
8-
injectQuery,
9-
provideTanStackQuery,
10-
} from '..'
5+
import { QueryClient, injectIsFetching, injectQuery } from '..'
6+
import { setupTanStackQueryTestBed } from './test-utils'
117

128
describe('injectIsFetching', () => {
139
let queryClient: QueryClient
@@ -16,12 +12,7 @@ describe('injectIsFetching', () => {
1612
vi.useFakeTimers()
1713
queryClient = new QueryClient()
1814

19-
TestBed.configureTestingModule({
20-
providers: [
21-
provideZonelessChangeDetection(),
22-
provideTanStackQuery(queryClient),
23-
],
24-
})
15+
setupTanStackQueryTestBed(queryClient)
2516
})
2617

2718
afterEach(() => {

packages/angular-query-experimental/src/__tests__/inject-is-mutating.test.ts

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
22
import { TestBed } from '@angular/core/testing'
3-
import { Injector, provideZonelessChangeDetection } from '@angular/core'
3+
import { Injector } from '@angular/core'
44
import { sleep } from '@tanstack/query-test-utils'
5-
import {
6-
QueryClient,
7-
injectIsMutating,
8-
injectMutation,
9-
provideTanStackQuery,
10-
} from '..'
5+
import { QueryClient, injectIsMutating, injectMutation } from '..'
6+
import { flushQueryUpdates, setupTanStackQueryTestBed } from './test-utils'
117

128
describe('injectIsMutating', () => {
139
let queryClient: QueryClient
@@ -16,12 +12,7 @@ describe('injectIsMutating', () => {
1612
vi.useFakeTimers()
1713
queryClient = new QueryClient()
1814

19-
TestBed.configureTestingModule({
20-
providers: [
21-
provideZonelessChangeDetection(),
22-
provideTanStackQuery(queryClient),
23-
],
24-
})
15+
setupTanStackQueryTestBed(queryClient)
2516
})
2617

2718
afterEach(() => {
@@ -44,7 +35,7 @@ describe('injectIsMutating', () => {
4435
})
4536

4637
expect(isMutating()).toBe(0)
47-
await vi.advanceTimersByTimeAsync(0)
38+
await flushQueryUpdates()
4839
expect(isMutating()).toBe(1)
4940
await vi.advanceTimersByTimeAsync(11)
5041
expect(isMutating()).toBe(0)

packages/angular-query-experimental/src/__tests__/inject-mutation-state.test.ts

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,14 @@ import {
88
} from '@angular/core'
99
import { TestBed } from '@angular/core/testing'
1010
import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
11-
import { By } from '@angular/platform-browser'
1211
import { sleep } from '@tanstack/query-test-utils'
1312
import {
1413
QueryClient,
1514
injectMutation,
1615
injectMutationState,
1716
provideTanStackQuery,
1817
} from '..'
19-
import { setFixtureSignalInputs } from './test-utils'
18+
import { registerSignalInput } from './test-utils'
2019

2120
describe('injectMutationState', () => {
2221
let queryClient: QueryClient
@@ -159,23 +158,35 @@ describe('injectMutationState', () => {
159158
}))
160159
}
161160

162-
const fixture = TestBed.createComponent(FakeComponent)
163-
const { debugElement } = fixture
164-
setFixtureSignalInputs(fixture, { name: fakeName })
161+
registerSignalInput(FakeComponent, 'name')
162+
163+
@Component({
164+
template: `<app-fake [name]="name()" />`,
165+
imports: [FakeComponent],
166+
})
167+
class HostComponent {
168+
protected readonly name = signal(fakeName)
169+
}
170+
171+
const fixture = TestBed.createComponent(HostComponent)
172+
fixture.detectChanges()
165173
await vi.advanceTimersByTimeAsync(0)
166174

167-
let spans = debugElement
168-
.queryAll(By.css('span'))
169-
.map((span) => span.nativeNode.textContent)
175+
const readSpans = () =>
176+
Array.from(
177+
fixture.nativeElement.querySelectorAll(
178+
'span',
179+
) as NodeListOf<HTMLSpanElement>,
180+
).map((span) => span.textContent)
181+
182+
let spans = readSpans()
170183

171184
expect(spans).toEqual(['pending', 'pending'])
172185

173186
await vi.advanceTimersByTimeAsync(11)
174187
fixture.detectChanges()
175188

176-
spans = debugElement
177-
.queryAll(By.css('span'))
178-
.map((span) => span.nativeNode.textContent)
189+
spans = readSpans()
179190

180191
expect(spans).toEqual(['success', 'error'])
181192
})

0 commit comments

Comments
 (0)