diff --git a/source/CreatePage.html b/source/CreatePage.html index fe4b09f..38eb291 100644 --- a/source/CreatePage.html +++ b/source/CreatePage.html @@ -40,11 +40,6 @@ Source: -
Meal: diff --git a/source/ReviewDetails.html b/source/ReviewDetails.html index 8edf06b..47de4d3 100644 --- a/source/ReviewDetails.html +++ b/source/ReviewDetails.html @@ -33,7 +33,7 @@
photo + alt = "Meal Photo Corrupted" width=40% height=40% id="d-mealImg">
@@ -64,10 +64,6 @@ Source: -
diff --git a/source/assets/scripts/ReviewCard.js b/source/assets/scripts/ReviewCard.js index 372c806..57e5b98 100644 --- a/source/assets/scripts/ReviewCard.js +++ b/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"); diff --git a/source/assets/scripts/ReviewDetails.js b/source/assets/scripts/ReviewDetails.js index 27f1950..194ceaf 100644 --- a/source/assets/scripts/ReviewDetails.js +++ b/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; diff --git a/source/assets/scripts/appTestHelpers.js b/source/assets/scripts/appTestHelpers.js index 12fd3c3..92e0888 100644 --- a/source/assets/scripts/appTestHelpers.js +++ b/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`); diff --git a/source/assets/scripts/localStorage.test.js b/source/assets/scripts/localStorage.test.js index 8f87ce0..b74087d 100644 --- a/source/assets/scripts/localStorage.test.js +++ b/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, diff --git a/source/assets/scripts/main.e2e.test.js b/source/assets/scripts/main.e2e.test.js index 9ca2044..f6c5a4a 100644 --- a/source/assets/scripts/main.e2e.test.js +++ b/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", diff --git a/source/assets/scripts/main.js b/source/assets/scripts/main.js index 38e182d..f012cb9 100644 --- a/source/assets/scripts/main.js +++ b/source/assets/scripts/main.js @@ -18,12 +18,12 @@ function init() { * @param {Array} 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); }); }