Reintroduce a basic E2E test for form submission

Needed to rewrite the logic as the form had changed, and the second
step does not seem to work at all.

Author: textbook

.gitignore

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

e2e/fixtures/server.js

@@ -9,6 +9,10 @@ const app = express()
 
 const calls = []
 
+app.get('/cities', (_, res) => {
+  res.json({ cities: [{ _id: '123abc', name: 'London' }] })
+})
+
 app.post('/google', (req, res) => {
   console.log({
     body: req.body,

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()
 })
 

e2e/support/index.js

@@ -18,3 +18,8 @@ import './commands'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
+Cypress.on('uncaught:exception', (err, runnable) => {
+  // returning false here prevents Cypress from
+  // failing the test
+  return false
+})

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%",