Skip to content
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

[material-ui][Modal] Fix event handlers overriding behaviour #43757

Merged
merged 5 commits into from
Sep 17, 2024

Conversation

sai6855
Copy link
Contributor

@sai6855 sai6855 commented Sep 14, 2024

closes #43738

regression was introduced in this PR #42150 (by me 😑)

@sai6855 sai6855 added bug 🐛 Something doesn't work component: modal This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material regression A bug, but worse labels Sep 14, 2024
@mui-bot
Copy link

mui-bot commented Sep 14, 2024

Netlify deploy preview

https://deploy-preview-43757--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against a475aa7

@aarongarciah aarongarciah removed the request for review from DiegoAndai September 17, 2024 10:14
@aarongarciah aarongarciah merged commit e941175 into mui:master Sep 17, 2024
19 checks passed
</Modal>,
);

await user.keyboard('{Escape}');
Copy link
Member

Choose a reason for hiding this comment

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

How long does it take to run this test with this utils vs. firing a keydown event directly?

Copy link
Contributor Author

@sai6855 sai6855 Sep 17, 2024

Choose a reason for hiding this comment

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

Not sure if this is correct way.

await user.keyboard('{Escape}') took around 30ms (+/- 5ms)

image

 fireEvent.keyDown(getByTestId('modal'), {
   key: 'Escape',
 });

took around 4ms (+/- 1ms)

image

Copy link
Member

@oliviertassinari oliviertassinari Sep 17, 2024

Choose a reason for hiding this comment

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

Ok thanks, so about +20ms. If we scale this to our 10,000 tests: https://app.circleci.com/pipelines/github/mui/material-ui/139173/workflows/97427b1f-67e7-406f-aec4-1fdcd5fe84dc/jobs/750329.

It could mean +200s, from 3 minutes to 6 minutes: https://app.circleci.com/pipelines/github/mui/material-ui/139173/workflows/97427b1f-67e7-406f-aec4-1fdcd5fe84dc/jobs/750329. So I think to be really careful with this.

cc @Janpot. We might want to limit https://github.com/testing-library/user-event to only cases where we absolute need it.

Copy link
Member

Choose a reason for hiding this comment

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

I guess we should include clear guidelines on when to use one or the other in test/README.md. From discussions in past PRs it seemed that we were leaning towards using user more in new tests.

Copy link
Member

@Janpot Janpot Sep 17, 2024

Choose a reason for hiding this comment

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

We can potentially drastically speed up userEvent by setting it up with delay: null.

userEvent.setup({ delay: null })

See https://testing-library.com/docs/user-event/options/#delay

It looks like the semantics will change somewhat though. i.e. it will yield to a macrotask instead of a microtask in between events. I did some preliminary testing and it seems to make up the bulk of the increase in time. The question will be whether this is going to be a problem for us or not.

I'd argue that the current tests don't care at all about the event loop when chaining events, so we're probably good here.

In the meantime I'm also opening testing-library/user-event#1233

It could mean +200s, from 3 minutes to 6 minutes

The biggest part of the runtime increase seems to be non-blocking. With parallelized tests the impact should be much smaller than what you describe here.

@ZeeshanTamboli ZeeshanTamboli mentioned this pull request Sep 18, 2024
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: modal This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material regression A bug, but worse
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Dialog] Providing onKeyDown breaks closing via Escape
5 participants