Thanks to visit codestin.com
Credit goes to github.com

Skip to content

test(useIntersectionObserver): Add browser tests for useIntersectionObserver #5136

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 20 commits into
base: main
Choose a base branch
from
Open

test(useIntersectionObserver): Add browser tests for useIntersectionObserver #5136

wants to merge 20 commits into from
+545 −0

Conversation

@kevinluo201
Copy link
Contributor

@kevinluo201 kevinluo201 commented Nov 1, 2025

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Read the Pull Request Guidelines.
  • Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.
⚠️ Slowing down new functions

Warning: Slowing down new functions

As the VueUse audience continues to grow, we have been inundated with an overwhelming number of feature requests and pull requests. As a result, maintaining the project has become increasingly challenging and has stretched our capacity to its limits. As such, in the near future, we may need to slow down our acceptance of new features and prioritize the stability and quality of existing functions. Please note that new features for VueUse may not be accepted at this time. If you have any new ideas, we suggest that you first incorporate them into your own codebase, iterate on them to suit your needs, and assess their generalizability. If you strongly believe that your ideas are beneficial to the community, you may submit a pull request along with your use cases, and we would be happy to review and discuss them. Thank you for your understanding.

Description

Add the tests for useIntersectionObserver, and it should be easier for developers to add new features to this composable.

Additional context

This PR add both unit test and browser test.

Unit Test

Why does it still have a unit test while JSDom doesn't have IntersectionObserver? First, it can check if isSupported works. Second, I think Vueuse doesn't need to know if IntersectionObserver works correctly; that should be the browser's responsibility. Therefore, verifying the messages sent to the IntersectionObserver from useIntersectionObserver makes more sense.

Browser Test

Again, while we don't need to check the correctness of the IntersectionObserver, it should check the reactivity and the exposed properties, which are implemented uniquely by useIntersectionObserver

@dosubot dosubot bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Nov 1, 2025
@pkg-pr-new
Copy link

pkg-pr-new bot commented Nov 1, 2025 •
edited
Loading

Open in StackBlitz

@vueuse/components

npm i https://pkg.pr.new/@vueuse/components@5136

@vueuse/core

npm i https://pkg.pr.new/@vueuse/core@5136

@vueuse/electron

npm i https://pkg.pr.new/@vueuse/electron@5136

@vueuse/firebase

npm i https://pkg.pr.new/@vueuse/firebase@5136

@vueuse/integrations

npm i https://pkg.pr.new/@vueuse/integrations@5136

@vueuse/math

npm i https://pkg.pr.new/@vueuse/math@5136

@vueuse/metadata

npm i https://pkg.pr.new/@vueuse/metadata@5136

@vueuse/nuxt

npm i https://pkg.pr.new/@vueuse/nuxt@5136

@vueuse/router

npm i https://pkg.pr.new/@vueuse/router@5136

@vueuse/rxjs

npm i https://pkg.pr.new/@vueuse/rxjs@5136

@vueuse/shared

npm i https://pkg.pr.new/@vueuse/shared@5136

commit: 60137eb

OrbisK
OrbisK requested changes Nov 1, 2025
View reviewed changes
Copy link
Member

@OrbisK OrbisK left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your PR 🙏🏽

I think we only need the browser tests. We should also use rendered Vue components to test more than just the browsers intersection observer.

@dosubot dosubot bot added size:XL This PR changes 500-999 lines, ignoring generated files. and removed size:L This PR changes 100-499 lines, ignoring generated files. labels Nov 6, 2025
@kevinluo201
Copy link
Contributor Author

kevinluo201 commented Nov 6, 2025

I think the way Component is created in each test may be simplified. It is because the template and the options of useIntersectionObserver change almost in every case, so I just left them like that. However, I think the most important thing is, do you think the test cases make sense and cover the usage of the composable?

@kevinluo201
Copy link
Contributor Author

kevinluo201 commented Nov 6, 2025

btw, I keep seeing the warning

[@vue/compiler-core] decodeEntities option is passed but will be ignored in non-browser builds.

in raised in every test, but I have no idea what it is...

@kevinluo201 kevinluo201 changed the title test(useIntersectionObserver): Add browser and unit tests for useIntersectionObserver test(useIntersectionObserver): Add browser tests for useIntersectionObserver Nov 7, 2025
@kevinluo201 kevinluo201 requested a review from OrbisK November 11, 2025 18:50
@codecov
Copy link

codecov bot commented Nov 14, 2025 •
edited
Loading

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 64.01%. Comparing base (6f79ae1) to head (60137eb).

Additional details and impacted files 
@@            Coverage Diff             @@
##             main    #5136      +/-   ##
==========================================
+ Coverage   63.95%   64.01%   +0.06%     
==========================================
  Files         343      343              
  Lines        7838     7832       -6     
  Branches     2424     2406      -18     
==========================================
+ Hits         5013     5014       +1     
+ Misses       2286     2279       -7     
  Partials      539      539

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label Nov 14, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@OrbisK OrbisK OrbisK approved these changes

Assignees

No one assigned

Labels

lgtm This PR has been approved by a maintainer size:XL This PR changes 500-999 lines, ignoring generated files.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@kevinluo201 @OrbisK @9romise