mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated EditServer test from enzyme to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-05-02 18:47:18 +02:00
parent d3f180f270
commit e837ee5225
2 changed files with 38 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/servers/helpers/ServerForm.tsx
View file

@ -23,7 +23,7 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
}, [initialValues]);
return (
<form className="server-form" onSubmit={handleSubmit}>
<form className="server-form" name="serverForm" onSubmit={handleSubmit}>
<SimpleCard className="mb-3" title={title}>
<InputFormGroup value={name} onChange={setName}>Name</InputFormGroup>
<InputFormGroup type="url" value={url} onChange={setUrl}>URL</InputFormGroup>

55
test/servers/EditServer.test.tsx
View file

@ -1,46 +1,65 @@
import { mount, ReactWrapper } from 'enzyme';
import { fireEvent, render, screen } from '@testing-library/react';
import { Mock } from 'ts-mockery';
import { useNavigate } from 'react-router-dom';
import { EditServer as editServerConstruct } from '../../src/servers/EditServer';
import { ServerForm } from '../../src/servers/helpers/ServerForm';
import { ReachableServer } from '../../src/servers/data';
import { ReachableServer, SelectedServer } from '../../src/servers/data';
jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() }));
describe('<EditServer />', () => {
let wrapper: ReactWrapper;
const ServerError = jest.fn();
const editServerMock = jest.fn();
const navigate = jest.fn();
const selectedServer = Mock.of<ReachableServer>({
const defaultSelectedServer = Mock.of<ReachableServer>({
id: 'abc123',
name: 'name',
url: 'url',
apiKey: 'apiKey',
name: 'the_name',
url: 'the_url',
apiKey: 'the_api_key',
});
const EditServer = editServerConstruct(ServerError);
const setUp = (selectedServer: SelectedServer = defaultSelectedServer) => render(
<EditServer editServer={editServerMock} selectedServer={selectedServer} selectServer={jest.fn()} />,
);
beforeEach(() => {
(useNavigate as any).mockReturnValue(navigate);
wrapper = mount(
<EditServer editServer={editServerMock} selectedServer={selectedServer} selectServer={jest.fn()} />,
);
});
afterEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount());
it('renders components', () => {
expect(wrapper.find(ServerForm)).toHaveLength(1);
it('renders nothing if selected server is not reachable', () => {
setUp(Mock.all<SelectedServer>());
expect(screen.queryByText('Edit')).not.toBeInTheDocument();
expect(screen.queryByText('Cancel')).not.toBeInTheDocument();
expect(screen.queryByText('Save')).not.toBeInTheDocument();
});
it('renders server title', () => {
setUp();
expect(screen.getByText(`Edit "${defaultSelectedServer.name}"`)).toBeInTheDocument();
});
it('display the server info in the form components', () => {
setUp();
expect(screen.getByDisplayValue('the_name')).toBeInTheDocument();
expect(screen.getByDisplayValue('the_url')).toBeInTheDocument();
expect(screen.getByDisplayValue('the_api_key')).toBeInTheDocument();
});
it('edits server and redirects to it when form is submitted', () => {
const form = wrapper.find(ServerForm);
setUp();
form.simulate('submit', {});
fireEvent.change(screen.getByDisplayValue('the_name'), { target: { value: 'the_new_name' } });
fireEvent.change(screen.getByDisplayValue('the_url'), { target: { value: 'the_new_url' } });
fireEvent.submit(screen.getByRole('form'));
expect(editServerMock).toHaveBeenCalledTimes(1);
expect(editServerMock).toHaveBeenCalledWith('abc123', {
name: 'the_new_name',
url: 'the_new_url',
apiKey: 'the_api_key',
});
expect(navigate).toHaveBeenCalledWith(-1);
});
});