Migrated DateRangeRow test to react testing library

This commit is contained in:
Alejandro Celaya 2022-07-17 09:15:36 +02:00
parent 24de0773d8
commit 126537185b

View file

@ -1,39 +1,34 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { screen } from '@testing-library/react';
import { DateRangeRow } from '../../../src/utils/dates/DateRangeRow'; import { DateRangeRow } from '../../../src/utils/dates/DateRangeRow';
import { DateInput } from '../../../src/utils/DateInput'; import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<DateRangeRow />', () => { describe('<DateRangeRow />', () => {
let wrapper: ShallowWrapper;
const onEndDateChange = jest.fn(); const onEndDateChange = jest.fn();
const onStartDateChange = jest.fn(); const onStartDateChange = jest.fn();
const setUp = () => renderWithEvents(
<DateRangeRow onEndDateChange={onEndDateChange} onStartDateChange={onStartDateChange} />,
);
beforeEach(() => { afterEach(jest.clearAllMocks);
wrapper = shallow(<DateRangeRow onEndDateChange={onEndDateChange} onStartDateChange={onStartDateChange} />);
});
afterEach(() => {
wrapper.unmount();
jest.clearAllMocks();
});
it('renders two date inputs', () => { it('renders two date inputs', () => {
const dateInput = wrapper.find(DateInput); setUp();
expect(screen.getAllByRole('textbox')).toHaveLength(2);
expect(dateInput).toHaveLength(2);
}); });
it('invokes start date callback when change event is triggered on first input', () => { it('invokes start date callback when change event is triggered on first input', async () => {
const dateInput = wrapper.find(DateInput).first(); const { user } = setUp();
expect(onStartDateChange).not.toHaveBeenCalled(); expect(onStartDateChange).not.toHaveBeenCalled();
dateInput.simulate('change'); await user.type(screen.getByPlaceholderText('Since...'), '2020-05-05');
expect(onStartDateChange).toHaveBeenCalled(); expect(onStartDateChange).toHaveBeenCalled();
}); });
it('invokes end date callback when change event is triggered on second input', () => { it('invokes end date callback when change event is triggered on second input', async () => {
const dateInput = wrapper.find(DateInput).last(); const { user } = setUp();
expect(onEndDateChange).not.toHaveBeenCalled(); expect(onEndDateChange).not.toHaveBeenCalled();
dateInput.simulate('change'); await user.type(screen.getByPlaceholderText('Until...'), '2022-05-05');
expect(onEndDateChange).toHaveBeenCalled(); expect(onEndDateChange).toHaveBeenCalled();
}); });
}); });