forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-14 11:33:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrated CreateServer test to react testing library

Browse Source
This commit is contained in:
Alejandro Celaya
2022-05-29 12:18:21 +02:00
parent 9c611a5b13
commit 494e36c842
14 changed files with 106 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
test/servers/CreateServer.test.tsx
View File

@@ -1,83 +1,84 @@
import { shallow, ShallowWrapper } from 'enzyme';
import userEvent from '@testing-library/user-event';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { Mock } from 'ts-mockery';
import { useNavigate } from 'react-router-dom';
import { CreateServer as createCreateServer } from '../../src/servers/CreateServer';
import { ServerForm } from '../../src/servers/helpers/ServerForm';
import { ServerWithId } from '../../src/servers/data';
import { DuplicatedServersModal } from '../../src/servers/helpers/DuplicatedServersModal';
jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() }));
describe('<CreateServer />', () => {
let wrapper: ShallowWrapper;
const ImportServersBtn = () => null;
const createServerMock = jest.fn();
const navigate = jest.fn();
const servers = { foo: Mock.all<ServerWithId>() };
const createWrapper = (serversImported = false, importFailed = false) => {
const servers = { foo: Mock.of<ServerWithId>({ url: 'https://existing_url.com', apiKey: 'existing_api_key' }) };
const setUp = (serversImported = false, importFailed = false) => {
(useNavigate as any).mockReturnValue(navigate);
const useStateFlagTimeout = jest.fn()
.mockReturnValueOnce([serversImported, () => ''])
.mockReturnValueOnce([importFailed, () => ''])
.mockReturnValue([]);
const CreateServer = createCreateServer(ImportServersBtn, useStateFlagTimeout);
let callCount = 0;
const useTimeoutToggle = jest.fn().mockImplementation(() => {
const result = [callCount % 2 === 0 ? serversImported : importFailed, () => null];
callCount += 1;
return result;
});
const CreateServer = createCreateServer(() => <>ImportServersBtn</>, useTimeoutToggle);
wrapper = shallow(<CreateServer createServer={createServerMock} servers={servers} />);
return wrapper;
return {
user: userEvent.setup(),
...render(<CreateServer createServer={createServerMock} servers={servers} />),
};
};
beforeEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount());
it('renders components', () => {
const wrapper = createWrapper();
expect(wrapper.find(ServerForm)).toHaveLength(1);
expect(wrapper.find('ImportResult')).toHaveLength(0);
});
it('shows success message when imported is true', () => {
const wrapper = createWrapper(true);
const result = wrapper.find('ImportResult');
setUp(true);
expect(result).toHaveLength(1);
expect(result.prop('type')).toEqual('success');
expect(screen.getByText('Servers properly imported. You can now select one from the list :)')).toBeInTheDocument();
expect(
screen.queryByText('The servers could not be imported. Make sure the format is correct.'),
).not.toBeInTheDocument();
});
it('shows error message when import failed', () => {
const wrapper = createWrapper(false, true);
const result = wrapper.find('ImportResult');
setUp(false, true);
expect(result).toHaveLength(1);
expect(result.prop('type')).toEqual('error');
expect(
screen.queryByText('Servers properly imported. You can now select one from the list :)'),
).not.toBeInTheDocument();
expect(screen.getByText('The servers could not be imported. Make sure the format is correct.')).toBeInTheDocument();
});
it('creates server data when form is submitted', () => {
const wrapper = createWrapper();
const form = wrapper.find(ServerForm);
it('creates server data when form is submitted', async () => {
const { user } = setUp();
expect(wrapper.find(DuplicatedServersModal).prop('duplicatedServers')).toEqual([]);
form.simulate('submit', {});
expect(wrapper.find(DuplicatedServersModal).prop('duplicatedServers')).toEqual([{}]);
expect(createServerMock).not.toHaveBeenCalled();
await user.type(screen.getByLabelText(/^Name/), 'the_name');
await user.type(screen.getByLabelText(/^URL/), 'https://the_url.com');
await user.type(screen.getByLabelText(/^API key/), 'the_api_key');
fireEvent.submit(screen.getByRole('form'));
expect(createServerMock).toHaveBeenCalledWith(expect.objectContaining({
name: 'the_name',
url: 'https://the_url.com',
apiKey: 'the_api_key',
}));
expect(navigate).toHaveBeenCalledWith(expect.stringMatching(/^\/server\//));
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
});
it('saves server and redirects on modal save', () => {
const wrapper = createWrapper();
it('displays dialog when trying to create a duplicated server', async () => {
const { user } = setUp();
wrapper.find(ServerForm).simulate('submit', {});
wrapper.find(DuplicatedServersModal).simulate('save');
await user.type(screen.getByLabelText(/^Name/), 'the_name');
await user.type(screen.getByLabelText(/^URL/), 'https://existing_url.com');
await user.type(screen.getByLabelText(/^API key/), 'existing_api_key');
fireEvent.submit(screen.getByRole('form'));
expect(createServerMock).toHaveBeenCalledTimes(1);
expect(navigate).toHaveBeenCalledTimes(1);
});
it('goes back on modal discard', () => {
const wrapper = createWrapper();
wrapper.find(DuplicatedServersModal).simulate('discard');
await waitFor(() => expect(screen.getByRole('dialog')).toBeInTheDocument());
await user.click(screen.getByRole('button', { name: 'Discard' }));
expect(createServerMock).not.toHaveBeenCalled();
expect(navigate).toHaveBeenCalledWith(-1);
});
});