test(angular-query-experimental/injectQueries): switch to fake timers, replace 'setTimeout' with 'sleep', replace 'findByText' with 'getByText', add 'toBeInTheDocument', remove unused 'toString' method, rename '_pushResults' to '_', and add '@testing-library/jest-dom/vitest' #9896
Conversation
β¦, replace 'setTimeout' with 'sleep', replace 'findByText' with 'getByText', add 'toBeInTheDocument', remove unused 'toString' method, rename '_pushResults' to '_', and add '@testing-library/jest-dom/vitest'
|
WalkthroughThis PR enhances test infrastructure for Angular Query Experimental by adding fake timer support to the inject-queries test, introducing a sleep utility for cleaner async handling, and adding Jest DOM matchers to the global test setup for improved assertions. Changes
Sequence DiagramsequenceDiagram
participant Test as Test Case
participant Timer as Fake Timers
participant Component as Angular Component
participant DOM as DOM
Test->>Timer: useFakeTimers()
Test->>Component: render with providers
Test->>Component: trigger async query
Note over Component: Query in progress
Test->>Timer: advanceTimersByTimeAsync(101)
Timer->>Component: timer advances
Test->>Component: detectChanges()
Component->>DOM: update rendered content
Test->>DOM: assert text content
Estimated code review effortπ― 2 (Simple) | β±οΈ ~12 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touchesβ Passed checks (3 passed)
β¨ Finishing touches
π§ͺ Generate unit tests (beta)
Comment |
|
View your CI Pipeline Execution β for commit 32a3378
βοΈ Nx Cloud last updated this comment at |
Codecov Reportβ
All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #9896 +/- ##
===========================================
+ Coverage 45.70% 94.13% +48.42%
===========================================
Files 200 21 -179
Lines 8437 426 -8011
Branches 1936 99 -1837
===========================================
- Hits 3856 401 -3455
+ Misses 4133 24 -4109
+ Partials 448 1 -447 π New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
π§Ή Nitpick comments (1)
packages/angular-query-experimental/src/__tests__/inject-queries.test.ts (1)
66-71: Consider whether TestBed providers duplication is necessary.The providers are configured in both
TestBed.configureTestingModule(lines 19-21) and in therendercall here. Since@testing-library/angularcreates its own TestBed module, the explicit providers inrendermay be sufficient for test isolation. However, if other tests in this suite rely on the global TestBed configuration, the current approach is fine.
π Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
π Files selected for processing (2)
packages/angular-query-experimental/src/__tests__/inject-queries.test.ts(3 hunks)packages/angular-query-experimental/test-setup.ts(1 hunks)
π§° Additional context used
π§ Learnings (4)
π Common learnings
Learnt from: sukvvon
Repo: TanStack/query PR: 9892
File: packages/solid-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx:331-335
Timestamp: 2025-11-22T09:06:05.219Z
Learning: In TanStack/query test files, when a queryFn contains side effects (e.g., setting flags for test verification), prefer async/await syntax for clarity; when there are no side effects, prefer the .then() pattern for conciseness.
π Learning: 2025-08-19T03:18:18.303Z
Learnt from: oscartbeaumont
Repo: TanStack/query PR: 9564
File: packages/solid-query-devtools/src/production.tsx:2-3
Timestamp: 2025-08-19T03:18:18.303Z
Learning: In the solid-query-devtools package, the codebase uses a pattern of type-only default imports combined with typeof for component type annotations (e.g., `import type SolidQueryDevtoolsComp from './devtools'` followed by `typeof SolidQueryDevtoolsComp`). This pattern is consistently used across index.tsx and production.tsx files, and the maintainers prefer consistency over changing this approach.
Applied to files:
packages/angular-query-experimental/test-setup.ts
π Learning: 2025-09-21T00:31:02.518Z
Learnt from: arnoud-dv
Repo: TanStack/query PR: 9669
File: docs/framework/angular/guides/testing.md:49-56
Timestamp: 2025-09-21T00:31:02.518Z
Learning: TestBed.tick() is a valid API introduced in Angular 20 for triggering effects in unit tests, similar to ApplicationRef.tick() but for testing contexts.
Applied to files:
packages/angular-query-experimental/test-setup.tspackages/angular-query-experimental/src/__tests__/inject-queries.test.ts
π Learning: 2025-11-22T09:06:05.219Z
Learnt from: sukvvon
Repo: TanStack/query PR: 9892
File: packages/solid-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx:331-335
Timestamp: 2025-11-22T09:06:05.219Z
Learning: In TanStack/query test files, when a queryFn contains side effects (e.g., setting flags for test verification), prefer async/await syntax for clarity; when there are no side effects, prefer the .then() pattern for conciseness.
Applied to files:
packages/angular-query-experimental/src/__tests__/inject-queries.test.ts
π Additional comments (6)
packages/angular-query-experimental/test-setup.ts (1)
1-1: LGTM!The jest-dom import correctly extends Vitest with DOM matchers like
toBeInTheDocument()used in the test file.packages/angular-query-experimental/src/__tests__/inject-queries.test.ts (5)
1-1: LGTM!The import additions correctly support the fake timer migration:
viandafterEachfor timer setup/teardown, andsleepfor cleaner async handling.Also applies to: 8-9
16-16: LGTM!The fake timer setup follows the standard Vitest pattern with proper cleanup in
afterEachto prevent timer leaks between tests.Also applies to: 26-28
60-63: LGTM!The naming change from
_pushResultsto_follows the convention for internal/private properties and maintains the same functionality.
73-76: LGTM!The timer advancement and assertion logic is correct:
advanceTimersByTimeAsync(101)covers both delays (10ms and 100ms)detectChanges()updates the DOM after timer advancement- Using
getByText(synchronous) is appropriate after manual timer advancement- The
toBeInTheDocument()matcher is available via the jest-dom setup
51-51: No issues found.The
sleeputility from@tanstack/query-test-utilsusessetTimeoutinternally, which is fully compatible with Vitest'svi.useFakeTimers(). The test file properly enables fake timers at line 16, so the sleep delays will be controlled by the test framework. The.then()pattern used at lines 51 and 55 is appropriate since the queryFn has no side effects, consistent with established patterns in the codebase.
1 participant
π― Changes
β Checklist
pnpm run test:pr.π Release Impact
Summary by CodeRabbit
βοΈ Tip: You can customize this high-level summary in your review settings.