Setup tests environment

config/setupEnzyme.js

@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });

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": [
-      "<rootDir>/config/polyfills.js"
+      "<rootDir>/config/polyfills.js",
+      "<rootDir>/config/setupEnzyme.js"
     ],
     "testMatch": [
-      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
+      "<rootDir>/tests/**/*.test.{js,jsx,mjs}"
-      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
     ],
     "testEnvironment": "node",
     "testURL": "http://localhost",

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);

src/App.test.js

@@ -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(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
-});

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;

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;
+}
+
+

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 => (
+      <DropdownItem key={server.name} onClick={() => this.selectServer(server)}>
+        {server.name}
+      </DropdownItem>
+    ));
+  };
+
+  selectServer = server => {
+    // TODO
+  };
+
   render() {
     return (
       <UncontrolledDropdown nav>
@@ -11,16 +23,15 @@ class ServersDropdown extends React.Component {
         </DropdownToggle>
 
         <DropdownMenu>
-          <DropdownItem>
+          {this.renderServers()}
-            Server 1 foo
-          </DropdownItem>
-          <DropdownItem>
-            Server 2 foo
-          </DropdownItem>
         </DropdownMenu>
       </UncontrolledDropdown>
     );
   }
 }
 
-export default connect()(ServersDropdown);
+const mapStateToProps = state => ({
+  servers: state.servers
+});
+
+export default connect(mapStateToProps)(ServersDropdown);

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(<ServersDropdown servers={servers} />);
+  });
+  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);
+  });
+});