From 5dda4731a019b98bc20dedac750adba91d883dcd Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 4 Jun 2022 09:34:46 +0200 Subject: [PATCH] Migrated ManageServers test to react testing library --- test/servers/ManageServers.test.tsx | 106 +++++++++++++++------------- 1 file changed, 58 insertions(+), 48 deletions(-) diff --git a/test/servers/ManageServers.test.tsx b/test/servers/ManageServers.test.tsx index 5cbb81e6..a88d3cdc 100644 --- a/test/servers/ManageServers.test.tsx +++ b/test/servers/ManageServers.test.tsx @@ -1,93 +1,103 @@ import { Mock } from 'ts-mockery'; -import { shallow, ShallowWrapper } from 'enzyme'; -import { Button } from 'reactstrap'; +import userEvent from '@testing-library/user-event'; +import { render, screen, waitFor } from '@testing-library/react'; +import { MemoryRouter } from 'react-router-dom'; import ServersExporter from '../../src/servers/services/ServersExporter'; import { ManageServers as createManageServers } from '../../src/servers/ManageServers'; import { ServersMap, ServerWithId } from '../../src/servers/data'; -import { SearchField } from '../../src/utils/SearchField'; -import { Result } from '../../src/utils/Result'; describe('', () => { const exportServers = jest.fn(); const serversExporter = Mock.of({ exportServers }); - const ImportServersBtn = () => null; - const ManageServersRow = () => null; const useTimeoutToggle = jest.fn().mockReturnValue([false, jest.fn()]); - const ManageServers = createManageServers(serversExporter, ImportServersBtn, useTimeoutToggle, ManageServersRow); - let wrapper: ShallowWrapper; + const ManageServers = createManageServers( + serversExporter, + () => ImportServersBtn, + useTimeoutToggle, + ({ hasAutoConnect }) => ManageServersRow {hasAutoConnect ? '[YES]' : '[NO]'}, + ); const createServerMock = (value: string, autoConnect = false) => Mock.of( { id: value, name: value, url: value, autoConnect }, ); - const createWrapper = (servers: ServersMap = {}) => { - wrapper = shallow(); - - return wrapper; - }; + const setUp = (servers: ServersMap = {}) => ({ + user: userEvent.setup(), + ...render(), + }); afterEach(jest.clearAllMocks); - afterEach(() => wrapper?.unmount()); - it('shows search field which allows searching servers, affecting te amount of rendered rows', () => { - const wrapper = createWrapper({ + it('shows search field which allows searching servers, affecting te amount of rendered rows', async () => { + const { user } = setUp({ foo: createServerMock('foo'), bar: createServerMock('bar'), baz: createServerMock('baz'), }); - const searchField = wrapper.find(SearchField); + const search = async (searchTerm: string) => { + await user.clear(screen.getByPlaceholderText('Search...')); + await user.type(screen.getByPlaceholderText('Search...'), searchTerm); + }; - expect(wrapper.find(ManageServersRow)).toHaveLength(3); - expect(wrapper.find('tbody').find('tr')).toHaveLength(0); + expect(screen.getAllByText(/^ManageServersRow/)).toHaveLength(3); + expect(screen.queryByText('No servers found.')).not.toBeInTheDocument(); - searchField.simulate('change', 'foo'); - expect(wrapper.find(ManageServersRow)).toHaveLength(1); - expect(wrapper.find('tbody').find('tr')).toHaveLength(0); + await search('foo'); + await waitFor(() => expect(screen.getAllByText(/^ManageServersRow/)).toHaveLength(1)); + expect(screen.queryByText('No servers found.')).not.toBeInTheDocument(); - searchField.simulate('change', 'ba'); - expect(wrapper.find(ManageServersRow)).toHaveLength(2); - expect(wrapper.find('tbody').find('tr')).toHaveLength(0); + await search('ba'); + await waitFor(() => expect(screen.getAllByText(/^ManageServersRow/)).toHaveLength(2)); + expect(screen.queryByText('No servers found.')).not.toBeInTheDocument(); - searchField.simulate('change', 'invalid'); - expect(wrapper.find(ManageServersRow)).toHaveLength(0); - expect(wrapper.find('tbody').find('tr')).toHaveLength(1); + await search('invalid'); + await waitFor(() => expect(screen.queryByText(/^ManageServersRow/)).not.toBeInTheDocument()); + expect(screen.getByText('No servers found.')).toBeInTheDocument(); }); it.each([ [createServerMock('foo'), 3], [createServerMock('foo', true), 4], ])('shows different amount of columns if there are at least one auto-connect server', (server, expectedCols) => { - const wrapper = createWrapper({ server }); - const row = wrapper.find(ManageServersRow); + setUp({ server }); - expect(wrapper.find('th')).toHaveLength(expectedCols); - expect(row.prop('hasAutoConnect')).toEqual(server.autoConnect); + expect(screen.getAllByRole('columnheader')).toHaveLength(expectedCols); + if (server.autoConnect) { + expect(screen.getByText(/\[YES\]/)).toBeInTheDocument(); + expect(screen.queryByText(/\[NO\]/)).not.toBeInTheDocument(); + } else { + expect(screen.queryByText(/\[YES\]/)).not.toBeInTheDocument(); + expect(screen.getByText(/\[NO\]/)).toBeInTheDocument(); + } }); it.each([ - [{}, 1], - [{ foo: createServerMock('foo') }, 2], + [{}, 0], + [{ foo: createServerMock('foo') }, 1], ])('shows export button if the list of servers is not empty', (servers, expectedButtons) => { - const wrapper = createWrapper(servers); - const exportBtn = wrapper.find(Button); - - expect(exportBtn).toHaveLength(expectedButtons); + setUp(servers); + expect(screen.queryAllByRole('button', { name: 'Export servers' })).toHaveLength(expectedButtons); }); - it('allows exporting servers when clicking on button', () => { - const wrapper = createWrapper({ foo: createServerMock('foo') }); - const exportBtn = wrapper.find(Button).first(); + it('allows exporting servers when clicking on button', async () => { + const { user } = setUp({ foo: createServerMock('foo') }); expect(exportServers).not.toHaveBeenCalled(); - exportBtn.simulate('click'); + await user.click(screen.getByRole('button', { name: 'Export servers' })); expect(exportServers).toHaveBeenCalled(); }); - it('shows an error message if an error occurs while importing servers', () => { - useTimeoutToggle.mockReturnValue([true, jest.fn()]); + it.each([[true], [false]])('shows an error message if an error occurs while importing servers', (hasError) => { + useTimeoutToggle.mockReturnValue([hasError, jest.fn()]); - const wrapper = createWrapper({ foo: createServerMock('foo') }); - const result = wrapper.find(Result); + setUp({ foo: createServerMock('foo') }); - expect(result).toHaveLength(1); - expect(result.prop('type')).toEqual('error'); + if (hasError) { + expect( + screen.getByText('The servers could not be imported. Make sure the format is correct.'), + ).toBeInTheDocument(); + } else { + expect( + screen.queryByText('The servers could not be imported. Make sure the format is correct.'), + ).not.toBeInTheDocument(); + } }); });