test: adds ShadowDOM / UNSAFE_PortalProvider tests #8806
Conversation
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
These tests specifically target issue adobe#8675 where menu items in popovers close immediately instead when using ShadowDOM with UNSAFE_PortalProvider. New test suites added: - FocusScope: Shadow DOM boundary containment issues - usePopover: Shadow DOM popover interactions and focus management - useFocusWithin: Focus within detection across shadow boundaries - useInteractOutside: Interact outside detection with portals I generated these tests with AI then reviewed / updated them.
After applying the patches I mentioned in my issue I've noticed that many of the AI generated tests were either broken or just not testing anything interesting. Luckily there are some that are. I'll have to update the rest of the tests as they aren't passing at the moment.
I have a conflicting default prettier config (I can't seem to find this projects.) I'm reverting a number of my autochanges.
There are a bunch of redundant tests. Getting rid of them for now.
snowystinger
reviewed
Sep 3, 2025
packages/@react-aria/interactions/test/useInteractOutside.test.js
Outdated
Show resolved
Hide resolved
packages/@react-aria/interactions/test/useInteractOutside.test.js
Outdated
Show resolved
Hide resolved
packages/@react-aria/interactions/test/useInteractOutside.test.js
Outdated
Show resolved
Hide resolved
| */ | ||
| export function getEventTarget<T extends Event>(event: T): Element { | ||
| if (shadowDOM() && (event.target as HTMLElement).shadowRoot) { | ||
| if (shadowDOM() && (event.target as HTMLElement)?.shadowRoot) { |
There was a problem hiding this comment.
interesting, when was this not defined?
There was a problem hiding this comment.
It was a while ago I did this, I'll try and reproduce it and see exactly when this happened.
Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Robert Snow <[email protected]>
I added a popover test but it seems that when creating my replication in test code I noticed that the popover is never displayed. Seems that there is an issue with showing popovers in the tests when everything is in the shadow dom...
I had to add another dependency to get the test to actually find the parts of the shadow dom I was interested in. Seems like the default testing libraries don't cover this case unfortunately.
|
Okay so I've updated this to have a much better test which in my opinion tests the functionality. I unfortunately had to add another dependency to do so: https://github.com/konnorrogers/shadow-dom-testing-library I wasn't able to find the shadow dom elements without it 🤷 The bad news is that I reverted the code changes and the test still passes so I'm not sure what's going on. Either:
Either way this is a more complete PR at least. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Closes #8675
✅ Pull Request Checklist:
📝 Test Instructions:
Not sure what the test instructions would be, I have this reproduction repo: https://github.com/johnpangalos/rac-shadow-dom-bug-report, but some of the React Spectrum team couldn't run it. I can try and set it up so that you can link the repo to a build of RAC.
I have one non passing test, but I thought it was best to put up a PR anyway with the changes I've had time to finish so far.
The tests were originally created by AI, but I've had to alter them to get them to test what I'd actually like them to test.
🧢 Your Project:
Thomson Reuters (Pagero)