basic.test.ts

import puppeteer from 'puppeteer-core'
import express from 'express'
import * as http from 'http'

let browser: puppeteer.Browser
let app: express.Application
let server: http.Server

beforeAll(async () => {
  // Open browser up using chrome installed on the machine
  browser = await puppeteer.launch({
    headless: false,
    executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
  })
  
  // Create a webserver for the content in the dist folder
  // You gotta build your web app first
  app = express()
  app.get('/', express.static('./dist'))
  server = app.listen('8080')
})

afterAll(() => {
  // When the tests are finished, close the browser and 
  // turn off the web server
  browser.close()
  server.close()
})
  
// First test
test('Should send form to server', () => new Promise(async () => {
  // Create a new tab on the browser and tell chrome we want 
  // to listen to any http calls made by the website
  // Then navigate to your webserver
  const page = await browser.newPage()
  await page.setRequestInterception(true);
  page.goto('http://localhost:8080')

  // Create a listener for the first http request to the forms endpoint
  const onFormHttpCall = new Promise<any>(res => 
    page.on('request', async req => {
      if (req.url().includes('/api/forms')) {
        const form = JSON.parse(req.postData())
        res(form)
      }
      req.continue()
    }
  ))

  // Fill out the form and click submit
  await page.type('#form .email', 'testman@fakeemail.com')
  await page.click('#form .submit')

  // Wait for the listener to resolve
  const results = await onFormHttpCall

  // Test to see if the api call contains the right data
  expect(results).toEqual({
    email: 'testman@fakeemail.com'
  })
}))