query icon indicating copy to clipboard operation
query copied to clipboard
verified publisher icon TanStack

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'

Open sukvvon opened this issue 1 month ago β€’ 5 comments

🎯 Changes

βœ… Checklist

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

πŸš€ Release Impact

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

Summary by CodeRabbit

  • Tests
    • Enhanced test infrastructure with fake timer support for timing-dependent test scenarios.
    • Improved test setup with better provider configuration for query testing.
    • Added refined test utilities and assertion mechanisms for DOM validation after asynchronous operations.
    • Upgraded test environment matchers for more comprehensive testing capabilities.

✏️ Tip: You can customize this high-level summary in your review settings.

sukvvon avatar Nov 23 '25 13:11 sukvvon

⚠️ No Changeset found

Latest commit: 503d87a9242d8613a65108f521a96f036c2c9424

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

changeset-bot[bot] avatar Nov 23 '25 13:11 changeset-bot[bot]

Walkthrough

This 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

Cohort / File(s) Summary
Test fixture enhancements
packages/angular-query-experimental/src/__tests__/inject-queries.test.ts		 Implements fake timer testing with useFakeTimers, replaces manual Promise delays with sleep utility, adds advanceTimersByTimeAsync(101) for timer control, extends test setup with zoneless change detection and TanStackQuery provider, refactors result-tracking mechanism, and adds DOM assertions after timer advancement.
Test environment setup
packages/angular-query-experimental/test-setup.ts		 Adds @testing-library/jest-dom/vitest import to extend Jest DOM matchers globally in the test environment.

Sequence Diagram

sequenceDiagram
    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

  • Areas requiring attention:
    • Verify fake timer setup and teardown logic (useFakeTimers/afterEach restoration)
    • Confirm sleep utility integration and async chaining correctness
    • Validate that advanceTimersByTimeAsync(101) correctly simulates the intended delay behavior
    • Review the test refactoring of result-tracking mechanism to ensure no loss of coverage

Possibly related PRs

  • TanStack/query#9569: Modifies the same @testing-library/jest-dom/vitest import handling, with complementary changes to test matchers.
  • TanStack/query#8690: Adds and fixes injectQueries tests and behavior, directly related to the test improvements in this PR.
  • TanStack/query#9850: Implements similar fake timer and sleep utility changes across other test files, following the same testing pattern.

Suggested reviewers

  • arnoud-dv
  • manudeli

Poem

🐰 Timers tick in jest's domain,
Sleep replaces Promise's chain,
Fake time flows at our command,
DOM assertions firmly stand,
Tests grow stronger, bugs take flight! ✨

Pre-merge checks and finishing touches

βœ… Passed checks (3 passed)
Check name Status Explanation
Title check βœ… Passed The title directly and comprehensively summarizes all the key changes made in the PR, including switching to fake timers, replacing setTimeout with sleep, replacing findByText with getByText, adding toBeInTheDocument, removing toString, renaming _pushResults to _, and adding the jest-dom/vitest import.
Description check βœ… Passed The PR description follows the provided template with all required sections completed: Changes section present (though brief), checklist items properly marked, and Release Impact correctly indicating dev-only changes with no changeset needed.
Docstring Coverage βœ… Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
  • [ ] πŸ“ Generate docstrings
πŸ§ͺ Generate unit tests (beta)
  • [ ] Create PR with unit tests
  • [ ] Post copyable unit tests in a comment

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

coderabbitai[bot] avatar Nov 23 '25 13:11 coderabbitai[bot]

View your CI Pipeline Execution β†— for commit 503d87a9242d8613a65108f521a96f036c2c9424

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... βœ… Succeeded 2m 29s View β†—
nx run-many --target=build --exclude=examples/*... βœ… Succeeded 9s View β†—

☁️ Nx Cloud last updated this comment at 2025-12-19 01:58:49 UTC

nx-cloud[bot] avatar Nov 23 '25 14:11 nx-cloud[bot]

More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@9896
@tanstack/eslint-plugin-query

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

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@9896
@tanstack/query-broadcast-client-experimental

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

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

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

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@9896
@tanstack/query-sync-storage-persister

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 503d87a

pkg-pr-new[bot] avatar Nov 23 '25 14:11 pkg-pr-new[bot]

Codecov Report

:white_check_mark: All modified and coverable lines are covered by tests. :white_check_mark: Project coverage is 94.13%. Comparing base (f15b7fc) to head (503d87a).

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##             main    #9896       +/-   ##
===========================================
+ Coverage   45.89%   94.13%   +48.23%     
===========================================
  Files         200       21      -179     
  Lines        8437      426     -8011     
  Branches     1943       99     -1844     
===========================================
- Hits         3872      401     -3471     
+ Misses       4116       24     -4092     
+ Partials      449        1      -448
Components Coverage Ξ”
@tanstack/angular-query-experimental 93.85% <ΓΈ> (ΓΈ)
@tanstack/eslint-plugin-query βˆ… <ΓΈ> (βˆ…)
@tanstack/query-async-storage-persister βˆ… <ΓΈ> (βˆ…)
@tanstack/query-broadcast-client-experimental βˆ… <ΓΈ> (βˆ…)
@tanstack/query-codemods βˆ… <ΓΈ> (βˆ…)
@tanstack/query-core βˆ… <ΓΈ> (βˆ…)
@tanstack/query-devtools βˆ… <ΓΈ> (βˆ…)
@tanstack/query-persist-client-core βˆ… <ΓΈ> (βˆ…)
@tanstack/query-sync-storage-persister βˆ… <ΓΈ> (βˆ…)
@tanstack/query-test-utils βˆ… <ΓΈ> (βˆ…)
@tanstack/react-query βˆ… <ΓΈ> (βˆ…)
@tanstack/react-query-devtools βˆ… <ΓΈ> (βˆ…)
@tanstack/react-query-next-experimental βˆ… <ΓΈ> (βˆ…)
@tanstack/react-query-persist-client βˆ… <ΓΈ> (βˆ…)
@tanstack/solid-query βˆ… <ΓΈ> (βˆ…)
@tanstack/solid-query-devtools βˆ… <ΓΈ> (βˆ…)
@tanstack/solid-query-persist-client βˆ… <ΓΈ> (βˆ…)
@tanstack/svelte-query βˆ… <ΓΈ> (βˆ…)
@tanstack/svelte-query-devtools βˆ… <ΓΈ> (βˆ…)
@tanstack/svelte-query-persist-client βˆ… <ΓΈ> (βˆ…)
@tanstack/vue-query βˆ… <ΓΈ> (βˆ…)
@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.

codecov[bot] avatar Nov 23 '25 14:11 codecov[bot]