diff --git a/source/CreatePage.html b/source/CreatePage.html index 222258a..a1f9581 100644 --- a/source/CreatePage.html +++ b/source/CreatePage.html @@ -50,7 +50,6 @@
- Meal:
- -
- Rating: - - - - - -
+
+ Rating: + + + + + +
Other Info: @@ -80,10 +78,10 @@ Tags:
+
+ + - - -
diff --git a/source/ReviewDetails.html b/source/ReviewDetails.html index c790b4e..552c2f3 100644 --- a/source/ReviewDetails.html +++ b/source/ReviewDetails.html @@ -49,11 +49,11 @@
Rating: - - - - - + + + + +
@@ -72,7 +72,7 @@
- + diff --git a/source/assets/scripts/CreatePage.js b/source/assets/scripts/CreatePage.js index c5c641f..af666c7 100644 --- a/source/assets/scripts/CreatePage.js +++ b/source/assets/scripts/CreatePage.js @@ -46,7 +46,7 @@ function initFormHandler() { }); - let tagAddBtn = document.getElementById("tagAdd"); + let tagAddBtn = document.getElementById("tag-add-btn"); tagAddBtn.addEventListener("click", ()=> { let tagField = document.getElementById("tag-form"); if (tagField.value.length > 0) { diff --git a/source/assets/scripts/appTestHelpers.js b/source/assets/scripts/appTestHelpers.js new file mode 100644 index 0000000..82ade7a --- /dev/null +++ b/source/assets/scripts/appTestHelpers.js @@ -0,0 +1,76 @@ +import {strict as assert} from "node:assert"; + +/** + * Fills out a create or update review form + * @param {Object} page the page object which contains the create or update form + * @param {Object} review review data to input into the form + */ +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); + + // Get all tag elements and click them to delete them + let tag_items = await page.$$(".tag"); + if(tag_items !== null){ + for(let i = 0; i < tag_items.length; i++){ + await tag_items[i].click(); + } + } + + // Get the button needed to add new tags + let tag_btn = await page.$("#tag-add-btn"); + for(let i = 0; i < review.tags.length; i++){ + await page.$eval("#tag-form", (el, value) => el.value = value, review.tags[i]); + await tag_btn.click(); + } + + // Select a new rating + let rating_select = await page.$(`#s${review.rating}-select`); + await rating_select.click({delay: 100}); +} + +/** + * Tests a page or shadowDOM for correct element text, src, or alt values + * @param {Object} root page or shodowDOM to test + * @param {string} prefix prefix character for element IDs + * @param {Object} expected values for eahc element + */ +export async function checkCorrectness(root, prefix, expected){ + // Get the review image and check src and alt + let img = await root.$(`#${prefix}-mealImg`); + let imgSrc = await img.getProperty("src"); + let imgAlt = await img.getProperty("alt"); + // Check src and alt + 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`); + let title_text = await title.getProperty("innerText"); + let comment = await root.$(`#${prefix}-comments`); + let comment_text = await comment.getProperty("innerText"); + let restaurant = await root.$(`#${prefix}-restaurant`); + let restaurant_text = await restaurant.getProperty("innerText"); + + // Check title, comment, and restaurant + assert.strictEqual(await title_text.jsonValue(), expected.mealName); + assert.strictEqual(await comment_text.jsonValue(), expected.comments); + assert.strictEqual(await restaurant_text.jsonValue(), expected.restaurant); + + // Check tags + let tags = await root.$$(".tag"); + assert.strictEqual(await tags.length, expected.tags.length); + for(let i = 0; i < expected.tags.length; i++){ + let tag_text = await tags[i].getProperty("innerText"); + assert.strictEqual(await tag_text.jsonValue(), expected.tags[i]); + } + + // Check stars + let stars = await root.$(`#${prefix}-rating`); + let stars_src = await stars.getProperty("src"); + assert.strictEqual(await stars_src.jsonValue(), expected.rating); +} \ No newline at end of file diff --git a/source/assets/scripts/main.e2e.test.js b/source/assets/scripts/main.e2e.test.js index acbe038..ad177c9 100644 --- a/source/assets/scripts/main.e2e.test.js +++ b/source/assets/scripts/main.e2e.test.js @@ -1,7 +1,8 @@ import {strict as assert} from "node:assert"; import {describe, it, before, after} from "mocha"; import puppeteer from "puppeteer-core"; -import { exit } from "node:process"; +import {exit} from "node:process"; +import {setReviewForm, checkCorrectness} from "./appTestHelpers.js" describe("test App end to end", async () => { @@ -17,6 +18,7 @@ describe("test App end to end", async () => { root = false; } + //browser = await puppeteer.launch({headless: false, slowMo: 250, args: root ? ['--no-sandbox'] : undefined}); browser = await puppeteer.launch({args: root ? ['--no-sandbox'] : undefined}); page = await browser.newPage(); try{ @@ -35,346 +37,210 @@ describe("test App end to end", async () => { }); }); - describe("test create 1 new review", async () => { - it("create 1 new review", async () => { - // Click the button to show update form - let create_btn = await page.$("#create-btn"); - await create_btn.click(); - await page.waitForNavigation(); + describe("test CRUD on simple inputs and default image", () => { - // Set text fields - await page.$eval("#mealImg", el => el.value = "sample src"); - await page.$eval("#imgAlt", el => el.value = "sample alt"); - await page.$eval("#mealName", el => el.value = "sample name"); - await page.$eval("#comments", el => el.value = "sample comment"); - await page.$eval("#restaurant", el => el.value = "sample restaurant"); + describe("test create 1 new review", async () => { + it("create 1 new review", async () => { + // Click the button to create a new review + let create_btn = await page.$("#create-btn"); + await create_btn.click(); + await page.waitForNavigation(); - // Get the button needed to add new tags - let tag_btn = await page.$("#tag-add-btn"); - for(let i = 0; i < 5; i++){ - await page.$eval("#tag-form", (el, value) => el.value = `tag ${value}`, i); - await tag_btn.click(); - } - - // Select a new rating of 1 star - let rating_select = await page.$("#s1"); - rating_select.click(); + // create a new review + let review = { + imgAlt: "sample alt", + mealName: "sample name", + comments: "sample comment", + restaurant: "sample restaurant", + tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"], + rating: 1 + } + await setReviewForm(page, review); - // Click the save button to save updates - let save_btn = await page.$("#save-btn"); - save_btn.click(); - await page.waitForNavigation(); + // Click the save button to save updates + let save_btn = await page.$("#save-btn"); + await save_btn.click(); + await page.waitForNavigation(); + }); + + it("check details page", 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", + tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"], + rating: "http://localhost:8080/assets/images/icons/1-star.svg" + } + await checkCorrectness(page, "d", expected); + }); + + it("check home page", async () => { + // Click the button to return to the home page + let home_btn = await page.$("#home-btn"); + home_btn.click(); + await page.waitForNavigation(); + + // Get the review card again and get its shadowRoot + let review_card = await page.$("review-card"); + let shadowRoot = await review_card.getProperty("shadowRoot"); + + 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", + tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"], + rating: "http://localhost:8080/assets/images/icons/1-star.svg" + } + await checkCorrectness(shadowRoot, "a", expected); + }); }); - it("check details page", async () => { - // Get the review image and check src and alt - let img = await page.$("#d-mealImg"); - let imgSrc = await img.getProperty("src"); - let imgAlt = await img.getProperty("alt"); - // Check src and alt - assert.strictEqual(await imgSrc.jsonValue(), "sample src"); - assert.strictEqual(await imgAlt.jsonValue(), "sample alt"); + describe("test read 1 review after refresh", async () => { + it("refresh page", async () => { + // Reload the page + await page.reload({ waitUntil: ["networkidle0", "domcontentloaded"] }); + }); - // Get the title, comment, and restaurant - let title = await page.$("#d-mealName"); - let title_text = await title.getProperty("innerText"); - let comment = await page.$("#d-comments"); - let comment_text = await comment.getProperty("innerText"); - let restaurant = await page.$("#d-restaurant"); - let restaurant_text = await restaurant.getProperty("innerText"); + it("check details page", async () => { + // click review card + let review_card = await page.$("review-card"); + await review_card.click(); + await page.waitForNavigation(); - // Check title, comment, and restaurant - assert.strictEqual(await title_text.jsonValue(), "sample name"); - assert.strictEqual(await comment_text.jsonValue(), "sample comment"); - assert.strictEqual(await restaurant_text.jsonValue(), "sample restaurant"); + // 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", + tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"], + rating: "http://localhost:8080/assets/images/icons/1-star.svg" + } + await checkCorrectness(page, "d", expected); + }); - // Check tags - let tags = page.$(".tag"); - for(let i = 0; i < tags.length; i++){ - let tag_text = await tags[i].getProperty("innerText"); - assert.strictEqual(await tag_text.jsonValue(), `tag -${i}`); - } + it("check home page", async () => { + // Click the button to return to the home page + let home_btn = await page.$("#home-btn"); + home_btn.click(); + await page.waitForNavigation(); - // Check stars - let stars = await page.$("#d-rating"); - let stars_src = await stars.getProperty("src"); - assert.strictEqual(await stars_src.jsonValue(), "./assets/images/icons/5-star.svg"); - }); - - it("check home page", async () => { - // Click the button to return to the home page - let home_btn = await page.$("#home-btn"); - home_btn.click(); - await page.waitForNavigation(); + // Get the review card again and get its shadowRoot + let review_card = await page.$("review-card"); + let shadowRoot = await review_card.getProperty("shadowRoot"); - // Get the review card again and get its shadowRoot - let review_card = await page.$("review-card"); - let shadowRoot = await review_card.getProperty("shadowRoot"); - - // Get the review image and check src and alt - let img = await shadowRoot.$("#a-mealImg"); - let imgSrc = await img.getProperty("src"); - let imgAlt = await img.getProperty("alt"); - // Check src and alt - assert.strictEqual(await imgSrc.jsonValue(), "sample src"); - assert.strictEqual(await imgAlt.jsonValue(), "sample alt"); - - // Get the title, comment, and restaurant - let title = await shadowRoot.$("#a-mealName"); - let title_text = await title.getProperty("innerText"); - let comment = await shadowRoot.$("#a-comments"); - let comment_text = await comment.getProperty("innerText"); - let restaurant = await shadowRoot.$("#a-restaurant"); - let restaurant_text = await restaurant.getProperty("innerText"); - // Check title, comment, and restaurant - assert.strictEqual(await title_text.jsonValue(), "sample name"); - assert.strictEqual(await comment_text.jsonValue(), "sample comment"); - assert.strictEqual(await restaurant_text.jsonValue(), "sample restaurant"); - - // Check tags - let tags = shadowRoot.$(".tag"); - for(let i = 0; i < tags.length; i++){ - let tag_text = await tags[i].getProperty("innerText"); - assert.strictEqual(await tag_text.jsonValue(), `tag -${i}`); - } - - // Check stars - let stars = await shadowRoot.$("#a-rating"); - let stars_src = await stars.getProperty("src"); - assert.strictEqual(await stars_src.jsonValue(), "./assets/images/icons/5-star.svg"); - }); - }); - - describe("test read 1 review after refresh", async () => { - it("refresh page", async () => { - // Reload the page - await page.reload({ waitUntil: ["networkidle0", "domcontentloaded"] }); + // 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", + tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"], + rating: "http://localhost:8080/assets/images/icons/1-star.svg" + } + await checkCorrectness(shadowRoot, "a", expected); + }); }); - it("check details page", async () => { - // click review card - let review_card = await page.$("review-card"); - console.log(JSON.stringify(review_card)); - await review_card.click(); - await page.waitForNavigation(); + describe("test update 1 review", async () => { - // Get the review image and check src and alt - let img = await page.$("#d-mealImg"); - let imgSrc = await img.getProperty("src"); - let imgAlt = await img.getProperty("alt"); - // Check src and alt - assert.strictEqual(await imgSrc.jsonValue(), "sample src"); - assert.strictEqual(await imgAlt.jsonValue(), "sample alt"); + it("update 1 review", async () => { - // Get the title, comment, and restaurant - let title = await page.$("#d-mealName"); - let title_text = await title.getProperty("innerText"); - let comment = await page.$("#d-comments"); - let comment_text = await comment.getProperty("innerText"); - let restaurant = await page.$("#d-restaurant"); - let restaurant_text = await restaurant.getProperty("innerText"); + // Get the only review card and click it + let review_card = await page.$("review-card"); + await review_card.click(); + await page.waitForNavigation(); - // Check title, comment, and restaurant - assert.strictEqual(await title_text.jsonValue(), "sample name"); - assert.strictEqual(await comment_text.jsonValue(), "sample comment"); - assert.strictEqual(await restaurant_text.jsonValue(), "sample restaurant"); + // Click the button to show update form + let update_btn = await page.$("#update-btn"); + await update_btn.click(); - // Check tags - let tags = page.$(".tag"); - for(let i = 0; i < tags.length; i++){ - let tag_text = await tags[i].getProperty("innerText"); - assert.strictEqual(await tag_text.jsonValue(), `tag -${i}`); - } + // create a new review + let review = { + imgAlt: "updated alt", + mealName: "updated name", + comments: "updated comment", + restaurant: "updated restaurant", + tags: ["tag -0", "tag -1", "tag -2", "tag -3", "tag -4", "tag -5"], + rating: 5 + } + await setReviewForm(page, review); + + // Click the save button to save updates + let save_btn = await page.$("#save-btn"); + await save_btn.click(); + await page.waitForNavigation(); + }); + + it("check details page", 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", + tags: ["tag -0", "tag -1", "tag -2", "tag -3", "tag -4", "tag -5"], + rating: "http://localhost:8080/assets/images/icons/5-star.svg" + } + await checkCorrectness(page, "d", expected); + }); + + it("check home page", async () => { + // Click the button to return to the home page + let home_btn = await page.$("#home-btn"); + home_btn.click(); + await page.waitForNavigation(); + + // Get the review card again and get its shadowRoot + let review_card = await page.$("review-card"); + let shadowRoot = await review_card.getProperty("shadowRoot"); + + // 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", + tags: ["tag -0", "tag -1", "tag -2", "tag -3", "tag -4", "tag -5"], + rating: "http://localhost:8080/assets/images/icons/5-star.svg" + } + await checkCorrectness(shadowRoot, "a", expected); + }); - // Check stars - let stars = await page.$("#d-rating"); - let stars_src = await stars.getProperty("src"); - assert.strictEqual(await stars_src.jsonValue(), "./assets/images/icons/5-star.svg"); }); - it("check home page", async () => { - // Click the button to return to the home page - let home_btn = await page.$("#home-btn"); - home_btn.click(); - await page.waitForNavigation(); + describe("test delete 1 review", async () => { + it("delete 1 review", async () => { + // Get the only review card and click it + let review_card = await page.$("review-card"); + await review_card.click(); + await page.waitForNavigation(); - // Get the review card again and get its shadowRoot - let review_card = await page.$("review-card"); - let shadowRoot = await review_card.getProperty("shadowRoot"); + page.on('dialog', async dialog => { + console.log(dialog.message()); + await dialog.accept(); + }); - // Get the review image and check src and alt - let img = await shadowRoot.$("#a-mealImg"); - let imgSrc = await img.getProperty("src"); - let imgAlt = await img.getProperty("alt"); - // Check src and alt - assert.strictEqual(await imgSrc.jsonValue(), "sample src"); - assert.strictEqual(await imgAlt.jsonValue(), "sample alt"); + // Get the delete button and click it + let delete_btn = await page.$("#delete-btn"); + await delete_btn.click(); + await page.waitForNavigation(); - // Get the title, comment, and restaurant - let title = await shadowRoot.$("#a-mealName"); - let title_text = await title.getProperty("innerText"); - let comment = await shadowRoot.$("#a-comments"); - let comment_text = await comment.getProperty("innerText"); - let restaurant = await shadowRoot.$("#a-restaurant"); - let restaurant_text = await restaurant.getProperty("innerText"); - // Check title, comment, and restaurant - assert.strictEqual(await title_text.jsonValue(), "sample name"); - assert.strictEqual(await comment_text.jsonValue(), "sample comment"); - assert.strictEqual(await restaurant_text.jsonValue(), "sample restaurant"); - - // Check tags - let tags = shadowRoot.$(".tag"); - for(let i = 0; i < tags.length; i++){ - let tag_text = await tags[i].getProperty("innerText"); - assert.strictEqual(await tag_text.jsonValue(), `tag -${i}`); - } - - // Check stars - let stars = await shadowRoot.$("#a-rating"); - let stars_src = await stars.getProperty("src"); - assert.strictEqual(await stars_src.jsonValue(), "./assets/images/icons/5-star.svg"); - }); - }); - - describe("test update 1 review", async () => { - - it("update 1 review", async () => { - - // Get the only review card and click it - let review_card = await page.$("review-card"); - console.log(JSON.stringify(review_card)); - await review_card.click(); - await page.waitForNavigation(); - - // Click the button to show update form - let update_btn = await page.$("#update-btn"); - await update_btn.click(); - - // Set text fields - await page.$eval("#mealImg", el => el.value = "updated src"); - await page.$eval("#imgAlt", el => el.value = "updated alt"); - await page.$eval("#mealName", el => el.value = "updated name"); - await page.$eval("#comments", el => el.value = "updated comment"); - await page.$eval("#restaurant", el => el.value = "updated restaurant"); - - // Get all tag elements and click them to delete them - let tag_items = await page.$$(".tag"); - for(let i = 0; i < tag_items.length; i++){ - await tag_items.click(); - } - - // Get the button needed to add new tags - let tag_btn = await page.$("#tag-add-btn"); - for(let i = 0; i < 5; i++){ - await page.$eval("#tag-form", (el, value) => el.value = `updated tag -${value}`, i); - await tag_btn.click(); - } - - // Select a new rating of 5 stars - let rating_select = await page.$("#s5"); - rating_select.click(); - - // Click the save button to save updates - let save_btn = await page.$("#save-btn"); - save_btn.click(); - await page.waitForNavigation(); + // Check that the card was correctly removed (there should be no remaining cards) + review_card = await page.$("#review-card"); + assert.strictEqual(review_card, null); + }); }); - it("check details page", async () => { - // Get the review image and check src and alt - let img = await page.$("#d-mealImg"); - let imgSrc = await img.getProperty("src"); - let imgAlt = await img.getProperty("alt"); - // Check src and alt - assert.strictEqual(await imgSrc.jsonValue(), "updated src"); - assert.strictEqual(await imgAlt.jsonValue(), "updated alt"); - - // Get the title, comment, and restaurant - let title = await page.$("#d-mealName"); - let title_text = await title.getProperty("innerText"); - let comment = await page.$("#d-comments"); - let comment_text = await comment.getProperty("innerText"); - let restaurant = await page.$("#d-restaurant"); - let restaurant_text = await restaurant.getProperty("innerText"); - // Check title, comment, and restaurant - assert.strictEqual(await title_text.jsonValue(), "updated name"); - assert.strictEqual(await comment_text.jsonValue(), "updated comment"); - assert.strictEqual(await restaurant_text.jsonValue(), "updated restaurant"); - - // Check tags - let tags = page.$(".tag"); - for(let i = 0; i < tags.length; i++){ - let tag_text = await tags[i].getProperty("innerText"); - assert.strictEqual(await tag_text.jsonValue(), `updated tag -${i}`); - } - - // Check stars - let stars = await page.$("#d-rating"); - let stars_src = await stars.getProperty("src"); - assert.strictEqual(await stars_src.jsonValue(), "./assets/images/icons/1-star.svg"); - }); - - it("check home page", async () => { - // Click the button to return to the home page - let home_btn = await page.$("#home-btn"); - home_btn.click(); - await page.waitForNavigation(); - - // Get the review card again and get its shadowRoot - let review_card = await page.$("review-card"); - let shadowRoot = await review_card.getProperty("shadowRoot"); - - // Get the review image and check src and alt - let img = await shadowRoot.$("#a-mealImg"); - let imgSrc = await img.getProperty("src"); - let imgAlt = await img.getProperty("alt"); - // Check src and alt - assert.strictEqual(await imgSrc.jsonValue(), "updated src"); - assert.strictEqual(await imgAlt.jsonValue(), "updated alt"); - - // Get the title, comment, and restaurant - let title = await shadowRoot.$("#a-mealName"); - let title_text = await title.getProperty("innerText"); - let comment = await shadowRoot.$("#a-comments"); - let comment_text = await comment.getProperty("innerText"); - let restaurant = await shadowRoot.$("#a-restaurant"); - let restaurant_text = await restaurant.getProperty("innerText"); - // Check title, comment, and restaurant - assert.strictEqual(await title_text.jsonValue(), "updated name"); - assert.strictEqual(await comment_text.jsonValue(), "updated comment"); - assert.strictEqual(await restaurant_text.jsonValue(), "updated restaurant"); - - // Check tags - let tags = shadowRoot.$(".tag"); - for(let i = 0; i < tags.length; i++){ - let tag_text = await tags[i].getProperty("innerText"); - assert.strictEqual(await tag_text.jsonValue(), `tag -${i}`); - } - - // Check stars - let stars = await shadowRoot.$("#a-rating"); - let stars_src = await stars.getProperty("src"); - assert.strictEqual(await stars_src.jsonValue(), "./assets/images/icons/1-star.svg"); - }); - - }); - - describe("test delete 1 review", () => { - it("delete 1 review", async () => { - // Get the only review card and click it - let review_card = await page.$("review-card"); - await review_card.click(); - await page.waitForNavigation(); - - // Get the delete button and click it - let delete_btn = await page.$("#delete-btn"); - await delete_btn.click(); - await page.waitForNavigation(); - - // Check that the card was correctly removed (there should be no remaining cards) - review_card = await page.$("#review-card"); - assert.strictEqual(review_card, null); - }); }); after(async () => {