docs(angular-query): add testing guide #9669
Conversation
WalkthroughAdds Angular testing documentation for TanStack Query and updates docs navigation to include a Testing entry under Angular guides in two sections. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant T as Test (Jasmine/Jest)
participant TB as Angular TestBed
participant C as Component/Service
participant QC as QueryClient (per spec)
participant PT as PendingTasks
participant HT as HttpTestingController
T->>TB: configureTestingModule(...)
TB->>QC: create new QueryClient({ defaultOptions... })
TB->>C: instantiate with providers (QueryClient)
note over QC,C: Isolated cache per spec
T->>C: trigger query/mutation
C->>PT: register async work (Query in-flight)
C->>HT: expectOne('/api/...') and flush(mock)
T->>PT: await stabilization (whenStable / pendingTasks)
TB-->>T: stable, assert results
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
bot
added
the
documentation
|
View your CI Pipeline Execution ↗ for commit 19a2af6
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
docs/config.json (1)
138-169: Optional: also surface “Testing” under Getting Started?If the intent is extra discoverability for Angular newcomers, consider adding a cross‑link in the Angular “Getting Started” list as well. Other frameworks only list Testing under Guides, so skip if parity is preferred.
docs/framework/angular/guides/testing.md (3)
32-33: Grammar nitUse the possessive form.
-> If your applications actual TanStack Query config is used in unit tests, ... +> If your application's actual TanStack Query config is used in unit tests, ...
95-105: Minor clarity: showlastValueFromimportReaders may copy/paste; a one‑liner import prevents confusion.
- queryFn: () => lastValueFrom(TestBed.inject(HttpClient).get('/api/todos')), + // import { lastValueFrom } from 'rxjs' + queryFn: () => lastValueFrom(TestBed.inject(HttpClient).get('/api/todos')),
58-64: Timers guidance is good — add Jest alias for completeness (optional)Many users are on Jest; add
jest.advanceTimersByTimeAsync(0)as an alternative.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
docs/config.json(1 hunks)docs/framework/angular/guides/testing.md(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Test
- GitHub Check: Preview
🔇 Additional comments (4)
docs/config.json (1)
710-713: Angular “Testing” nav entry looks correctLink path matches the new guide and follows existing framework patterns.
docs/framework/angular/guides/testing.md (3)
150-158: Great checklistConcise and actionable. No changes needed.
28-29: Provider API names confirmed (TanStack Query v5)Both provideTanStackQuery(queryClient, ...features) — the primary app-level provider (accepts features like withDevtools()) — and provideQueryClient(queryClient) — a lower-level single-provider for scoping/tests — are current public APIs; the existing line providers: [provideTanStackQuery(queryClient)] is correct.
12-13: Confirm Angular 19+ requirement for PendingTasksVerified: ExperimentalPendingTasks appeared in Angular 18 (developer-preview/experimental) and was renamed and stabilized as PendingTasks in Angular 19 — it's stable for testing from v19, so the current "Angular 19 or later" requirement is correct.
arnoud-dv
changed the title
Summary by CodeRabbit