Merge pull request #62 from cse110-fa22-group29/e2e-testing

Implement End to End Testing Framework

.github/workflows/js-unittest.yml

@@ -23,5 +23,7 @@ jobs:
         uses: actions/checkout@v3
       - name: Install dependencies
         run: sudo npm install
+      - name: Start local http server
+        run: sudo npm run http-server
       - name: Run tests
         run: sudo npm test

package.json

@@ -7,7 +7,8 @@
     "lint": "eslint '**/*.js'",
     "fix-style": "eslint --fix **/*.js",
     "lintHTML": "htmlhint '**/*.html'",
-    "lintCSS": "stylelint '**/*.css'"
+    "lintCSS": "stylelint '**/*.css'",
+    "http-server": "http-server source"
   },
   "devDependencies": {
     "eslint": "^8.27.0",
@@ -15,6 +16,8 @@
     "mocha": "10",
     "mock-local-storage": "^1.1.23",
     "stylelint": "14.14.1",
-    "stylelint-config-standard": "^29.0.0"
+    "stylelint-config-standard": "^29.0.0",
+    "puppeteer": "18",
+    "http-server": ""
   }
 }

source/assets/scripts/localStorage.test.js

@@ -2,11 +2,12 @@ import {strict as assert} from "node:assert";
 import {describe, it, beforeEach} from "mocha";
 import {saveReviewsToStorage, getReviewsFromStorage} from "./localStorage.js";
 
+describe("test app localStorage interaction", () => {
+	
 	beforeEach(() => {
 		localStorage.clear();
 	});
 
-describe("test app localStorage interaction", () => {
 	it("get after init", () => {
 		assert.deepEqual(getReviewsFromStorage(), []);
 	});

source/assets/scripts/main.e2e.test.js

@@ -0,0 +1,31 @@
+import {strict as assert} from "node:assert";
+import {describe, it, beforeEach, afterEach} from "mocha";
+import puppeteer from "puppeteer-core";
+import { exit } from "node:process";
+
+describe("test App end to end", async () => {
+
+	let browser;
+	let page;
+
+	beforeEach(async () => {
+		browser = await puppeteer.launch();
+		page = await browser.newPage();
+		try{
+			await page.goto("http://localhost:8080", {timeout: 1000});
+		}
+		catch (error) {
+			console.log("❌ failed to connect to localhost webserver on port 8080");
+			exit(1);
+		}
+	});
+
+	it("page should have correct title", async () => {
+		assert.strictEqual(await page.title(), "Food Journal");
+	});
+
+	afterEach(async () => {
+		await page.close();
+		await browser.close();
+	});
+});

specs/adrs/111622-e2etesting-puppeteer.md

@@ -0,0 +1,19 @@
+# Use puppeteer for JS unit testing framework
+
+- Status: accept
+- Deciders: Arthur Lu, Marc Reta
+- Date: 11 / 16 / 22
+
+## Decision Drivers
+
+- Need end to end testing framework which runs headlessly and quickly
+- Framework should integrate well with Mocha, the existing unit testing framework
+- Framework should be easy to implement end to end tests with
+
+## Considered Options
+- puppeteer
+- selenium-webdriver
+
+## Decision Outcome
+
+Chosen Option: Puppeteer for its ease of use with mocha.