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

sukvvon · 2026-04-22T06:50:56Z

🎯 Changes

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

Mirrors the approach taken for injectIsFetching in #10556 and injectIsMutating in #10557.

Before

it('should properly execute infinite query', async () => {
  const key = queryKey()
  const query = TestBed.runInInjectionContext(() => {
    return injectInfiniteQuery(() => ({
      queryKey: key,
      queryFn: ({ pageParam }) =>
        sleep(10).then(() => 'data on page ' + pageParam),
      initialPageParam: 0,
      getNextPageParam: () => 12,
    }))
  })

  expectSignals(query, {
    data: undefined,
    status: 'pending',
  })

  await vi.advanceTimersByTimeAsync(11)

  expectSignals(query, {
    data: { pageParams: [0], pages: ['data on page 0'] },
    status: 'success',
  })

  void query.fetchNextPage()

  await vi.advanceTimersByTimeAsync(11)

  expectSignals(query, {
    data: {
      pageParams: [0, 12],
      pages: ['data on page 0', 'data on page 12'],
    },
    status: 'success',
  })
})

After

it('should properly execute infinite query', async () => {
  const key = queryKey()

  @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,
    }))
  }

  const rendered = await render(Page)

  expect(rendered.getByText('status: pending')).toBeInTheDocument()
  expect(rendered.getByText('pages: none')).toBeInTheDocument()

  await vi.advanceTimersByTimeAsync(11)
  rendered.fixture.detectChanges()
  expect(rendered.getByText('status: success')).toBeInTheDocument()
  expect(rendered.getByText('pages: data on page 0')).toBeInTheDocument()

  rendered.fixture.componentInstance.query.fetchNextPage()

  await vi.advanceTimersByTimeAsync(11)
  rendered.fixture.detectChanges()
  expect(rendered.getByText('status: success')).toBeInTheDocument()
  expect(
    rendered.getByText('pages: data on page 0, data on page 12'),
  ).toBeInTheDocument()
})

Why

Matches the component-based usage shown across examples/angular/* (readonly query = injectInfiniteQuery(...)).
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
- Enhanced test coverage for infinite query functionality with improved component rendering validation and comprehensive DOM output assertions to ensure robust verification of query behavior.

…t to '@component' + 'render' pattern

coderabbitai · 2026-04-22T06:51:09Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 996c12d5-d66e-46bf-922d-373f4809b1e7

📥 Commits

Reviewing files that changed from the base of the PR and between 0d2112c and af91d7c.

📒 Files selected for processing (1)

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

📝 Walkthrough

Walkthrough

A test file refactored to render an Angular component with @testing-library/angular instead of using TestBed.runInInjectionContext. Assertions changed from checking signal values directly to verifying rendered DOM text output, and method invocations switched to accessing component instance through the fixture.

Changes

Cohort / File(s)	Summary
Test refactoring `packages/angular-query-experimental/src/__tests__/inject-infinite-query.test.ts`	Converted test from using `TestBed.runInInjectionContext` pattern to rendering an Angular component with `@testing-library/angular`. Updated assertions to verify DOM text content instead of signal values, and changed query interaction to invoke methods via `componentInstance`.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

test(angular-query-experimental/injectIsMutating): switch main test to '@Component' + 'render' pattern #10557: Applies the same test pattern refactoring across other inject-* tests, converting from TestBed.runInInjectionContext to @Component with @testing-library/angular render and DOM-based assertions.

Suggested labels

package: angular-query-experimental

Poem

🐰 The tests hop along with a brand new way,
From TestBed's context to component's display,
DOM assertions now guide the test's dance,
Where signals give way to the rendered expanse! ✨

🚥 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 pattern to use '@component' + 'render' from '@testing-library/angular' instead of TestBed.runInInjectionContext.
Description check	✅ Passed	The description follows the template with complete 🎯 Changes section and ✅ Checklist with both items checked; the Release Impact section correctly marks this as docs/CI/dev-only with no changeset needed.
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-infinite-query-render-pattern

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

nx-cloud · 2026-04-22T06:51:33Z

View your CI Pipeline Execution ↗ for commit af91d7c

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

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

github-actions · 2026-04-22T06:51:44Z

🚀 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:52:38Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/preact-query

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

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

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

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: af91d7c

github-actions · 2026-04-22T06:52:48Z

size-limit report 📦

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

test(angular-query-experimental/injectInfiniteQuery): switch main tes…

af91d7c

…t to '@component' + 'render' pattern

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

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

sukvvon deleted the test/angular-query-inject-infinite-query-render-pattern branch April 22, 2026 06:56

sukvvon self-assigned this Apr 22, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

test(angular-query-experimental/injectInfiniteQuery): switch main test to '@Component' + 'render' pattern#10558
sukvvon merged 1 commit intomainfrom
test/angular-query-inject-infinite-query-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

Possibly related PRs

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!

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

Possibly related PRs

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!

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