cleaned up the tests

.gitignore

@@ -10,6 +10,7 @@ sessions/
 screenshots/
 __image_snapshots_/
 __diff_output__/
+trace/
 
 # sqlite databases
 # *.db

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

@@ -13,39 +13,70 @@ const delayMS = 5
 let browser
 let page
 
+// threshold is the difference in pixels before the snapshots dont match
 const toMatchImageSnapshot = configureToMatchImageSnapshot({
-  customDiffConfig: { threshold: 0 },
+  customDiffConfig: { threshold: 2 },
   noColors: true,
 })
 expect.extend({ toMatchImageSnapshot })
 
 beforeAll(async () => {
-	browser = await puppeteer.launch({ headless: false, slowMo: delayMS, args: [`--window-size=${width},${height}`] })
+	browser = await puppeteer.launch({ headless: true, 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})
+		// start generating a trace file
+		await page.tracing.start({path: 'trace/add_one_item_trace.json',screenshots: true})
+		// ARRANGE
 		await page.goto('http://localhost:8080', { timeout: 30000, waitUntil: 'load' })
 		await page.goto('http://localhost:8080', { timeout: 30000, waitUntil: 'load' })
+		// take a screenshot and save to the file system
 		await page.screenshot({ path: 'screenshots/empty_list.png' })
+
+		// ACT
+		// complete the form and click submit
 		await page.type('input[name=item]', 'bread')
 		await page.type('input[name=qty]', '42')
 		await page.click('input[type=submit]')
 		await page.waitForSelector('h1')
+		// await page.waitFor(1000) // sometimes you need a second delay
+
+		// ASSERT
 		const title = await page.title()
 		expect(title).toBe('ToDo List')
-		const heading = await page.$eval('h1', node => node.innerText)
+
+		// extracting the text inside the first H1 element on the page
+		const heading = await page.evaluate( () => {
+			const dom = document.querySelector('h1')
+			return dom.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')
+
+		// a more concise, single line version of the above
+		expect( await page.evaluate( () => document.querySelector('h2').innerText ) ).toBe('My List')
+
+		// extracting all the text from the first row of the table as an array
+		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)
+		})
+
+		// this is a more concise way to achieve the same result...
+		const items2 = await page.evaluate(() => Array.from(document.querySelectorAll('table tr td:first-child')).map(td => td.innerHTML) )
+
+		expect(items.length).toBe(1)
+		expect(items[0]).toBe('bread')
+
+		// grab a screenshot
 		const image = await page.screenshot()
-    expect(image).toMatchImageSnapshot()
+		// compare to the screenshot from the previous test run
+		expect(image).toMatchImageSnapshot()
+		// stop logging to the trace file
 		await page.tracing.stop()
 		done()
 	}, 16000)