Migrated DateIntervalSelector test to react testing library

This commit is contained in:
Alejandro Celaya 2022-07-08 15:11:51 +02:00
parent 2e0e7f361c
commit c00053f6e1

View file

@ -1,27 +1,26 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { DateInterval, rangeOrIntervalToString } from '../../../src/utils/dates/types'; import { DateInterval, rangeOrIntervalToString } from '../../../src/utils/dates/types';
import { DateIntervalSelector } from '../../../src/utils/dates/DateIntervalSelector'; import { DateIntervalSelector } from '../../../src/utils/dates/DateIntervalSelector';
import { DateIntervalDropdownItems } from '../../../src/utils/dates/DateIntervalDropdownItems';
import { DropdownBtn } from '../../../src/utils/DropdownBtn';
describe('<DateIntervalSelector />', () => { describe('<DateIntervalSelector />', () => {
let wrapper: ShallowWrapper;
const activeInterval: DateInterval = 'last7Days'; const activeInterval: DateInterval = 'last7Days';
const onChange = jest.fn(); const onChange = jest.fn();
const setUp = () => ({
beforeEach(() => { user: userEvent.setup(),
wrapper = shallow(<DateIntervalSelector allText="All text" active={activeInterval} onChange={onChange} />); ...render(<DateIntervalSelector allText="All text" active={activeInterval} onChange={onChange} />),
}); });
afterEach(() => wrapper?.unmount());
it('passes props down to nested DateIntervalDropdownItems', () => { it('passes props down to nested DateIntervalDropdownItems', async () => {
const items = wrapper.find(DateIntervalDropdownItems); const { user } = setUp();
const dropdown = wrapper.find(DropdownBtn); const btn = screen.getByRole('button');
expect(dropdown.prop('text')).toEqual(rangeOrIntervalToString(activeInterval)); await user.click(btn);
expect(items).toHaveLength(1); await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument());
expect(items.prop('onChange')).toEqual(onChange);
expect(items.prop('active')).toEqual(activeInterval); const items = screen.getAllByRole('menuitem');
expect(items.prop('allText')).toEqual('All text');
expect(btn).toHaveTextContent(rangeOrIntervalToString(activeInterval) ?? '');
expect(items).toHaveLength(8);
}); });
}); });