feat(browser): support toBeInViewport utility method to assert element is in viewport or not

[Shinyaigeek]

Description

Close: #7650

This is a suggested feature in that ticket. toBeInViewport is implemented in playwright, and this is port to vitest

Hi team 👋 I am a one of vitest fun, and I wanted to enhance vitest feature.
As a first step, I implemented toBeInViewport feature in vitest/browser package which is suggested in #7650

Perhaps, I could overtake some context, so please feel free to point out that if there is something I overtake. Additionaly, regarding issue #7650, some time has passed since its creation. If there has been an internal decision not to proceed with this feature, please don't hesitate to close the issue.

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
• Ideally, include a test that fails without this PR but passes with it.
• Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.

Tests

• Run the tests with pnpm test:ci.

Documentation

• If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

• Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

[netlify]

✅ Deploy Preview for vitest-dev ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	2071baf
🔍 Latest deploy log	https://app.netlify.com/projects/vitest-dev/deploys/6863d28586befd0008ae6dba
😎 Deploy Preview	https://deploy-preview-8234--vitest-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Shinyaigeek]

hmm...some tests related to my work seems to be failing, I will see later 🙇

[sheremet-va]

Looks good to me, just docs missing

[Shinyaigeek]

Thank you for reviewing! some tests have still been failing on CI...(but in my local environment, these tests pass 🤔 ) Let me more investigating...
I forgot about the document page, so I'll push that later!

[Shinyaigeek]

Thank you for reviewing! some tests have still been failing on CI...(but in my local environment, these tests pass 🤔 ) Let me more investigating...

I understood, I forgot to run pnpm build before testing 🤦

I've fixed the tests to pass on browsers other than Firefox. However, before I tackle the docs and Firefox tests, I have a question 🙇

I've implemented toBeInViewport method based on Intersection Observer API for testing in a Playwright-compliant way.

The issue is that the callback function passed to the Intersection Observer API executes after the assertion within a synchronous process. Consequently, when expect(element).toBeInViewport() runs, the callback(=check the element is in viewport or not) hasn't fired yet, leading to an error.

To work around this, I've tentatively implemented a Promise-based solution in eb29fd7. This approach, however, inevitably leads to a usage pattern like await expect(element).toBeInViewport().

Is this API design acceptable? I feel it might be fine because ExpectationResult itself encapsulates a Promise, but I haven't found other examples, so I wanted to ask.

[sheremet-va]

Is this API design acceptable? I feel it might be fine because ExpectationResult itself encapsulates a Promise, but I haven't found other examples, so I wanted to ask.

Yes, it is fine to always return a Promise

[Shinyaigeek]

@sheremet-va

Thank you for reviewing and your answer!
I fixed and tests related to toBeInViewport are passed!(currently, one testing GHA workflow is failing but it seems not related to toBeInViewport)

Also, I wrote document about toBeInViewport in 5f2b411.

so PR is ready for review! Please review this if you have time!