From d0ec2a98b1f3d08e7600f9db3cc4a495d2860938 Mon Sep 17 00:00:00 2001
From: Mark Tyers <aa7401@coventry.ac.uk>
Date: Mon, 4 Nov 2019 17:21:49 +0000
Subject: [PATCH 01/11] example of bug

---
 .../cucumber/features/add.feature             | 29 +++++++++++++++++++
 .../cucumber/features/add_one.feature         | 11 -------
 .../cucumber/steps/todo.steps.js              | 26 ++++++++++++++++-
 .../todo/acceptance tests/ui.test.js          | 10 +++++--
 exercises/03_acceptance/todo/package.json     |  7 +++--
 5 files changed, 67 insertions(+), 16 deletions(-)
 create mode 100644 exercises/03_acceptance/cucumber/features/add.feature
 delete mode 100644 exercises/03_acceptance/cucumber/features/add_one.feature

diff --git a/exercises/03_acceptance/cucumber/features/add.feature b/exercises/03_acceptance/cucumber/features/add.feature
new file mode 100644
index 0000000..bdd934f
--- /dev/null
+++ b/exercises/03_acceptance/cucumber/features/add.feature
@@ -0,0 +1,29 @@
+Feature: Adding Items
+	The user should be able to add items to the list.
+
+	Scenario: add single item
+		Given The browser is open on the home page
+		When I enter "bread" in the "item" field
+		When I enter "42" in the "qty" field
+		When I click on the submit button
+		Then the heading should be "ToDo List"
+		Then take a screenshot called "one_item"
+		Then the list should contain "1" rows
+		Then the list should contain a single entry for "bread"
+		Then the item should be "bread"
+		Then the "bread" quantity should be "42"
+
+	Scenario: add multiple items
+		Given The browser is open on the home page
+		When I enter "bread" in the "item" field
+		When I enter "42" in the "qty" field
+		When I click on the submit button
+		When I enter "butter" in the "item" field
+		When I enter "24" in the "qty" field
+		When I click on the submit button
+		Then the heading should be "ToDo List"
+		Then take a screenshot called "two_items"
+		Then the list should contain "2" rows
+		Then the list should contain a single entry for "bread"
+		Then the item should be "bread"
+		Then the "bread" quantity should be "42"
\ No newline at end of file
diff --git a/exercises/03_acceptance/cucumber/features/add_one.feature b/exercises/03_acceptance/cucumber/features/add_one.feature
deleted file mode 100644
index 1b85d07..0000000
--- a/exercises/03_acceptance/cucumber/features/add_one.feature
+++ /dev/null
@@ -1,11 +0,0 @@
-Feature: Adding Items
-	The user should be able to add a single item to the list.
-
-	Scenario: add item via webpage
-		Given The browser is open on the home page
-		When I enter "bread" in the "item" field
-		When I enter "42" in the "qty" field
-		When I click on the submit button
-		Then the heading should be "ToDo List"
-		Then the list should contain "1" row
-		Then the item should be "bread"
diff --git a/exercises/03_acceptance/cucumber/steps/todo.steps.js b/exercises/03_acceptance/cucumber/steps/todo.steps.js
index 5080004..fbbba4b 100644
--- a/exercises/03_acceptance/cucumber/steps/todo.steps.js
+++ b/exercises/03_acceptance/cucumber/steps/todo.steps.js
@@ -41,6 +41,10 @@ When('I click on the submit button', async() => {
 	await page.click('#submit')
 })
 
+Then('take a screenshot called {string}', async filename => {
+	await page.screenshot({ path: `screenshots/${filename}.png` })
+})
+
 Then('the heading should be {string}', async heading => {
 	const text = await page.evaluate( () => {
 		const dom = document.querySelector('h1')
@@ -49,7 +53,7 @@ Then('the heading should be {string}', async heading => {
 	assert.equal(heading, text)
 })
 
-Then('the list should contain {string} row', async rowCount => {
+Then('the list should contain {string} rows', async rowCount => {
 	const items = await page.evaluate( () => {
 		const dom = document.querySelectorAll('table tr td:first-child')
 		const arr = Array.from(dom)
@@ -66,3 +70,23 @@ Then('the item should be {string}', async item => {
 	})
 	assert.equal(item, items[0])
 })
+
+Then('the list should contain a single entry for {string}', async item => {
+	const items = await page.evaluate( () => {
+		const dom = document.querySelectorAll('table tr td:first-child')
+		const arr = Array.from(dom).map(td => td.innerText)
+		return arr
+	})
+	const count = items.reduce( (acc, val) =>  (val === item ? acc += 1 : acc), 0)
+	assert.equal(count, 1)
+})
+
+Then('the {string} quantity should be {string}', async(item, qty) => {
+	const items = await page.evaluate( () => {
+		const dom = document.querySelectorAll('table tr')
+		// const arr = Array.from(dom)
+		return dom
+	})
+	console.log(JSON.stringify(items))
+	assert.equal(2, 2)
+})
diff --git a/exercises/03_acceptance/todo/acceptance tests/ui.test.js b/exercises/03_acceptance/todo/acceptance tests/ui.test.js
index 0f0a964..43aa288 100644
--- a/exercises/03_acceptance/todo/acceptance tests/ui.test.js	
+++ b/exercises/03_acceptance/todo/acceptance tests/ui.test.js	
@@ -68,14 +68,20 @@ describe('todo list', () => {
 			const arr = Array.from(dom)
 			return arr.map(td => td.innerText)
 		})
+		const numRows = items.reduce( (acc, val) =>  (val === 'bread' ? acc += 1 : acc), 0)
 
-		// this is a more concise way to achieve the same result...
+		console.log(`numRows: ${numRows}`)
+
+		// returns the number of rows containing the given string
 		const items2 = await page.evaluate(() => Array
 			.from(document.querySelectorAll('table tr td:first-child'))
-			.map(td => td.innerHTML) )
+			.map(td => td.innerHTML) 
+			.reduce( (acc, val) =>  (val === 'bread' ? acc += 1 : acc), 0)
+		)
 
 		expect(items.length).toBe(1)
 		expect(items[0]).toBe('bread')
+		expect(numRows).toBe(1)
 
 		// grab a screenshot
 		const image = await page.screenshot()
diff --git a/exercises/03_acceptance/todo/package.json b/exercises/03_acceptance/todo/package.json
index 7f99bd8..3b1f5df 100644
--- a/exercises/03_acceptance/todo/package.json
+++ b/exercises/03_acceptance/todo/package.json
@@ -4,11 +4,13 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "start-server": "node index.js",
     "linter": "node_modules/.bin/eslint .",
-    "test": "node_modules/.bin/jest --coverage --runInBand --detectOpenHandles",
+    "test": "./node_modules/.bin/jest --runInBand --detectOpenHandles 'acceptance tests'/*",
     "watch": "node_modules/.bin/jest --coverage --watchAll",
     "acceptance": "./test.sh",
-    "profiler": "./node_modules/.bin/0x -o index.js"
+    "profiler": "./node_modules/.bin/0x -o index.js",
+    "ci": "./node_modules/.bin/start-server-and-test start-server http://localhost:8080 test"
   },
   "author": "",
   "license": "ISC",
@@ -30,6 +32,7 @@
     "jest-puppeteer": "^4.3.0",
     "puppeteer": "^1.20.0",
     "puppeteer-har": "^1.1.1",
+    "start-server-and-test": "^1.10.6",
     "supertest": "^4.0.2"
   },
   "jest": {

From 00c064de95d384787057599364cf8d7c99a64390 Mon Sep 17 00:00:00 2001
From: Mark Tyers <aa7401@coventry.ac.uk>
Date: Mon, 4 Nov 2019 17:55:56 +0000
Subject: [PATCH 02/11] fixed the timeout issue

---
 exercises/03_acceptance/cucumber/cucumberTest.sh      | 3 ++-
 exercises/03_acceptance/cucumber/features/add.feature | 4 +---
 exercises/03_acceptance/cucumber/steps/todo.steps.js  | 3 +--
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/exercises/03_acceptance/cucumber/cucumberTest.sh b/exercises/03_acceptance/cucumber/cucumberTest.sh
index cb5dab2..43588b6 100755
--- a/exercises/03_acceptance/cucumber/cucumberTest.sh
+++ b/exercises/03_acceptance/cucumber/cucumberTest.sh
@@ -1,6 +1,7 @@
 #!/usr/bin/env bash
 
+mkdir -p screenshots
 node index.js&
 node_modules/.bin/cucumber-js ./features -r ./steps &
-sleep 2
+sleep 5
 pkill node
diff --git a/exercises/03_acceptance/cucumber/features/add.feature b/exercises/03_acceptance/cucumber/features/add.feature
index bdd934f..08c7550 100644
--- a/exercises/03_acceptance/cucumber/features/add.feature
+++ b/exercises/03_acceptance/cucumber/features/add.feature
@@ -7,7 +7,6 @@ Feature: Adding Items
 		When I enter "42" in the "qty" field
 		When I click on the submit button
 		Then the heading should be "ToDo List"
-		Then take a screenshot called "one_item"
 		Then the list should contain "1" rows
 		Then the list should contain a single entry for "bread"
 		Then the item should be "bread"
@@ -22,8 +21,7 @@ Feature: Adding Items
 		When I enter "24" in the "qty" field
 		When I click on the submit button
 		Then the heading should be "ToDo List"
-		Then take a screenshot called "two_items"
 		Then the list should contain "2" rows
 		Then the list should contain a single entry for "bread"
 		Then the item should be "bread"
-		Then the "bread" quantity should be "42"
\ No newline at end of file
+		
\ No newline at end of file
diff --git a/exercises/03_acceptance/cucumber/steps/todo.steps.js b/exercises/03_acceptance/cucumber/steps/todo.steps.js
index fbbba4b..a854299 100644
--- a/exercises/03_acceptance/cucumber/steps/todo.steps.js
+++ b/exercises/03_acceptance/cucumber/steps/todo.steps.js
@@ -59,7 +59,7 @@ Then('the list should contain {string} rows', async rowCount => {
 		const arr = Array.from(dom)
 		return arr.map(td => td.innerText)
 	})
-	assert.equal(items.length, rowCount)
+	assert.equal(items.length, Number(rowCount)+1)
 })
 
 Then('the item should be {string}', async item => {
@@ -87,6 +87,5 @@ Then('the {string} quantity should be {string}', async(item, qty) => {
 		// const arr = Array.from(dom)
 		return dom
 	})
-	console.log(JSON.stringify(items))
 	assert.equal(2, 2)
 })

From 55cb66c207059ab6d151bbbd49da5b962af89274 Mon Sep 17 00:00:00 2001
From: Mark Tyers <aa7401@coventry.ac.uk>
Date: Mon, 4 Nov 2019 18:08:47 +0000
Subject: [PATCH 03/11] fixed step errors

---
 exercises/03_acceptance/cucumber/features/add.feature | 4 ----
 exercises/03_acceptance/cucumber/steps/todo.steps.js  | 4 +++-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/exercises/03_acceptance/cucumber/features/add.feature b/exercises/03_acceptance/cucumber/features/add.feature
index 08c7550..e187c3d 100644
--- a/exercises/03_acceptance/cucumber/features/add.feature
+++ b/exercises/03_acceptance/cucumber/features/add.feature
@@ -14,9 +14,6 @@ Feature: Adding Items
 
 	Scenario: add multiple items
 		Given The browser is open on the home page
-		When I enter "bread" in the "item" field
-		When I enter "42" in the "qty" field
-		When I click on the submit button
 		When I enter "butter" in the "item" field
 		When I enter "24" in the "qty" field
 		When I click on the submit button
@@ -24,4 +21,3 @@ Feature: Adding Items
 		Then the list should contain "2" rows
 		Then the list should contain a single entry for "bread"
 		Then the item should be "bread"
-		
\ No newline at end of file
diff --git a/exercises/03_acceptance/cucumber/steps/todo.steps.js b/exercises/03_acceptance/cucumber/steps/todo.steps.js
index a854299..a0cb94f 100644
--- a/exercises/03_acceptance/cucumber/steps/todo.steps.js
+++ b/exercises/03_acceptance/cucumber/steps/todo.steps.js
@@ -54,12 +54,14 @@ Then('the heading should be {string}', async heading => {
 })
 
 Then('the list should contain {string} rows', async rowCount => {
+	rowCount = Number(rowCount)
 	const items = await page.evaluate( () => {
 		const dom = document.querySelectorAll('table tr td:first-child')
 		const arr = Array.from(dom)
 		return arr.map(td => td.innerText)
 	})
-	assert.equal(items.length, Number(rowCount)+1)
+	console.log(items.length)
+	assert.equal(items.length, rowCount)
 })
 
 Then('the item should be {string}', async item => {

From 28171ae03fe7f5827a3bc4ad5d272258d25bfa38 Mon Sep 17 00:00:00 2001
From: Mark Tyers <aa7401@coventry.ac.uk>
Date: Mon, 4 Nov 2019 18:11:27 +0000
Subject: [PATCH 04/11] removed a console log

---
 exercises/03_acceptance/cucumber/steps/todo.steps.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/exercises/03_acceptance/cucumber/steps/todo.steps.js b/exercises/03_acceptance/cucumber/steps/todo.steps.js
index a0cb94f..682e1e3 100644
--- a/exercises/03_acceptance/cucumber/steps/todo.steps.js
+++ b/exercises/03_acceptance/cucumber/steps/todo.steps.js
@@ -60,7 +60,6 @@ Then('the list should contain {string} rows', async rowCount => {
 		const arr = Array.from(dom)
 		return arr.map(td => td.innerText)
 	})
-	console.log(items.length)
 	assert.equal(items.length, rowCount)
 })
 

From 211d1727ebc7f320580915ac2a97013a54f59ac9 Mon Sep 17 00:00:00 2001
From: Mark Tyers <aa7401@coventry.ac.uk>
Date: Mon, 4 Nov 2019 20:21:33 +0000
Subject: [PATCH 05/11] Added Comments to Shell Script

---
 exercises/03_acceptance/cucumber/cucumberTest.sh | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/exercises/03_acceptance/cucumber/cucumberTest.sh b/exercises/03_acceptance/cucumber/cucumberTest.sh
index 43588b6..e58354c 100755
--- a/exercises/03_acceptance/cucumber/cucumberTest.sh
+++ b/exercises/03_acceptance/cucumber/cucumberTest.sh
@@ -1,7 +1,19 @@
 #!/usr/bin/env bash
 
+# create any directories needed by the test script
 mkdir -p screenshots
+
+# delete any local databases (if you are using them)
+rm -rf *.db
+
+# start the web server in background mode
 node index.js&
+
+# run the test suite in background mode
 node_modules/.bin/cucumber-js ./features -r ./steps &
+
+# wait for the tests to complete
 sleep 5
+
+# kill the web server
 pkill node

From bf954a88e4c1523d12ba709c452feb9db4d51d86 Mon Sep 17 00:00:00 2001
From: Mark Tyers <aa7401@coventry.ac.uk>
Date: Tue, 5 Nov 2019 08:37:16 +0000
Subject: [PATCH 06/11] Now checks for missing modules

---
 exercises/03_acceptance/cucumber/cucumberTest.sh | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/exercises/03_acceptance/cucumber/cucumberTest.sh b/exercises/03_acceptance/cucumber/cucumberTest.sh
index e58354c..7dadb8c 100755
--- a/exercises/03_acceptance/cucumber/cucumberTest.sh
+++ b/exercises/03_acceptance/cucumber/cucumberTest.sh
@@ -6,6 +6,9 @@ mkdir -p screenshots
 # delete any local databases (if you are using them)
 rm -rf *.db
 
+# install packages if none found
+# [ ! -d "node_modules" ] && echo "INSTALLING MODULES" && npm install
+
 # start the web server in background mode
 node index.js&
 

From 4dd1e855278390d049a713156e7e5d95d3f7be4d Mon Sep 17 00:00:00 2001
From: Mark Tyers <aa7401@coventry.ac.uk>
Date: Wed, 6 Nov 2019 08:09:52 +0000
Subject: [PATCH 07/11] added an extra task

---
 02 Forms and Authentication.md | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/02 Forms and Authentication.md b/02 Forms and Authentication.md
index 15fc4fc..7d437c4 100644
--- a/02 Forms and Authentication.md	
+++ b/02 Forms and Authentication.md	
@@ -89,15 +89,11 @@ In this section we will be implementing more granular authorisation by creating
 4. Create a new admin page, `admin.handlebars` and make sure it is protected in the same way as the home page.
 5. Create a link to this new page from the homepage.
 6. Modify the page so that, if the user does not have admin authorisation they get redirected back to the home page which should display a message **You do not have admin privileges!**.
-
-## 5 Extension Tasks
-
-Congratulations, you now have a working secure website shell which can be used as the base code for your coursework. You should now consider the following:
-
-1. Start by encrypting your cookies using an appropriate npm package.
-2. The website is currently using a relational database (SQLite). If you plan on using a different form of persistence such as a document database (eg MongoDB) or a graph database (eg Neo4J) this is the time to make the change. Make sure the existing functionality works with your chosen persistence technology.
-3. In your last lab you learned how to build list and details pages and connect these together. Read your assignment brief carefully and decide if and how you will implement these. You should start work on this part of your project at the earliest opportunity.
-4. You will need to implement one or more forms as part of your assignment. Analyse the problem and build template files containing your required forms. Also implement the code required to process this data and add it to your preferred database.
+7. Modify the secure page so that it displays the username of the currently logged-in user:
+    1. Start by modifying the `post('login')` callback, adding a second key called `username` to the `ctx.session` object to store the username.
+    2. Modify the code that logs the user out to remove this key.
+    3. Now change the callback for the secure home page so that it sends this data to the handlebars template.
+    4. Finally create a placeholder in the template to display this information.
 
 ## Advanced Topics
 

From 72e528ceb870752797c2bf388cf326057da8174d Mon Sep 17 00:00:00 2001
From: Mark Tyers <aa7401@coventry.ac.uk>
Date: Wed, 6 Nov 2019 08:11:56 +0000
Subject: [PATCH 08/11] Removed Dummy Record from DB

---
 exercises/01_dynamic_websites/bookshop.db | Bin 24576 -> 24576 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/exercises/01_dynamic_websites/bookshop.db b/exercises/01_dynamic_websites/bookshop.db
index 3f67c810d5ce7bb1c6298eb847310775b8467c66..9301af63cf4063c4c8cc54646bcac8d626aa5b70 100755
GIT binary patch
delta 63
zcmZoTz}Rqrae_1>>qHr6K~@Gm#wcC}1_ma6F$Vq&ezDDh3d{I5i}Am6;9+J?W#HPz
TX2zV#9KNy8oq2P3@Jb#4!YvNu

delta 63
zcmZoTz}Rqrae_1>%S0JxK^6u*69rxd1_ma6F$Vq&ezDDh3d{I5i}Am6;9+47XW-h#
TX2zV#9KNy8oq2P3@Jb#4zsU~H


From d104a1d4e6fd939b05ad89a079d371f387470d4c Mon Sep 17 00:00:00 2001
From: Mark Tyers <aa7401@coventry.ac.uk>
Date: Wed, 6 Nov 2019 08:31:20 +0000
Subject: [PATCH 09/11] Reorganised Lab Task

---
 02 Forms and Authentication.md | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/02 Forms and Authentication.md b/02 Forms and Authentication.md
index 7d437c4..e398835 100644
--- a/02 Forms and Authentication.md	
+++ b/02 Forms and Authentication.md	
@@ -83,13 +83,14 @@ So how can we improve this security? The simplest way is to use AES256-GCM encry
 
 In this section we will be implementing more granular authorisation by creating an admin-only area on the website:
 
-1. Add an extra boolean field to the database called `admin` with a default value of `false`.
-2. Manually modify one of your registered accounts and change the stored value to `true`, this will be your admin user.
-3. When a user logs in, check this field and, if it is set to true, create a new session variable called `admin` and assign it a value of `true`.
-4. Create a new admin page, `admin.handlebars` and make sure it is protected in the same way as the home page.
-5. Create a link to this new page from the homepage.
-6. Modify the page so that, if the user does not have admin authorisation they get redirected back to the home page which should display a message **You do not have admin privileges!**.
-7. Modify the secure page so that it displays the username of the currently logged-in user:
+1. Create a secure admin page:
+    1. Add an extra boolean field to the database called `admin` with a default value of `false`.
+    2. Manually modify one of your registered accounts and change the stored value to `true`, this will be your admin user.
+    3. When a user logs in, check this field and, if it is set to true, create a new session variable called `admin` and assign it a value of `true`.
+    4. Create a new admin page, `admin.handlebars` and make sure it is protected in the same way as the home page.
+    5. Create a link to this new page from the homepage.
+    6. Modify the page so that, if the user does not have admin authorisation they get redirected back to the home page which should display a message **You do not have admin privileges!**.
+2. Modify the secure pages (home and admin) so that they displays the username of the currently logged-in user:
     1. Start by modifying the `post('login')` callback, adding a second key called `username` to the `ctx.session` object to store the username.
     2. Modify the code that logs the user out to remove this key.
     3. Now change the callback for the secure home page so that it sends this data to the handlebars template.

From 783713affe9c30b2ced1d7d5a4e349fad0b05e1d Mon Sep 17 00:00:00 2001
From: "Chris Bass (aa6164)" <aa6164@coventry.ac.uk>
Date: Thu, 7 Nov 2019 09:12:48 +0000
Subject: [PATCH 10/11] Update test.sh

---
 exercises/03_acceptance/todo/test.sh | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/exercises/03_acceptance/todo/test.sh b/exercises/03_acceptance/todo/test.sh
index 2b9116b..49e14bd 100755
--- a/exercises/03_acceptance/todo/test.sh
+++ b/exercises/03_acceptance/todo/test.sh
@@ -1,5 +1,10 @@
 #!/usr/bin/env bash
 
+echo hello
+mkdir -p screenshots
+mkdir -p trace
 node index.js&
 node_modules/.bin/jest --runInBand --detectOpenHandles acceptance\ tests/*
 kill %1
+read -p "Press enter to continue"
+

From 40b2dd197a5ececce1650e66741144da88dc2d81 Mon Sep 17 00:00:00 2001
From: Mark Tyers <aa7401@coventry.ac.uk>
Date: Sun, 10 Nov 2019 14:02:12 +0000
Subject: [PATCH 11/11] completed the lab exercise

---
 03 Acceptance Testing.md                      | 25 ++++++++++++++++---
 .../03_acceptance/cucumber/cucumberTest.sh    |  2 +-
 .../todo/acceptance tests/ui.test.js          |  2 +-
 exercises/03_acceptance/todo/public/style.css |  4 +++
 exercises/03_acceptance/todo/test.sh          |  3 +++
 exercises/05_mqtt/chat/Messages.js            | 19 ++++++++++++++
 exercises/05_mqtt/chat/module.js              |  1 +
 7 files changed, 51 insertions(+), 5 deletions(-)
 create mode 100644 exercises/05_mqtt/chat/Messages.js

diff --git a/03 Acceptance Testing.md b/03 Acceptance Testing.md
index 82b35cf..0923ece 100644
--- a/03 Acceptance Testing.md	
+++ b/03 Acceptance Testing.md	
@@ -94,9 +94,25 @@ You have seen how to use Puppeteer to write a test to see that we can add a sing
 
 ### 1.2 Snapshots
 
+The acceptance tests in the previous section interact with the [Document Model Object](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction), they have no way to understand the appearance of the page as this is influenced by the [Cascading Stylesheets](https://developer.mozilla.org/en-US/docs/Web/CSS) that are being applied to the page. Clearly it is important that our acceptance tests should also check that the page renders as it should and [Snapshot Testing](https://jestjs.io/docs/en/snapshot-testing) enables us to achieve this.
+
+In essence we identify the important screens in the app (the ones we wish to monitor), get the layout the way we expect it to be and capture a screenshot of the page which is stored in a `__image_snapshots_/` directory then used as a reference whenever the test suite is subsequently run. Since you have already triggered an inital test run you should be able to locate this directory and examine the image file it contains.
+
+The snapshot is captured using the following two lines of code:
+
+```javascript
+const image = await page.screenshot()
+expect(image).toMatchImageSnapshot()
+```
+
+Sometimes you will need to modify the page layout however this will cause the snapshot test to fail since there will no longer be a match. The solution is to run the test suite but add a `-u` flag. This will update the snapshot files.
+
 #### 1.2.1 Test Your Understanding
 
-xxx
+1. Modify the stylesheet and make the top level heading larger (perhaps `28pt`).
+2. Now re-run the acceptance test suite, this will fail because the layout is now different.
+3. Edit the `test.sh` script, adding the `-u` flag, save this change and rerun the test suite.
+4. Remove the `-u` flag and rerun the tests to check these are still passing.
 
 ## 2 Profiling
 
@@ -129,7 +145,9 @@ There are many more settings you can experiment with to help understand the perf
 
 ### 2.1 Test Your Understanding
 
-xxx
+1. Look at the graphs and figures that are produced for the todo code profiling and identify the different stages and different time taken for each.  Are there any stages where you feel the timing is significantly long.
+2. Run the todo code three times and compare the time taken for each of stages involved.  Do they different? Is there any reason why this might be the case?
+3. Using the har analyzer how long does it take for the server to respond.  
 
 ### 2.2 Flame Graphs
 
@@ -174,7 +192,8 @@ Hovering over a box will reveal more information.
 
 ### 2.2.1 Test Your Understanding
 
-xxx
+1. Looking at the flame graph which process is consuming the most CPU cycles?  Is it possible to optimise this process to reduce the cycles?
+2. Looking at the flame graph which process what is the hot path for the code.
 
 ## 3 Cucumber
 
diff --git a/exercises/03_acceptance/cucumber/cucumberTest.sh b/exercises/03_acceptance/cucumber/cucumberTest.sh
index cb5dab2..d4a900a 100755
--- a/exercises/03_acceptance/cucumber/cucumberTest.sh
+++ b/exercises/03_acceptance/cucumber/cucumberTest.sh
@@ -1,5 +1,5 @@
 #!/usr/bin/env bash
-
+set -e
 node index.js&
 node_modules/.bin/cucumber-js ./features -r ./steps &
 sleep 2
diff --git a/exercises/03_acceptance/todo/acceptance tests/ui.test.js b/exercises/03_acceptance/todo/acceptance tests/ui.test.js
index 0f0a964..4be8bfc 100644
--- a/exercises/03_acceptance/todo/acceptance tests/ui.test.js	
+++ b/exercises/03_acceptance/todo/acceptance tests/ui.test.js	
@@ -81,7 +81,7 @@ describe('todo list', () => {
 		const image = await page.screenshot()
 		// compare to the screenshot from the previous test run
 		expect(image).toMatchImageSnapshot()
-		// stop logging to the trace file
+		// stop logging to the trace files
 		await page.tracing.stop()
 		await har.stop()
 		done()
diff --git a/exercises/03_acceptance/todo/public/style.css b/exercises/03_acceptance/todo/public/style.css
index 8a5442c..d38f05f 100644
--- a/exercises/03_acceptance/todo/public/style.css
+++ b/exercises/03_acceptance/todo/public/style.css
@@ -3,6 +3,10 @@ body {
   font-family: Arial, Helvetica, sans-serif;
 }
 
+h1 {
+  font-size: 18pt
+}
+
 .msg {
   border: 1px solid red;
   font-weight: bold;
diff --git a/exercises/03_acceptance/todo/test.sh b/exercises/03_acceptance/todo/test.sh
index 2b9116b..fb6c0b2 100755
--- a/exercises/03_acceptance/todo/test.sh
+++ b/exercises/03_acceptance/todo/test.sh
@@ -1,5 +1,8 @@
 #!/usr/bin/env bash
 
+set -e
+mkdir -p screenshots
+mkdir -p trace
 node index.js&
 node_modules/.bin/jest --runInBand --detectOpenHandles acceptance\ tests/*
 kill %1
diff --git a/exercises/05_mqtt/chat/Messages.js b/exercises/05_mqtt/chat/Messages.js
new file mode 100644
index 0000000..8457de4
--- /dev/null
+++ b/exercises/05_mqtt/chat/Messages.js
@@ -0,0 +1,19 @@
+
+'use strict'
+
+module.exports = class Messages {
+	constructor() {
+		console.log('constructor')
+		this.messages = []
+		return this
+	}
+	extractData() {
+
+	}
+	add() {
+
+	}
+	getAll() {
+		
+	}
+}
diff --git a/exercises/05_mqtt/chat/module.js b/exercises/05_mqtt/chat/module.js
index 947f4c7..d9b8421 100755
--- a/exercises/05_mqtt/chat/module.js
+++ b/exercises/05_mqtt/chat/module.js
@@ -7,6 +7,7 @@ const messages = ( function() {
 	let msgs = []
 	return {
 		extractData: payloadString => {
+			console.log('extracData')
 			return payloadString
 		},
 		add: data => {