From 1db54e9f7acaf8121ae174d96f85de34c05049c2 Mon Sep 17 00:00:00 2001 From: Kara Hoagland Date: Mon, 21 Nov 2022 11:58:26 -0800 Subject: [PATCH 1/2] remove alt from js/html/tests --- source/CreatePage.html | 5 ----- source/ReviewDetails.html | 6 +----- source/assets/scripts/ReviewCard.js | 5 +---- source/assets/scripts/ReviewDetails.js | 1 - source/assets/scripts/appTestHelpers.js | 11 ++++------- source/assets/scripts/localStorage.test.js | 3 --- source/assets/scripts/main.e2e.test.js | 8 -------- source/assets/scripts/main.js | 4 ++-- 8 files changed, 8 insertions(+), 35 deletions(-) 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..3bfe62c 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,7 +137,7 @@ class ReviewCard extends HTMLElement { //image setup let mealImg = document.createElement("img"); mealImg.setAttribute("id", "a-mealImg"); - mealImg.setAttribute("alt",data["imgAlt"]); + mealImg.setAttribute("alt","Meal Photo Corrupted"); if(data["mealImg"] != ""){ mealImg.setAttribute("src",data["mealImg"]); } @@ -211,7 +210,6 @@ class ReviewCard extends HTMLElement { * following format: * { * "mealImg": "string", - * "imgAlt": "string", * "mealName": "string", * "comments": "string", * "rating": number, @@ -229,7 +227,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..a85533b 100644 --- a/source/assets/scripts/ReviewDetails.js +++ b/source/assets/scripts/ReviewDetails.js @@ -16,7 +16,6 @@ function setupInfo(){ //meal image let mealImg = document.getElementById("d-mealImg"); - mealImg.setAttribute("alt", currReview["imgAlt"]); if(currReview["mealImg"] != ""){ mealImg.setAttribute("src",currReview["mealImg"]); } 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); }); } From 52bc6a27a45d71a66b31a214503df9acc23138d6 Mon Sep 17 00:00:00 2001 From: Kara Hoagland Date: Mon, 21 Nov 2022 12:29:06 -0800 Subject: [PATCH 2/2] default img if img fails to load --- source/assets/scripts/ReviewCard.js | 9 ++++----- source/assets/scripts/ReviewDetails.js | 10 ++++------ 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/source/assets/scripts/ReviewCard.js b/source/assets/scripts/ReviewCard.js index 3bfe62c..57e5b98 100644 --- a/source/assets/scripts/ReviewCard.js +++ b/source/assets/scripts/ReviewCard.js @@ -138,12 +138,11 @@ class ReviewCard extends HTMLElement { let mealImg = document.createElement("img"); mealImg.setAttribute("id", "a-mealImg"); mealImg.setAttribute("alt","Meal Photo Corrupted"); - if(data["mealImg"] != ""){ - mealImg.setAttribute("src",data["mealImg"]); - } - else{ + 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"); diff --git a/source/assets/scripts/ReviewDetails.js b/source/assets/scripts/ReviewDetails.js index a85533b..194ceaf 100644 --- a/source/assets/scripts/ReviewDetails.js +++ b/source/assets/scripts/ReviewDetails.js @@ -16,12 +16,11 @@ function setupInfo(){ //meal image let mealImg = document.getElementById("d-mealImg"); - 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"); @@ -78,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;