-
Notifications
You must be signed in to change notification settings - Fork 246
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
DateRangePicker onChange not triggering during testing #426
Comments
Hi @mnajdova thanks for opening the issue :). I suggest you to use The problem here is that clicking on the input field only this events are fired
while on
This is causing a change of the focus from the input to the calendar div. This is wired 🤔 |
@marcosvega91, thanks for your feedback. |
So the problem in our (i.e. @mnemanja and mine) tests was that the date range picker is rendered in mobile mode by default. The picker library (@material-ui/pickers) uses media queries to determine if you are using a desktop environment. We were running our tests with jest and jsdom 16. It does not implement import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
beforeEach(() => {
// add window.matchMedia
// this is necessary for the date picker to be rendered in desktop mode.
// if this is not provided, the mobile mode is rendered, which might lead to unexpected behavior
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: (query: string): MediaQueryList => ({
media: query,
// this is the media query that @material-ui/pickers uses to determine if a device is a desktop device
matches: query === '(pointer: fine)',
onchange: () => {},
addEventListener: () => {},
removeEventListener: () => {},
addListener: () => {},
removeListener: () => {},
dispatchEvent: () => false,
}),
});
});
afterEach(() => {
delete window.matchMedia;
});
it('should be possible to set a start and end date', async () => {
render(<MyComponent />);
const startDateInput = await screen.findByRole('textbox', { name: /start date/i });
const endDateInput = screen.getByRole('textbox', { name: /end date/i });
userEvent.clear(startDateInput);
// this has to be typed one number at a time for the formatting to work
await userEvent.type(startDateInput, '20200106', { delay: 1 });
userEvent.clear(endDateInput);
await userEvent.type(endDateInput, '20200109', { delay: 1 });
expect(screen.getByRole('textbox', { name: /start date/i })).toHaveValue('2020-01-06');
expect(screen.getByRole('textbox', { name: /end date/i })).toHaveValue('2020-01-09');
}); So this was more a documentation issue for @material-ui/pickers. |
Glad you worked that out! I think we're safe to close this here. |
@testing-library/user-event
version: v12.0.11jest
version: v24.9.0@testing-library/jest-dom
version: v5.11.0node version: v13.8.0
What you did:
Writing test for DateRangePicker from Material-UI to assert the changes to the component which needs the date range information.
What happened:
The
onChange
of theDateRangePicker
doesn't get triggered.However, it works in the browser.
This simply does nothing:
However:
Using the
delay
option throws an unexpected error:TypeError: the current element is of type DIV and doesn't have a valid value
This error is not very clear, since when debugging the element returned by the query it returns the correct one.
Reproduction repository:
I've created a reproduction in a sandbox, but couldn't get the tests feedback. Not sure why.
https://codesandbox.io/s/daterangepicker-onchange-not-triggering-022cl
Problem description:
The behaviour should be as expected when running tests or testing manually in a browser. Meaning, the
onChange
event should be triggered disregarding if the method of triggering it wasuserEvent.type()
or manually via browser.Suggested solution:
I'm actually not sure if this is a fault of the
DateRangePicker
library, oruserEvents
library, and because of that I've created a bug ticket there as well.mui/material-ui-pickers#2073
The text was updated successfully, but these errors were encountered: