test(angular-query-experimental/injectInfiniteQuery): switch main test to '@component' + 'render' pattern (TanStack#10558)

Author: sukvvon

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

@@ -1,9 +1,13 @@
 import { TestBed } from '@angular/core/testing'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-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, injectInfiniteQuery, provideTanStackQuery } from '..'
-import { expectSignals } from './test-utils'
 
 describe('injectInfiniteQuery', () => {
   let queryClient: QueryClient
@@ -25,42 +29,41 @@ describe('injectInfiniteQuery', () => {
 
   it('should properly execute infinite query', async () => {
     const key = queryKey()
-    const query = TestBed.runInInjectionContext(() => {
-      return injectInfiniteQuery(() => ({
+
+    @Component({
+      template: `
+        <div>status: {{ query.status() }}</div>
+        <div>pages: {{ query.data()?.pages?.join(', ') ?? 'none' }}</div>
+      `,
+    })
+    class Page {
+      readonly query = injectInfiniteQuery(() => ({
         queryKey: key,
         queryFn: ({ pageParam }) =>
           sleep(10).then(() => 'data on page ' + pageParam),
         initialPageParam: 0,
         getNextPageParam: () => 12,
       }))
-    })
+    }
 
-    expectSignals(query, {
-      data: undefined,
-      status: 'pending',
-    })
+    const rendered = await render(Page)
 
-    await vi.advanceTimersByTimeAsync(11)
+    expect(rendered.getByText('status: pending')).toBeInTheDocument()
+    expect(rendered.getByText('pages: none')).toBeInTheDocument()
 
-    expectSignals(query, {
-      data: {
-        pageParams: [0],
-        pages: ['data on page 0'],
-      },
-      status: 'success',
-    })
+    await vi.advanceTimersByTimeAsync(11)
+    rendered.fixture.detectChanges()
+    expect(rendered.getByText('status: success')).toBeInTheDocument()
+    expect(rendered.getByText('pages: data on page 0')).toBeInTheDocument()
 
-    void query.fetchNextPage()
+    rendered.fixture.componentInstance.query.fetchNextPage()
 
     await vi.advanceTimersByTimeAsync(11)
-
-    expectSignals(query, {
-      data: {
-        pageParams: [0, 12],
-        pages: ['data on page 0', 'data on page 12'],
-      },
-      status: 'success',
-    })
+    rendered.fixture.detectChanges()
+    expect(rendered.getByText('status: success')).toBeInTheDocument()
+    expect(
+      rendered.getByText('pages: data on page 0, data on page 12'),
+    ).toBeInTheDocument()
   })
 
   describe('injection context', () => {