Merge pull request #110 from cse110-fa22-group29/mini-changes

End Sprint Modifications

.github/workflows/js-unittest.yml

@@ -22,8 +22,8 @@ jobs:
             - name: Checkout
               uses: actions/checkout@v3
             - name: Install dependencies
-              run: sudo npm install
+              run: npm install
             - name: Start local http server
-              run: sudo npm run http-server &
-            - name: Run tests
-              run: sudo npm test
+              run: npm run http-server &
+            - name: Run tests with coverage
+              run: npm run coverage

.gitignore

@@ -1,4 +1,6 @@
 **/.devcontainer/*
 **/node_modules/*
 **/package-lock.json
-**/*.vscode/*
+**/.vscode/*
+**/.nyc_output/*
+**/coverage/*

package.json

@@ -4,6 +4,7 @@
 	"type": "module",
 	"scripts": {
 		"test": "mocha --recursive --require mock-local-storage './{,!(node_modules)/**}/*.test.js'",
+		"coverage": "c8 --check-coverage --lines 90 --functions 90 --branches 90 npm run test",
 		"lint-js": "eslint **/*.js",
 		"fix-js": "eslint --fix **/*.js",
 		"lint-html": "htmlhint **/*.html",
@@ -15,6 +16,7 @@
 		"js-doc": "jsdoc -d source/docs/ -r source/"
 	},
 	"devDependencies": {
+		"c8": "^7.12.0",
 		"eslint": "^8.27.0",
 		"htmlhint": "1.1.4",
 		"http-server": "",

source/ReviewDetails.html

@@ -13,8 +13,6 @@
 		<script src="assets/scripts/ReviewCard.js" type="module"></script>
 
 		<!-- Main Stylesheets & Scripts -->
-		<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
-		<!-- <link rel="stylesheet" href="/static/reset.css" /> -->
 		<link rel="stylesheet" href="./static/ReviewDetails.css" />
 		<link rel="stylesheet" href="./static/Form.css" />
 		<script src="assets/scripts/ReviewDetails.js" type="module"></script>
@@ -139,7 +137,7 @@
 				</fieldset>
 
 				<button type="submit" id="save-btn" value="Submit">Save</button>
-				<input type="button" value="Cancel" id="home-btn" onclick="window.location.assign('./index.html')" />
+				<input type="button" value="Cancel" id="cancel-btn" />
 			</form>
 		</div>
 	</body>

source/assets/scripts/CreatePage.js

@@ -110,8 +110,6 @@ function initFormHandler() {
 
 		// Adds data to the reviewObject from form data
 		for (let [key, value] of formData) {
-			console.log(`${key}`);
-			console.log(`${value}`);
 			if (`${key}` !== "tag-form") {
 				reviewObject[`${key}`] = `${value}`;
 			}
@@ -141,7 +139,7 @@ function initFormHandler() {
 		}
 		// Does not let user proceed if rating is not complete
 		else {
-			window.alert("NO! FILL IN STARS");
+			window.alert("Please fill in rating by selecting the stars :)");
 		}
 	});
 

source/assets/scripts/ReviewCard.js

@@ -109,8 +109,6 @@ class ReviewCard extends HTMLElement {
 
 		// Attach event listener to each review-card
 		this.addEventListener("click", (event) => {
-			console.log(event.target);
-			console.log(event.target.reviewId);
 			// Saves the ID for corresponding review on new page (for data retrieval)
 			sessionStorage.setItem("currID", JSON.stringify(event.target.data.reviewID));
 			// Goes to the new page for the review
@@ -251,7 +249,6 @@ class ReviewCard extends HTMLElement {
 
 		// Get comment section
 		let comments = this.shadowEl.getElementById("a-comments");
-		console.log(comments);
 		dataContainer["comments"] = comments.innerText;
 
 		// Get rating

source/assets/scripts/ReviewDetails.js

@@ -161,7 +161,6 @@ function setupUpdate() {
 		let select = document.getElementById("select");
 		const input = document.getElementById("mealImg");
 		select.addEventListener("change", function () {
-			console.log("1");
 			// Select a photo with HTML file selector
 			if (select.value == "file") {
 				// enabling file upload components and hiding photo taking components
@@ -192,7 +191,6 @@ function setupUpdate() {
 
 		//addressing sourcing image from local file
 		document.getElementById("mealImg").addEventListener("change", function () {
-			console.log("reading used");
 			const reader = new FileReader();
 
 			//store image data URL after successful image load
@@ -208,7 +206,13 @@ function setupUpdate() {
 			reader.readAsDataURL(document.getElementById("mealImg").files[0]);
 		});
 
-		//Take formdata values as newData when submit
+		//cancel button on update form hids form not making any changes
+		let cancelBtn = document.getElementById("cancel-btn");
+		cancelBtn.addEventListener("click", function () {
+			updateDiv.classList.add("hidden");
+		});
+
+		//Take form data values as newData when submit
 		form.addEventListener("submit", function () {
 			/*
 			 *  User submits the form for their review.
@@ -218,8 +222,6 @@ function setupUpdate() {
 			let newData = {};
 			//iterate through formData and add to newData
 			for (let [key, value] of formData) {
-				console.log(`${key}`);
-				console.log(`${value}`);
 				if (`${key}` !== "tag-form") {
 					newData[`${key}`] = `${value}`;
 				}

source/assets/scripts/homepage.js

@@ -1,4 +1,4 @@
-// main.js
+// homepage.js
 import { getIDsByTag, getIDsFromStorage, getReviewFromStorage, getTopIDsFromStorage } from "./localStorage.js";
 
 // Run the init() function when the page has loaded
@@ -32,8 +32,6 @@ function initFormHandler() {
 	let searchBtn = document.getElementById("search-btn");
 	let searchTag = null;
 	//adding search functionality
-	//TODO: Add ability to enter without refresh of search bar
-	//filter by selected tag when button clicked
 	searchBtn.addEventListener("click", function () {
 		searchTag = searchField.value;
 		sortAndFilter(searchTag);
@@ -101,6 +99,7 @@ function sortAndFilter(searchTag) {
  */
 function loadReviews(index, reviewIDs) {
 	let reviewBox = document.getElementById("review-container");
+	let footer = document.querySelector("footer");
 	// label if there are no reviews to display
 	if (reviewIDs.length == 0) {
 		let emptyLabel = document.createElement("label");
@@ -116,7 +115,7 @@ function loadReviews(index, reviewIDs) {
 	let moreBtn = document.getElementById("more-btn");
 	//delete load more button if exists
 	if (moreBtn) {
-		reviewBox.removeChild(moreBtn);
+		footer.removeChild(moreBtn);
 	}
 	let reviewArr = [];
 	//check if there are more than 9 reviews left
@@ -140,10 +139,11 @@ function loadReviews(index, reviewIDs) {
 		moreBtn.addEventListener("click", function () {
 			loadReviews(index + 9, reviewIDs);
 		});
-		reviewBox.append(moreBtn);
+		footer.append(moreBtn);
 	}
 }
 
+//setting up service worker
 const registerServiceWorker = async () => {
 	if ("serviceWorker" in navigator) {
 		try {

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

@@ -15,7 +15,6 @@ describe("test App end to end", async () => {
 			root = false;
 		}
 
-		//browser = await puppeteer.launch({headless: false, slowMo: 250, args: root ? ['--no-sandbox'] : undefined});
 		browser = await puppeteer.launch({ args: root ? ["--no-sandbox"] : undefined });
 		page = await browser.newPage();
 		try {

source/index.html

@@ -13,10 +13,8 @@
 		<script src="assets/scripts/ReviewCard.js" type="module"></script>
 
 		<!-- Main Stylesheets & Scripts -->
-		<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
-		<!-- <link rel="stylesheet" href="/static/reset.css" /> -->
 		<link rel="stylesheet" href="./static/homepage.css" />
-		<script src="assets/scripts/main.js" type="module"></script>
+		<script src="assets/scripts/homepage.js" type="module"></script>
 	</head>
 
 	<body>
@@ -61,5 +59,6 @@
 				<div style="width: 20%"></div>
 			</div>
 		</main>
+		<footer></footer>
 	</body>
 </html>

source/static/homepage.css

@@ -118,3 +118,8 @@ img#create-btn-invis {
 	background-color: #f1f1f1;
 	text-align: center;
 }
+
+footer {
+	display: flex;
+	justify-content: center;
+}

source/sw.js

@@ -24,7 +24,7 @@ const ASSETS = [
 	"assets/images/search_button.png",
 	"assets/scripts/CreatePage.js",
 	"assets/scripts/localStorage.js",
-	"assets/scripts/main.js",
+	"assets/scripts/homepage.js",
 	"assets/scripts/ReviewCard.js",
 	"assets/scripts/ReviewDetails.js",
 ];