query feat(docs): add the angular testing documentation

This PR is to improve the testing doc of Angular package. Let's discuss what is missing and what you would like to be added. BR

Summary by CodeRabbit

Documentation
- Added an Angular Testing guide and updated docs navigation with “Testing” and “Unit Testing / Jest”.
Examples
- Added a full Angular Unit Testing example (Jest, devcontainer, configs, mock API, components, service).
- Auto-refetching: return promises from cache-invalidation callbacks.
- Optimistic Updates: refined mutation lifecycle (invalidate on settle) and changed error emission behavior.
Tests
- Added comprehensive unit tests for the Angular TasksService covering success, optimistic updates, retries, and rollback on errors.

Apr 15 '25 15:04 ExFlo

Walkthrough

Adds Angular testing docs and navigation; introduces a new Angular "unit-testing" example (Jest) with mock HTTP interceptor, TasksService (optimistic updates, rollback, invalidate on settle), demo component, and comprehensive unit tests. Also tweaks two existing examples' mutation/invalidation behavior and an interceptor error emission.

Changes

Cohort / File(s)	Summary
Docs navigation `docs/config.json`	Adds Angular docs entries: `framework/angular/guides/testing` and `framework/angular/examples/unit-testing`.
Angular testing guide `docs/framework/angular/guides/testing.md`	New guide covering setup, mocking via interceptors, sample TasksService, testing patterns and a Jest example reference.
Auto-refetching example: service `examples/angular/auto-refetching/src/app/services/tasks.service.ts`	`addTask` and `clearAllTasks` onSuccess handlers now return the `invalidateQueries({ queryKey: ['tasks'] })` Promise.
Optimistic updates: component `examples/angular/optimistic-updates/src/app/components/optimistic-updates.component.ts`	Removed `clearMutation` property; no other logic changes.
Optimistic updates: mock interceptor `examples/angular/optimistic-updates/src/app/interceptor/mock-api.interceptor.ts`	For `/api/tasks-wrong-url`, replaced HTTP 500 response with an error observable via `throwError(() => new Error('error')).pipe(delay(1000))`.
Optimistic updates: service `examples/angular/optimistic-updates/src/app/services/tasks.service.ts`	Mutation callbacks refined: typed `onMutate` params, unused params prefixed with `_`, `onSuccess` made a no-op, `onSettled` returns the `invalidateQueries` Promise.
Unit-testing example: project scaffold `examples/angular/unit-testing/...` `(.devcontainer/devcontainer.json`, `.eslintrc.cjs`, `package.json`, `angular.json`, `jest.config.ts`, `tsconfig*.json`, `README.md`)	New Angular 19 + Jest project scaffold, build/test config, tooling and README for unit-testing example.
Unit-testing example: app scaffold `examples/angular/unit-testing/src/index.html`, `src/main.ts`, `src/app/app.component.ts`, `src/app/app.config.ts`	Bootstraps standalone app; provides HttpClient with mock interceptor and TanStack Query client (devtools, 24h gcTime).
Unit-testing example: mock interceptor `examples/angular/unit-testing/src/app/interceptor/mock-api.interceptor.ts`	New mock interceptor simulating `/api/tasks` GET/POST with sessionStorage persistence, delayed responses, call-number behavior, and an error path.
Unit-testing example: service + spec `examples/angular/unit-testing/src/app/services/tasks.service.ts`, `.../services/tasks.service.spec.ts`	New `TasksService` (allTasks query, addTask mutation with optimistic updates/rollback and invalidate on settle) and comprehensive Jest tests exercising optimistic updates, success and failure flows.
Unit-testing example: component `examples/angular/unit-testing/src/app/components/unit-testing.component.ts`	Demo component exposing `injectQuery`/`injectMutation` usage, listing tasks, adding tasks and UI indicators used by tests.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant Component as UnitTestingComponent
  participant Query as allTasks (Query)
  participant Mutation as addTask (Mutation)
  participant QC as QueryClient
  participant HTTP as HttpClient
  participant INT as mockInterceptor

  Component->>Query: injectQuery(() => allTasks)
  Query->>QC: fetch ['tasks']
  QC->>HTTP: GET /api/tasks
  HTTP->>INT: intercept GET
  INT-->>HTTP: delayed 200 tasks[]
  HTTP-->>QC: tasks[]
  QC-->>Query: data updated
  Query-->>Component: status success + data

  Component->>Mutation: mutate({task})
  Mutation->>QC: onMutate -> cancel + optimistic update
  Mutation->>HTTP: POST /api/tasks
  HTTP->>INT: intercept POST
  INT-->>HTTP: delayed 201 success
  HTTP-->>Mutation: success
  Mutation->>QC: onSettled -> invalidate ['tasks']
  QC->>HTTP: GET /api/tasks (refetch)
  HTTP->>INT: intercept GET
  INT-->>HTTP: delayed 200 tasks[..., "CallNumber N"]
  HTTP-->>QC: tasks...
  QC-->>Component: cache refreshed

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested labels

package: angular-query-experimental

Pre-merge checks (3 passed)

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title "feat(docs): add the angular testing documentation" is concise, follows conventional commit style, and accurately summarizes the primary purpose of the changeset (adding Angular testing docs and related example material), so it is directly related and clear to reviewers.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

Poem

I twitch my whiskers, tests in sight,
Mocked responses hum through the night.
I optimistically hop and then—rollback—
Jest cheers, green ticks on my stack.
A carrot for CI, a hop, a clap! 🥕🐇

✨ Finishing touches

[ ] 📝 Generate Docstrings

🧪 Generate unit tests

[ ] Create PR with unit tests
[ ] Post copyable unit tests in a comment

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Sep 11 '25 22:09 coderabbitai[bot]

View your CI Pipeline Execution ↗ for commit 4d17061a8c68464ba2f7a105ca2c4e943b823b4b

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	3m 49s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	1m 24s	View ↗

☁️ Nx Cloud last updated this comment at 2025-09-11 23:25:27 UTC

Sep 11 '25 23:09 nx-cloud[bot]

More templates

@tanstack/angular-query-devtools-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@9023

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@9023

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@9023

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@9023

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@9023

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@9023

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@9023

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@9023

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@9023

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@9023

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@9023

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@9023

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@9023

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@9023

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@9023

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@9023

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@9023

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@9023

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@9023

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@9023

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@9023

commit: 4d17061

Sep 11 '25 23:09 pkg-pr-new[bot]

Codecov Report

:white_check_mark: All modified and coverable lines are covered by tests. :white_check_mark: Project coverage is 45.51%. Comparing base (7f0e716) to head (4d17061).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #9023   +/-   ##
=======================================
  Coverage   45.51%   45.51%           
=======================================
  Files         209      209           
  Lines        8379     8379           
  Branches     1896     1897    +1     
=======================================
  Hits         3814     3814           
  Misses       4118     4118           
  Partials      447      447

Components	Coverage Δ
@tanstack/angular-query-devtools-experimental	`∅ <ø> (∅)`
@tanstack/angular-query-experimental	`87.00% <ø> (ø)`
@tanstack/eslint-plugin-query	`83.24% <ø> (ø)`
@tanstack/query-async-storage-persister	`43.85% <ø> (ø)`
@tanstack/query-broadcast-client-experimental	`24.39% <ø> (ø)`
@tanstack/query-codemods	`0.00% <ø> (ø)`
@tanstack/query-core	`97.48% <ø> (ø)`
@tanstack/query-devtools	`3.48% <ø> (ø)`
@tanstack/query-persist-client-core	`79.60% <ø> (ø)`
@tanstack/query-sync-storage-persister	`84.61% <ø> (ø)`
@tanstack/query-test-utils	`77.77% <ø> (ø)`
@tanstack/react-query	`96.00% <ø> (ø)`
@tanstack/react-query-devtools	`10.00% <ø> (ø)`
@tanstack/react-query-next-experimental	`∅ <ø> (∅)`
@tanstack/react-query-persist-client	`100.00% <ø> (ø)`
@tanstack/solid-query	`78.13% <ø> (ø)`
@tanstack/solid-query-devtools	`∅ <ø> (∅)`
@tanstack/solid-query-persist-client	`100.00% <ø> (ø)`
@tanstack/svelte-query	`87.58% <ø> (ø)`
@tanstack/svelte-query-devtools	`∅ <ø> (∅)`
@tanstack/svelte-query-persist-client	`100.00% <ø> (ø)`
@tanstack/vue-query	`71.10% <ø> (ø)`
@tanstack/vue-query-devtools	`∅ <ø> (∅)`

:rocket: New features to boost your workflow:

:snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
:package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sep 11 '25 23:09 codecov[bot]