Ensure unit tests are run using component effect scheduling

Author: arnoud-dv

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

@@ -1,8 +1,13 @@
 import { TestBed } from '@angular/core/testing'
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
-import { Injector, provideZonelessChangeDetection } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Injector,
+  provideZonelessChangeDetection,
+} from '@angular/core'
 import { sleep } from '@tanstack/query-test-utils'
-import { QueryClient, injectInfiniteQuery, provideTanStackQuery } from '..'
+import { injectInfiniteQuery, provideTanStackQuery, QueryClient } from '..'
 import { expectSignals } from './test-utils'
 
 describe('injectInfiniteQuery', () => {
@@ -24,15 +29,25 @@ describe('injectInfiniteQuery', () => {
   })
 
   test('should properly execute infinite query', async () => {
-    const query = TestBed.runInInjectionContext(() => {
-      return injectInfiniteQuery(() => ({
+    @Component({
+      selector: 'app-test',
+      template: '',
+      standalone: true,
+      changeDetection: ChangeDetectionStrategy.OnPush,
+    })
+    class TestComponent {
+      query = injectInfiniteQuery(() => ({
         queryKey: ['infiniteQuery'],
         queryFn: ({ pageParam }) =>
           sleep(10).then(() => 'data on page ' + pageParam),
         initialPageParam: 0,
         getNextPageParam: () => 12,
       }))
-    })
+    }
+
+    const fixture = TestBed.createComponent(TestComponent)
+    fixture.detectChanges()
+    const query = fixture.componentInstance.query
 
     expectSignals(query, {
       data: undefined,
@@ -76,18 +91,32 @@ describe('injectInfiniteQuery', () => {
     })
 
     test('can be used outside injection context when passing an injector', () => {
-      const query = injectInfiniteQuery(
-        () => ({
-          queryKey: ['manualInjector'],
-          queryFn: ({ pageParam }) =>
-            sleep(0).then(() => 'data on page ' + pageParam),
-          initialPageParam: 0,
-          getNextPageParam: () => 12,
-        }),
-        {
-          injector: TestBed.inject(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
 
       expect(query.status()).toBe('pending')
     })

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

@@ -1,4 +1,5 @@
 import {
+  ChangeDetectionStrategy,
   Component,
   Injector,
   input,
@@ -145,6 +146,7 @@ describe('injectMutationState', () => {
             <span>{{ mutation.status }}</span>
           }
         `,
+        changeDetection: ChangeDetectionStrategy.OnPush,
       })
       class FakeComponent {
         name = input.required<string>()

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

@@ -1,5 +1,6 @@
 import {
   ApplicationRef,
+  ChangeDetectionStrategy,
   Component,
   Injector,
   input,
@@ -307,6 +308,7 @@ describe('injectMutation', () => {
         <button (click)="mutate()"></button>
         <span>{{ mutation.data() }}</span>
       `,
+      changeDetection: ChangeDetectionStrategy.OnPush,
     })
     class FakeComponent {
       name = input.required<string>()
@@ -347,6 +349,7 @@ describe('injectMutation', () => {
         <button (click)="mutate()"></button>
         <span>{{ mutation.data() }}</span>
       `,
+      changeDetection: ChangeDetectionStrategy.OnPush,
     })
     class FakeComponent {
       name = input.required<string>()

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

@@ -1,6 +1,7 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 import { render } from '@testing-library/angular'
 import {
+  ChangeDetectionStrategy,
   Component,
   effect,
   provideZonelessChangeDetection,
@@ -37,6 +38,7 @@ describe('injectQueries', () => {
           </div>
         </div>
       `,
+      changeDetection: ChangeDetectionStrategy.OnPush,
     })
     class Page {
       toString(val: any) {