added simple acceptance test

.gitignore

@@ -7,7 +7,9 @@ data/
 coverage/
 docs/
 sessions/
-screenshots/*
+screenshots/
+__image_snapshots_/
+__diff_output__/
 
 # sqlite databases
 # *.db
@@ -18,6 +20,9 @@ screenshots/*
 # Windows thumbnail db
 Thumbs.db
 website.db
+*snap.png
+*diff.png
+*trace.json
 
 *.pptx
 *.mp4

exercises/03_acceptance/todo/acceptance tests/ui.test.js

@@ -0,0 +1,52 @@
+
+'use strict'
+
+// https://jestjs.io/docs/en/getting-started
+
+const puppeteer = require('puppeteer')
+const { configureToMatchImageSnapshot } = require('jest-image-snapshot')
+
+const width = 800
+const height = 600
+const delayMS = 5
+
+let browser
+let page
+
+const toMatchImageSnapshot = configureToMatchImageSnapshot({
+  customDiffConfig: { threshold: 0 },
+  noColors: true,
+})
+expect.extend({ toMatchImageSnapshot })
+
+beforeAll(async () => {
+	browser = await puppeteer.launch({ headless: false, slowMo: delayMS, args: [`--window-size=${width},${height}`] })
+	page = await browser.newPage()
+	await page.setViewport({ width, height })
+})
+afterAll( () => browser.close() )
+
+describe('todo list', () => {
+	test('adding one item', async done => {
+		await page.waitFor(1000)
+		await page.tracing.start({path: 'add_one_item.json',screenshots: true})
+		await page.goto('http://localhost:8080', { timeout: 30000, waitUntil: 'load' })
+		await page.goto('http://localhost:8080', { timeout: 30000, waitUntil: 'load' })
+		await page.screenshot({ path: 'screenshots/empty_list.png' })
+		await page.type('input[name=item]', 'bread')
+		await page.type('input[name=qty]', '42')
+		await page.click('input[type=submit]')
+		await page.waitForSelector('h1')
+		const title = await page.title()
+		expect(title).toBe('ToDo List')
+		const heading = await page.$eval('h1', node => node.innerText)
+		expect(heading).toBe('ToDo List')
+		const data = await page.evaluate(() => Array.from(document.querySelectorAll('table tr td:first-child')).map(td => td.innerHTML) )
+		expect(data.length).toBe(1)
+		expect(data[0]).toBe('bread')
+		const image = await page.screenshot()
+    expect(image).toMatchImageSnapshot()
+		await page.tracing.stop()
+		done()
+	}, 16000)
+})

exercises/03_acceptance/todo/index.js

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+
+'use strict'
+
+const Koa = require('koa')
+const Router = require('koa-router')
+const stat = require('koa-static')
+const bodyParser = require('koa-bodyparser')
+const handlebars = require('koa-hbs-renderer')
+
+const app = new Koa()
+const router = new Router()
+app.use(stat('public'))
+app.use(bodyParser())
+app.use(handlebars({ paths: { views: `${__dirname}/views` } }))
+app.use(router.routes())
+
+const port = 8080
+
+const todo = require('./modules/todo')
+
+router.get('/', async ctx => {
+	try {
+		const data = {}
+		if(ctx.query.msg) data.msg = ctx.query.msg
+		data.items = todo.getAll()
+		ctx.render('home', data)
+	} catch(err) {
+		console.log(err.message)
+		ctx.render('home', {msg: err.message})
+	}
+})
+
+router.post('/', ctx => {
+	try {
+		const body = ctx.request.body
+		todo.add(body.item, body.qty)
+		ctx.redirect('/')
+	} catch(err) {
+		console.log(err.message)
+		ctx.redirect(`/?msg=${err.message}`)
+	}
+})
+
+router.get('/delete/:key', ctx => {
+	try {
+		console.log(`key: ${ctx.params.key}`)
+		todo.delete(ctx.params.key)
+		ctx.redirect('/msg=item deleted')
+	} catch(err) {
+		console.log(err.message)
+		ctx.redirect(`/${err.message}`)
+	}
+})
+
+module.exports = app.listen(port, () => console.log(`listening on port ${port}`))

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

@@ -0,0 +1,21 @@
+
+'use strict';
+
+module.exports = {
+	displayName: 'test',
+	verbose: true,
+	collectCoverage: true,
+	"preset": "jest-puppeteer",
+	coverageThreshold: {
+		global: {
+			branches: 0,
+			functions: 0,
+			lines: 0,
+			statements: 0
+		}
+	},
+	testPathIgnorePatterns: [
+		'/node_modules/',
+		'/__tests__/fixtures/',
+	]
+}

exercises/03_acceptance/todo/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
+  }
+}

exercises/03_acceptance/todo/modules/todo.js

@@ -0,0 +1,26 @@
+
+'use strict'
+
+let data = []
+
+module.exports.clear = () => {
+	data = []
+}
+
+module.exports.add = (item, qty) => {
+	qty = Number(qty)
+	if(isNaN(qty)) throw new Error('the quantity must be a number')
+	data.push({item: item, qty: qty})
+}
+
+module.exports.getAll = () => {
+	for(const key in data) data[key].key = key
+	return data
+}
+
+module.exports.delete = key => {
+	console.log(`delete key ${key}`)
+	return
+}
+
+module.exports.countItems = () => data.length

exercises/03_acceptance/todo/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "todo",
+  "version": "1.0.0",
+  "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"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "handlebars": "^4.2.1",
+    "http-status-codes": "^1.3.2",
+    "koa": "^2.8.1",
+    "koa-bodyparser": "^4.2.1",
+    "koa-handlebars": "^1.0.0",
+    "koa-hbs-renderer": "^1.2.0",
+    "koa-router": "^7.4.0",
+    "koa-static": "^5.0.0",
+    "koa-views": "^6.2.1"
+  },
+  "devDependencies": {
+    "jest": "^24.9.0",
+    "jest-image-snapshot": "^2.11.0",
+    "jest-puppeteer": "^4.3.0",
+    "puppeteer": "^1.20.0",
+    "supertest": "^4.0.2"
+  },
+  "jest": {
+    "projects": [
+      "<rootDir>/jest-test.config.js"
+    ],
+    "preset": "jest-puppeteer"
+  }
+}

exercises/03_acceptance/todo/public/style.css

@@ -0,0 +1,11 @@
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.msg {
+  border: 1px solid red;
+  font-weight: bold;
+  color: red;
+  padding: 1em;
+}

exercises/03_acceptance/todo/readme.md

@@ -0,0 +1,6 @@
+
+# ToDo
+
+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.

exercises/03_acceptance/todo/test.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+
+node index.js&
+node_modules/.bin/jest --runInBand --detectOpenHandles acceptance\ tests/*
+kill %1

exercises/03_acceptance/todo/views/empty.hbs

@@ -0,0 +1,19 @@
+
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>ToDo List</title>
+		<link rel="stylesheet" href="style.css" />
+	</head>
+	<body>
+		<h1>ToDo List</h1>
+		<h2>Your list is empty, lets add some items...</h2>
+		<form method="post" action="/">
+			Item:
+			<input type="text" name="item" />
+			Qty:
+			<input type="text" name="qty" />
+			<input type="submit" value="Add Item" />
+		</form>
+	</body>
+</html>

exercises/03_acceptance/todo/views/home.hbs

@@ -0,0 +1,33 @@
+
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>ToDo List</title>
+		<link rel="stylesheet" href="style.css" />
+	</head>
+	<body>
+		<h1>ToDo List</h1>
+		<h2>My Bad List</h2>
+		{{#if msg}}
+ 			<p class="msg">{{msg}}</p>
+		{{/if}}
+		{{#if items.length}}
+    <table>
+	    <caption>Shopping List</caption>
+	    <tr><th>Item</th><th>Qty</th><th>Action</th></tr>
+	      {{#each items}}
+		      <tr><td>{{this.item}}</td><td>{{this.qty}}</td><td><a href="/delete/{{this.key}}">delete</a></td></tr>
+				{{/each}}
+    </table>
+		{{else}}
+		<h2>Your list is empty, lets add some items...</h2>
+		{{/if}}
+		<form method="post" action="/">
+			Item:
+			<input type="text" name="item" />
+			Qty:
+			<input type="text" name="qty" />
+			<input type="submit" value="Add Item" />
+		</form>
+	</body>
+</html>

exercises/05_mqtt/websocket/index.js

@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+
+'use strict'
+
+const Koa = require('koa')
+const app = new Koa()
+const Wwbsocket = require('koa-websocket')
+const route = require('koa-route')
+
+const app = websocket(app)
+
+// const socket = new Websocket()
+// const router = require('koa-router')
+
+// const http = router()
+// const we = router()
+
+// http.get('/', async ctx => {
+
+// })
+
+