autoland-ui: Create Route tests as well as ensure babel works properly within jest (Bug 1336249). r?imadueme draft
authorDavid Walsh <dwalsh@mozilla.com>
Fri, 03 Feb 2017 15:42:53 -0600
changeset 91 621ff6903b0d0d49e60a6dfd335b6cfdb436b5c0
parent 88 65e1cb82f9c562788e8bd8e7af9f2f02806f3a56
child 92 bd4356e6a37aa8a26c48d4655008f1a61acafddf
push id57
push userbmo:dwalsh@mozilla.com
push dateFri, 03 Feb 2017 21:43:45 +0000
reviewersimadueme
bugs1336249
autoland-ui: Create Route tests as well as ensure babel works properly within jest (Bug 1336249). r?imadueme MozReview-Commit-ID: NlBFnwxb7w
.hgignore
autoland/ui/package.json
autoland/ui/src/__mocks__/styleMock.js
autoland/ui/src/__tests__/routes.js
autoland/ui/src/components/AutolandController.jsx
autoland/ui/src/index.js
autoland/ui/src/routes.jsx
--- a/.hgignore
+++ b/.hgignore
@@ -5,9 +5,10 @@ syntax: glob
 *.egg-info
 .DS_Store
 
 autoland/public-web-api/venv
 autoland/public-web-api/.cache
 
 autoland/ui/build/
 autoland/ui/node_modules/
+autoland/ui/coverage/
 autoland/ui/.coverage/
--- a/autoland/ui/package.json
+++ b/autoland/ui/package.json
@@ -19,15 +19,32 @@
     "test": "jest --no-cache"
   },
   "dependencies": {
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-router": "^3.0.2"
   },
   "jest": {
-    "moduleFileExtensions": ["js", "jsx"],
-    "moduleDirectories": ["node_modules"]
+    "moduleFileExtensions": [
+      "js",
+      "jsx"
+    ],
+    "moduleDirectories": [
+      "node_modules"
+    ],
+    "moduleNameMapper": {
+      "\\.css$": "<rootDir>/src/__mocks__/styleMock.js"
+    },
+    "verbose": true,
+    "collectCoverage": false
   },
   "babel": {
-    "presets": [ "react", "es2015" ]
+    "presets": [
+      "react",
+      "es2015"
+    ],
+    "plugins": [
+      "transform-class-properties",
+      "transform-object-rest-spread"
+    ]
   }
 }
new file mode 100644
--- /dev/null
+++ b/autoland/ui/src/__mocks__/styleMock.js
@@ -0,0 +1,1 @@
+module.exports = {};
new file mode 100644
--- /dev/null
+++ b/autoland/ui/src/__tests__/routes.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { createMemoryHistory } from 'react-router';
+
+import { getRoutes } from '../routes';
+import AutolandController from '../components/AutolandController';
+import App from '../components/App';
+
+describe('Routes', () => {
+
+  test('"test" route renders properly', () => {
+    const mount = shallow(getRoutes(createMemoryHistory('/test')));
+
+    expect(mount.node.props.routes.length).toBe(1);
+    expect(mount.node.props.routes[0].path).toBe('/test');
+  });
+
+  test('"repos/:repo_id/series/:series_id" route renders properly', () => {
+    const mount = shallow(getRoutes(createMemoryHistory('repos/1/series/2')));
+
+    expect(mount.node.props.routes.length).toBe(2);
+    expect(mount.node.props.routes[0].component).toBe(App);
+    expect(mount.node.props.routes[1].path).toBe('repos/:repo_id/series/:series_id');
+    expect(mount.node.props.routes[1].component).toBe(AutolandController);
+  });
+
+  test('"/*" route renders for URLs that aren\'t matched', () => {
+    const mount = shallow(getRoutes(createMemoryHistory('/boo')));
+
+    expect(mount.node.props.routes.length).toBe(1);
+    expect(mount.node.props.routes[0].path).toBe('/*');
+  });
+
+});
--- a/autoland/ui/src/components/AutolandController.jsx
+++ b/autoland/ui/src/components/AutolandController.jsx
@@ -1,38 +1,37 @@
 import React from 'react';
 
 import CommitsTable from './CommitsTable';
 import ActionButtons from './ActionButtons';
 
 const AUTOLAND_POST_ENDPOINT = '...';
 
 class AutolandController extends React.Component {
+
+  defaultState = { data: null, error: null };
+
   constructor(props) {
     super(props);
-    this.state = this.getInitialState();
+    this.state = this.defaultState;
     this.sendPost = this.sendPost.bind(this);
   }
 
   componentDidMount() {
     this.fetch(this.props.params.series_id);
   }
 
   componentWillReceiveProps(nextProps) {
     if (this.props.params.series_id !== nextProps.params.series_id) {
       this.fetch(nextProps.params.series_id);
     }
   }
 
-  getInitialState() {
-    return { data: null, error: null };
-  }
-
   resetStateWithUpdates(stateUpdates) {
-    this.setState({ ...this.getInitialState(), ...stateUpdates });
+    this.setState({ ...this.defaultState, ...stateUpdates });
   }
 
   fetch(commits) {
     fetch(`/__tests__/fixtures/${commits}.json`)
       .then(response => {
         if (response.status === 404) {
           this.resetStateWithUpdates({
             error: 'Data for this commit set could not be found.',
--- a/autoland/ui/src/index.js
+++ b/autoland/ui/src/index.js
@@ -4,11 +4,11 @@
     -  Linkify commit descriptions to Reviewboard
     -  Linkify "View on Reviewboard" button
     -  Add error handling every step of the way
     -  Implement real fetch endpoints
 
     -  Should we automatically refresh the data every minute or so?
 */
 
-import routes from './routes';
+import { renderRoutes } from './routes';
 
-routes();
+renderRoutes();
--- a/autoland/ui/src/routes.jsx
+++ b/autoland/ui/src/routes.jsx
@@ -2,19 +2,26 @@ import React from 'react';
 import { render } from 'react-dom';
 import { Router, Route, browserHistory } from 'react-router';
 
 import App from './components/App';
 import TestApp from './components/TestApp';
 import AutolandController from './components/AutolandController';
 import InvalidUrl from './components/InvalidUrl';
 
-export default function () {
-  render((
-    <Router history={browserHistory}>
-      <Route path="/" component={App}>
-        <Route path="repos/:repo_id/series/:series_id" component={AutolandController} />
-      </Route>
-      <Route path="/test" component={TestApp} />
-      <Route path="/*" component={InvalidUrl} />
-    </Router>
-  ), document.getElementById('root'));
-}
+const getRoutes = history => (
+  <Router history={history || browserHistory}>
+    <Route path="/" component={App}>
+      <Route path="repos/:repo_id/series/:series_id" component={AutolandController} />
+    </Route>
+    <Route path="/test" component={TestApp} />
+    <Route path="/*" component={InvalidUrl} />
+  </Router>
+);
+
+const renderRoutes = () => {
+  render(getRoutes(), document.getElementById('root'));
+};
+
+module.exports = {
+  getRoutes,
+  renderRoutes,
+};