Migrated VisitsSettings test to react testing library

This commit is contained in:
Alejandro Celaya 2022-06-08 18:24:21 +02:00
parent 98ea491469
commit e538f2a3bb

View file

@ -1,41 +1,35 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { Settings } from '../../src/settings/reducers/settings'; import { Settings } from '../../src/settings/reducers/settings';
import { VisitsSettings } from '../../src/settings/VisitsSettings'; import { VisitsSettings } from '../../src/settings/VisitsSettings';
import { SimpleCard } from '../../src/utils/SimpleCard';
import { DateIntervalSelector } from '../../src/utils/dates/DateIntervalSelector';
import { LabeledFormGroup } from '../../src/utils/forms/LabeledFormGroup';
describe('<VisitsSettings />', () => { describe('<VisitsSettings />', () => {
let wrapper: ShallowWrapper;
const setVisitsSettings = jest.fn(); const setVisitsSettings = jest.fn();
const createWrapper = (settings: Partial<Settings> = {}) => { const setUp = (settings: Partial<Settings> = {}) => ({
wrapper = shallow(<VisitsSettings settings={Mock.of<Settings>(settings)} setVisitsSettings={setVisitsSettings} />); user: userEvent.setup(),
...render(<VisitsSettings settings={Mock.of<Settings>(settings)} setVisitsSettings={setVisitsSettings} />),
return wrapper; });
};
afterEach(jest.clearAllMocks); afterEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount());
it('renders expected components', () => { it('renders expected components', () => {
const wrapper = createWrapper(); setUp();
expect(wrapper.find(SimpleCard).prop('title')).toEqual('Visits'); expect(screen.getByRole('heading')).toHaveTextContent('Visits');
expect(wrapper.find(LabeledFormGroup).prop('label')).toEqual('Default interval to load on visits sections:'); expect(screen.getByText('Default interval to load on visits sections:')).toBeInTheDocument();
expect(wrapper.find(DateIntervalSelector)).toHaveLength(1);
}); });
it.each([ it.each([
[Mock.all<Settings>(), 'last30Days'], [Mock.all<Settings>(), 'Last 30 days'],
[Mock.of<Settings>({ visits: {} }), 'last30Days'], [Mock.of<Settings>({ visits: {} }), 'Last 30 days'],
[ [
Mock.of<Settings>({ Mock.of<Settings>({
visits: { visits: {
defaultInterval: 'last7Days', defaultInterval: 'last7Days',
}, },
}), }),
'last7Days', 'Last 7 days',
], ],
[ [
Mock.of<Settings>({ Mock.of<Settings>({
@ -43,21 +37,23 @@ describe('<VisitsSettings />', () => {
defaultInterval: 'today', defaultInterval: 'today',
}, },
}), }),
'today', 'Today',
], ],
])('sets expected interval as active', (settings, expectedInterval) => { ])('sets expected interval as active', (settings, expectedInterval) => {
const wrapper = createWrapper(settings); setUp(settings);
expect(screen.getByRole('button')).toHaveTextContent(expectedInterval);
expect(wrapper.find(DateIntervalSelector).prop('active')).toEqual(expectedInterval);
}); });
it('invokes setVisitsSettings when interval changes', () => { it('invokes setVisitsSettings when interval changes', async () => {
const wrapper = createWrapper(); const { user } = setUp();
const selector = wrapper.find(DateIntervalSelector); const selectOption = async (name: string) => {
await user.click(screen.getByRole('button'));
await user.click(screen.getByRole('menuitem', { name }));
};
selector.simulate('change', 'last7Days'); await selectOption('Last 7 days');
selector.simulate('change', 'last180Days'); await selectOption('Last 180 days');
selector.simulate('change', 'yesterday'); await selectOption('Yesterday');
expect(setVisitsSettings).toHaveBeenCalledTimes(3); expect(setVisitsSettings).toHaveBeenCalledTimes(3);
expect(setVisitsSettings).toHaveBeenNthCalledWith(1, { defaultInterval: 'last7Days' }); expect(setVisitsSettings).toHaveBeenNthCalledWith(1, { defaultInterval: 'last7Days' });