From 9ac0811200be950ab23b01f58d6fc483a079483c Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Thu, 14 Jun 2018 19:42:42 +0200 Subject: [PATCH] Setup tests environment --- config/setupEnzyme.js | 4 ++++ package.json | 11 +++++++---- scripts/test.js | 7 +------ src/App.test.js | 9 --------- src/reducers/index.js | 6 +++++- src/reducers/servers.js | 15 +++++++++++++++ src/servers/ServersDropdown.js | 27 +++++++++++++++++++-------- tests/servers/ServersDropdown.test.js | 23 +++++++++++++++++++++++ 8 files changed, 74 insertions(+), 28 deletions(-) create mode 100644 config/setupEnzyme.js delete mode 100644 src/App.test.js create mode 100644 src/reducers/servers.js create mode 100644 tests/servers/ServersDropdown.test.js diff --git a/config/setupEnzyme.js b/config/setupEnzyme.js new file mode 100644 index 00000000..fc7b0dce --- /dev/null +++ b/config/setupEnzyme.js @@ -0,0 +1,4 @@ +import Enzyme from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; + +Enzyme.configure({ adapter: new Adapter() }); diff --git a/package.json b/package.json index ee7c319e..295fe066 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,8 @@ { "name": "shlink-web-client-react", + "description": "A React-based web client for shlink", "version": "0.1.0", - "private": true, + "private": false, "dependencies": { "@fortawesome/fontawesome": "^1.1.8", "@fortawesome/fontawesome-free-solid": "^5.0.13", @@ -19,6 +20,8 @@ "css-loader": "0.28.7", "dotenv": "4.0.0", "dotenv-expand": "4.2.0", + "enzyme": "^3.3.0", + "enzyme-adapter-react-16": "^1.1.1", "eslint": "4.10.0", "eslint-config-react-app": "^2.1.0", "eslint-loader": "1.9.0", @@ -66,11 +69,11 @@ "src/**/*.{js,jsx,mjs}" ], "setupFiles": [ - "/config/polyfills.js" + "/config/polyfills.js", + "/config/setupEnzyme.js" ], "testMatch": [ - "/src/**/__tests__/**/*.{js,jsx,mjs}", - "/src/**/?(*.)(spec|test).{js,jsx,mjs}" + "/tests/**/*.test.{js,jsx,mjs}" ], "testEnvironment": "node", "testURL": "http://localhost", diff --git a/scripts/test.js b/scripts/test.js index 45a643ac..c8a26746 100644 --- a/scripts/test.js +++ b/scripts/test.js @@ -15,13 +15,8 @@ process.on('unhandledRejection', err => { // Ensure environment variables are read. require('../config/env'); +// Make tests to be matched inside tests folder const jest = require('jest'); let argv = process.argv.slice(2); -// Watch unless on CI or in coverage mode -if (!process.env.CI && argv.indexOf('--coverage') < 0) { - argv.push('--watch'); -} - - jest.run(argv); diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index a754b201..00000000 --- a/src/App.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/reducers/index.js b/src/reducers/index.js index 45d0591f..4f60d893 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,5 +1,9 @@ import { combineReducers } from 'redux'; -const rootReducer = combineReducers({}); +import serversReducer from './servers'; + +const rootReducer = combineReducers({ + servers: serversReducer +}); export default rootReducer; diff --git a/src/reducers/servers.js b/src/reducers/servers.js new file mode 100644 index 00000000..4e31a869 --- /dev/null +++ b/src/reducers/servers.js @@ -0,0 +1,15 @@ +const FETCH_SERVERS = 'shlink/FETCH_SERVERS'; +const CREATE_SERVER = 'shlink/FETCH_SERVERS'; + +export default function serversReducer(state = [{ name: 'bar' }], action) { + switch (action.type) { + case FETCH_SERVERS: + return action.servers; + case CREATE_SERVER: + return [ ...state, action.server ]; + } + + return state; +} + + diff --git a/src/servers/ServersDropdown.js b/src/servers/ServersDropdown.js index d9fba7f2..b42f6b5a 100644 --- a/src/servers/ServersDropdown.js +++ b/src/servers/ServersDropdown.js @@ -2,7 +2,19 @@ import React from 'react'; import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap'; import { connect } from 'react-redux'; -class ServersDropdown extends React.Component { +export class ServersDropdown extends React.Component { + renderServers = () => { + return this.props.servers.map(server => ( + this.selectServer(server)}> + {server.name} + + )); + }; + + selectServer = server => { + // TODO + }; + render() { return ( @@ -11,16 +23,15 @@ class ServersDropdown extends React.Component { - - Server 1 foo - - - Server 2 foo - + {this.renderServers()} ); } } -export default connect()(ServersDropdown); +const mapStateToProps = state => ({ + servers: state.servers +}); + +export default connect(mapStateToProps)(ServersDropdown); diff --git a/tests/servers/ServersDropdown.test.js b/tests/servers/ServersDropdown.test.js new file mode 100644 index 00000000..5374a1fa --- /dev/null +++ b/tests/servers/ServersDropdown.test.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { ServersDropdown } from '../../src/servers/ServersDropdown'; +import { shallow } from 'enzyme'; + +describe('ServersDropdown', () => { + let wrapped; + const servers = [{ name: 'foo' }, { name: 'bar' }, { name: 'baz' }]; + + beforeEach(() => { + wrapped = shallow(); + }); + afterEach(() => { + wrapped.unmount(); + }); + + it('contains the list of servers', () => { + expect(wrapped.find('DropdownItem').length).toEqual(servers.length); + }); + + it('contains a toggle with proper title', () => { + expect(wrapped.find('DropdownToggle').length).toEqual(1); + }); +});