Switch from mock server to Cypress interception

Author: textbook

e2e/fixtures/cities.json

@@ -0,0 +1,8 @@
+{
+  "cities": [
+    {
+      "_id": "123abc",
+      "name": "London"
+    }
+  ]
+}

e2e/fixtures/server.js

@@ -1,12 +1,14 @@
 const mockServerURL = 'http://localhost:3001'
 
 beforeEach(() => {
-  cy.request('POST', `${mockServerURL}/_reset`)
-
+  cy.intercept('GET', `${mockServerURL}/cities`, { fixture: 'cities.json' })
   cy.visit('/')
 })
 
 it('can submit a minimal form', () => {
+  cy.intercept('POST', `${mockServerURL}/volunteer`, req => {
+    req.reply({ volunteer: { _id: 'some-new-id', ...req.body } })
+  }).as('createVolunteer')
   const initialData = {
     firstName: 'Jane',
     lastName: 'Doe',
@@ -41,10 +43,7 @@ it('can submit a minimal form', () => {
   cy.findByRole('checkbox', { name: /contact me/i }).check()
   cy.findByRole('button', { name: /submit/i }).click()
 
-  cy.request(`${mockServerURL}/_calls`).then(response => {
-    const [{ body: payload, method, path }] = response.body
-    expect(method).to.equal('POST')
-    expect(path).to.equal('/volunteer')
+  cy.wait('@createVolunteer').then(({ request: { body: payload } }) => {
     expect(payload).to.deep.eq({
       ...initialData,
       agreeToReceiveCommunication: true,
@@ -65,6 +64,10 @@ it('can submit a minimal form', () => {
 })
 
 it('requires employee selection', () => {
+  cy.intercept('POST', `${mockServerURL}/volunteer`, req => {
+    req.reply({ volunteer: { _id: 'some-new-id', ...req.body } })
+  }).as('createVolunteer')
+
   cy.findByRole('textbox', { name: /first name/i }).type('Laura')
   cy.findByRole('textbox', { name: /last name/i }).type('Olsen')
   cy.findByRole('combobox', { name: /city/i }).select('London')
@@ -88,9 +91,7 @@ it('requires employee selection', () => {
   )
   cy.findByRole('button', { name: /submit/i }).click()
 
-  cy.request(`${mockServerURL}/_calls`).then(({ body }) => {
-    expect(body).to.have.length(1)
-    const [{ body: payload }] = body
+  cy.wait('@createVolunteer').then(({ request: { body: payload } }) => {
     expect(payload).to.have.property('hearAboutCYF', 'Employer')
     expect(payload).to.have.property('employer', 'Capgemini')
   })

e2e/integration/journey.test.js

@@ -1,7 +1,7 @@
 const mockServerURL = 'http://localhost:3001'
 
 beforeEach(() => {
-  cy.request('POST', `${mockServerURL}/_reset`)
+  cy.intercept('GET', `${mockServerURL}/cities`, { fixture: 'cities.json' })
 })
 
 it('shows success message', () => {
@@ -12,6 +12,9 @@ it('shows success message', () => {
 it('includes the user ID when resubmitting', () => {
   const userId = 'something'
   const code = 'does-this-matter'
+  cy.intercept('POST', `${mockServerURL}/volunteer`, req => {
+    req.reply({ volunteer: { _id: 'some-new-id', ...req.body } })
+  }).as('createVolunteer')
   cy.visit(`/code/${userId}/${code}`)
 
   cy.findByRole('textbox', { name: /first name/i }).type('Erhard')
@@ -29,16 +32,15 @@ it('includes the user ID when resubmitting', () => {
   cy.findByRole('checkbox', { name: /contact me/i }).check()
   cy.findByRole('button', { name: /submit/i }).click()
 
-  cy.request(`${mockServerURL}/_calls`).then(({ body }) => {
-    expect(body).to.have.length(1)
-    const [{ body: payload, method, path }] = body
-    expect(method).to.equal('POST')
-    expect(path).to.equal('/volunteer')
+  cy.wait('@createVolunteer').then(({ request: { body: payload } }) => {
     expect(payload).to.have.property('userId', userId)
   })
 })
 
 it('lets you request a reminder email', () => {
+  cy.intercept('POST', `${mockServerURL}/volunteer/email/verification`, {
+    statusCode: 200
+  }).as('verifyEmail')
   const userId = 'whoever'
   const code = 'whatever'
   const email = '[email protected]'
@@ -52,11 +54,8 @@ it('lets you request a reminder email', () => {
   // TODO not accessible by label
   cy.findByRole('textbox').type(email)
   cy.findByRole('button', { name: /submit/i }).click()
-  cy.request(`${mockServerURL}/_calls`).then(({ body }) => {
-    expect(body).to.have.length(1)
-    const [{ body: payload, method, path }] = body
-    expect(method).to.equal('POST')
-    expect(path).to.equal('/volunteer/email/verification')
+
+  cy.wait('@verifyEmail').then(({ request: { body: payload } }) => {
     expect(payload).to.deep.equal({ email, userId })
   })
 })

e2e/integration/withCode.test.js

@@ -18,10 +18,9 @@
   },
   "scripts": {
     "build": "react-scripts build",
-    "e2e": "concurrently -k -s first -n \"app,mock,e2e\" \"BROWSER=none yarn start\" \"yarn e2e:mock\" \"yarn e2e:run\"",
-    "e2e:dev": "concurrently -k -n \"app,mock,e2e\" \"yarn start\" \"yarn e2e:mock\" \"cypress open --e2e\"",
-    "e2e:mock": "node ./e2e/fixtures/server.js",
-    "e2e:prod": "concurrently -k -s first -n \"app,mock,e2e\" \"yarn serve\" \"yarn e2e:mock\" \"yarn e2e:run\"",
+    "e2e": "concurrently -k -s first -n \"app,e2e\" \"BROWSER=none yarn start\" \"yarn e2e:run\"",
+    "e2e:dev": "concurrently -k -n \"app,e2e\" \"yarn start\" \"cypress open --e2e\"",
+    "e2e:prod": "concurrently -k -s first -n \"app,e2e\" \"yarn serve\" \"yarn e2e:run\"",
     "e2e:run": "wait-on -l http-get://localhost:3000 && cypress run",
     "eject": "react-scripts eject",
     "lint": "yarn lint:eslint && yarn lint:prettier --check",