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