Implementing isolated acceptance tests

acceptanceTests/ui.spec.js

@@ -0,0 +1,70 @@
+'use strict'
+
+const puppeteer = require('puppeteer')
+const { configureToMatchImageSnapshot } = require('jest-image-snapshot')
+const PuppeteerHar = require('puppeteer-har')
+const shell = require('shelljs')
+
+const width = 800
+const height = 600
+const delayMS = 5
+
+let browser
+let page
+let har
+
+// threshold is the difference in pixels before the snapshots dont match
+const toMatchImageSnapshot = configureToMatchImageSnapshot({
+	customDiffConfig: { threshold: 2 },
+	noColors: true,
+})
+expect.extend({ toMatchImageSnapshot })
+
+beforeAll( async() => {
+	browser = await puppeteer.launch({ headless: true, slowMo: delayMS, args: [`--window-size=${width},${height}`] })
+	page = await browser.newPage()
+	har = new PuppeteerHar(page)
+	await page.setViewport({ width, height })
+	await shell.exec('beforeAll.sh')
+})
+
+afterAll( async() => {
+	browser.close()
+	await shell.exec('afterAll.sh')
+})
+
+beforeEach(async() => {
+	await shell.exec('beforeEach.sh')
+})
+
+describe('Registering', () => {
+	test('Register a user', async done => {
+		//start generating a trace file.
+		await page.tracing.start({path: 'trace/registering_user_har.json',screenshots: true})
+		await har.start({path: 'trace/registering_user_trace.har'})
+		//ARRANGE
+		await page.goto('http://localhost:8080/register', { timeout: 30000, waitUntil: 'load' })
+		//ACT
+		await page.type('input[name=user]', 'NewUser')
+		await page.type('input[name=pass]', 'password')
+		await page.click('input[type=submit]')
+		await page.goto('http://localhost:8080/login', { timeout: 30000, waitUntil: 'load' })
+		await page.type('input[name=user]', 'NewUser')
+		await page.type('input[name=pass]', 'password')
+		await page.click('input[type=submit]')
+		//ASSERT
+		//check that the user is taken to the homepage after attempting to login as the new user:
+		await page.waitForSelector('h1')
+		expect( await page.evaluate( () => document.querySelector('h1').innerText ) )
+			.toBe('Home')
+
+		// grab a screenshot
+		const image = await page.screenshot()
+		// compare to the screenshot from the previous test run
+		expect(image).toMatchImageSnapshot()
+		// stop logging to the trace files
+		await page.tracing.stop()
+		await har.stop()
+		done()
+	}, 16000)
+})

afterAll.sh

@@ -0,0 +1,17 @@
+#!/usr/bin/env bash
+
+set -e
+echo afterAll
+#Delete the databases that were used for the acceptance testing.
+FILE=website.db
+if test -f "$FILE"; then
+    rm -rf website.db
+fi
+#Restore the databases from before the acceptance tests were run, and delete the backups.
+FILE=websiteBackup.db
+if test -f "$FILE"; then
+    cp websiteBackup.db website.db
+    rm -rf websiteBackup.db
+fi
+
+

beforeAll.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+set -e
+echo beforeAll
+
+#Make backups of the databases.
+FILE=website.db
+if test -f "$FILE"; then
+    cp website.db websiteBackup.db
+    rm -rf website.db
+fi
+

beforeEach.sh

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+set -e
+echo beforeEach
+#Delete the database files.
+FILE=website.db
+if test -f "$FILE"; then
+    rm -rf website.db
+fi

index.js

@@ -31,6 +31,8 @@ const defaultPort = 8080
 const port = process.env.PORT || defaultPort
 const dbName = 'website.db'
 
+let user
+
 /**
  * The secure home page.
  *
@@ -69,13 +71,15 @@ router.post('/register', koaBody, async ctx => {
 		const body = ctx.request.body
 		console.log(body)
 		// call the functions in the module
-		const user = await new User(dbName)
+		user = await new User(dbName)
 		await user.register(body.user, body.pass)
 		// await user.uploadPicture(path, type)
 		// redirect to the home page
 		ctx.redirect(`/?msg=new user "${body.name}" added`)
 	} catch(err) {
 		await ctx.render('error', {message: err.message})
+	} finally {
+		user.tearDown()
 	}
 })
 
@@ -89,12 +93,14 @@ router.get('/login', async ctx => {
 router.post('/login', async ctx => {
 	try {
 		const body = ctx.request.body
-		const user = await new User(dbName)
+		user = await new User(dbName)
 		await user.login(body.user, body.pass)
 		ctx.session.authorised = true
 		return ctx.redirect('/?msg=you are now logged in...')
 	} catch(err) {
 		await ctx.render('error', {message: err.message})
+	} finally {
+		user.tearDown()
 	}
 })
 

jest-test.config.js

@@ -4,6 +4,7 @@ module.exports = {
 	displayName: 'test',
 	verbose: true,
 	collectCoverage: true,
+	"preset": 'jest-puppeteer',
 	coverageThreshold: {
 		global: {
 			branches: 0,

jest.puppeteer.config.js

@@ -0,0 +1,14 @@
+
+'use strict'
+
+module.exports = {
+	server: {
+		command: 'node index.js',
+		port: 8080,
+	},
+	launch: {
+		headless: false,
+		devtools: true,
+		timeout: 30000
+	}
+}

modules/user.js

@@ -56,5 +56,8 @@ module.exports = class User {
 			throw err
 		}
 	}
-
+
+	async tearDown() {
+		await this.db.close()
+	}
 }