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'); }); });