diff --git a/test/servers/helpers/DuplicatedServersModal.test.tsx b/test/servers/helpers/DuplicatedServersModal.test.tsx
index d57af0e2..766f0d64 100644
--- a/test/servers/helpers/DuplicatedServersModal.test.tsx
+++ b/test/servers/helpers/DuplicatedServersModal.test.tsx
@@ -1,23 +1,20 @@
-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 { Button, ModalHeader } from 'reactstrap';
import { DuplicatedServersModal } from '../../../src/servers/helpers/DuplicatedServersModal';
import { ServerData } from '../../../src/servers/data';
describe('', () => {
const onDiscard = jest.fn();
const onSave = jest.fn();
- let wrapper: ShallowWrapper;
- const createWrapper = (duplicatedServers: ServerData[] = []) => {
- wrapper = shallow(
+ const setUp = (duplicatedServers: ServerData[] = []) => ({
+ user: userEvent.setup(),
+ ...render(
,
- );
-
- return wrapper;
- };
+ ),
+ });
beforeEach(jest.clearAllMocks);
- afterEach(() => wrapper?.unmount());
it.each([
[[], 0],
@@ -26,10 +23,8 @@ describe('', () => {
[[Mock.all(), Mock.all(), Mock.all()], 3],
[[Mock.all(), Mock.all(), Mock.all(), Mock.all()], 4],
])('renders expected amount of items', (duplicatedServers, expectedItems) => {
- const wrapper = createWrapper(duplicatedServers);
- const li = wrapper.find('li');
-
- expect(li).toHaveLength(expectedItems);
+ setUp(duplicatedServers);
+ expect(screen.queryAllByRole('listitem')).toHaveLength(expectedItems);
});
it.each([
@@ -52,55 +47,53 @@ describe('', () => {
},
],
])('renders expected texts based on amount of servers', (duplicatedServers, assertions) => {
- const wrapper = createWrapper(duplicatedServers);
- const header = wrapper.find(ModalHeader);
- const p = wrapper.find('p');
- const span = wrapper.find('span');
- const discardBtn = wrapper.find(Button).first();
+ setUp(duplicatedServers);
- expect(header.html()).toContain(assertions.header);
- expect(p.html()).toContain(assertions.firstParagraph);
- expect(span.html()).toContain(assertions.lastParagraph);
- expect(discardBtn.html()).toContain(assertions.discardBtn);
+ expect(screen.getByRole('heading')).toHaveTextContent(assertions.header);
+ expect(screen.getByText(assertions.firstParagraph)).toBeInTheDocument();
+ expect(screen.getByText(assertions.lastParagraph)).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: assertions.discardBtn })).toBeInTheDocument();
});
it.each([
[[]],
[[Mock.of({ url: 'url', apiKey: 'apiKey' })]],
+ [[
+ Mock.of({ url: 'url_1', apiKey: 'apiKey_1' }),
+ Mock.of({ url: 'url_2', apiKey: 'apiKey_2' }),
+ ]],
])('displays provided server data', (duplicatedServers) => {
- const wrapper = createWrapper(duplicatedServers);
- const li = wrapper.find('li');
+ setUp(duplicatedServers);
if (duplicatedServers.length === 0) {
- expect(li).toHaveLength(0);
+ expect(screen.queryByRole('listitem')).not.toBeInTheDocument();
} else if (duplicatedServers.length === 1) {
- expect(li.first().find('b').html()).toEqual(`${duplicatedServers[0].url}`);
- expect(li.last().find('b').html()).toEqual(`${duplicatedServers[0].apiKey}`);
+ const [firstItem, secondItem] = screen.getAllByRole('listitem');
+
+ expect(firstItem).toHaveTextContent(`URL: ${duplicatedServers[0].url}`);
+ expect(secondItem).toHaveTextContent(`API key: ${duplicatedServers[0].apiKey}`);
} else {
expect.assertions(duplicatedServers.length);
- li.forEach((item, index) => {
+ screen.getAllByRole('listitem').forEach((item, index) => {
const server = duplicatedServers[index];
-
- expect(item.html()).toContain(`${server.url} - ${server.apiKey}`);
+ expect(item).toHaveTextContent(`${server.url} - ${server.apiKey}`);
});
}
});
- it('invokes onDiscard when appropriate button is clicked', () => {
- const wrapper = createWrapper();
- const btn = wrapper.find(Button).first();
-
- btn.simulate('click');
+ it('invokes onDiscard when appropriate button is clicked', async () => {
+ const { user } = setUp();
+ expect(onDiscard).not.toHaveBeenCalled();
+ await user.click(screen.getByRole('button', { name: 'Discard' }));
expect(onDiscard).toHaveBeenCalled();
});
- it('invokes onSave when appropriate button is clicked', () => {
- const wrapper = createWrapper();
- const btn = wrapper.find(Button).last();
-
- btn.simulate('click');
+ it('invokes onSave when appropriate button is clicked', async () => {
+ const { user } = setUp();
+ expect(onSave).not.toHaveBeenCalled();
+ await user.click(screen.getByRole('button', { name: 'Save anyway' }));
expect(onSave).toHaveBeenCalled();
});
});
diff --git a/test/servers/helpers/ServerError.test.tsx b/test/servers/helpers/ServerError.test.tsx
index 014d6ff3..88847c39 100644
--- a/test/servers/helpers/ServerError.test.tsx
+++ b/test/servers/helpers/ServerError.test.tsx
@@ -1,49 +1,43 @@
-import { shallow, ShallowWrapper } from 'enzyme';
-import { BrowserRouter } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
import { Mock } from 'ts-mockery';
import { ServerError as createServerError } from '../../../src/servers/helpers/ServerError';
import { NonReachableServer, NotFoundServer } from '../../../src/servers/data';
describe('', () => {
- let wrapper: ShallowWrapper;
const ServerError = createServerError(() => null);
- afterEach(() => wrapper?.unmount());
-
it.each([
[
Mock.all(),
{
- 'Could not find this Shlink server.': true,
- 'Oops! Could not connect to this Shlink server.': false,
- 'Make sure you have internet connection, and the server is properly configured and on-line.': false,
- 'Alternatively, if you think you may have miss-configured this server': false,
+ found: ['Could not find this Shlink server.'],
+ notFound: [
+ 'Oops! Could not connect to this Shlink server.',
+ 'Make sure you have internet connection, and the server is properly configured and on-line.',
+ /^Alternatively, if you think you may have miss-configured this server/,
+ ],
},
],
[
Mock.of({ id: 'abc123' }),
{
- 'Could not find this Shlink server.': false,
- 'Oops! Could not connect to this Shlink server.': true,
- 'Make sure you have internet connection, and the server is properly configured and on-line.': true,
- 'Alternatively, if you think you may have miss-configured this server': true,
+ found: [
+ 'Oops! Could not connect to this Shlink server.',
+ 'Make sure you have internet connection, and the server is properly configured and on-line.',
+ /^Alternatively, if you think you may have miss-configured this server/,
+ ],
+ notFound: ['Could not find this Shlink server.'],
},
],
- ])('renders expected information based on provided server type', (selectedServer, textsToFind) => {
- wrapper = shallow(
-
+ ])('renders expected information based on provided server type', (selectedServer, { found, notFound }) => {
+ render(
+
- ,
+ ,
);
- const wrapperText = wrapper.html();
- const textPairs = Object.entries(textsToFind);
- textPairs.forEach(([text, shouldBeFound]) => {
- if (shouldBeFound) {
- expect(wrapperText).toContain(text);
- } else {
- expect(wrapperText).not.toContain(text);
- }
- });
+ found.forEach((text) => expect(screen.getByText(text)).toBeInTheDocument());
+ notFound.forEach((text) => expect(screen.queryByText(text)).not.toBeInTheDocument());
});
});
diff --git a/test/servers/helpers/ServerForm.test.tsx b/test/servers/helpers/ServerForm.test.tsx
index e15318e9..ad8c543c 100644
--- a/test/servers/helpers/ServerForm.test.tsx
+++ b/test/servers/helpers/ServerForm.test.tsx
@@ -1,30 +1,24 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { fireEvent, render, screen } from '@testing-library/react';
import { ServerForm } from '../../../src/servers/helpers/ServerForm';
-import { InputFormGroup } from '../../../src/utils/forms/InputFormGroup';
describe('', () => {
- let wrapper: ShallowWrapper;
const onSubmit = jest.fn();
+ const setUp = () => render(Something);
- beforeEach(() => {
- wrapper = shallow(Something);
- });
-
- afterEach(() => wrapper?.unmount());
afterEach(jest.resetAllMocks);
it('renders components', () => {
- expect(wrapper.find(InputFormGroup)).toHaveLength(3);
- expect(wrapper.find('span')).toHaveLength(1);
+ setUp();
+
+ expect(screen.getAllByRole('textbox')).toHaveLength(3);
+ expect(screen.getByText('Something')).toBeInTheDocument();
});
- it('invokes submit callback when submit event is triggered', () => {
- const form = wrapper.find('form');
- const preventDefault = jest.fn();
+ it('invokes submit callback when submit event is triggered', async () => {
+ setUp();
- form.simulate('submit', { preventDefault });
-
- expect(preventDefault).toHaveBeenCalled();
+ expect(onSubmit).not.toHaveBeenCalled();
+ fireEvent.submit(screen.getByRole('form'), { preventDefault: jest.fn() });
expect(onSubmit).toHaveBeenCalled();
});
});