diff --git a/test/servers/ManageServersRow.test.tsx b/test/servers/ManageServersRow.test.tsx index 2b66b6ab..7c3e24ff 100644 --- a/test/servers/ManageServersRow.test.tsx +++ b/test/servers/ManageServersRow.test.tsx @@ -1,66 +1,58 @@ -import { shallow, ShallowWrapper } from 'enzyme'; -import { UncontrolledTooltip } from 'reactstrap'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Link } from 'react-router-dom'; +import { render, screen } from '@testing-library/react'; +import { MemoryRouter } from 'react-router-dom'; import { ManageServersRow as createManageServersRow } from '../../src/servers/ManageServersRow'; import { ServerWithId } from '../../src/servers/data'; describe('', () => { - const ManageServersRowDropdown = () => null; - const ManageServersRow = createManageServersRow(ManageServersRowDropdown); + const ManageServersRow = createManageServersRow(() => ManageServersRowDropdown); const server: ServerWithId = { name: 'My server', url: 'https://example.com', apiKey: '123', id: 'abc', }; - let wrapper: ShallowWrapper; - const createWrapper = (hasAutoConnect = false, autoConnect = false) => { - wrapper = shallow(); - - return wrapper; - }; - - afterEach(() => wrapper?.unmount()); + const setUp = (hasAutoConnect = false, autoConnect = false) => render( + + + + + +
+
, + ); it.each([ [true, 4], [false, 3], ])('renders expected amount of columns', (hasAutoConnect, expectedCols) => { - const wrapper = createWrapper(hasAutoConnect); - const td = wrapper.find('td'); - const th = wrapper.find('th'); + setUp(hasAutoConnect); + + const td = screen.getAllByRole('cell'); + const th = screen.getAllByRole('columnheader'); expect(td.length + th.length).toEqual(expectedCols); }); it('renders a dropdown', () => { - const wrapper = createWrapper(); - const dropdown = wrapper.find(ManageServersRowDropdown); - - expect(dropdown).toHaveLength(1); - expect(dropdown.prop('server')).toEqual(expect.objectContaining(server)); + setUp(); + expect(screen.getByText('ManageServersRowDropdown')).toBeInTheDocument(); }); it.each([ - [true, 1], - [false, 0], - ])('renders auto-connect icon only if server is autoConnect', (autoConnect, expectedIcons) => { - const wrapper = createWrapper(true, autoConnect); - const icon = wrapper.find(FontAwesomeIcon); - const iconTooltip = wrapper.find(UncontrolledTooltip); - - expect(icon).toHaveLength(expectedIcons); - expect(iconTooltip).toHaveLength(expectedIcons); + [true], + [false], + ])('renders auto-connect icon only if server is autoConnect', (autoConnect) => { + const { container } = setUp(true, autoConnect); + expect(container).toMatchSnapshot(); }); it('renders server props where appropriate', () => { - const wrapper = createWrapper(); - const link = wrapper.find(Link); - const td = wrapper.find('td').first(); + setUp(); - expect(link.prop('to')).toEqual(`/server/${server.id}`); - expect(link.prop('children')).toEqual(server.name); - expect(td.prop('children')).toEqual(server.url); + const link = screen.getByRole('link'); + + expect(link).toHaveAttribute('href', `/server/${server.id}`); + expect(link).toHaveTextContent(server.name); + expect(screen.getByText(server.url)).toBeInTheDocument(); }); }); diff --git a/test/servers/__snapshots__/ManageServersRow.test.tsx.snap b/test/servers/__snapshots__/ManageServersRow.test.tsx.snap new file mode 100644 index 00000000..850ff084 --- /dev/null +++ b/test/servers/__snapshots__/ManageServersRow.test.tsx.snap @@ -0,0 +1,98 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders auto-connect icon only if server is autoConnect 1`] = ` +
+ + + + + + + + + +
+ + + + My server + + + https://example.com + + + ManageServersRowDropdown + +
+
+`; + +exports[` renders auto-connect icon only if server is autoConnect 2`] = ` +
+ + + + + + + + +
+ + + My server + + + https://example.com + + + ManageServersRowDropdown + +
+
+`;