mirror of
https://github.com/cse110-fa22-group29/cse110-fa22-group29.git
synced 2024-12-26 17:09:09 +00:00
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
commit
661feafa40
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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("alt","Meal Photo Corrupted");
|
||||
mealImg.setAttribute("src",data["mealImg"]);
|
||||
}
|
||||
else{
|
||||
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");
|
||||
|
||||
@ -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.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;
|
||||
|
||||
@ -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`);
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user