add register spec

cypress-io · Jun 25, 2019 · a064046 · a064046
1 parent 36267f2
commit a064046
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 67 deletions.
diff --git a/client/src/components/Register.js b/client/src/components/Register.js
@@ -1,15 +1,15 @@
-import { Link } from 'react-router-dom';
-import ListErrors from './ListErrors';
-import React from 'react';
-import agent from '../agent';
-import { connect } from 'react-redux';
+import { Link } from 'react-router-dom'
+import ListErrors from './ListErrors'
+import React from 'react'
+import agent from '../agent'
+import { connect } from 'react-redux'
 import {
   UPDATE_FIELD_AUTH,
   REGISTER,
   REGISTER_PAGE_UNLOADED
-} from '../constants/actionTypes';
+} from '../constants/actionTypes'
 
-const mapStateToProps = state => ({ ...state.auth });
+const mapStateToProps = state => ({ ...state.auth })
 
 const mapDispatchToProps = dispatch => ({
   onChangeEmail: value =>
@@ -19,95 +19,98 @@ const mapDispatchToProps = dispatch => ({
   onChangeUsername: value =>
     dispatch({ type: UPDATE_FIELD_AUTH, key: 'username', value }),
   onSubmit: (username, email, password) => {
-    const payload = agent.Auth.register(username, email, password);
+    const payload = agent.Auth.register(username, email, password)
     dispatch({ type: REGISTER, payload })
   },
-  onUnload: () =>
-    dispatch({ type: REGISTER_PAGE_UNLOADED })
-});
+  onUnload: () => dispatch({ type: REGISTER_PAGE_UNLOADED })
+})
 
 class Register extends React.Component {
-  constructor() {
-    super();
-    this.changeEmail = ev => this.props.onChangeEmail(ev.target.value);
-    this.changePassword = ev => this.props.onChangePassword(ev.target.value);
-    this.changeUsername = ev => this.props.onChangeUsername(ev.target.value);
+  constructor () {
+    super()
+    this.changeEmail = ev => this.props.onChangeEmail(ev.target.value)
+    this.changePassword = ev => this.props.onChangePassword(ev.target.value)
+    this.changeUsername = ev => this.props.onChangeUsername(ev.target.value)
     this.submitForm = (username, email, password) => ev => {
-      ev.preventDefault();
-      this.props.onSubmit(username, email, password);
+      ev.preventDefault()
+      this.props.onSubmit(username, email, password)
     }
   }
 
-  componentWillUnmount() {
-    this.props.onUnload();
+  componentWillUnmount () {
+    this.props.onUnload()
   }
 
-  render() {
-    const email = this.props.email;
-    const password = this.props.password;
-    const username = this.props.username;
+  render () {
+    const email = this.props.email
+    const password = this.props.password
+    const username = this.props.username
 
     return (
-      <div className="auth-page">
-        <div className="container page">
-          <div className="row">
-
-            <div className="col-md-6 offset-md-3 col-xs-12">
-              <h1 className="text-xs-center">Sign Up</h1>
-              <p className="text-xs-center">
-                <Link to="/login">
-                  Have an account?
-                </Link>
+      <div className='auth-page'>
+        <div className='container page'>
+          <div className='row'>
+            <div className='col-md-6 offset-md-3 col-xs-12'>
+              <h1 className='text-xs-center'>Sign Up</h1>
+              <p className='text-xs-center'>
+                <Link to='/login'>Have an account?</Link>
               </p>
 
               <ListErrors errors={this.props.errors} />
 
               <form onSubmit={this.submitForm(username, email, password)}>
                 <fieldset>
-
-                  <fieldset className="form-group">
+                  <fieldset className='form-group'>
                     <input
-                      className="form-control form-control-lg"
-                      type="text"
-                      placeholder="Username"
+                      className='form-control form-control-lg'
+                      type='text'
+                      placeholder='Username'
+                      data-cy='username'
                       value={this.props.username}
-                      onChange={this.changeUsername} />
+                      onChange={this.changeUsername}
+                    />
                   </fieldset>
 
-                  <fieldset className="form-group">
+                  <fieldset className='form-group'>
                     <input
-                      className="form-control form-control-lg"
-                      type="email"
-                      placeholder="Email"
+                      className='form-control form-control-lg'
+                      type='email'
+                      placeholder='Email'
+                      data-cy='email'
                       value={this.props.email}
-                      onChange={this.changeEmail} />
+                      onChange={this.changeEmail}
+                    />
                   </fieldset>
 
-                  <fieldset className="form-group">
+                  <fieldset className='form-group'>
                     <input
-                      className="form-control form-control-lg"
-                      type="password"
-                      placeholder="Password"
+                      className='form-control form-control-lg'
+                      type='password'
+                      placeholder='Password'
+                      data-cy='password'
                       value={this.props.password}
-                      onChange={this.changePassword} />
+                      onChange={this.changePassword}
+                    />
                   </fieldset>
 
                   <button
-                    className="btn btn-lg btn-primary pull-xs-right"
-                    type="submit"
-                    disabled={this.props.inProgress}>
+                    className='btn btn-lg btn-primary pull-xs-right'
+                    type='submit'
+                    disabled={this.props.inProgress}
+                  >
                     Sign up
                   </button>
-
                 </fieldset>
               </form>
             </div>
-
           </div>
         </div>
       </div>
-    );
+    )
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Register);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Register)
diff --git a/cypress/integration/feeds-spec.js b/cypress/integration/feeds-spec.js
@@ -1,9 +1,9 @@
 /// <reference types="Cypress" />
 
 describe('Conduit', () => {
-  before(() => cy.registerUserIfNeeded())
   beforeEach(() => {
-    cy.task('deleteAllArticles')
+    cy.task('cleanDatabase')
+    cy.registerUserIfNeeded()
     cy.login()
   })
 

diff --git a/cypress/integration/follow-user-spec.js b/cypress/integration/follow-user-spec.js
@@ -8,11 +8,10 @@ describe('following user', () => {
     password: 'seconduser'
   }
 
-  before(() => cy.registerUserIfNeeded(secondUser))
-  before(() => cy.registerUserIfNeeded())
-
   beforeEach(() => {
-    cy.task('deleteAllArticles')
+    cy.task('cleanDatabase')
+    cy.registerUserIfNeeded(secondUser)
+    cy.registerUserIfNeeded()
   })
 
   it('can follow second user', () => {

diff --git a/cypress/integration/new-post-spec.js b/cypress/integration/new-post-spec.js
@@ -4,9 +4,9 @@ import { title, about, article, tags } from '../fixtures/post'
 import { stripIndent } from 'common-tags'
 
 describe('New post', () => {
-  before(() => cy.registerUserIfNeeded())
   beforeEach(() => {
-    cy.task('deleteAllArticles')
+    cy.task('cleanDatabase')
+    cy.registerUserIfNeeded()
     cy.login()
   })
 

diff --git a/cypress/integration/profile-spec.js b/cypress/integration/profile-spec.js
@@ -1,8 +1,8 @@
 /// <reference types="Cypress" />
 
 describe('Profile', () => {
-  before(() => cy.registerUserIfNeeded())
   beforeEach(() => {
+    cy.registerUserIfNeeded()
     cy.login()
   })
 

diff --git a/cypress/integration/register-spec.js b/cypress/integration/register-spec.js
@@ -0,0 +1,25 @@
+/// <reference types="Cypress" />
+
+describe('Register', () => {
+  beforeEach(() => {
+    cy.task('cleanDatabase')
+    cy.visit('/')
+    // we are not logged in
+  })
+
+  it('registers new user', () => {
+    const username = 'visitor'
+    const email = 'visitor@email.com'
+    const password = 'visiting'
+    cy.contains('a.nav-link', 'Sign up').click()
+
+    cy.location('pathname').should('equal', '/register')
+    cy.get('[data-cy=username]').type(username)
+    cy.get('[data-cy=email]').type(email)
+    cy.get('[data-cy=password]').type(password)
+    cy.get('form').submit()
+
+    cy.location('pathname').should('equal', '/')
+    cy.contains('[data-cy=profile]', username).should('be.visible')
+  })
+})
diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
@@ -10,7 +10,7 @@ module.exports = (on, config) => {
 
   // tasks for resetting database during tests
   on('task', {
-    deleteAllArticles () {
+    cleanDatabase () {
       const filename = join(__dirname, '..', '..', 'server', '.tmp.db')
       const knex = knexFactory({
         client: 'sqlite3',
@@ -26,6 +26,13 @@ module.exports = (on, config) => {
 
       // truncates all tables which removes data left by previous tests
       return Promise.all([
+        knex
+          .truncate('Users')
+          .catch(err =>
+            err.toString().includes('no such table')
+              ? undefined
+              : Promise.reject(err)
+          ),
         knex
           .truncate('Articles')
           .catch(err =>