Add end-to-end tests with Cypress (#247)

.eslintignore

@@ -1,2 +1,4 @@
 client/node_modules/*
 client/build/*
+cypress/support/*
+cypress/integration/example_spec.js

.gitignore

@@ -5,3 +5,5 @@ coverage
 tmp
 log
 .vscode
+cypress/videos
+cypress/screenshots

.travis.yml

@@ -1,7 +1,17 @@
 language: node_js
 node_js:
   - 8.3.0
+
+cache:
+  directories:
+    - node_modules
+
 before_install:
   - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.3.2
   - export PATH="$HOME/.yarn/bin:$PATH"
-script: "yarn lint"
+
+before_script:
+  - NODE_ENV=test yarn run client-build
+  - NODE_ENV=test yarn ci:start-app-for-test &
+
+script: "yarn lint && yarn run ci:test"

README.md

@@ -27,6 +27,21 @@ It is highly recommended that you configure your editor to display eslint errors
 8. On the Chrome inspect page, click "Open dedicated DevTools for Node"
 9. Perform the function in your app running locally and you should hit your debugger
 10. You can then play around in the debugger in your inspect window!
- 
+
 ## Checkout the database
 We use mLab to host our dev and production databases so even when we are running our servers locally, we're all sharing the same remote development database. To query the database during local development, ask Danny to get you a login to our mLab account. Once you've signed in, you can the instructions to get into the database with this shell prompt command: `mongo ds243335.mlab.com:43335/reimagine-dev -u <user> -p <password>`
+
+## End to End testing with cypress
+In order to run and develop cypress tests, first run:
+```sh
+yarn test-dev
+```
+This spins up the app with an in-memory mongodb.
+
+Then run:
+```sh
+yarn cypress open
+```
+This will open the cypress GUI for selecting and running tests. From here you can run the `example_spec` which is a demo of all the cypress functionality, or you can run other tests developed against specifically for this project.
+
+Tests are written in the [cypress/integration](cypress/integration) directory.

backend/config/keys.js

@@ -1,5 +1,7 @@
 if (process.env.NODE_ENV === 'production') {
   module.exports = require('./prod');
+} else if (process.env.NODE_ENV === 'test') {
+  module.exports = require('./test');
 } else {
   module.exports = require('./dev');
 }

backend/config/test.js

@@ -0,0 +1,7 @@
+module.exports = {
+  googleClientID: 'fakekey',
+  googleClientSecret: 'fakekey',
+  mongoURI: 'fakekey',
+  cookieKey: 'fakekey',
+  redirectDomain: 'fakekey'
+};

backend/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 const express = require('express');
 const mongoose = require('mongoose');
 const cookieSession = require('cookie-session');
@@ -10,7 +11,28 @@ require('./models/Signature');
 
 require('./services/passport');
 
-mongoose.connect(keys.mongoURI);
+if (process.env.NODE_ENV === 'test') {
+  const MongoInMemory = require('mongo-in-memory');
+
+  var port = 8000;
+  var mongoServerInstance = new MongoInMemory(port); //DEFAULT PORT is 27017
+
+  mongoServerInstance.start((error, config) => {
+    if (error) {
+      console.error(error);
+    } else {
+      //callback when server has started successfully
+
+      console.log('HOST ' + config.host);
+      console.log('PORT ' + config.port);
+
+      var mongouri = mongoServerInstance.getMongouri('myDatabaseName');
+      mongoose.connect(mongouri);
+    }
+  });
+} else {
+  mongoose.connect(keys.mongoURI);
+}
 
 const app = express();
 

client/src/components/CreateCampaignStep1.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import { updateNewCampaign } from '../redux/actions/newCampaign';
 
 const CreateCampaignStep1 = (props) => {
@@ -38,7 +38,7 @@ const CreateCampaignStep1 = (props) => {
           <div className="form-group">
             <label className="required">Campaign Name</label>
             <div className="requiredtool" />
-            <input type="text" className="form-control" name="campaignName" required />
+            <input type="text" className="form-control campaign" name="campaignName" required />
           </div>
           <br />
           <button className="btn btn-primary fr" type="submit">

client/src/components/CreateCampaignStep3.js

@@ -5,7 +5,7 @@ import { Link } from 'react-router';
 import { createCampaign } from '../redux/actions/newCampaign';
 
 const CreateCampaignStep3 = (props) => {
-  const { createCampaign, activeCampaign, newCampaign, router } = props;
+  const { createCampaign, newCampaign, router } = props;
 
   const makeNewCampaign = async (e) => {
     e.preventDefault();

client/src/components/FullScreenLoader.js

@@ -1,6 +1,5 @@
 /* eslint-disable react/prop-types */ /* - TODO: Fix and remove this line */
 import React from 'react';
-import { Link } from 'react-router';
 
 const FullScreenLoader = (props) => {
   const { loaderText } = props;

client/src/components/SignatureCheckbox.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 class Checkbox extends Component {
   state = {

client/src/containers/ChooseCampaign.js

@@ -2,11 +2,9 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
-import cx from 'classnames';
 import { selectAddress } from '../redux/actions/initialSearch';
 import fetchCampaignById from '../redux/actions/activeCampaign';
 import AutoSuggestInput from '../components/AutoSuggestInput';
-import FullScreenLoader from '../components/FullScreenLoader';
 
 class ChooseCampaign extends Component {
   constructor(props) {

client/src/containers/NewCampaign.js

@@ -1,39 +1,34 @@
 /* eslint-disable react/prop-types */ /* - TODO: Fix and remove this line */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
+// import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import cx from 'classnames';
-import { createCampaign } from '../redux/actions/initialSearch';
 
-class NewCampaign extends Component {
-  constructor(props) {
-    super(props);
-  }
+function NewCampaign(props) {
+  const { childRoutes } = props.route;
+  const { pathname } = props.location;
 
-  render() {
-    const { childRoutes } = this.props.route;
-    const { pathname } = this.props.location;
-
-    return (
-      <div className="create_campaign_wrapper">
-        <h1 className="create_campaign_header">{"Let's create a campaign!"}</h1>
-        <div className="create_campaign_breadcrumbs">
-          {childRoutes.map(childRoute => (
-            <Link to={`/new-campaign/${childRoute.path}`}>
-              <div
-                className={cx(
-                  'breadcrumb',
-                  pathname === `/new-campaign/${childRoute.path}` && 'active_route'
-                )}
-              />
-            </Link>
-          ))}
-        </div>
-        <section className="create_campaign_subroute_wrapper">{this.props.children}</section>
+  return (
+    <div className="create_campaign_wrapper">
+      <h1 className="create_campaign_header">{'Let\'s create a campaign!'}</h1>
+      <div className="create_campaign_breadcrumbs">
+        {childRoutes.map(childRoute => (
+          <Link to={`/new-campaign/${childRoute.path}`}>
+            <div
+              className={cx(
+                'breadcrumb',
+                pathname === `/new-campaign/${childRoute.path}` && 'active_route'
+              )}
+            />
+          </Link>
+        ))}
       </div>
-    );
-  }
+      <section className="create_campaign_subroute_wrapper">
+        {props.children}
+      </section>
+    </div>
+  );
 }
 
 export default connect(({ initialSearch }) => ({ initialSearch }))(NewCampaign);

client/src/redux/actions/newCampaign.js

@@ -1,4 +1,3 @@
-import { browserHistory } from 'react-router';
 import createApiRequest from '../../utils/createApiRequest';
 
 import { UPDATE_NEW_CAMPAIGN } from '../constants/newCampaign';

client/src/routes.js

@@ -11,7 +11,7 @@ import CampaignPage from './containers/CampaignPage';
 import Tips from './containers/Tips';
 import DenverInfo from './containers/DenverInfo';
 import ManagerResources from './containers/ManagerResources';
-import NotFound from './containers/NotFound';
+// import NotFound from './containers/NotFound';
 import About from './containers/About';
 // import NotFound from './containers/NotFound'; -- TODO: Add back
 

cypress.json

@@ -0,0 +1 @@
+{}

cypress/.eslintrc

@@ -0,0 +1,11 @@
+{
+  "env": {
+    "mocha": true
+  },
+  "globals": {
+    "Cypress": true,
+    "localStorage": true,
+    "cy": true,
+    "expect": true
+  }
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/fixtures/profile.json

@@ -0,0 +1,5 @@
+{
+  "id": 8739,
+  "name": "Jane",
+  "email": "[email protected]"
+}