test(angular-query-experimental/injectIsMutating): switch main test to '@Component' + 'render' pattern

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

@@ -1,6 +1,11 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { TestBed } from '@angular/core/testing'
-import { Injector, provideZonelessChangeDetection } from '@angular/core'
+import {
+  Component,
+  Injector,
+  provideZonelessChangeDetection,
+} from '@angular/core'
+import { render } from '@testing-library/angular'
 import { queryKey, sleep } from '@tanstack/query-test-utils'
 import {
   QueryClient,
@@ -30,25 +35,31 @@ describe('injectIsMutating', () => {
 
   it('should properly return isMutating state', async () => {
     const key = queryKey()
-    const [mutation, isMutating] = TestBed.runInInjectionContext(() => [
-      injectMutation(() => ({
+
+    @Component({
+      template: `<div>mutating: {{ isMutating() }}</div>`,
+    })
+    class Page {
+      readonly mutation = injectMutation(() => ({
         mutationKey: key,
         mutationFn: (params: { par1: string }) => sleep(10).then(() => params),
-      })),
-      injectIsMutating(),
-    ])
+      }))
+      readonly isMutating = injectIsMutating()
+    }
 
-    expect(isMutating()).toBe(0)
+    const rendered = await render(Page)
 
-    mutation.mutate({
-      par1: 'par1',
-    })
+    expect(rendered.getByText('mutating: 0')).toBeInTheDocument()
+
+    rendered.fixture.componentInstance.mutation.mutate({ par1: 'par1' })
 
-    expect(isMutating()).toBe(0)
     await vi.advanceTimersByTimeAsync(0)
-    expect(isMutating()).toBe(1)
+    rendered.fixture.detectChanges()
+    expect(rendered.getByText('mutating: 1')).toBeInTheDocument()
+
     await vi.advanceTimersByTimeAsync(11)
-    expect(isMutating()).toBe(0)
+    rendered.fixture.detectChanges()
+    expect(rendered.getByText('mutating: 0')).toBeInTheDocument()
   })
 
   describe('injection context', () => {