You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Rewrites the main test in inject-is-fetching.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 injectIsFetching in an Angular component.
Before
it('should return the number of fetching queries',async()=>{constkey=queryKey()constisFetching=TestBed.runInInjectionContext(()=>{injectQuery(()=>({queryKey: key,queryFn: ()=>sleep(100).then(()=>'Some data'),}))returninjectIsFetching()})expect(isFetching()).toStrictEqual(0)awaitvi.advanceTimersByTimeAsync(1)expect(isFetching()).toStrictEqual(1)awaitvi.advanceTimersByTimeAsync(100)expect(isFetching()).toStrictEqual(0)})
After
it('should return the number of fetching queries',async()=>{constkey=queryKey()
@Component({template: `<div>fetching: {{ isFetching() }}</div>`,})classPage{readonlyquery=injectQuery(()=>({queryKey: key,queryFn: ()=>sleep(100).then(()=>'Some data'),}))readonlyisFetching=injectIsFetching()}constrendered=awaitrender(Page)expect(rendered.getByText('fetching: 0')).toBeInTheDocument()awaitvi.advanceTimersByTimeAsync(0)rendered.fixture.detectChanges()expect(rendered.getByText('fetching: 1')).toBeInTheDocument()awaitvi.advanceTimersByTimeAsync(101)rendered.fixture.detectChanges()expect(rendered.getByText('fetching: 0')).toBeInTheDocument()})
Why
Matches the component-based usage shown in the official Angular guide (`docs/framework/angular/guides/background-fetching-indicators.md`) and across `examples/angular/*`.
`readonly` fields on the test component follow the convention used in our Angular examples (`readonly query = injectQuery(...)`, `readonly isFetching = injectIsFetching()`).
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
Refactored a test to validate injectIsFetching() via a rendered Angular component and DOM assertions using @testing-library/angular's render(), replacing direct invocation inside TestBed.runInInjectionContext() and per-step callable checks with template text checks and fixture.detectChanges() after advancing fake timers.
Changes
Cohort / File(s)
Summary
Test Refactor packages/angular-query-experimental/src/__tests__/inject-is-fetching.test.ts
Replaced direct TestBed.runInInjectionContext() invocation with a component (Page) that uses injectQuery(...) and exposes isFetching = injectIsFetching(). Switched assertions from calling isFetching() at timer steps to checking DOM text (fetching: 0/1). Added fixture.detectChanges() after advancing fake timers to refresh template output.
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~10 minutes
Poem
🐇 I hopped into tests with a curious grin,
Swapped bare calls for a component within,
Timers tick-tock, the DOM shows the tale,
detectChanges breathes life, assertions prevail. 🎩
The title clearly and specifically describes the main change: refactoring a test to use an Angular @Component with the render pattern instead of TestBed.runInInjectionContext.
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.
Description check
✅ Passed
The PR description is comprehensive and includes all required sections from the template with completed checklists and clear context.
✏️ 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-fetching-render-pattern
Comment @coderabbitai help to get the list of available commands and usage tips.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
sukvvon
force-pushed
the
test/angular-query-inject-is-fetching-render-pattern
branch
from
🎯 Changes
Rewrites the main test in
inject-is-fetching.test.tsto use a@Component+@testing-library/angular'srenderinstead of callingTestBed.runInInjectionContextand asserting on the signal value directly. The assertion now checks the rendered DOM text, which mirrors how a user actually observesinjectIsFetchingin an Angular component.Before
After
Why
Verification
✅ Checklist
🚀 Release Impact