mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Migrated EditServer test from enzyme to react testing library
This commit is contained in:
parent
d3f180f270
commit
e837ee5225
2 changed files with 38 additions and 19 deletions
|
@ -23,7 +23,7 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
|
||||||
}, [initialValues]);
|
}, [initialValues]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form className="server-form" onSubmit={handleSubmit}>
|
<form className="server-form" name="serverForm" onSubmit={handleSubmit}>
|
||||||
<SimpleCard className="mb-3" title={title}>
|
<SimpleCard className="mb-3" title={title}>
|
||||||
<InputFormGroup value={name} onChange={setName}>Name</InputFormGroup>
|
<InputFormGroup value={name} onChange={setName}>Name</InputFormGroup>
|
||||||
<InputFormGroup type="url" value={url} onChange={setUrl}>URL</InputFormGroup>
|
<InputFormGroup type="url" value={url} onChange={setUrl}>URL</InputFormGroup>
|
||||||
|
|
|
@ -1,46 +1,65 @@
|
||||||
import { mount, ReactWrapper } from 'enzyme';
|
import { fireEvent, render, screen } from '@testing-library/react';
|
||||||
import { Mock } from 'ts-mockery';
|
import { Mock } from 'ts-mockery';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { EditServer as editServerConstruct } from '../../src/servers/EditServer';
|
import { EditServer as editServerConstruct } from '../../src/servers/EditServer';
|
||||||
import { ServerForm } from '../../src/servers/helpers/ServerForm';
|
import { ReachableServer, SelectedServer } from '../../src/servers/data';
|
||||||
import { ReachableServer } from '../../src/servers/data';
|
|
||||||
|
|
||||||
jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() }));
|
jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() }));
|
||||||
|
|
||||||
describe('<EditServer />', () => {
|
describe('<EditServer />', () => {
|
||||||
let wrapper: ReactWrapper;
|
|
||||||
const ServerError = jest.fn();
|
const ServerError = jest.fn();
|
||||||
const editServerMock = jest.fn();
|
const editServerMock = jest.fn();
|
||||||
const navigate = jest.fn();
|
const navigate = jest.fn();
|
||||||
const selectedServer = Mock.of<ReachableServer>({
|
const defaultSelectedServer = Mock.of<ReachableServer>({
|
||||||
id: 'abc123',
|
id: 'abc123',
|
||||||
name: 'name',
|
name: 'the_name',
|
||||||
url: 'url',
|
url: 'the_url',
|
||||||
apiKey: 'apiKey',
|
apiKey: 'the_api_key',
|
||||||
});
|
});
|
||||||
const EditServer = editServerConstruct(ServerError);
|
const EditServer = editServerConstruct(ServerError);
|
||||||
|
const setUp = (selectedServer: SelectedServer = defaultSelectedServer) => render(
|
||||||
|
<EditServer editServer={editServerMock} selectedServer={selectedServer} selectServer={jest.fn()} />,
|
||||||
|
);
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
(useNavigate as any).mockReturnValue(navigate);
|
(useNavigate as any).mockReturnValue(navigate);
|
||||||
|
|
||||||
wrapper = mount(
|
|
||||||
<EditServer editServer={editServerMock} selectedServer={selectedServer} selectServer={jest.fn()} />,
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(jest.clearAllMocks);
|
afterEach(jest.clearAllMocks);
|
||||||
afterEach(() => wrapper?.unmount());
|
|
||||||
|
|
||||||
it('renders components', () => {
|
it('renders nothing if selected server is not reachable', () => {
|
||||||
expect(wrapper.find(ServerForm)).toHaveLength(1);
|
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', () => {
|
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);
|
expect(navigate).toHaveBeenCalledWith(-1);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue