Improve tests · TanStack/query@39b8ae7 · GitHub
Skip to content

Commit 39b8ae7

Browse files
arnoud-dvarnoud-dv
committed
Improve tests
1 parent f911999 commit 39b8ae7

14 files changed

Lines changed: 233 additions & 244 deletions

File tree

‎docs/framework/angular/guides/testing.md‎

Lines changed: 9 additions & 1 deletion

‎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
})

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

Lines changed: 49 additions & 20 deletions

0 commit comments

Comments
 (0)