Merge branch 'sprint-2-css-review-details' of https://github.com/cse110-fa22-group29/cse110-fa22-group29 into sprint-2-css-review-details

Co-authored-by: Arthur Lu <learthurgo@gmail.com>
Co-authored-by: Kara Hoagland <KH-Cl@users.noreply.github.com>

source/CreatePage.html

@@ -43,12 +43,9 @@
 			<label for="mealImage" id="source">
 				<input type="file" accept="image/*" id="mealImg" name="mealImg">
 				</label>
-				<label for="image-alt">
-				<br>
-				Alt Text:
-				<input type="text" id="imgAlt" name="imgAlt">
-				</label>
-	
+			</fieldset>
+			<fieldset>
+				<legend> Meal: </legend>
 				<label for="Meal: ">Meal:
 				<input type="text" id="mealName" name="mealName" required>
 				</label>

source/ReviewDetails.html

@@ -33,7 +33,7 @@
 		<div class = "meal-pics-and-tags">
 			<!-- image source --> 
 			<img src = https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1, 
-			alt = "photo" width=40% height=40% id="d-mealImg">
+			alt = "Meal Photo Corrupted" width=40% height=40% id="d-mealImg">
 
 			<div class = "tag-container", id="d-tags">
 
@@ -64,10 +64,6 @@
 				Source:
 				<input type="file" accept="image/*" id="mealImg" name="mealImg">
 				</label>
-				<label for="image-alt">
-				Alt Text:
-				<input type="text" id="imgAlt" name="imgAlt">
-				</label>
 			</fieldset>
 			<fieldset>
 		

source/assets/scripts/ReviewCard.js

@@ -117,7 +117,6 @@ class ReviewCard extends HTMLElement {
    *                        following format:
    *                        {
    *                          "mealImg": "string",
-   *                          "imgAlt": "string",
    *                          "mealName": "string",
    *                          "comments": "string",
    *                          "rating": number,
@@ -138,13 +137,12 @@ class ReviewCard extends HTMLElement {
 		//image setup
 		let mealImg = document.createElement("img");
 		mealImg.setAttribute("id", "a-mealImg");
-		mealImg.setAttribute("alt",data["imgAlt"]);
-		if(data["mealImg"] != ""){
-			mealImg.setAttribute("src",data["mealImg"]);
-		}
-		else{
+		mealImg.setAttribute("alt","Meal Photo Corrupted");
+		mealImg.setAttribute("src",data["mealImg"]);
+		mealImg.addEventListener("error", function(e) {
 			mealImg.setAttribute("src", "./assets/images/icons/plate_with_cutlery.png");
-		}
+			e.onerror = null;
+		});
 
 		//meal name setup
 		let mealLabel = document.createElement("label");
@@ -211,7 +209,6 @@ class ReviewCard extends HTMLElement {
    *                        following format:
    *                        {
    *                          "mealImg": "string",
-   *                          "imgAlt": "string",
    *                          "mealName": "string",
    *                          "comments": "string",
    *                          "rating": number,
@@ -229,7 +226,6 @@ class ReviewCard extends HTMLElement {
 		//get image
 		let mealImg = this.shadowEl.getElementById("a-mealImg");
 		dataContainer["mealImg"] = mealImg.getAttribute("src");
-		dataContainer["imgAlt"] = mealImg.getAttribute("alt");
 
 		//get meal name
 		let mealLabel = this.shadowEl.getElementById("a-mealName");

source/assets/scripts/ReviewDetails.js

@@ -16,13 +16,11 @@ function setupInfo(){
 	
 	//meal image
 	let mealImg = document.getElementById("d-mealImg");
-	mealImg.setAttribute("alt", currReview["imgAlt"]);
-	if(currReview["mealImg"] != ""){
-		mealImg.setAttribute("src",currReview["mealImg"]);
-	}
-	else{
+	mealImg.setAttribute("src",currReview["mealImg"]);
+	mealImg.addEventListener("error", function(e) {
 		mealImg.setAttribute("src", "./assets/images/icons/plate_with_cutlery.png");
-	}
+		e.onerror = null;
+	});
 
 	//meal name
 	let mealLabel = document.getElementById("d-mealName");
@@ -79,7 +77,6 @@ function setupUpdate(){
 
 		//Set value of each input element to current's values
 		document.getElementById("mealImg").defaultValue = currReview["mealImg"];
-		document.getElementById("imgAlt").defaultValue = currReview["imgAlt"];
 		document.getElementById("mealName").defaultValue = currReview["mealName"];
 		document.getElementById("comments").textContent = currReview["comments"];
 		document.getElementById("s" + `${currReview["rating"]}`).checked = true;

source/assets/scripts/appTestHelpers.js

@@ -8,7 +8,6 @@ import {strict as assert} from "node:assert";
 export async function setReviewForm(page, review) {
 	
 	// Set text fields
-	await page.$eval("#imgAlt", (el, value) => el.value = value, review.imgAlt);
 	await page.$eval("#mealName", (el, value) => el.value = value, review.mealName);
 	await page.$eval("#comments", (el, value) => el.value = value, review.comments);
 	await page.$eval("#restaurant", (el, value) => el.value = value, review.restaurant);
@@ -34,19 +33,17 @@ export async function setReviewForm(page, review) {
 }
 
 /**
- * Tests a page or shadowDOM for correct element text, src, or alt values
+ * Tests a page or shadowDOM for correct element text or src values
  * @param {Object} root page or shodowDOM to test
  * @param {string} prefix prefix character for element IDs
- * @param {Object} expected values for eahc element
+ * @param {Object} expected values for each element
  */
 export async function checkCorrectness(root, prefix, expected){
-	// Get the review image and check src and alt
+	// Get the review image and check src
 	let img = await root.$(`#${prefix}-mealImg`);
 	let imgSrc = await img.getProperty("src");
-	let imgAlt = await img.getProperty("alt");
-	// Check src and alt
+	// Check src
 	assert.strictEqual(await imgSrc.jsonValue(), expected.imgSrc);
-	assert.strictEqual(await imgAlt.jsonValue(), expected.imgAlt);
 
 	// Get the title, comment, and restaurant
 	let title = await root.$(`#${prefix}-mealName`);

source/assets/scripts/localStorage.test.js

@@ -17,7 +17,6 @@ describe("test app localStorage interaction", () => {
 	it("test localStorage state after adding one review", () => {
 		let review = {
 			"imgSrc": "sample src",
-			"imgAlt": "sample alt",
 			"mealName": "sample name",
 			"restaurant": "sample restaurant",
 			"rating": 5,
@@ -42,7 +41,6 @@ describe("test app localStorage interaction", () => {
 			ids.push(i);
 			let new_review = {
 				"imgSrc": `sample src ${i}`,
-				"imgAlt": `sample alt ${i}`,
 				"mealName": `sample name ${i}`,
 				"restaurant": `sample restaurant ${i}`,
 				"rating": i,
@@ -68,7 +66,6 @@ describe("test app localStorage interaction", () => {
 		for(let i = 0; i < 1000; i++){
 			let new_review = {
 				"imgSrc": `updated sample src ${i}`,
-				"imgAlt": `updated sample alt ${i}`,
 				"mealName": `updated sample name ${i}`,
 				"restaurant": `updated sample restaurant ${i}`,
 				"rating": i*2+i,

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

@@ -48,7 +48,6 @@ describe("test App end to end", async () => {
 
 				// create a new review
 				let review = {
-					imgAlt: "sample alt",
 					mealName: "sample name",
 					comments: "sample comment",
 					restaurant: "sample restaurant",
@@ -67,7 +66,6 @@ describe("test App end to end", async () => {
 				// check the details page for correctness
 				let expected = {
 					imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png",
-					imgAlt: "sample alt",
 					mealName: "sample name",
 					comments: "sample comment",
 					restaurant: "sample restaurant",
@@ -89,7 +87,6 @@ describe("test App end to end", async () => {
 
 				let expected = {
 					imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png",
-					imgAlt: "sample alt",
 					mealName: "sample name",
 					comments: "sample comment",
 					restaurant: "sample restaurant",
@@ -115,7 +112,6 @@ describe("test App end to end", async () => {
 				// check the details page for correctness
 				let expected = {
 					imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png",
-					imgAlt: "sample alt",
 					mealName: "sample name",
 					comments: "sample comment",
 					restaurant: "sample restaurant",
@@ -138,7 +134,6 @@ describe("test App end to end", async () => {
 				// check the details page for correctness
 				let expected = {
 					imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png",
-					imgAlt: "sample alt",
 					mealName: "sample name",
 					comments: "sample comment",
 					restaurant: "sample restaurant",
@@ -164,7 +159,6 @@ describe("test App end to end", async () => {
 
 				// create a new review
 				let review = {
-					imgAlt: "updated alt",
 					mealName: "updated name",
 					comments: "updated comment",
 					restaurant: "updated restaurant",
@@ -183,7 +177,6 @@ describe("test App end to end", async () => {
 				// check the details page for correctness
 				let expected = {
 					imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png",
-					imgAlt: "updated alt",
 					mealName: "updated name",
 					comments: "updated comment",
 					restaurant: "updated restaurant",
@@ -206,7 +199,6 @@ describe("test App end to end", async () => {
 				// check the details page for correctness
 				let expected = {
 					imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png",
-					imgAlt: "updated alt",
 					mealName: "updated name",
 					comments: "updated comment",
 					restaurant: "updated restaurant",

source/assets/scripts/main.js

@@ -18,12 +18,12 @@ function init() {
  * @param {Array<Object>} reviews An array of reviews
  */
 function addReviewsToDocument(reviews) {
-	let box = document.getElementById("review-container");
+	let reviewBox = document.getElementById("review-container");
 	reviews.forEach(review => {
 		let newReview = document.createElement("review-card");
 		newReview.data = review;
 		//TODO: want to append it to whatever the box is in layout 
-		box.append(newReview);
+		reviewBox.append(newReview);
 	});
 
 }