autoland-ui: Create Route tests as well as ensure babel works properly within jest (
Bug 1336249). r?imadueme
MozReview-Commit-ID: NlBFnwxb7w
--- 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,
+};