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>
This commit is contained in:
rheabhutada02 2022-11-21 12:35:52 -08:00
commit 661feafa40
8 changed files with 19 additions and 47 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -8,7 +8,6 @@ import {strict as assert} from "node:assert";
export async function setReviewForm(page, review) { export async function setReviewForm(page, review) {
// Set text fields // 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("#mealName", (el, value) => el.value = value, review.mealName);
await page.$eval("#comments", (el, value) => el.value = value, review.comments); await page.$eval("#comments", (el, value) => el.value = value, review.comments);
await page.$eval("#restaurant", (el, value) => el.value = value, review.restaurant); 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 {Object} root page or shodowDOM to test
* @param {string} prefix prefix character for element IDs * @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){ 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 img = await root.$(`#${prefix}-mealImg`);
let imgSrc = await img.getProperty("src"); let imgSrc = await img.getProperty("src");
let imgAlt = await img.getProperty("alt"); // Check src
// Check src and alt
assert.strictEqual(await imgSrc.jsonValue(), expected.imgSrc); assert.strictEqual(await imgSrc.jsonValue(), expected.imgSrc);
assert.strictEqual(await imgAlt.jsonValue(), expected.imgAlt);
// Get the title, comment, and restaurant // Get the title, comment, and restaurant
let title = await root.$(`#${prefix}-mealName`); let title = await root.$(`#${prefix}-mealName`);

View File

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

View File

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

View File

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