Add initial cypress tests

.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "parser": "babel-eslint",
   "extends": "airbnb",
-  "plugins": ["react", "jsx-a11y", "import"],
+  "plugins": ["react", "jsx-a11y", "import", "cypress"],
   "rules": {
     "allowArrowFunctions": true,
     "array-bracket-spacing": "off",
@@ -16,13 +16,16 @@
     "arrow-spacing": "off",
     "block-spacing": "off",
     "brace-style": "off",
-    "comma-dangle": ["error", {
-      "arrays": "always-multiline",
-      "objects": "always-multiline",
-      "imports": "always-multiline",
-      "exports": "always-multiline",
-      "functions": "ignore"
-    }],
+    "comma-dangle": [
+      "error",
+      {
+        "arrays": "always-multiline",
+        "objects": "always-multiline",
+        "imports": "always-multiline",
+        "exports": "always-multiline",
+        "functions": "ignore"
+      }
+    ],
     "comma-spacing": "off",
     "comma-style": "off",
     "computed-property-spacing": "off",
@@ -40,14 +43,17 @@
     "jsx-quotes": "off",
     "key-spacing": "off",
     "keyword-spacing": "off",
-    "max-len": ["error", {
-      "code": 100,
-      "ignoreUrls": true,
-      "ignoreStrings": true
-    }],
+    "max-len": [
+      "error",
+      {
+        "code": 100,
+        "ignoreUrls": true,
+        "ignoreStrings": true
+      }
+    ],
     "new-parens": "off",
     "newline-per-chained-call": "off",
-    "no-confusing-arrow": ["error", {"allowParens": true}],
+    "no-confusing-arrow": ["error", { "allowParens": true }],
     "no-extra-semi": "off",
     "no-floating-decimal": "off",
     "no-mixed-spaces-and-tabs": "off",
@@ -99,6 +105,7 @@
   },
   "env": {
     "browser": true,
-    "jest": true
+    "jest": true,
+    "cypress/globals": true
   }
 }

client/src/components/LandingPage/Form/formFields.js

@@ -1,14 +1,14 @@
 export const LOGIN_FIELDS = [
   // { type: 'text', placeholder: 'Name' },
-  { type: 'text', placeholder: 'Email' },
-  { type: 'password', placeholder: 'Password' },
+  { name: 'email', type: 'text', placeholder: 'Email' },
+  { name: 'password', type: 'password', placeholder: 'Password' },
 ];
 
 export const SIGNUP_FIELDS = [
-  { type: 'text', placeholder: 'First Name' },
-  { type: 'text', placeholder: 'Last Name' },
-  { type: 'text', placeholder: 'Email' },
-  { type: 'password', placeholder: 'Password' },
+  { name: 'firstName', type: 'text', placeholder: 'First Name' },
+  { name: 'lastName', type: 'text', placeholder: 'Last Name' },
+  { name: 'email', type: 'text', placeholder: 'Email' },
+  { name: 'password', type: 'password', placeholder: 'Password' },
 ];
 
 export const WORDS = [

client/src/components/LandingPage/Form/inputField.js

@@ -11,14 +11,15 @@ const LoginFields = ({ animate, handleChange, ...props }) => {
 
   return (
     <Mutation mutation={loginMutation}>
-      {(login, { error })=> (
-        <form onSubmit={e => {
-          e.preventDefault();
-          login({ variables: { email, password } })
-            .then(() => {
-              window.location.href = 'http://localhost:3000/dashboard/dashboard'
-            }); 
-        }}>
+      {(login, { error }) => (
+        <form
+          onSubmit={e => {
+            e.preventDefault();
+            login({ variables: { email, password } }).then(() => {
+              window.location.href = 'http://localhost:3000/dashboard/dashboard';
+            });
+          }}
+        >
           {LOGIN_FIELDS.map((field, index) => (
             <input
               onChange={e => handleChange(field.placeholder.toLowerCase(), e)}
@@ -27,29 +28,33 @@ const LoginFields = ({ animate, handleChange, ...props }) => {
               // eslint-disable-next-line react/destructuring-assignment
               value={props[field.placeholder.toLowerCase()]}
               type={field.type}
+              name={field.name}
               component="input"
               placeholder={field.placeholder}
               className={`input-lg-${index + 1} animate-${animate}`}
             />
           ))}
           <button type="submit">Submit</button>
           {error && <span>{error}</span>}
-        </form> 
+        </form>
       )}
-    </Mutation> 
+    </Mutation>
   );
 };
 
 const SignupFields = ({ animate, handleChange, ...props }) => {
   const { password, email, firstName, lastName } = props;
   return (
     <Mutation mutation={signupMutation}>
-      {(signup, { error })=> (
-        <form onSubmit={e => {
-          e.preventDefault();
-          signup({ variables: { email, password, firstName, lastName } })
-            .then(() => this.props.history.push('/dashboard/dashboard'))
-        }}>
+      {(signup, { error }) => (
+        <form
+          onSubmit={e => {
+            e.preventDefault();
+            signup({ variables: { email, password, firstName, lastName } }).then(() =>
+              this.props.history.push('/dashboard/dashboard')
+            );
+          }}
+        >
           {SIGNUP_FIELDS.map((field, index) => (
             <input
               onChange={e => handleChange(field.placeholder.toLowerCase(), e)}
@@ -58,21 +63,22 @@ const SignupFields = ({ animate, handleChange, ...props }) => {
               // eslint-disable-next-line react/destructuring-assignment
               value={props[field.placeholder.toLowerCase()]}
               type={field.type}
+              name={field.name}
               component="input"
               placeholder={field.placeholder}
               className={`input-su-${index + 1} animate-${animate}`}
             />
           ))}
           <button type="submit">Submit</button>
           {error && <span>{error}</span>}
-        </form> 
+        </form>
       )}
-    </Mutation> 
+    </Mutation>
   );
 };
 
 class InputFields extends Component {
-  state = { 
+  state = {
     // eslint-disable-next-line react/no-unused-state
     email: '',
     // eslint-disable-next-line react/no-unused-state
@@ -87,9 +93,9 @@ class InputFields extends Component {
     setTimeout(() => this.setState({ animate: false }), 2000);
   }
 
-  handleChange = ( key, e) => {
+  handleChange = (key, e) => {
     this.setState({ [key]: e.target.value });
-  }
+  };
 
   render() {
     const { activeBtn } = this.props;
@@ -114,7 +120,7 @@ LoginFields.propTypes = {
   handleChange: PropTypes.func.isRequired,
   email: PropTypes.string.isRequired,
   password: PropTypes.string.isRequired,
-}
+};
 
 SignupFields.propTypes = {
   animate: PropTypes.bool.isRequired,
@@ -123,8 +129,7 @@ SignupFields.propTypes = {
   password: PropTypes.string.isRequired,
   firstName: PropTypes.string.isRequired,
   lastName: PropTypes.string.isRequired,
-}
-
+};
 
 InputFields.propTypes = {
   // handleSubmit: PropTypes.func.isRequired,

cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "pluginsFile": false
+}

cypress/fixtures/example.json

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

cypress/integration/landing_page_spec.js

@@ -0,0 +1,55 @@
+/* TODO: None of these tests should not be relying on any users in the actual DB */
+describe('Landing page', () => {
+  beforeEach(() => cy.visit('/'));
+
+  it('can log in existing user', () => {
+    // Fill in user credentials
+    cy.get('.expanded-login')
+      .children('form')
+      .within(() => {
+        cy.get('input[name="email"]').type('test@example.org');
+        cy.get('input[name="password"]').type('superSecret123');
+      });
+
+    // Log in
+    cy.get('.expanded-login')
+      .children('form')
+      .get('button[type="submit"]')
+      .click();
+
+    // Redirected sucessfully
+    cy.url().should('include', '/dashboard');
+  });
+
+  it('can register new user', () => {
+    // Switch the form to show the sign up form
+    cy.contains('Sign Up')
+      .click()
+      .get('.expanded-signup');
+
+    // Fill in all inputs
+    cy.get('.expanded-signup')
+      .children('form')
+      .within(() => {
+        cy.get('input[name="firstName"]').type('Ariana');
+        cy.get('input[name="firstName"]').should('have.value', 'Ariana');
+
+        cy.get('input[name="lastName"]').type('Johnson');
+        cy.get('input[name="lastName"]').should('have.value', 'Johnson');
+
+        cy.get('input[name="email"]').type('email@example.org');
+        cy.get('input[name="email"]').should('have.value', 'email@example.org');
+
+        cy.get('input[name="password"]').type('secretPassword');
+        cy.get('input[name="password"]').should('have.value', 'secretPassword');
+      });
+
+    // Submit the form
+    cy.get('.expanded-signup')
+      .children('form')
+      .get('button[type="submit"]')
+      .click();
+
+    // TODO: Should be redirected to '/dashboard/dashboard'?
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+// module.exports = (on, config) => {
+// `on` is used to hook into various events Cypress emits
+// `config` is the resolved Cypress config
+// };

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package.json

@@ -26,8 +26,10 @@
   },
   "devDependencies": {
     "babel-eslint": "^9.0.0",
+    "cypress": "^3.1.0",
     "eslint": "^5.3.0",
     "eslint-config-airbnb": "17.1.0",
+    "eslint-plugin-cypress": "^2.0.1",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-react": "^7.11.0",