chore(angular-query): zoneless testing (#8652)

Author: arnoud-dv

packages/angular-query-devtools-experimental/package.json

@@ -52,7 +52,6 @@
     "@tanstack/query-devtools": "workspace:*"
   },
   "devDependencies": {
-    "@analogjs/vite-plugin-angular": "^1.6.4",
     "@angular/core": "^19.1.0-next.0",
     "@angular/platform-browser-dynamic": "^19.1.0-next.0",
     "@tanstack/angular-query-experimental": "workspace:*",

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

@@ -1,5 +1,9 @@
-import { ElementRef, signal } from '@angular/core'
-import { TestBed, fakeAsync } from '@angular/core/testing'
+import {
+  ElementRef,
+  provideExperimentalZonelessChangeDetection,
+  signal,
+} from '@angular/core'
+import { TestBed } from '@angular/core/testing'
 import {
   QueryClient,
   provideTanStackQuery,
@@ -34,6 +38,7 @@ describe('injectDevtoolsPanel', () => {
     mockElementRef = new ElementRef(document.createElement('div'))
     TestBed.configureTestingModule({
       providers: [
+        provideExperimentalZonelessChangeDetection(),
         provideTanStackQuery(queryClient),
         { provide: ElementRef, useValue: signal(mockElementRef) },
       ],
@@ -56,7 +61,7 @@ describe('injectDevtoolsPanel', () => {
     })
   })
 
-  it('should initialize TanstackQueryDevtoolsPanel', fakeAsync(() => {
+  it('should initialize TanstackQueryDevtoolsPanel', () => {
     TestBed.runInInjectionContext(() => {
       injectDevtoolsPanel(() => ({
         hostElement: TestBed.inject(ElementRef),
@@ -66,9 +71,9 @@ describe('injectDevtoolsPanel', () => {
     TestBed.flushEffects()
 
     expect(mocks.mockTanstackQueryDevtoolsPanel).toHaveBeenCalledTimes(1)
-  }))
+  })
 
-  it('should destroy TanstackQueryDevtoolsPanel', fakeAsync(() => {
+  it('should destroy TanstackQueryDevtoolsPanel', () => {
     const result = TestBed.runInInjectionContext(() => {
       return injectDevtoolsPanel(() => ({
         hostElement: TestBed.inject(ElementRef),
@@ -80,9 +85,9 @@ describe('injectDevtoolsPanel', () => {
     result.destroy()
 
     expect(mockDevtoolsPanelInstance.unmount).toHaveBeenCalledTimes(1)
-  }))
+  })
 
-  it('should destroy TanstackQueryDevtoolsPanel when hostElement is removed', fakeAsync(() => {
+  it('should destroy TanstackQueryDevtoolsPanel when hostElement is removed', () => {
     const hostElement = signal<ElementRef>(mockElementRef)
 
     TestBed.runInInjectionContext(() => {
@@ -100,9 +105,9 @@ describe('injectDevtoolsPanel', () => {
     TestBed.flushEffects()
 
     expect(mockDevtoolsPanelInstance.unmount).toHaveBeenCalledTimes(1)
-  }))
+  })
 
-  it('should update client', fakeAsync(() => {
+  it('should update client', () => {
     const client = signal(new QueryClient())
 
     TestBed.runInInjectionContext(() => {
@@ -121,9 +126,9 @@ describe('injectDevtoolsPanel', () => {
     TestBed.flushEffects()
 
     expect(mockDevtoolsPanelInstance.setClient).toHaveBeenCalledTimes(1)
-  }))
+  })
 
-  it('should update error types', fakeAsync(() => {
+  it('should update error types', () => {
     const errorTypes = signal([])
 
     TestBed.runInInjectionContext(() => {
@@ -142,9 +147,9 @@ describe('injectDevtoolsPanel', () => {
     TestBed.flushEffects()
 
     expect(mockDevtoolsPanelInstance.setErrorTypes).toHaveBeenCalledTimes(1)
-  }))
+  })
 
-  it('should update onclose', fakeAsync(() => {
+  it('should update onclose', () => {
     const functionA = () => {}
     const functionB = () => {}
 
@@ -166,5 +171,5 @@ describe('injectDevtoolsPanel', () => {
     TestBed.flushEffects()
 
     expect(mockDevtoolsPanelInstance.setOnClose).toHaveBeenCalledTimes(1)
-  }))
+  })
 })

packages/angular-query-devtools-experimental/src/test-setup.ts

@@ -1,5 +1,3 @@
-import '@analogjs/vite-plugin-angular/setup-vitest'
-
 import {
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting,

packages/angular-query-experimental/package.json

@@ -68,7 +68,6 @@
     "@tanstack/query-devtools": "workspace:*"
   },
   "devDependencies": {
-    "@analogjs/vite-plugin-angular": "^1.6.4",
     "@angular/compiler": "^19.1.0-next.0",
     "@angular/core": "^19.1.0-next.0",
     "@angular/platform-browser": "^19.1.0-next.0",

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

@@ -1,6 +1,9 @@
 import { TestBed } from '@angular/core/testing'
 import { afterEach } from 'vitest'
-import { Injector } from '@angular/core'
+import {
+  Injector,
+  provideExperimentalZonelessChangeDetection,
+} from '@angular/core'
 import { QueryClient, injectInfiniteQuery, provideTanStackQuery } from '..'
 import { expectSignals, infiniteFetcher } from './test-utils'
 
@@ -15,7 +18,10 @@ describe('injectInfiniteQuery', () => {
     queryClient = new QueryClient()
     vi.useFakeTimers()
     TestBed.configureTestingModule({
-      providers: [provideTanStackQuery(queryClient)],
+      providers: [
+        provideExperimentalZonelessChangeDetection(),
+        provideTanStackQuery(queryClient),
+      ],
     })
   })
 

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

@@ -1,6 +1,9 @@
-import { TestBed, fakeAsync, flush, tick } from '@angular/core/testing'
+import { TestBed } from '@angular/core/testing'
 import { beforeEach, describe, expect } from 'vitest'
-import { Injector } from '@angular/core'
+import {
+  Injector,
+  provideExperimentalZonelessChangeDetection,
+} from '@angular/core'
 import {
   QueryClient,
   injectIsFetching,
@@ -9,18 +12,30 @@ import {
 } from '..'
 import { delayedFetcher } from './test-utils'
 
+const QUERY_DURATION = 100
+
+const resolveQueries = () => vi.advanceTimersByTimeAsync(QUERY_DURATION)
+
 describe('injectIsFetching', () => {
   let queryClient: QueryClient
 
   beforeEach(() => {
+    vi.useFakeTimers()
     queryClient = new QueryClient()
 
     TestBed.configureTestingModule({
-      providers: [provideTanStackQuery(queryClient)],
+      providers: [
+        provideExperimentalZonelessChangeDetection(),
+        provideTanStackQuery(queryClient),
+      ],
     })
   })
 
-  test('Returns number of fetching queries', fakeAsync(() => {
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  test('Returns number of fetching queries', async () => {
     const isFetching = TestBed.runInInjectionContext(() => {
       injectQuery(() => ({
         queryKey: ['isFetching1'],
@@ -29,12 +44,12 @@ describe('injectIsFetching', () => {
       return injectIsFetching()
     })
 
-    tick()
+    vi.advanceTimersByTime(1)
 
     expect(isFetching()).toStrictEqual(1)
-    flush()
+    await resolveQueries()
     expect(isFetching()).toStrictEqual(0)
-  }))
+  })
 
   describe('injection context', () => {
     test('throws NG0203 with descriptive error outside injection context', () => {

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

@@ -1,6 +1,9 @@
 import { beforeEach, describe } from 'vitest'
-import { TestBed, fakeAsync, tick } from '@angular/core/testing'
-import { Injector } from '@angular/core'
+import { TestBed } from '@angular/core/testing'
+import {
+  Injector,
+  provideExperimentalZonelessChangeDetection,
+} from '@angular/core'
 import {
   QueryClient,
   injectIsMutating,
@@ -13,14 +16,22 @@ describe('injectIsMutating', () => {
   let queryClient: QueryClient
 
   beforeEach(() => {
+    vi.useFakeTimers()
     queryClient = new QueryClient()
 
     TestBed.configureTestingModule({
-      providers: [provideTanStackQuery(queryClient)],
+      providers: [
+        provideExperimentalZonelessChangeDetection(),
+        provideTanStackQuery(queryClient),
+      ],
     })
   })
 
-  test('should properly return isMutating state', fakeAsync(() => {
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  test('should properly return isMutating state', async () => {
     TestBed.runInInjectionContext(() => {
       const isMutating = injectIsMutating()
       const mutation = injectMutation(() => ({
@@ -34,11 +45,11 @@ describe('injectIsMutating', () => {
         par1: 'par1',
       })
 
-      tick()
+      vi.advanceTimersByTime(1)
 
       expect(isMutating()).toBe(1)
     })
-  }))
+  })
 
   describe('injection context', () => {
     test('throws NG0203 with descriptive error outside injection context', () => {

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

@@ -1,4 +1,10 @@
-import { Component, Injector, input, signal } from '@angular/core'
+import {
+  Component,
+  Injector,
+  input,
+  provideExperimentalZonelessChangeDetection,
+  signal,
+} from '@angular/core'
 import { TestBed } from '@angular/core/testing'
 import { describe, expect, test, vi } from 'vitest'
 import { By } from '@angular/platform-browser'
@@ -21,7 +27,10 @@ describe('injectMutationState', () => {
     queryClient = new QueryClient()
     vi.useFakeTimers()
     TestBed.configureTestingModule({
-      providers: [provideTanStackQuery(queryClient)],
+      providers: [
+        provideExperimentalZonelessChangeDetection(),
+        provideTanStackQuery(queryClient),
+      ],
     })
   })
 

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

@@ -4,6 +4,7 @@ import {
   Injector,
   inject,
   input,
+  provideExperimentalZonelessChangeDetection,
   signal,
 } from '@angular/core'
 import { TestBed } from '@angular/core/testing'
@@ -28,7 +29,10 @@ describe('injectMutation', () => {
     queryClient = new QueryClient()
     vi.useFakeTimers()
     TestBed.configureTestingModule({
-      providers: [provideTanStackQuery(queryClient)],
+      providers: [
+        provideExperimentalZonelessChangeDetection(),
+        provideTanStackQuery(queryClient),
+      ],
     })
   })