From 43840d7656d7a5a3d03e17dabaa164484e6d1909 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Tue, 5 Jul 2022 20:30:23 +0200 Subject: [PATCH 1/2] Migrated ShortUrlForm test to react testing library --- src/short-urls/ShortUrlForm.tsx | 2 +- test/short-urls/ShortUrlForm.test.tsx | 103 +++++++++++++------------- 2 files changed, 53 insertions(+), 52 deletions(-) diff --git a/src/short-urls/ShortUrlForm.tsx b/src/short-urls/ShortUrlForm.tsx index 32b26a0d..5385d784 100644 --- a/src/short-urls/ShortUrlForm.tsx +++ b/src/short-urls/ShortUrlForm.tsx @@ -118,7 +118,7 @@ export const ShortUrlForm = ( const showBehaviorCard = showCrawlableControl || showForwardQueryControl; return ( -
+ {isBasicMode && basicComponents} {!isBasicMode && ( <> diff --git a/test/short-urls/ShortUrlForm.test.tsx b/test/short-urls/ShortUrlForm.test.tsx index 15da680a..1263f5b5 100644 --- a/test/short-urls/ShortUrlForm.test.tsx +++ b/test/short-urls/ShortUrlForm.test.tsx @@ -1,67 +1,67 @@ -import { shallow, ShallowWrapper } from 'enzyme'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { UserEvent } from '@testing-library/user-event/dist/types/setup'; import { formatISO } from 'date-fns'; -import { identity } from 'ramda'; import { Mock } from 'ts-mockery'; -import { Input } from 'reactstrap'; import { ShortUrlForm as createShortUrlForm, Mode } from '../../src/short-urls/ShortUrlForm'; -import { DateInput } from '../../src/utils/DateInput'; -import { ShortUrlData } from '../../src/short-urls/data'; import { ReachableServer, SelectedServer } from '../../src/servers/data'; -import { SimpleCard } from '../../src/utils/SimpleCard'; import { parseDate } from '../../src/utils/helpers/date'; import { OptionalString } from '../../src/utils/utils'; describe('', () => { - let wrapper: ShallowWrapper; - const TagsSelector = () => null; - const DomainSelector = () => null; const createShortUrl = jest.fn(async () => Promise.resolve()); - const createWrapper = (selectedServer: SelectedServer = null, mode: Mode = 'create', title?: OptionalString) => { - const ShortUrlForm = createShortUrlForm(TagsSelector, DomainSelector); - - wrapper = shallow( + const ShortUrlForm = createShortUrlForm(() => TagsSelector, () => DomainSelector); + const setUp = (selectedServer: SelectedServer = null, mode: Mode = 'create', title?: OptionalString) => ({ + user: userEvent.setup(), + ...render( ({ validateUrl: true, findIfExists: false, title })} + initialState={{ validateUrl: true, findIfExists: false, title, longUrl: '' }} onSave={createShortUrl} />, - ); + ), + }); - return wrapper; - }; - - afterEach(() => wrapper.unmount()); afterEach(jest.clearAllMocks); - it('saves short URL with data set in form controls', () => { - const wrapper = createWrapper(); + it.each([ + [ + async (user: UserEvent) => { + await user.type(screen.getByPlaceholderText('Custom slug'), 'my-slug'); + }, + { customSlug: 'my-slug' }, + ], + [ + async (user: UserEvent) => { + await user.type(screen.getByPlaceholderText('Short code length'), '15'); + }, + { shortCodeLength: '15' }, + ], + ])('saves short URL with data set in form controls', async (extraFields, extraExpectedValues) => { + const { user } = setUp(); const validSince = parseDate('2017-01-01', 'yyyy-MM-dd'); const validUntil = parseDate('2017-01-06', 'yyyy-MM-dd'); - wrapper.find(Input).first().simulate('change', { target: { value: 'https://long-domain.com/foo/bar' } }); - wrapper.find('TagsSelector').simulate('change', ['tag_foo', 'tag_bar']); - wrapper.find('#customSlug').simulate('change', { target: { value: 'my-slug' } }); - wrapper.find(DomainSelector).simulate('change', 'example.com'); - wrapper.find('#maxVisits').simulate('change', { target: { value: '20' } }); - wrapper.find('#shortCodeLength').simulate('change', { target: { value: 15 } }); - wrapper.find(DateInput).at(0).simulate('change', validSince); - wrapper.find(DateInput).at(1).simulate('change', validUntil); - wrapper.find('form').simulate('submit', { preventDefault: identity }); + await user.type(screen.getByPlaceholderText('URL to be shortened'), 'https://long-domain.com/foo/bar'); + await user.type(screen.getByPlaceholderText('Title'), 'the title'); + await user.type(screen.getByPlaceholderText('Maximum number of visits allowed'), '20'); + await user.type(screen.getByPlaceholderText('Enabled since...'), '2017-01-01'); + await user.type(screen.getByPlaceholderText('Enabled until...'), '2017-01-06'); + await extraFields(user); - expect(createShortUrl).toHaveBeenCalledTimes(1); + expect(createShortUrl).not.toHaveBeenCalled(); + await user.click(screen.getByRole('button', { name: 'Save' })); expect(createShortUrl).toHaveBeenCalledWith({ longUrl: 'https://long-domain.com/foo/bar', - tags: ['tag_foo', 'tag_bar'], - customSlug: 'my-slug', - domain: 'example.com', + title: 'the title', validSince: formatISO(validSince), validUntil: formatISO(validUntil), maxVisits: 20, findIfExists: false, - shortCodeLength: 15, validateUrl: true, + ...extraExpectedValues, }); }); @@ -71,29 +71,30 @@ describe('', () => { ])( 'renders expected amount of cards based on server capabilities and mode', (mode, expectedAmountOfCards) => { - const wrapper = createWrapper(null, mode); - const cards = wrapper.find(SimpleCard); + setUp(null, mode); + const cards = screen.queryAllByRole('heading'); expect(cards).toHaveLength(expectedAmountOfCards); }, ); it.each([ - [null, 'new title', 'new title'], - [undefined, 'new title', 'new title'], - ['', 'new title', 'new title'], - [null, '', undefined], - [null, null, undefined], - ['', '', undefined], - [undefined, undefined, undefined], - ['old title', null, null], - ['old title', undefined, null], - ['old title', '', null], - ])('sends expected title based on original and new values', (originalTitle, newTitle, expectedSentTitle) => { - const wrapper = createWrapper(Mock.of({ version: '2.6.0' }), 'create', originalTitle); + [null, true, 'new title'], + [undefined, true, 'new title'], + ['', true, 'new title'], + [null, false, undefined], + ['', false, undefined], + ['old title', false, null], + ])('sends expected title based on original and new values', async (originalTitle, withNewTitle, expectedSentTitle) => { + const { user } = setUp(Mock.of({ version: '2.6.0' }), 'create', originalTitle); - wrapper.find('#title').simulate('change', { target: { value: newTitle } }); - wrapper.find('form').simulate('submit', { preventDefault: identity }); + await user.type(screen.getByPlaceholderText('URL to be shortened'), 'https://long-domain.com/foo/bar'); + if (withNewTitle) { + await user.type(screen.getByPlaceholderText('Title'), 'new title'); + } else { + await user.clear(screen.getByPlaceholderText('Title')); + } + await user.click(screen.getByRole('button', { name: 'Save' })); expect(createShortUrl).toHaveBeenCalledWith(expect.objectContaining({ title: expectedSentTitle, From 3cd25dc2dfa1bd0b4bf05dbcbf9b90380393e703 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Tue, 5 Jul 2022 20:46:31 +0200 Subject: [PATCH 2/2] Migrated ShortUrlsTable test to react testing library --- test/short-urls/ShortUrlsTable.test.tsx | 77 ++++++++++++------------- 1 file changed, 37 insertions(+), 40 deletions(-) diff --git a/test/short-urls/ShortUrlsTable.test.tsx b/test/short-urls/ShortUrlsTable.test.tsx index bf980927..7f758a09 100644 --- a/test/short-urls/ShortUrlsTable.test.tsx +++ b/test/short-urls/ShortUrlsTable.test.tsx @@ -1,71 +1,68 @@ -import { shallow, ShallowWrapper } from 'enzyme'; +import { fireEvent, render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { Mock } from 'ts-mockery'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { ShortUrlsTable as shortUrlsTableCreator } from '../../src/short-urls/ShortUrlsTable'; import { ShortUrlsList } from '../../src/short-urls/reducers/shortUrlsList'; import { ReachableServer, SelectedServer } from '../../src/servers/data'; import { ShortUrlsOrderableFields, SHORT_URLS_ORDERABLE_FIELDS } from '../../src/short-urls/data'; describe('', () => { - let wrapper: ShallowWrapper; const shortUrlsList = Mock.all(); const orderByColumn = jest.fn(); - const ShortUrlsRow = () => null; - const ShortUrlsTable = shortUrlsTableCreator(ShortUrlsRow); - - const createWrapper = (server: SelectedServer = null) => { - wrapper = shallow( + const ShortUrlsTable = shortUrlsTableCreator(() => ShortUrlsRow); + const setUp = (server: SelectedServer = null) => ({ + user: userEvent.setup(), + ...render( orderByColumn} />, - ); - - return wrapper; - }; - - beforeEach(() => createWrapper()); - afterEach(jest.resetAllMocks); - afterEach(() => wrapper?.unmount()); - - it('should render inner table by default', () => { - expect(wrapper.find('table')).toHaveLength(1); + ), }); - it('should render table header by default', () => { - expect(wrapper.find('table').find('thead')).toHaveLength(1); + afterEach(jest.resetAllMocks); + + it('should render inner table by default', () => { + setUp(); + expect(screen.getByRole('table')).toBeInTheDocument(); + }); + + it('should render row groups by default', () => { + setUp(); + expect(screen.getAllByRole('rowgroup')).toHaveLength(2); }); it('should render 6 table header cells by default', () => { - expect(wrapper.find('table').find('thead').find('tr').find('th')).toHaveLength(6); + setUp(); + expect(screen.getAllByRole('columnheader')).toHaveLength(6); }); - it('should render 6 table header cells without order by icon by default', () => { - const thElements = wrapper.find('table').find('thead').find('tr').find('th'); - - thElements.forEach((thElement) => { - expect(thElement.find(FontAwesomeIcon)).toHaveLength(0); - }); + it('should render table header cells without "order by" icon by default', () => { + setUp(); + expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument(); }); it('should render table header cells with conditional order by icon', () => { - const getThElementForSortableField = (orderableField: string) => wrapper.find('table') - .find('thead') - .find('tr') - .find('th') - .filterWhere((e) => e.text().includes(SHORT_URLS_ORDERABLE_FIELDS[orderableField as ShortUrlsOrderableFields])); + setUp(); + + const getThElementForSortableField = (orderableField: string) => screen.getAllByRole('columnheader').find( + ({ innerHTML }) => innerHTML.includes(SHORT_URLS_ORDERABLE_FIELDS[orderableField as ShortUrlsOrderableFields]), + ); const sortableFields = Object.keys(SHORT_URLS_ORDERABLE_FIELDS).filter((sortableField) => sortableField !== 'title'); - expect.assertions(sortableFields.length); + expect.assertions(sortableFields.length * 2); sortableFields.forEach((sortableField) => { - getThElementForSortableField(sortableField).simulate('click'); + const element = getThElementForSortableField(sortableField); + + expect(element).toBeDefined(); + element && fireEvent.click(element); expect(orderByColumn).toHaveBeenCalled(); }); }); it('should render composed title column', () => { - const wrapper = createWrapper(Mock.of({ version: '2.0.0' })); - const composedColumn = wrapper.find('table').find('th').at(2); - const text = composedColumn.text(); + setUp(Mock.of({ version: '2.0.0' })); - expect(text).toContain('Title'); - expect(text).toContain('Long URL'); + const { innerHTML } = screen.getAllByRole('columnheader')[2]; + + expect(innerHTML).toContain('Title'); + expect(innerHTML).toContain('Long URL'); }); });