-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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.
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
EditPostPreferencesModal: fix intermittently failing tests #53814
Conversation
).toMatchSnapshot(); | ||
} ); | ||
it( 'small viewports', async () => { | ||
useSelect.mockImplementation( () => [ true, true, false ] ); | ||
useViewportMatch.mockImplementation( () => false ); | ||
render( <EditPostPreferencesModal /> ); | ||
expect( | ||
await screen.findByRole( 'dialog', { name: 'Preferences' } ) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For small viewports, the modal uses the Navigator*
components instead of TabPanel
. The UI is completely synchronous, and the test doesn't need to await
.
Size Change: 0 B Total Size: 1.51 MB ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks good to me. Thanks for the fix, @jsnajdr!
I've noticed this test still appears to fail intermittently on PRs. To reproduce, if I run the following locally on
Would it be worth us trying to add in a tiny delay to compensate for the |
Removing
This seems like a good option to me. Just looking at the component, do we really need a snapshot to check that the viewport rendering works? Seems like we could test for visibility on a few of the main elements. |
I've done that here just in case folks agree: |
Fixes unit tests that started failing randomly since #52133. See #52133 (comment) for details.
The fix makes sure that we wait until the default tab (General) is selected, before comparing rendered markup with the snapshot.
The selection is not done on initial render, but is delayed until some effects and rAFs are flushed. The symptoms is that
tabindex
and sometimes alsodata-active-item
attributes on the<button role="tab">
elements don't match.It can be tracked down to Ariakit's
useCompositeItem
hook, where theisTabbable
value takes some time to settle on the expected value.