diff --git a/src/servers/CreateServer.js b/src/servers/CreateServer.js index 5e8e7fe7..4efbbe30 100644 --- a/src/servers/CreateServer.js +++ b/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 { {this.state.serversImported && ( -
+
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 } diff --git a/test/servers/CreateServer.test.js b/test/servers/CreateServer.test.js new file mode 100644 index 00000000..f1b13c81 --- /dev/null +++ b/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('', () => { + let wrapper; + const createServerMock = sinon.fake(); + const historyMock = { + push: sinon.fake(), + }; + + beforeEach(() => { + createServerMock.resetHistory(); + historyMock.push.resetHistory(); + + wrapper = shallow( + + ); + }); + 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'); + }); +});