Merge pull request #72 from CodeYourFuture/staging

merge staging into master

Author: Wolfjawan

.circleci/config.yml

@@ -24,15 +24,22 @@ commands:
               --paths /\*
 
 jobs:
-  test:
+  build:
     docker:
       - image: circleci/node:11.12
     working_directory: ~/repo
     steps:
       - checkout
+      - restore_cache:
+          keys:
+            - yarn-dependencies-{{ checksum "package.json" }}
       - run:
-          name: Install dependencies for lint and test
+          name: Install dependencies
           command: yarn
+      - save_cache:
+          key: yarn-dependencies-{{ checksum "package.json" }}
+          paths:
+            - ~/.cache
       - run:
           name: Set env variables
           command: echo 'export VERSION=$(echo $CIRCLE_SHA1 | cut -c -7)' >> $BASH_ENV
@@ -92,20 +99,20 @@ workflows:
   version: 2
   test_and_deploy:
     jobs:
-      - test:
+      - build:
           context: build
       - deploy_staging:
           context: deployments_staging
           requires:
-            - test
+            - build
           filters:
             branches:
               only:
                 - staging
       - deploy_production:
           context: deployments
           requires:
-            - test
+            - build
           filters:
             branches:
               only:

.gitignore

@@ -7,7 +7,7 @@
 
 # testing
 /coverage
-/e2e/screenshot
+/e2e/screenshots
 
 # production
 /build

README.md

@@ -46,8 +46,8 @@ Your app is ready to be deployed!
 
 Runs the [Cypress] end-to-end tests, which means:
 
-- Starting a mock for the Google server on port 3100
-- Starting the forms app in TESTING mode on port 3000
+- Starting a mock for the backend server on port 3100
+- Starting the forms app in LOCAL mode on port 3000
 - Waiting for the app to start then running the tests
 
 [cypress]: https://www.cypress.io/

e2e/fixtures/server.js

@@ -9,16 +9,8 @@ const app = express()
 
 const calls = []
 
-app.post('/google', (req, res) => {
-  console.log({
-    body: req.body,
-    headers: req.headers
-  })
-  calls.push({
-    body: req.body,
-    headers: req.headers
-  })
-  res.sendStatus(204)
+app.get('/cities', (_, res) => {
+  res.json({ cities: [{ _id: '123abc', name: 'London' }] })
 })
 
 app.post('/volunteer', (req, res) => {
@@ -30,7 +22,7 @@ app.post('/volunteer', (req, res) => {
     body: req.body,
     headers: req.headers
   })
-  res.sendStatus(204)
+  res.json({ volunteer: req.body })
 })
 
 app.get('/_calls', (req, res) => {

e2e/integration/journey.test.js

@@ -1,36 +1,17 @@
 const mockServerURL = `http://localhost:3001`
 
 const timestamp = 1559822173490
-const thanks = '#NailedItThank you! Your submission is now on its way to us.'
 
 const initialData = {
   firstName: 'Jane',
   lastName: 'Doe',
-  city: 'London',
+  cityName: 'London',
   email: '[email protected]',
-  phone: '01189998819991197253'
-}
-
-const codeData = {
-  codeExpertise: {
-    'HTML/CSS': '5',
-    JavaScript: '4',
-    React: '3',
-    'SQL/Mongo': '2',
-    'Agile Methodologies': '1'
-  },
-  otherCodeExpertise: 'Rock star developer, but humble',
-  availableOnWeekends: 'Yes'
-}
-
-const orgData = {
-  skillSets: {
-    accounting: true,
-    events: true
-  },
-  availability: {
-    weekend: true
-  }
+  tel: '01189998819991197253',
+  interestedInVolunteer: 'just sounds interesting',
+  interestedInCYF: 'trying to do my bit',
+  industry: 'Education',
+  hearAboutCYF: 'Social media'
 }
 
 beforeEach(() => {
@@ -40,85 +21,26 @@ beforeEach(() => {
   cy.visit('/')
 })
 
-it('can submit a code-only form', () => {
-  const extra = {
-    interests: {
-      teachingCode: true
-    }
-  }
-
-  cy.fillInitialForm({ ...initialData, ...extra }, 'Next')
-  cy.fillCodeForm(codeData, 'Submit')
-  cy.log(`submitting data: ${JSON.stringify(codeData)}`)
-  cy.get('.applicationForm_thankYou').should('contains.text', thanks)
-
-  cy.request(`${mockServerURL}/_calls`).then(response => {
-    expect(response.body[0].body).to.deep.eq({
-      ...initialData,
-      ...extra,
-      ...codeData
-    })
-    expect(response.body[1].body).to.deep.eq({
-      Authorization: `Timestamp ${timestamp}`,
-      ...initialData,
-      ...extra,
-      ...codeData
-    })
-  })
+const generateExpected = data => ({
+  firstName: data.firstName,
+  lastName: data.lastName,
+  email: data.email,
+  tel: `+${data.tel}`,
+  cityId: '123abc',
+  interestedInVolunteer: data.interestedInVolunteer,
+  interestedInCYF: data.interestedInCYF,
+  industry: data.industry || '',
+  hearAboutCYF: data.hearAboutCYF || '',
+  guidePeople: data.guidePeople || [],
+  techSkill: data.techSkill || [],
+  otherSkill: data.otherSkill || [],
+  userId: ''
 })
 
-it('can submit an org-only form', () => {
-  const extra = {
-    interests: { runningOrganisation: true }
-  }
-
-  cy.fillInitialForm({ ...initialData, ...extra }, 'Next')
-  cy.fillOrgForm(orgData, 'Submit')
-
-  cy.get('.applicationForm_thankYou').should('contains.text', thanks)
-
-  cy.request(`${mockServerURL}/_calls`).then(response => {
-    expect(response.body[0].body).to.deep.eq({
-      ...initialData,
-      ...extra,
-      ...orgData
-    })
-    expect(response.body[1].body).to.deep.eq({
-      Authorization: `Timestamp ${timestamp}`,
-      ...initialData,
-      ...extra,
-      ...orgData
-    })
-  })
-})
-
-it('can submit both', () => {
-  const extra = {
-    interests: {
-      runningOrganisation: true,
-      teachingCode: true
-    }
-  }
-
-  cy.fillInitialForm({ ...initialData, ...extra }, 'Next')
-  cy.fillCodeForm(codeData, 'Next')
-  cy.fillOrgForm(orgData, 'Submit')
-
-  cy.get('.applicationForm_thankYou').should('contains.text', thanks)
+it('can submit a minimal form', () => {
+  cy.fillInitialForm(initialData)
 
   cy.request(`${mockServerURL}/_calls`).then(response => {
-    expect(response.body[0].body).to.deep.eq({
-      ...initialData,
-      ...extra,
-      ...codeData,
-      ...orgData
-    })
-    expect(response.body[1].body).to.deep.eq({
-      Authorization: `Timestamp ${timestamp}`,
-      ...initialData,
-      ...extra,
-      ...codeData,
-      ...orgData
-    })
+    expect(response.body[0].body).to.deep.eq(generateExpected(initialData))
   })
 })

e2e/support/commands.js

@@ -4,17 +4,28 @@
 // https://on.cypress.io/custom-commands
 // ***********************************************//
 
-Cypress.Commands.add('fillInitialForm', (data, button) => {
+Cypress.Commands.add('fillInitialForm', data => {
+  // mandatory fields
   cy.get('[name="firstName"]').type(data.firstName)
   cy.get('[name="lastName"]').type(data.lastName)
-  cy.get('[name="city"]').select(data.city)
+  cy.get('[name="cityId"]').select(data.cityName)
   cy.get('[name="email"]').type(data.email)
-  cy.get('[name="phone"]').type(data.phone)
-  Object.keys(data.interests).forEach(field => {
-    cy.get(`[name="interests[${field}]"]`).check()
-  })
+  cy.get('input[type="tel"]').type(data.tel)
+  cy.get('[name="interestedInVolunteer"]').type(data.interestedInVolunteer)
+  cy.get('[name="interestedInCYF"]').type(data.interestedInCYF)
+
+  // optional fields
+  if (data.industry) {
+    cy.get('[name="industry"]').select(data.industry)
+  }
+  if (data.hearAboutCYF) {
+    cy.get('[name="hearAboutCYF"]').select(data.hearAboutCYF)
+  }
+
+  // submission
+  cy.get('[name="acknowledgement"]').click()
   cy.get('button')
-    .contains(button)
+    .contains('Submit')
     .click()
 })
 

package.json

@@ -40,6 +40,10 @@
     "delete-map-files": "find ./build -name '*.map' -delete",
     "delete-references-to-map-files": "find ./build -regex '.*\\.\\(js\\|css\\)' -exec sed -i -E '\\/[\\*\\/]#\\ssourceMappingURL=main(\\.[0-9a-f]+)?\\.(css|js)\\.map(\\*\\/)?/g' {} +",
     "test": "react-scripts test --env=jsdom",
+    "e2e:dev": "concurrently -k -n \"app,mock,e2e\" \"yarn start\" \"yarn e2e:mock\" \"cypress open\"",
+    "e2e": "concurrently -k -s first -n \"app,mock,e2e\" \"BROWSER=none yarn start\" \"yarn e2e:mock\" \"yarn e2e:run\"",
+    "e2e:mock": "node ./e2e/fixtures/server.js",
+    "e2e:run": "wait-on -l http-get://localhost:3000 && cypress run",
     "lint:fix": "./node_modules/.bin/eslint --fix src",
     "prettier": "./node_modules/.bin/prettier --config .prettierrc --write 'src/**/*.js'",
     "eject": "react-scripts eject"
@@ -62,6 +66,9 @@
   },
   "devDependencies": {
     "autoprefixer": "^9.6.1",
+    "concurrently": "^5.0.0",
+    "cors": "^2.8.5",
+    "cypress": "^3.4.1",
     "eslint": "^6.2.2",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-config-prettier": "^6.1.0",
@@ -71,7 +78,8 @@
     "eslint-plugin-react": "^7.14.3",
     "husky": "^3.0.4",
     "lint-staged": "^9.2.5",
-    "prettier": "^1.18.2"
+    "prettier": "^1.18.2",
+    "wait-on": "^3.3.0"
   },
   "browserslist": [
     ">0.2%",

src/App.css

@@ -23,6 +23,25 @@ body {
   -webkit-animation: spin 2s linear infinite;
   animation: spin 2s linear infinite;
 }
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 button:disabled {
   background: gray;
 }

src/App.js

@@ -1,15 +1,17 @@
 import React from 'react'
 import { Provider } from 'react-redux'
 import { BrowserRouter as Router } from 'react-router-dom'
-import { applyMiddleware, createStore } from 'redux'
+import { applyMiddleware, compose, createStore } from 'redux'
 import ReduxThunk from 'redux-thunk'
 import './App.css'
 import Footer from './Components/Footer'
 import Navbar from './Components/Navbar'
 import reducers from './Redux/Reducer'
 import Routes from './Routes'
 
-const store = createStore(reducers, applyMiddleware(ReduxThunk))
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const store = createStore(reducers, composeEnhancers(applyMiddleware(ReduxThunk)))
+
 const App = () => (
   <Provider store={store}>
     <Router>

src/Components/forms/header.js

@@ -1,15 +1,9 @@
 import React from 'react'
 
-export default ({ err, formInComplete, userId }) => {
+export default ({ formInComplete, userId }) => {
   return (
     <div>
       <div className="mb-2">
-        {err && (
-          <p className="errors">
-            {err}
-            {window.scrollTo(0, 0)}
-          </p>
-        )}
         {formInComplete ? (
           <p className="errors">
             Form is incomplete, please check all your details.