Merge Cucumber Exercises into Master

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

@@ -1,12 +1,9 @@
-
 Feature: Adding Items
 	The user should be able to add a single 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
+
 
-Scenario: add a single item
-	Given The browser is open on the home page
-	When I enter "bread" in the "item" field
-	And I enter "42" in the "qty" field
-	And I click on the submit button
-	Then the heading should be "ToDo List"
-	And the list should contain "1" row
-	And the item in row "1" should be "bread"

exercises/03_acceptance/cucumber/features/nextFeature.devel

@@ -0,0 +1,10 @@
+#When ready copy the code below into add_one.feature and implement it into add_one.steps.js.	
+
+	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 in row "1" should be "bread"

exercises/03_acceptance/cucumber/package.json

@@ -4,6 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "cucumber": "cucumber-js ./features -r ./steps",
     "linter": "node_modules/.bin/eslint .",
     "test": "node_modules/.bin/jest --coverage --runInBand --detectOpenHandles",
     "watch": "node_modules/.bin/jest --coverage --watchAll",
@@ -16,7 +17,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 +36,9 @@
     "projects": [
       "<rootDir>/jest-test.config.js"
     ],
+    "testMatch": [
+      "**/*.steps.js"
+    ],
     "preset": "jest-puppeteer"
   }
 }

exercises/03_acceptance/cucumber/readme.md

@@ -1,6 +1,71 @@
 
-# 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.
+
+
+# Activity 
+
+After you've wrapped your head around existing tests try giving "features/nextFeature.devel" a try. It accomplishes the same thing as our unit test, but instead checks the functionality at a higher level (acceptance/integration testing). 
+
+There are some instructions and support code already available in "steps/add_one.steps.js", you just need to implement the tests in the same way we did with our first Scenario. 
+
+Remember to have your website running in a different terminal if you want puppeteer to be able to access it. 
+
+# 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>

exercises/03_acceptance/cucumber/steps/add_one.steps.js

@@ -0,0 +1,83 @@
+'use strict'
+
+const { Given, When, Then } = require('cucumber')
+const assert = require('assert');
+
+const todo = require('../modules/todo.js')
+
+// Scenario: add item via function
+		Given('I currently have no items', function () {
+			// Write code here that turns the phrase above into concrete actions
+			todo.clear() 
+		});
+
+		When('I add {string} with the quantity {string}', function (string, string2) {
+			// Write code here that turns the phrase above into concrete actions
+			todo.add(string, string2)
+		});
+
+		Then('that data exists in memory', function () {
+			// Write code here that turns the phrase above into concrete actions
+			let currentData = todo.getAll()[0]
+			assert.equal(currentData.item, "bread")
+			assert.equal(currentData.qty, 17)
+		});
+
+/*
+STARTING CODE TO HELP WITH "nextFeature.devel"
+
+Copy the contents of nextFeature.devel into add_one.feature, 
+then come back to this file and implement the features one by one. 
+
+There is already some setup code, so you only need to focus on the tests. 
+
+
+const puppeteer = require('puppeteer')
+
+const PAGE = 'http://localhost:8080'
+
+const width = 800
+const height = 600
+const delayMS = 5
+
+let page 
+let browser
+
+async function initialize() {
+	console.log("Launching browser")
+	browser = await puppeteer.launch({ headless: true, slowMo: delayMS, args: ['--disable-gpu', `--no-sandbox`,	 '--disable-dev-shm-usage'] })
+	page = await browser.newPage()
+	await page.setViewport({ width, height })
+	await page.goto(PAGE)
+	await page.evaluate(() => {
+			localStorage.clear()
+	})
+	await page.reload()
+}
+
+async function addToPage(field, value){
+	// add puppeteer code 
+	console.log("In development!")
+}
+
+async function pressSubmit(){
+	// add puppeteer code 
+	console.log("In development!")
+}
+
+// Scenario: add item via webpage
+	Given('The browser is open on the home page', async function () {
+		await initialize()
+	  });
+
+	When('I enter {string} in the {string} field', async function (value, field) {
+		await addToPage(field, value); 
+	  });
+
+	When('I click on the submit button', async () => {
+		await pressSubmit()
+	})
+
+
+})
+*/