Add tests, tweak implementation

jest.config.js

@@ -13,7 +13,8 @@ module.exports = {
     '!**/src/assets/**',
     '!**/semantic/**',
     '!**/src/index.js',
-    '!**/cypress/**'
+    '!**/cypress/**',
+    '!**/src/components/App.js'
   ],
   testPathIgnorePatterns: [
     '<rootDir>/cypress/',

package.json

@@ -24,11 +24,15 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "babel-plugin-dotenv": "^0.1.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "global": "^4.3.2",
     "izitoast": "^1.4.0",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
+    "paypal-checkout": "^4.0.254",
+    "query-string": "^6.2.0",
+    "react": "16.8.0",
+    "react-cookie": "^3.0.8",
+    "react-dom": "16.8.0",
     "react-redux": "^6.0.0",
     "react-router-dom": "^4.3.1",
     "react-select": "^2.3.0",
@@ -52,6 +56,7 @@
     "cypress-cucumber-preprocessor": "^1.9.1",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.7.1",
+    "eslint-plugin-react-hooks": "^1.0.1",
     "file-loader": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^23.6.0",

src/actions/postLogInInfoAction.js

@@ -14,6 +14,6 @@ export let postLogInInfo = props => dispatch => {
       }
     }
   }).then(response => {
-    dispatch(getUser(response.data))
+    dispatch(getUser(response))
   })
 }

src/actions/setLastLocationAction.js

@@ -1,5 +1,5 @@
 import { SET_LAST_LOCATION } from '../types'
 
-export let setLastLocation = props => dispatch => {
-  dispatch({ type: SET_LAST_LOCATION, payload: props.location.pathname })
+export let setLastLocation = (path, search) => dispatch => {
+  dispatch({ type: SET_LAST_LOCATION, payload: { path, search } })
 }

src/components/PayPalSuccess.js

@@ -5,7 +5,7 @@ import { Header, Container, Segment } from 'semantic-ui-react'
 import queryString from 'query-string'
 import '../assets/PayPalSuccess.css'
 
-const PayPalSuccess = props => {
+export const PayPalSuccess = props => {
   const params = queryString.parse(props.location.search)
   useEffect(() => {
     executeBillingAgreement(props, params)

src/components/Subscriptions.js

@@ -7,15 +7,16 @@ import createBillingAgreement from '../helpers/createBillingAgreement'
 import queryString from 'query-string'
 import '../assets/Subscriptions.css'
 
-const Subscriptions = props => {
+export const Subscriptions = props => {
   useEffect(() => {
-    props.setLastLocation(props)
+    const path = props.location.pathname
+    const search = props.location.search
+    props.setLastLocation(path, search)
+    if (!props.loggedInUser.data || !props.cookies.get('_WebsiteOne_session')) {
+      props.history.push({ pathname: '/login' })
+    }
   })
 
-  if (!props.cookies.get('_WebsiteOne_session')) {
-    props.history.push('/login')
-  }
-
   const { plan } = queryString.parse(props.location.search)
   return (
     <Fragment>
@@ -48,7 +49,10 @@ const Subscriptions = props => {
     </Fragment>
   )
 }
-const mapStateToProps = (_, ownProps) => ({ cookies: ownProps.cookies })
+const mapStateToProps = (store, ownProps) => ({
+  loggedInUser: store.loggedInUser,
+  cookies: ownProps.cookies
+})
 export default connect(
   mapStateToProps,
   { setLastLocation }

src/containers/LogIn.js

@@ -11,17 +11,20 @@ export class LogIn extends Component {
   }
 
   handleChange = (e, { name, value }) => this.setState({ [name]: value });
-  handleLogIn = async e => {
+  handleLogIn = event => {
+    event.preventDefault()
     const { email, password } = this.state
-    e.preventDefault()
-    await this.props
-      .postLogInInfo({ email, password })
+    const { cookies, loggedInUser, history, lastLocation, postLogInInfo } = this.props
+    postLogInInfo({ email, password })
       .then(() => {
-        this.props.history.push(this.props.lastLocation)
+        history.push(lastLocation.path + lastLocation.search)
+        cookies.set('_WebsiteOne_session', this.props.loggedInUser.headers.authorization, {
+          path: '/'
+        })
         iziToast.show({
           theme: 'light',
           title: 'Success',
-          message: 'Welcome back, ' + `${this.props.loggedInUser.slug}`,
+          message: 'Welcome back, ' + `${loggedInUser.slug}`,
           position: 'topRight',
           color: 'green',
           backgroundColor: 'lime',
@@ -30,6 +33,7 @@ export class LogIn extends Component {
         })
       })
       .catch(() => {
+        console.log('error')
         iziToast.show({
           theme: 'light',
           title: 'Sorry',

src/containers/ProjectsList.js

@@ -38,7 +38,7 @@ export class ProjectsList extends Component {
     } else {
       this.paginateProjects(this.props.projects)
     }
-    this.props.setLastLocation(this.props)
+    this.props.setLastLocation(this.props.location.pathname)
   }
 
   componentWillReceiveProps (nextProps) {

src/containers/UsersList.js

@@ -26,7 +26,7 @@ export class UsersList extends Component {
     } else {
       this.normalizeUsers(this.props.users)
     }
-    this.props.setLastLocation(this.props)
+    this.props.setLastLocation(this.props.location.pathname)
   }
 
   componentWillReceiveProps (nextProps) {

src/fixtures/billingAgreementResponse.js

@@ -0,0 +1,8 @@
+export default {
+  status: 200,
+  data: {
+    redirect_url: 'https://www.sandbox.paypal.com/cgi-bin/webscr'
+  }
+}
+
+export const executedBillingAgreementResponse = { data: { message: 'Success' } }

src/fixtures/logIn.js

@@ -1,32 +1,31 @@
-export default [
-  {
-    id: 2,
-    email: 'premium@premi.um',
-    created_at: '2019-01-09T23:29:28.825Z',
-    updated_at: '2019-01-11T14:39:33.221Z',
-    first_name: 'Retha',
-    last_name: 'Dietrich',
-    display_email: null,
-    youtube_id: null,
-    slug: 'retha-dietrich',
-    display_profile: true,
-    latitude: null,
-    longitude: null,
-    country_name: 'Falkland Islands (malvinas)',
-    city: null,
-    region: null,
-    youtube_user_name: null,
-    github_profile_url: null,
-    display_hire_me: null,
-    bio: null,
-    receive_mailings: false,
-    country_code: 'FK',
-    timezone_offset: null,
-    status_count: 0,
-    deleted_at: null,
-    event_participation_count: 0,
-    can_see_dashboard: false,
-    skill_list: [],
-    title_list: []
-  }
-]
+export default
+{
+  id: 2,
+  email: 'premium@premi.um',
+  created_at: '2019-01-09T23:29:28.825Z',
+  updated_at: '2019-01-11T14:39:33.221Z',
+  first_name: 'Retha',
+  last_name: 'Dietrich',
+  display_email: null,
+  youtube_id: null,
+  slug: 'retha-dietrich',
+  display_profile: true,
+  latitude: null,
+  longitude: null,
+  country_name: 'Falkland Islands (malvinas)',
+  city: null,
+  region: null,
+  youtube_user_name: null,
+  github_profile_url: null,
+  display_hire_me: null,
+  bio: null,
+  receive_mailings: false,
+  country_code: 'FK',
+  timezone_offset: null,
+  status_count: 0,
+  deleted_at: null,
+  event_participation_count: 0,
+  can_see_dashboard: false,
+  skill_list: [],
+  title_list: []
+}

src/helpers/createBillingAgreement.js

@@ -1,24 +1,17 @@
 import axios from 'axios'
 
-export default cookies => async event => {
+export default cookies => event => {
   event.preventDefault()
-  try {
-    let response = await axios({
-      method: 'POST',
-      timeout: 50000,
-      url: '/paypal/new.json',
-      data: {
-        plan: 1
-      },
-      headers: {
-        Authorization: cookies.get('_WebsiteOne_session')
-      }
-    })
-    if (response.status === 200) {
-      window.location.assign(response.data.redirect_url)
+  return axios({
+    method: 'POST',
+    timeout: 50000,
+    url: '/paypal/new.json',
+    data: {
+      plan: 1
+    },
+    headers: {
+      Authorization: cookies.get('_WebsiteOne_session')
     }
-    return response.data
-  } catch (err) {
-    console.log(err)
-  }
+  })
+    .then(response => window.location.assign(response.data.redirect_url))
 }

src/helpers/executeBillingAgreement.js

@@ -1,25 +1,16 @@
 import axios from 'axios'
 
-export default async (props, params) => {
-  try {
-    let response = await axios({
-      method: 'GET',
-      timeout: 50000,
-      url: '/paypal/create.json',
-      params: {
-        plan: params.plan,
-        token: params.token
-      },
-      headers: {
-        Authorization: props.cookies.get('_WebsiteOne_session')
-      }
-    })
-    if (response.status === 200) {
-      // test for status you want, etc
-      console.log(response)
+export default (props, params) => {
+  return axios({
+    method: 'GET',
+    timeout: 50000,
+    url: '/paypal/create.json',
+    params: {
+      plan: params.plan,
+      token: params.token
+    },
+    headers: {
+      Authorization: props.cookies.get('_WebsiteOne_session')
     }
-    // Don't forget to return something
-  } catch (err) {
-    console.log(err)
-  }
+  })
 }

src/tests/actions/postLogInInfoAction.test.js

@@ -20,9 +20,8 @@ describe('postLogInInfo action', () => {
   })
 
   it('posts login info to an external api', () => {
-    const expectedActions = [
-      { type: POST_LOGIN_INFO, payload: logInResponse }
-    ]
+    const expectedActions = { type: POST_LOGIN_INFO, payload: logInResponse }
+
     moxios.stubRequest('/users/sign_in', {
       status: 200,
       response: logInResponse
@@ -33,7 +32,7 @@ describe('postLogInInfo action', () => {
         postLogInInfo({ email: 'premium@premi.um', password: 'premium123' })
       )
       .then(() => {
-        expect(store.getActions()).toEqual(expectedActions)
+        expect(store.getActions()[0].payload.data).toEqual(expectedActions.payload)
       })
   })
 })

src/tests/actions/setLastLocationAction.test.js

@@ -13,8 +13,11 @@ describe('setLastLocation action', () => {
   })
 
   it('sets last location to /users', () => {
-    let props = { location: { pathname: '/users' } }
-    store.dispatch(setLastLocation(props))
-    expect(store.getActions()).toEqual([{ type: SET_LAST_LOCATION, payload: '/users' }])
+    let path = '/users'
+    let search = '?user=jimmy'
+    store.dispatch(setLastLocation(path, search))
+    expect(store.getActions()).toEqual([
+      { type: SET_LAST_LOCATION, payload: { path, search } }
+    ])
   })
 })

src/tests/components/PayPalAgreementNew.test.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import PayPalAgreementNew from '../../components/PayPalAgreementNew'
+
+describe('PayPalAgreementNew', () => {
+  let wrapper
+  const props = {
+    cookies: () => {},
+    createBillingAgreement: jest.fn()
+  }
+  beforeEach(() => {
+    wrapper = shallow(<PayPalAgreementNew {...props} />)
+  })
+
+  it('has a form to submit a new paypal agreement', () => {
+    wrapper.find('form').simulate('submit')
+    expect(props.createBillingAgreement).toHaveBeenCalled()
+  })
+})

src/tests/components/PayPalSuccess.test.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { PayPalSuccess } from '../../components/PayPalSuccess'
+
+describe('PayPalSuccess', () => {
+  let wrapper
+  const props = {
+    cookies: { get: () => {} },
+    location: { search: '?plan=premium' }
+  }
+  beforeEach(() => {
+    wrapper = mount(<PayPalSuccess {...props} />)
+  })
+
+  it('renders a success segment', () => {
+    wrapper.setProps({ location: { search: '?plan=premiummob' } })
+    expect(wrapper.find('Segment')).toBeTruthy()
+  })
+})

src/tests/components/Subscriptions.test.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Subscriptions } from '../../components/Subscriptions'
+
+describe('Subscriptions', () => {
+  let wrapper
+  const props = {
+    cookies: { get: () => {} },
+    setLastLocation: jest.fn(),
+    location: { pathname: 'subscriptions/new', search: '?plan=premium' },
+    history: { push: jest.fn() },
+    loggedInUser: { data: {} }
+  }
+
+  beforeEach(() => {
+    wrapper = mount(<Subscriptions {...props} />)
+  })
+
+  it('should render PayPalAgreementNew', () => {
+    expect(wrapper.find('PayPalAgreementNew')).toBeTruthy()
+  })
+
+  it('should call setLastLocation', () => {
+    expect(props.setLastLocation).toHaveBeenCalledTimes(1)
+  })
+})