Created CreateServer test

src/servers/CreateServer.js

@@ -6,6 +6,15 @@ import { resetSelectedServer } from './reducers/selectedServer';
 import { v4 as uuid } from 'uuid';
 import './CreateServer.scss';
 import ImportServersBtn from './helpers/ImportServersBtn';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  createServer: PropTypes.func,
+  history: PropTypes.shape({
+    push: PropTypes.func,
+  }),
+  resetSelectedServer: PropTypes.func,
+};
 
 export class CreateServer extends React.Component {
   state = {
@@ -67,7 +76,7 @@ export class CreateServer extends React.Component {
           </div>
 
           {this.state.serversImported && (
-            <div className="row">
+            <div className="row create-server__import-success-msg">
               <div className="col-md-10 offset-md-1">
                 <div className="p-2 mt-3 bg-main text-white text-center">
                   Servers properly imported. You can now select one from the list :)
@@ -81,6 +90,8 @@ export class CreateServer extends React.Component {
   }
 }
 
+CreateServer.propTypes = propTypes;
+
 export default connect(
   pick(['selectedServer']),
   {createServer, resetSelectedServer }

test/servers/CreateServer.test.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { CreateServer } from '../../src/servers/CreateServer';
+import { identity } from 'ramda';
+import sinon from 'sinon';
+import ImportServersBtn from '../../src/servers/helpers/ImportServersBtn';
+
+describe('<CreateServer />', () => {
+  let wrapper;
+  const createServerMock = sinon.fake();
+  const historyMock = {
+    push: sinon.fake(),
+  };
+
+  beforeEach(() => {
+    createServerMock.resetHistory();
+    historyMock.push.resetHistory();
+
+    wrapper = shallow(
+      <CreateServer
+        createServer={createServerMock}
+        resetSelectedServer={identity}
+        history={historyMock}
+      />
+    );
+  });
+  afterEach(() => wrapper.unmount());
+
+  it('renders components', () => {
+    expect(wrapper.find('#name')).toHaveLength(1);
+    expect(wrapper.find('#url')).toHaveLength(1);
+    expect(wrapper.find('#apiKey')).toHaveLength(1);
+    expect(wrapper.find(ImportServersBtn)).toHaveLength(1);
+    expect(wrapper.find('.create-server__import-success-msg')).toHaveLength(0);
+  });
+
+  it('shows success message when imported is true', () => {
+    wrapper.setState({ serversImported: true });
+    expect(wrapper.find('.create-server__import-success-msg')).toHaveLength(1);
+  });
+
+  it('creates server and redirects to it when form is submitted', () => {
+    const form = wrapper.find('form');
+    form.simulate('submit', { preventDefault: () => {} });
+
+    expect(createServerMock.callCount).toEqual(1);
+    expect(historyMock.push.callCount).toEqual(1);
+  });
+
+  it('updates state when inputs are changed', () => {
+    const nameInput = wrapper.find('#name');
+    const urlInput = wrapper.find('#url');
+    const apiKeyInput = wrapper.find('#apiKey');
+
+    nameInput.simulate('change', { target: { value: 'the_name' } });
+    urlInput.simulate('change', { target: { value: 'the_url' } });
+    apiKeyInput.simulate('change', { target: { value: 'the_api_key' } });
+
+    expect(wrapper.state('name')).toEqual('the_name');
+    expect(wrapper.state('url')).toEqual('the_url');
+    expect(wrapper.state('apiKey')).toEqual('the_api_key');
+  });
+});