.

.eslintrc.json

@@ -13,7 +13,7 @@
   "rules": {
     "arrow-body-style": 2,
     "arrow-spacing": ["warn", {"before": true, "after": true}],
-    "brace-style": 2,
+    "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
     "camelcase": [2, {"properties": "never"}],
     "complexity": ["error", 4],
     "eol-last": "warn",
@@ -27,7 +27,7 @@
     "max-depth": ["error", 3],
     "max-len": ["warn", { "code": 120, "tabWidth": 4 }],
     "max-lines": ["error", 100],
-    "max-lines-per-function": ["error", 15],
+    "max-lines-per-function": ["error", 25],
     "max-nested-callbacks": ["error", 4],
     "max-params": ["error", 5],
     "max-statements": ["error", 10],
@@ -55,14 +55,15 @@
     "prefer-const": 2,
     "quotes": [1, "single"],
     "semi": [1, "never"],
-    "space-before-blocks": ["error", { "functions": "always", "keywords": "always", "classes": "never" }],
+    "space-before-blocks": ["error", { "functions": "always", "keywords": "always", "classes": "always" }],
     "space-before-function-paren": [2, "never"],
     "strict": [2, "global"],
     "yoda": 2
 	},
 	"overrides": [{
-		"files": [ "*.test.js", "*.spec.js", "sqlite-async.js" ],
+		"files": [ "*.test.js", "*.spec.js", "sqlite-async.js", "*.steps.js" ],
 		"rules": {
+      "complexity": "off",
       "global-require": "off",
 			"max-lines-per-function": "off",
 			"max-lines": "off",

.gitignore

@@ -24,6 +24,7 @@ website.db
 *snap.png
 *diff.png
 *trace.json
+*.0x
 
 *.pptx
 *.mp4

01 Dynamic Websites.md

@@ -219,11 +219,12 @@ Now we have built the book details page we need to add hyperlinks to each book i
 2. You have added additional fields to the database but these are not shown. Modify the script (and the html template) to display these missing fields.
 3. The _page title_ currently displays the text `Bookshop`. Change this to display the name of the book. To do this you will need to insert an additional data placeholder in the shared **template file**.
     1. You should keep the default title on the other pages in the website. To do this you should use the handlebars [conditional helper](https://handlebarsjs.com/block_helpers.html)
-4. Add a hyperlink to return to the search page (not a button). This should _not_ make use of any client-side javascript such as `window.history`.
+4. Add a hyperlink to return to the search page (not a button). The html should look something like this`<a href="/">back</a>`:
     1. What has happened to the search filter when you go back to the previous page?
-    2. You will need to pass this to the details page and pass it back when the back button is clicked.
-    3. Add this to the URL you use to access the details page.
-    4. You will then need to add this to the link to return to the search results page.
+    2. To see a solution try searching for a product on amazon.
+    3. When you look at the product details, notice that the search box is still there.
+    4. This search box contains the search term you entered in the previous screen!
+    5. Look at the URL of the details page, can you see how it has been implemented?
 
 ## 5 Inserting Data
 

exercises/03_acceptance/cucumber/cucumberTest.sh

@@ -0,0 +1,22 @@
+#!/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
+
+# install packages if none found
+# [ ! -d "node_modules" ] && echo "INSTALLING MODULES" && npm install
+
+# 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

exercises/03_acceptance/cucumber/features/add.feature

@@ -0,0 +1,23 @@
+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 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 "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 the list should contain "2" rows
+		Then the list should contain a single entry for "bread"
+		Then the item should be "bread"

exercises/03_acceptance/cucumber/features/simple.feature.example

@@ -0,0 +1,8 @@
+Feature: Calling the add() Function
+	It should be possible to call the add function to add
+    an item to the list.
+
+	Scenario: add item via function
+		Given I currently have no items 
+		When I add "bread" with the quantity "17"
+		Then that data exists in memory

exercises/03_acceptance/cucumber/index.js

@@ -2,9 +2,6 @@
 
 'use strict'
 
-// https://medium.com/@anephenix/end-to-end-testing-single-page-apps-and-node-js-apis-with-cucumber-js-and-puppeteer-ad5a519ace0
-// https://github.com/spirosikmd/jest-cucumber-puppeteer-example
-
 const Koa = require('koa')
 const Router = require('koa-router')
 const stat = require('koa-static')

exercises/03_acceptance/cucumber/jest-test.config.js

@@ -1,11 +1,11 @@
 
-'use strict';
+'use strict'
 
 module.exports = {
 	displayName: 'test',
 	verbose: true,
 	collectCoverage: true,
-	"preset": "jest-puppeteer",
+	'preset': 'jest-puppeteer',
 	coverageThreshold: {
 		global: {
 			branches: 0,

exercises/03_acceptance/cucumber/jest.puppeteer.config.js

@@ -7,8 +7,8 @@ module.exports = {
 		port: 8080,
 	},
 	launch: {
-    headless: false,
-    devtools: true,
-    timeout:30000
-  }
+		headless: false,
+		devtools: true,
+		timeout: 30000
+	}
 }

exercises/03_acceptance/cucumber/package.json

@@ -4,10 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "linter": "node_modules/.bin/eslint .",
-    "test": "node_modules/.bin/jest --coverage --runInBand --detectOpenHandles",
-    "watch": "node_modules/.bin/jest --coverage --watchAll",
-    "acceptance": "./test.sh"
+    "cucumber": "./cucumberTest.sh",
+    "linter": "node_modules/.bin/eslint ."
   },
   "author": "",
   "license": "ISC",
@@ -16,7 +14,7 @@
     "http-status-codes": "^1.3.2",
     "koa": "^2.8.1",
     "koa-bodyparser": "^4.2.1",
-    "koa-handlebars": "^1.0.0",
+    "koa-handlebars": "^2.0.0",
     "koa-hbs-renderer": "^1.2.0",
     "koa-router": "^7.4.0",
     "koa-static": "^5.0.0",
@@ -35,6 +33,9 @@
     "projects": [
       "<rootDir>/jest-test.config.js"
     ],
+    "testMatch": [
+      "**/*.steps.js"
+    ],
     "preset": "jest-puppeteer"
   }
 }

exercises/03_acceptance/cucumber/readme.md

@@ -1,6 +1,62 @@
 
-# ToDo
+# Project Description  
 
 This project is designed to teach you how to write and debug unit tests and employ the Test-Driven Development (TDD) methodology in your software development.
 
 You should open this directory directly in VS Code, ensuring that this file is in the root of the file tree.
+
+# Cucumber and Gherkin
+
+To demonstrate TDD we will be using Cucumber and Gherkin in order to make our tests readable by any ordinary person. 
+
+Gherkin is a way to write tests, example: 
+
+		Given I currently have no items 
+		When I add "bread" with the quantity "17"
+		Then that data exists in memory
+
+Whereas Cucumber is a way to integrate them (to ensure they actually compile and run), example: 
+
+		Given('I currently have no items', function () {
+			// Write code here that turns the phrase above into concrete actions
+		});
+
+		When('I add {string} with the quantity {string}', function (string, string2) {
+			// Write code here that turns the phrase above into concrete actions
+		});
+
+		Then('that data exists in memory', function () {
+			// Write code here that turns the phrase above into concrete actions
+		});
+
+To run your tests just use <pre> npm run cucumber </pre>
+
+# Installation
+
+This repository should already be setup to be ready to go, but if you ever want to replicate it in one of your projects here is what you need to do. 
+
+1. Create your own node project (should know how to by now)
+2. Install cucumber: 
+<pre> npm install --save-dev cucumber </pre>
+3. You can run tests manually as such: 
+<pre> node_modules/.bin/cucumber-js ./features -r ./steps</pre>
+4. If you want to run them when you type "npm run cucumber", add this to your package.json: 
+<pre> "scripts": {
+    "cucumber": "cucumber-js ./features -r ./steps" } </pre>
+5. Put your gherkin files (.feature) in /features and cucumber files (.steps) in /steps.
+
+# Notes 
+
+If you want to develop a new Scenario, or even a new Feature, just write the Gherkin tests first (the human readable tests), then try running them. They will obviously not pass, but the terminal will help you write them. 
+
+Example: 
+<pre>
+1) Scenario: add item via function # features/add_one.feature:4
+   ? Given I currently have no items
+       Undefined. Implement with the following snippet:
+
+         Given('I currently have no items', function () {
+           // Write code here that turns the phrase above into concrete actions
+           return 'pending';
+         });
+</pre>