test(angular-query-experimental/injectIsMutating): switch main test to '@Component' + 'render' pattern by sukvvon · Pull Request #10557 · TanStack/query

sukvvon · 2026-04-22T06:14:39Z

🎯 Changes

Rewrites the main test in inject-is-mutating.test.ts to use a @Component + @testing-library/angular's render instead of calling TestBed.runInInjectionContext and asserting on the signal value directly. The assertion now checks the rendered DOM text, which mirrors how a user actually observes injectIsMutating in an Angular component.

Mirrors the approach taken for injectIsFetching in #10556.

Before

it('should properly return isMutating state', async () => {
  const key = queryKey()
  const [mutation, isMutating] = TestBed.runInInjectionContext(() => [
    injectMutation(() => ({
      mutationKey: key,
      mutationFn: (params: { par1: string }) => sleep(10).then(() => params),
    })),
    injectIsMutating(),
  ])

  expect(isMutating()).toBe(0)

  mutation.mutate({ par1: 'par1' })

  expect(isMutating()).toBe(0)
  await vi.advanceTimersByTimeAsync(0)
  expect(isMutating()).toBe(1)
  await vi.advanceTimersByTimeAsync(11)
  expect(isMutating()).toBe(0)
})

After

it('should properly return isMutating state', async () => {
  const key = queryKey()

  @Component({
    template: `<div>mutating: {{ isMutating() }}</div>`,
  })
  class Page {
    readonly mutation = injectMutation(() => ({
      mutationKey: key,
      mutationFn: (params: { par1: string }) => sleep(10).then(() => params),
    }))
    readonly isMutating = injectIsMutating()
  }

  const rendered = await render(Page)

  expect(rendered.getByText('mutating: 0')).toBeInTheDocument()

  rendered.fixture.componentInstance.mutation.mutate({ par1: 'par1' })

  await vi.advanceTimersByTimeAsync(0)
  rendered.fixture.detectChanges()
  expect(rendered.getByText('mutating: 1')).toBeInTheDocument()

  await vi.advanceTimersByTimeAsync(11)
  rendered.fixture.detectChanges()
  expect(rendered.getByText('mutating: 0')).toBeInTheDocument()
})

Why

Matches the component-based usage shown across examples/angular/* (readonly mutation = injectMutation(...) in auto-refetching, optimistic-updates, etc.).
readonly fields on the test component follow the convention used in our Angular examples.
The injection context describe block (NG0203 throw / passing an injector) is kept as-is — those checks don't need a rendered component.

Verification

@tanstack/angular-query-experimental — 209 tests passed, 0 type errors

✅ Checklist

I have followed the steps in the Contributing guide.
I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

This change affects published code, and I have generated a changeset.
This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

Tests
- Refactored mutation state tests to use component-level integration testing, verifying UI updates correctly reflect state changes during the mutation lifecycle.

@component' + 'render' pattern

coderabbitai · 2026-04-22T06:14:52Z

📝 Walkthrough

Walkthrough

Test refactored from using TestBed.runInInjectionContext to a component-based approach with @testing-library/angular. Assertions shifted from direct function calls to DOM element text verification, testing mutation state changes through rendered output.

Changes

Cohort / File(s)	Summary
Testing Pattern Update `packages/angular-query-experimental/src/__tests__/inject-is-mutating.test.ts`	Replaced `TestBed.runInInjectionContext` setup with an Angular component (`Page`) that injects `injectMutation()` and `injectIsMutating()`. Changed verification from direct function returns to DOM-based assertions using `render()` and `detectChanges()`, validating mutation state through rendered text content.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

package: angular-query-experimental

Poem

🐰 A test hops from function calls to DOM display,
Where components now render what before we'd spy,
With Angular's texture and library's embrace,
The mutations now dance in their proper place!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: switching the test from TestBed.runInInjectionContext to a `@Component` + render pattern for the injectIsMutating test.
Description check	✅ Passed	The description includes all required template sections with substantive content: Changes (with before/after code examples), a Why section, Verification results, and a completed Checklist marking the change as docs/CI/dev-only.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch test/angular-query-inject-is-mutating-render-pattern

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

nx-cloud · 2026-04-22T06:15:07Z

View your CI Pipeline Execution ↗ for commit 7d10482

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

☁️ Nx Cloud last updated this comment at 2026-04-22 06:17:48 UTC

github-actions · 2026-04-22T06:15:27Z

🚀 Changeset Version Preview

No changeset entries found. Merging this PR will not cause a version bump for any packages.

pkg-pr-new · 2026-04-22T06:16:22Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@10557

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@10557

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: 7d10482

github-actions · 2026-04-22T06:16:31Z

size-limit report 📦

Path	Size
react full	11.99 KB (0%)
react minimal	9.02 KB (0%)

coderabbitai

🧹 Nitpick comments (1)

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

52-62: Optional: DRY the repeated mutating-text assertions.

The three assertions are clear, but a tiny helper would reduce duplication and make future edits safer.

♻️ Suggested cleanup

+    const expectMutating = (value: number) => {
+      expect(rendered.getByText(`mutating: ${value}`)).toBeInTheDocument()
+    }
+
-    expect(rendered.getByText('mutating: 0')).toBeInTheDocument()
+    expectMutating(0)

     rendered.fixture.componentInstance.mutation.mutate({ par1: 'par1' })

     await vi.advanceTimersByTimeAsync(0)
     rendered.fixture.detectChanges()
-    expect(rendered.getByText('mutating: 1')).toBeInTheDocument()
+    expectMutating(1)

     await vi.advanceTimersByTimeAsync(11)
     rendered.fixture.detectChanges()
-    expect(rendered.getByText('mutating: 0')).toBeInTheDocument()
+    expectMutating(0)

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/angular-query-experimental/src/__tests__/inject-is-mutating.test.ts`
around lines 52 - 62, The test repeats the same DOM assertion for the mutating
count; extract a small helper (e.g., expectMutatingCount or assertMutatingText)
near the test in inject-is-mutating.test.ts that accepts the expected number and
calls rendered.getByText(`mutating: ${n}`) and toBeInTheDocument(), then replace
the three duplicated assertions with calls to that helper around the mutation
and timer advances to DRY the test and make future changes safer.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In
`@packages/angular-query-experimental/src/__tests__/inject-is-mutating.test.ts`:
- Around line 52-62: The test repeats the same DOM assertion for the mutating
count; extract a small helper (e.g., expectMutatingCount or assertMutatingText)
near the test in inject-is-mutating.test.ts that accepts the expected number and
calls rendered.getByText(`mutating: ${n}`) and toBeInTheDocument(), then replace
the three duplicated assertions with calls to that helper around the mutation
and timer advances to DRY the test and make future changes safer.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d6444233-0797-4c48-870b-eda2e00b32c4

📥 Commits

Reviewing files that changed from the base of the PR and between f01b7ce and 7d10482.

📒 Files selected for processing (1)

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

test(angular-query-experimental/injectIsMutating): switch main test to '

7d10482

@component' + 'render' pattern

github-actions Bot added the package: angular-query-experimental label Apr 22, 2026

sukvvon self-assigned this Apr 22, 2026

coderabbitai Bot reviewed Apr 22, 2026

View reviewed changes

sukvvon merged commit 0d2112c into main Apr 22, 2026
10 checks passed

sukvvon deleted the test/angular-query-inject-is-mutating-render-pattern branch April 22, 2026 06:36

sukvvon mentioned this pull request Apr 22, 2026

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

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

test(angular-query-experimental/injectIsMutating): switch main test to '@Component' + 'render' pattern#10557
sukvvon merged 1 commit intomainfrom
test/angular-query-inject-is-mutating-render-pattern

sukvvon commented Apr 22, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Apr 22, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Suggested labels

Poem

Uh oh!

nx-cloud Bot commented Apr 22, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 22, 2026

Uh oh!

pkg-pr-new Bot commented Apr 22, 2026

Uh oh!

github-actions Bot commented Apr 22, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

sukvvon commented Apr 22, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

Before

After

Why

Verification

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested labels

Poem

Uh oh!

nx-cloud Bot commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Apr 22, 2026

🚀 Changeset Version Preview

Uh oh!

pkg-pr-new Bot commented Apr 22, 2026

Uh oh!

github-actions Bot commented Apr 22, 2026

size-limit report 📦

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented Apr 22, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Apr 22, 2026 •

edited

Loading

nx-cloud Bot commented Apr 22, 2026 •

edited

Loading