-
-
- Servers properly imported. You can now select one from the list :)
-
+ {serversImported && (
+
+
+
+ Servers properly imported. You can now select one from the list :)
- )}
-
+
+ )}
);
};
diff --git a/src/servers/helpers/ServerForm.js b/src/servers/helpers/ServerForm.js
new file mode 100644
index 00000000..57650f09
--- /dev/null
+++ b/src/servers/helpers/ServerForm.js
@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { HorizontalFormGroup } from '../../utils/HorizontalFormGroup';
+
+const propTypes = {
+ onSubmit: PropTypes.func.isRequired,
+ initialValues: PropTypes.shape({
+ name: PropTypes.string.isRequired,
+ url: PropTypes.string.isRequired,
+ apiKey: PropTypes.string.isRequired,
+ }),
+ children: PropTypes.node.isRequired,
+};
+
+export const ServerForm = ({ onSubmit, initialValues, children }) => {
+ const [ name, setName ] = useState('');
+ const [ url, setUrl ] = useState('');
+ const [ apiKey, setApiKey ] = useState('');
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ onSubmit({ name, url, apiKey });
+ };
+
+ useEffect(() => {
+ initialValues && setName(initialValues.name);
+ initialValues && setUrl(initialValues.url);
+ initialValues && setApiKey(initialValues.apiKey);
+ }, [ initialValues ]);
+
+ return (
+
+ );
+};
+
+ServerForm.propTypes = propTypes;
diff --git a/test/servers/CreateServer.test.js b/test/servers/CreateServer.test.js
index b3e5bc1c..cab51a60 100644
--- a/test/servers/CreateServer.test.js
+++ b/test/servers/CreateServer.test.js
@@ -2,7 +2,7 @@ import React from 'react';
import { shallow } from 'enzyme';
import { identity } from 'ramda';
import createServerConstruct from '../../src/servers/CreateServer';
-import { HorizontalFormGroup } from '../../src/utils/HorizontalFormGroup';
+import { ServerForm } from '../../src/servers/helpers/ServerForm';
describe('
', () => {
let wrapper;
@@ -29,8 +29,7 @@ describe('
', () => {
it('renders components', () => {
const wrapper = createWrapper();
- expect(wrapper.find(HorizontalFormGroup)).toHaveLength(3);
- expect(wrapper.find(ImportServersBtn)).toHaveLength(1);
+ expect(wrapper.find(ServerForm)).toHaveLength(1);
expect(wrapper.find('.create-server__import-success-msg')).toHaveLength(0);
});
@@ -42,11 +41,9 @@ describe('
', () => {
it('creates server and redirects to it when form is submitted', () => {
const wrapper = createWrapper();
- const form = wrapper.find('form');
+ const form = wrapper.find(ServerForm);
- form.simulate('submit', { preventDefault() {
- return '';
- } });
+ form.simulate('submit', {});
expect(createServerMock).toHaveBeenCalledTimes(1);
expect(historyMock.push).toHaveBeenCalledTimes(1);
diff --git a/test/servers/helpers/ServerForm.test.js b/test/servers/helpers/ServerForm.test.js
new file mode 100644
index 00000000..855e8c1e
--- /dev/null
+++ b/test/servers/helpers/ServerForm.test.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { ServerForm } from '../../../src/servers/helpers/ServerForm';
+import { HorizontalFormGroup } from '../../../src/utils/HorizontalFormGroup';
+
+describe('
', () => {
+ let wrapper;
+ const onSubmit = jest.fn();
+
+ beforeEach(() => {
+ wrapper = shallow(
Something);
+ });
+
+ afterEach(() => {
+ jest.resetAllMocks();
+ wrapper && wrapper.unmount();
+ });
+
+ it('renders components', () => {
+ expect(wrapper.find(HorizontalFormGroup)).toHaveLength(3);
+ expect(wrapper.find('span')).toHaveLength(1);
+ });
+
+ it('invokes submit callback when submit event is triggered', () => {
+ const form = wrapper.find('form');
+ const preventDefault = jest.fn();
+
+ form.simulate('submit', { preventDefault });
+
+ expect(preventDefault).toHaveBeenCalled();
+ expect(onSubmit).toHaveBeenCalled();
+ });
+});