Improve tests

Author: arnoud-dv

docs/framework/angular/guides/testing.md

@@ -31,7 +31,7 @@ TestBed.configureTestingModule({
 
 > 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.
 
-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.
+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. We generally 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.
 
 ## First query test
 
@@ -63,6 +63,14 @@ await Promise.resolve()
 await appRef.whenStable()
 ```
 
+In the Angular Query repo we wrap this pattern in a `flushQueryUpdates()` helper (see `packages/angular-query-experimental/src/__tests__/test-utils.ts`) so every spec documents why the extra tick is required:
+
+```ts
+TestBed.tick()
+await flushQueryUpdates()
+await appRef.whenStable()
+```
+
 ## Testing components
 
 For components, bootstrap them through `TestBed.createComponent`, then await `fixture.whenStable()`:

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

@@ -42,7 +42,7 @@ export class ExampleComponent {
   )
 
   readonly previousButtonDisabled = computed(
-    () => !this.query.hasPreviousPage() || this.query.isFetchingNextPage(),
+    () => !this.query.hasPreviousPage() || this.query.isFetchingPreviousPage(),
   )
   readonly previousButtonText = computed(() =>
     this.query.isFetchingPreviousPage()

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

@@ -1,13 +1,9 @@
-import {
-  ElementRef,
-  provideZonelessChangeDetection,
-  signal,
-} from '@angular/core'
+import { ElementRef, signal } from '@angular/core'
 import { TestBed } from '@angular/core/testing'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { QueryClient } from '@tanstack/query-core'
-import { provideTanStackQuery } from '../providers'
 import { injectDevtoolsPanel } from '../devtools-panel'
+import { setupTanStackQueryTestBed } from './test-utils'
 
 const mockDevtoolsPanelInstance = {
   mount: vi.fn(),
@@ -40,12 +36,8 @@ describe('injectDevtoolsPanel', () => {
   beforeEach(() => {
     queryClient = new QueryClient()
     mockElementRef = new ElementRef(document.createElement('div'))
-    TestBed.configureTestingModule({
-      providers: [
-        provideZonelessChangeDetection(),
-        provideTanStackQuery(queryClient),
-        { provide: ElementRef, useValue: signal(mockElementRef) },
-      ],
+    setupTanStackQueryTestBed(queryClient, {
+      providers: [{ provide: ElementRef, useValue: signal(mockElementRef) }],
     })
   })
 

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

@@ -1,27 +1,17 @@
 import { TestBed } from '@angular/core/testing'
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Injector,
-  provideZonelessChangeDetection,
-} from '@angular/core'
+import { ChangeDetectionStrategy, Component, Injector } from '@angular/core'
 import { sleep } from '@tanstack/query-test-utils'
-import { QueryClient, injectInfiniteQuery, provideTanStackQuery } from '..'
-import { expectSignals } from './test-utils'
+import { QueryClient, injectInfiniteQuery } from '..'
+import { expectSignals, setupTanStackQueryTestBed } from './test-utils'
 
 describe('injectInfiniteQuery', () => {
   let queryClient: QueryClient
 
   beforeEach(() => {
     queryClient = new QueryClient()
     vi.useFakeTimers()
-    TestBed.configureTestingModule({
-      providers: [
-        provideZonelessChangeDetection(),
-        provideTanStackQuery(queryClient),
-      ],
-    })
+    setupTanStackQueryTestBed(queryClient)
   })
 
   afterEach(() => {
@@ -32,7 +22,6 @@ describe('injectInfiniteQuery', () => {
     @Component({
       selector: 'app-test',
       template: '',
-      standalone: true,
       changeDetection: ChangeDetectionStrategy.OnPush,
     })
     class TestComponent {
@@ -93,30 +82,21 @@ describe('injectInfiniteQuery', () => {
     test('can be used outside injection context when passing an injector', () => {
       const injector = TestBed.inject(Injector)
 
-      @Component({
-        selector: 'app-test',
-        template: '',
-        standalone: true,
-        changeDetection: ChangeDetectionStrategy.OnPush,
-      })
-      class TestComponent {
-        query = injectInfiniteQuery(
-          () => ({
-            queryKey: ['manualInjector'],
-            queryFn: ({ pageParam }) =>
-              sleep(0).then(() => 'data on page ' + pageParam),
-            initialPageParam: 0,
-            getNextPageParam: () => 12,
-          }),
-          {
-            injector: injector,
-          },
-        )
-      }
-
-      const fixture = TestBed.createComponent(TestComponent)
-      fixture.detectChanges()
-      const query = fixture.componentInstance.query
+      // Call injectInfiniteQuery directly outside any component
+      const query = injectInfiniteQuery(
+        () => ({
+          queryKey: ['manualInjector'],
+          queryFn: ({ pageParam }) =>
+            sleep(0).then(() => 'data on page ' + pageParam),
+          initialPageParam: 0,
+          getNextPageParam: () => 12,
+        }),
+        {
+          injector: injector,
+        },
+      )
+
+      TestBed.tick()
 
       expect(query.status()).toBe('pending')
     })

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

@@ -1,13 +1,9 @@
 import { TestBed } from '@angular/core/testing'
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
-import { Injector, provideZonelessChangeDetection } from '@angular/core'
+import { Injector } from '@angular/core'
 import { sleep } from '@tanstack/query-test-utils'
-import {
-  QueryClient,
-  injectIsFetching,
-  injectQuery,
-  provideTanStackQuery,
-} from '..'
+import { QueryClient, injectIsFetching, injectQuery } from '..'
+import { setupTanStackQueryTestBed } from './test-utils'
 
 describe('injectIsFetching', () => {
   let queryClient: QueryClient
@@ -16,12 +12,7 @@ describe('injectIsFetching', () => {
     vi.useFakeTimers()
     queryClient = new QueryClient()
 
-    TestBed.configureTestingModule({
-      providers: [
-        provideZonelessChangeDetection(),
-        provideTanStackQuery(queryClient),
-      ],
-    })
+    setupTanStackQueryTestBed(queryClient)
   })
 
   afterEach(() => {

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

@@ -1,13 +1,9 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { TestBed } from '@angular/core/testing'
-import { Injector, provideZonelessChangeDetection } from '@angular/core'
+import { Injector } from '@angular/core'
 import { sleep } from '@tanstack/query-test-utils'
-import {
-  QueryClient,
-  injectIsMutating,
-  injectMutation,
-  provideTanStackQuery,
-} from '..'
+import { QueryClient, injectIsMutating, injectMutation } from '..'
+import { flushQueryUpdates, setupTanStackQueryTestBed } from './test-utils'
 
 describe('injectIsMutating', () => {
   let queryClient: QueryClient
@@ -16,12 +12,7 @@ describe('injectIsMutating', () => {
     vi.useFakeTimers()
     queryClient = new QueryClient()
 
-    TestBed.configureTestingModule({
-      providers: [
-        provideZonelessChangeDetection(),
-        provideTanStackQuery(queryClient),
-      ],
-    })
+    setupTanStackQueryTestBed(queryClient)
   })
 
   afterEach(() => {
@@ -44,7 +35,7 @@ describe('injectIsMutating', () => {
     })
 
     expect(isMutating()).toBe(0)
-    await vi.advanceTimersByTimeAsync(0)
+    await flushQueryUpdates()
     expect(isMutating()).toBe(1)
     await vi.advanceTimersByTimeAsync(11)
     expect(isMutating()).toBe(0)

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

@@ -8,15 +8,14 @@ import {
 } from '@angular/core'
 import { TestBed } from '@angular/core/testing'
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
-import { By } from '@angular/platform-browser'
 import { sleep } from '@tanstack/query-test-utils'
 import {
   QueryClient,
   injectMutation,
   injectMutationState,
   provideTanStackQuery,
 } from '..'
-import { setFixtureSignalInputs } from './test-utils'
+import { registerSignalInput } from './test-utils'
 
 describe('injectMutationState', () => {
   let queryClient: QueryClient
@@ -159,23 +158,35 @@ describe('injectMutationState', () => {
         }))
       }
 
-      const fixture = TestBed.createComponent(FakeComponent)
-      const { debugElement } = fixture
-      setFixtureSignalInputs(fixture, { name: fakeName })
+      registerSignalInput(FakeComponent, 'name')
+
+      @Component({
+        template: `<app-fake [name]="name()" />`,
+        imports: [FakeComponent],
+      })
+      class HostComponent {
+        protected readonly name = signal(fakeName)
+      }
+
+      const fixture = TestBed.createComponent(HostComponent)
+      fixture.detectChanges()
       await vi.advanceTimersByTimeAsync(0)
 
-      let spans = debugElement
-        .queryAll(By.css('span'))
-        .map((span) => span.nativeNode.textContent)
+      const readSpans = () =>
+        Array.from(
+          fixture.nativeElement.querySelectorAll(
+            'span',
+          ) as NodeListOf<HTMLSpanElement>,
+        ).map((span) => span.textContent)
+
+      let spans = readSpans()
 
       expect(spans).toEqual(['pending', 'pending'])
 
       await vi.advanceTimersByTimeAsync(11)
       fixture.detectChanges()
 
-      spans = debugElement
-        .queryAll(By.css('span'))
-        .map((span) => span.nativeNode.textContent)
+      spans = readSpans()
 
       expect(spans).toEqual(['success', 'error'])
     })

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

@@ -9,10 +9,9 @@ import {
 } from '@angular/core'
 import { TestBed } from '@angular/core/testing'
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
-import { By } from '@angular/platform-browser'
 import { sleep } from '@tanstack/query-test-utils'
 import { QueryClient, injectMutation, provideTanStackQuery } from '..'
-import { expectSignals, setFixtureSignalInputs } from './test-utils'
+import { expectSignals, registerSignalInput } from './test-utils'
 
 describe('injectMutation', () => {
   let queryClient: QueryClient
@@ -323,19 +322,32 @@ describe('injectMutation', () => {
       }
     }
 
-    const fixture = TestBed.createComponent(FakeComponent)
-    const { debugElement } = fixture
-    setFixtureSignalInputs(fixture, { name: 'value' })
+    registerSignalInput(FakeComponent, 'name')
 
-    const button = debugElement.query(By.css('button'))
-    button.triggerEventHandler('click')
+    @Component({
+      template: `<app-fake [name]="name()" />`,
+      imports: [FakeComponent],
+    })
+    class HostComponent {
+      protected readonly name = signal('value')
+    }
+
+    const fixture = TestBed.createComponent(HostComponent)
+    fixture.detectChanges()
+
+    const hostButton = fixture.nativeElement.querySelector(
+      'button',
+    ) as HTMLButtonElement
+    hostButton.click()
 
     await vi.advanceTimersByTimeAsync(11)
     fixture.detectChanges()
 
-    const text = debugElement.query(By.css('span')).nativeElement.textContent
-    expect(text).toEqual('value')
-    const mutation = mutationCache.find({ mutationKey: ['fake', 'value'] })
+    const span = fixture.nativeElement.querySelector('span') as HTMLSpanElement
+    expect(span.textContent).toEqual('value')
+    const mutation = mutationCache.find({
+      mutationKey: ['fake', 'value'],
+    })
     expect(mutation).toBeDefined()
     expect(mutation!.options.mutationKey).toStrictEqual(['fake', 'value'])
   })
@@ -364,26 +376,43 @@ describe('injectMutation', () => {
       }
     }
 
-    const fixture = TestBed.createComponent(FakeComponent)
-    const { debugElement } = fixture
-    setFixtureSignalInputs(fixture, { name: 'value' })
+    registerSignalInput(FakeComponent, 'name')
 
-    const button = debugElement.query(By.css('button'))
-    const span = debugElement.query(By.css('span'))
+    @Component({
+      template: `<app-fake [name]="name()" />`,
+      imports: [FakeComponent],
+    })
+    class HostComponent {
+      protected readonly name = signal('value')
+
+      updateName(value: string): void {
+        this.name.set(value)
+      }
+    }
 
-    button.triggerEventHandler('click')
+    const fixture = TestBed.createComponent(HostComponent)
+    fixture.detectChanges()
+
+    let button = fixture.nativeElement.querySelector(
+      'button',
+    ) as HTMLButtonElement
+    button.click()
     await vi.advanceTimersByTimeAsync(11)
     fixture.detectChanges()
 
-    expect(span.nativeElement.textContent).toEqual('value')
+    let span = fixture.nativeElement.querySelector('span') as HTMLSpanElement
+    expect(span.textContent).toEqual('value')
 
-    setFixtureSignalInputs(fixture, { name: 'updatedValue' })
+    fixture.componentInstance.updateName('updatedValue')
+    fixture.detectChanges()
 
-    button.triggerEventHandler('click')
+    button = fixture.nativeElement.querySelector('button') as HTMLButtonElement
+    button.click()
     await vi.advanceTimersByTimeAsync(11)
     fixture.detectChanges()
 
-    expect(span.nativeElement.textContent).toEqual('updatedValue')
+    span = fixture.nativeElement.querySelector('span') as HTMLSpanElement
+    expect(span.textContent).toEqual('updatedValue')
 
     const mutations = mutationCache.findAll()
     expect(mutations.length).toBe(2)