From e538f2a3bb7e6c29e65d7f15880796f6a6bee420 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Wed, 8 Jun 2022 18:24:21 +0200 Subject: [PATCH 1/2] Migrated VisitsSettings test to react testing library --- test/settings/VisitsSettings.test.tsx | 52 +++++++++++++-------------- 1 file changed, 24 insertions(+), 28 deletions(-) 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' }); From 105254d0531ffa9aee215a2d88aa098437449ad6 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Wed, 8 Jun 2022 18:28:16 +0200 Subject: [PATCH 2/2] Migrated CreateShortUrl test to react testing library --- src/short-urls/CreateShortUrl.tsx | 1 - test/short-urls/CreateShortUrl.test.tsx | 42 ++++++++++--------------- 2 files changed, 17 insertions(+), 26 deletions(-) diff --git a/src/short-urls/CreateShortUrl.tsx b/src/short-urls/CreateShortUrl.tsx index a13b75cf..8da5a480 100644 --- a/src/short-urls/CreateShortUrl.tsx +++ b/src/short-urls/CreateShortUrl.tsx @@ -55,7 +55,6 @@ export const CreateShortUrl = ( mode={basicMode ? 'create-basic' : 'create'} onSave={async (data: ShortUrlData) => { resetCreateShortUrl(); - return createShortUrl(data); }} /> diff --git a/test/short-urls/CreateShortUrl.test.tsx b/test/short-urls/CreateShortUrl.test.tsx index 43dfdf90..553d1a65 100644 --- a/test/short-urls/CreateShortUrl.test.tsx +++ b/test/short-urls/CreateShortUrl.test.tsx @@ -1,38 +1,30 @@ -import { shallow, ShallowWrapper } from 'enzyme'; +import { render, screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; import { CreateShortUrl as createShortUrlsCreator } from '../../src/short-urls/CreateShortUrl'; import { ShortUrlCreation } from '../../src/short-urls/reducers/shortUrlCreation'; import { Settings } from '../../src/settings/reducers/settings'; describe('', () => { - let wrapper: ShallowWrapper; - const ShortUrlForm = () => null; - const CreateShortUrlResult = () => null; + const ShortUrlForm = () => ShortUrlForm; + const CreateShortUrlResult = () => CreateShortUrlResult; const shortUrlCreation = { validateUrls: true }; const shortUrlCreationResult = Mock.all(); const createShortUrl = jest.fn(async () => Promise.resolve()); + const CreateShortUrl = createShortUrlsCreator(ShortUrlForm, CreateShortUrlResult); + const setUp = () => render( + {}} + settings={Mock.of({ shortUrlCreation })} + />, + ); - beforeEach(() => { - const CreateShortUrl = createShortUrlsCreator(ShortUrlForm, CreateShortUrlResult); + it('renders computed initial state', () => { + setUp(); - wrapper = shallow( - {}} - settings={Mock.of({ shortUrlCreation })} - />, - ); - }); - afterEach(() => wrapper.unmount()); - afterEach(jest.clearAllMocks); - - it('renders a ShortUrlForm with a computed initial state', () => { - const form = wrapper.find(ShortUrlForm); - const result = wrapper.find(CreateShortUrlResult); - - expect(form).toHaveLength(1); - expect(result).toHaveLength(1); + expect(screen.getByText('ShortUrlForm')).toBeInTheDocument(); + expect(screen.getByText('CreateShortUrlResult')).toBeInTheDocument(); }); });