Loading...
- } @else if (query.isError()) { - Error: {{ query?.error().message }} + } @else if (projectsQuery.isError()) { + Error: {{ projectsQuery?.error().message }} } @else { - @for (page of query?.data().pages; track $index) { + @for (page of projectsQuery?.data().pages; track $index) { @for (project of page.data; track project.id) {{{ project.name }} {{ project.id }}
} }{{ query.data()?.value ?? 'Loading...' }}
`, + }) + class ExampleComponent { + readonly query = injectQuery(() => ({ + queryKey: ['example'], + queryFn: () => + new Promise<{ value: number }>((resolve) => + setTimeout(() => resolve({ value: 42 }), 10), + ), + })) + } + + const fixture = TestBed.createComponent(ExampleComponent) + fixture.detectChanges() + expect(fixture.nativeElement.textContent).toContain('Loading...') + + await vi.advanceTimersByTimeAsync(11) + fixture.detectChanges() + + expect(fixture.nativeElement.textContent).toContain('42') +}) +``` + +If you use [Angular Testing Library](https://testing-library.com/docs/angular-testing-library/intro/), render the component with `render` and follow the same flow, running change detection through `rendered.fixture`: + +```angular-ts +it('should render the query data', async () => { + @Component({ + template: `{{ query.data()?.value ?? 'Loading...' }}
`, + }) + class ExampleComponent { + readonly query = injectQuery(() => ({ + queryKey: ['example'], + queryFn: () => + new Promise<{ value: number }>((resolve) => + setTimeout(() => resolve({ value: 42 }), 10), + ), + })) + } + + const rendered = await render(ExampleComponent) + expect(rendered.getByText('Loading...')).toBeInTheDocument() + + await vi.advanceTimersByTimeAsync(11) + rendered.fixture.detectChanges() + + expect(rendered.getByText('42')).toBeInTheDocument() +}) +``` -await fixture.whenStable() -expect(fixture.componentInstance.query.data()).toEqual({ value: 42 }) +To test the same query without a component, create it with `TestBed.runInInjectionContext`, advance the clock the same way, and assert on its signals: + +```ts +it('should resolve the query data', async () => { + const query = TestBed.runInInjectionContext(() => + injectQuery(() => ({ + queryKey: ['example'], + queryFn: () => + new Promise<{ value: number }>((resolve) => + setTimeout(() => resolve({ value: 42 }), 10), + ), + })), + ) + expect(query.isPending()).toBe(true) + + await vi.advanceTimersByTimeAsync(11) + + expect(query.data()).toEqual({ value: 42 }) +}) ``` ## Handling retries @@ -80,12 +155,15 @@ Retries slow failing tests because the default backoff runs three times. Set `re ## HttpClient & network stubs -Angular's `HttpClientTestingModule` plays nicely with PendingTasks. Register it alongside the Query provider and flush responses through `HttpTestingController`: +Angular's `HttpClient` testing utilities play nicely with PendingTasks. Register `provideHttpClient()` and `provideHttpClientTesting()` alongside the Query provider and flush responses through `HttpTestingController`: ```ts TestBed.configureTestingModule({ - imports: [HttpClientTestingModule], - providers: [provideTanStackQuery(queryClient)], + providers: [ + provideHttpClient(), + provideHttpClientTesting(), + provideTanStackQuery(queryClient), + ], }) const httpCtrl = TestBed.inject(HttpTestingController) @@ -106,45 +184,60 @@ httpCtrl.verify() ## Infinite queries & pagination -Use the same pattern for infinite queries: call `fetchNextPage()`, advance timers if you are faking time, then await stability and assert on `data().pages`. +`whenStable()` can resolve before the pages of an infinite query reach the `data()` signal. With fake timers, advance the clock past the query function's delay instead, call `fetchNextPage()`, and advance it again before asserting on `data().pages`. Restore real timers in `afterEach`, so they are restored even when an assertion fails: ```ts -const infinite = TestBed.runInInjectionContext(() => - injectInfiniteQuery(() => ({ - queryKey: ['pages'], - queryFn: ({ pageParam = 1 }) => fetchPage(pageParam), - getNextPageParam: (last, all) => all.length + 1, - })), -) - -await appRef.whenStable() -expect(infinite.data().pages).toHaveLength(1) +beforeEach(() => { + vi.useFakeTimers() +}) -await infinite.fetchNextPage() -await vi.advanceTimersByTimeAsync(0) -await appRef.whenStable() +afterEach(() => { + vi.useRealTimers() +}) -expect(infinite.data().pages).toHaveLength(2) +it('should load the next page', async () => { + const infinite = TestBed.runInInjectionContext(() => + injectInfiniteQuery(() => ({ + queryKey: ['pages'], + queryFn: ({ pageParam }) => + new Promise{{ data.description }}
๐ {{ data.subscribers_count }} @@ -87,18 +86,18 @@ import { lastValueFrom } from 'rxjs' `, }) export class SimpleExampleComponent { - http = inject(HttpClient) + readonly http = inject(HttpClient) - query = injectQuery(() => ({ + readonly repoDataQuery = injectQuery(() => ({ queryKey: ['repoData'], queryFn: () => lastValueFrom( - this.http.get