From 7035fa46eef9504223c55cc0613b547c7be4e111 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Sat, 19 Nov 2022 11:42:30 -0800 Subject: [PATCH 1/7] fixes to tag-add-btn, fixes to tests with rating selection Signed-off-by: Arthur Lu --- source/CreatePage.html | 12 ++++++------ source/ReviewDetails.html | 10 +++++----- source/assets/scripts/CreatePage.js | 2 +- source/assets/scripts/main.e2e.test.js | 16 ++++++++-------- 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/source/CreatePage.html b/source/CreatePage.html index bc37e7a..1fbd60c 100644 --- a/source/CreatePage.html +++ b/source/CreatePage.html @@ -47,11 +47,11 @@
Rating: - - - - - + + + + +
@@ -66,7 +66,7 @@
- +
diff --git a/source/ReviewDetails.html b/source/ReviewDetails.html index c790b4e..8c457aa 100644 --- a/source/ReviewDetails.html +++ b/source/ReviewDetails.html @@ -49,11 +49,11 @@
Rating: - - - - - + + + + +
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/main.e2e.test.js b/source/assets/scripts/main.e2e.test.js index acbe038..482f67c 100644 --- a/source/assets/scripts/main.e2e.test.js +++ b/source/assets/scripts/main.e2e.test.js @@ -55,14 +55,14 @@ describe("test App end to end", async () => { 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(); + let rating_select = await page.$("#s1-select"); + await rating_select.click({delay: 100}); // Click the save button to save updates let save_btn = await page.$("#save-btn"); - save_btn.click(); + await save_btn.click(); await page.waitForNavigation(); }); @@ -260,7 +260,7 @@ describe("test App end to end", async () => { // 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(); + await tag_items[i].click(); } // Get the button needed to add new tags @@ -271,12 +271,12 @@ describe("test App end to end", async () => { } // Select a new rating of 5 stars - let rating_select = await page.$("#s5"); - rating_select.click(); + let rating_select = await page.$("#s5-select"); + await rating_selects.click(); // Click the save button to save updates let save_btn = await page.$("#save-btn"); - save_btn.click(); + await save_btn.click(); await page.waitForNavigation(); }); From 20e9842aea186f3cecefe961af729ff0dc8ed7b8 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Sat, 19 Nov 2022 12:00:59 -0800 Subject: [PATCH 2/7] fix expected values for ratings and src tests Signed-off-by: Arthur Lu --- source/ReviewDetails.html | 2 +- source/assets/scripts/main.e2e.test.js | 32 ++++++++++++-------------- 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/source/ReviewDetails.html b/source/ReviewDetails.html index 8c457aa..552c2f3 100644 --- a/source/ReviewDetails.html +++ b/source/ReviewDetails.html @@ -72,7 +72,7 @@
- + diff --git a/source/assets/scripts/main.e2e.test.js b/source/assets/scripts/main.e2e.test.js index 482f67c..48ec53c 100644 --- a/source/assets/scripts/main.e2e.test.js +++ b/source/assets/scripts/main.e2e.test.js @@ -43,7 +43,7 @@ describe("test App end to end", async () => { await page.waitForNavigation(); // Set text fields - await page.$eval("#mealImg", el => el.value = "sample src"); + await page.$eval("#mealImg", el => el.value = ""); 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"); @@ -72,7 +72,7 @@ describe("test App end to end", async () => { 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 imgSrc.jsonValue(), "http://localhost:8080/assets/images/icons/plate_with_cutlery.png"); assert.strictEqual(await imgAlt.jsonValue(), "sample alt"); // Get the title, comment, and restaurant @@ -98,7 +98,7 @@ describe("test App end to end", async () => { // 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"); + assert.strictEqual(await stars_src.jsonValue(), "http://localhost:8080/assets/images/icons/1-star.svg"); }); it("check home page", async () => { @@ -116,7 +116,7 @@ describe("test App end to end", async () => { 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 imgSrc.jsonValue(), "http://localhost:8080/assets/images/icons/plate_with_cutlery.png"); assert.strictEqual(await imgAlt.jsonValue(), "sample alt"); // Get the title, comment, and restaurant @@ -141,7 +141,7 @@ describe("test App end to end", async () => { // 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"); + assert.strictEqual(await stars_src.jsonValue(), "http://localhost:8080/assets/images/icons/1-star.svg"); }); }); @@ -154,7 +154,6 @@ describe("test App end to end", async () => { 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(); @@ -163,7 +162,7 @@ describe("test App end to end", async () => { 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 imgSrc.jsonValue(), "http://localhost:8080/assets/images/icons/plate_with_cutlery.png"); assert.strictEqual(await imgAlt.jsonValue(), "sample alt"); // Get the title, comment, and restaurant @@ -189,7 +188,7 @@ describe("test App end to end", async () => { // 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"); + assert.strictEqual(await stars_src.jsonValue(), "http://localhost:8080/assets/images/icons/1-star.svg"); }); it("check home page", async () => { @@ -207,7 +206,7 @@ describe("test App end to end", async () => { 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 imgSrc.jsonValue(), "http://localhost:8080/assets/images/icons/plate_with_cutlery.png"); assert.strictEqual(await imgAlt.jsonValue(), "sample alt"); // Get the title, comment, and restaurant @@ -232,7 +231,7 @@ describe("test App end to end", async () => { // 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"); + assert.strictEqual(await stars_src.jsonValue(), "http://localhost:8080/assets/images/icons/1-star.svg"); }); }); @@ -242,7 +241,6 @@ describe("test App end to end", 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(); @@ -251,7 +249,7 @@ describe("test App end to end", async () => { await update_btn.click(); // Set text fields - await page.$eval("#mealImg", el => el.value = "updated src"); + await page.$eval("#mealImg", el => el.value = ""); 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"); @@ -272,7 +270,7 @@ describe("test App end to end", async () => { // Select a new rating of 5 stars let rating_select = await page.$("#s5-select"); - await rating_selects.click(); + await rating_select.click(); // Click the save button to save updates let save_btn = await page.$("#save-btn"); @@ -286,7 +284,7 @@ describe("test App end to end", async () => { 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 imgSrc.jsonValue(), "http://localhost:8080/assets/images/icons/plate_with_cutlery.png"); assert.strictEqual(await imgAlt.jsonValue(), "updated alt"); // Get the title, comment, and restaurant @@ -311,7 +309,7 @@ describe("test App end to end", async () => { // 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"); + assert.strictEqual(await stars_src.jsonValue(), "http://localhost:8080/assets/images/icons/5-star.svg"); }); it("check home page", async () => { @@ -329,7 +327,7 @@ describe("test App end to end", async () => { 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 imgSrc.jsonValue(), "http://localhost:8080/assets/images/icons/plate_with_cutlery.png"); assert.strictEqual(await imgAlt.jsonValue(), "updated alt"); // Get the title, comment, and restaurant @@ -354,7 +352,7 @@ describe("test App end to end", async () => { // 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"); + assert.strictEqual(await stars_src.jsonValue(), "http://localhost:8080/assets/images/icons/5-star.svg"); }); }); From 8338156cb8e32102663ef81c40c7dfdaadfcadef Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Sat, 19 Nov 2022 12:16:03 -0800 Subject: [PATCH 3/7] fix delete test issue with alert handling Signed-off-by: Arthur Lu --- source/assets/scripts/main.e2e.test.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/source/assets/scripts/main.e2e.test.js b/source/assets/scripts/main.e2e.test.js index 48ec53c..e9c93b8 100644 --- a/source/assets/scripts/main.e2e.test.js +++ b/source/assets/scripts/main.e2e.test.js @@ -364,6 +364,11 @@ describe("test App end to end", async () => { await review_card.click(); await page.waitForNavigation(); + page.on('dialog', async dialog => { + console.log(dialog.message()); + await dialog.accept(); + }); + // Get the delete button and click it let delete_btn = await page.$("#delete-btn"); await delete_btn.click(); From 1c1ac64c58a8bf19e1086aa8c1f73371c203fd8c Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Sat, 19 Nov 2022 12:34:29 -0800 Subject: [PATCH 4/7] change e2e tests to use default images Signed-off-by: Arthur Lu --- source/assets/scripts/main.e2e.test.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/source/assets/scripts/main.e2e.test.js b/source/assets/scripts/main.e2e.test.js index e9c93b8..d9c7c20 100644 --- a/source/assets/scripts/main.e2e.test.js +++ b/source/assets/scripts/main.e2e.test.js @@ -43,7 +43,6 @@ describe("test App end to end", async () => { await page.waitForNavigation(); // Set text fields - await page.$eval("#mealImg", el => el.value = ""); 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"); @@ -249,7 +248,6 @@ describe("test App end to end", async () => { await update_btn.click(); // Set text fields - await page.$eval("#mealImg", el => el.value = ""); 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"); From e7d8eaea59cbe5400581e79be38511406a421224 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Sun, 20 Nov 2022 13:39:21 -0800 Subject: [PATCH 5/7] fix issue with tag checking, modularize frequent app opperations in appTestHelpers.js, fix isue with tage count checking Signed-off-by: Arthur Lu --- source/assets/scripts/appTestHelpers.js | 65 +++ source/assets/scripts/main.e2e.test.js | 535 +++++++++--------------- 2 files changed, 265 insertions(+), 335 deletions(-) create mode 100644 source/assets/scripts/appTestHelpers.js diff --git a/source/assets/scripts/appTestHelpers.js b/source/assets/scripts/appTestHelpers.js new file mode 100644 index 0000000..434d09f --- /dev/null +++ b/source/assets/scripts/appTestHelpers.js @@ -0,0 +1,65 @@ +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); + + // 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}); +} + +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 d9c7c20..278ac22 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,347 +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("#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(); - } + // 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); - // Select a new rating of 1 star - let rating_select = await page.$("#s1-select"); - await rating_select.click({delay: 100}); - - // 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 () => { - // 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(), "http://localhost:8080/assets/images/icons/plate_with_cutlery.png"); - assert.strictEqual(await imgAlt.jsonValue(), "sample 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(), "sample name"); - assert.strictEqual(await comment_text.jsonValue(), "sample comment"); - assert.strictEqual(await restaurant_text.jsonValue(), "sample 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(), `tag -${i}`); - } - - // Check stars - let stars = await page.$("#d-rating"); - let stars_src = await stars.getProperty("src"); - assert.strictEqual(await stars_src.jsonValue(), "http://localhost:8080/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(), "http://localhost:8080/assets/images/icons/plate_with_cutlery.png"); - 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(), "http://localhost:8080/assets/images/icons/1-star.svg"); - }); - }); - - describe("test read 1 review after refresh", async () => { - it("refresh page", async () => { - // Reload the page - await page.reload({ waitUntil: ["networkidle0", "domcontentloaded"] }); - }); - - it("check details page", async () => { - // click review card - let review_card = await page.$("review-card"); - await review_card.click(); - await page.waitForNavigation(); - - // 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(), "http://localhost:8080/assets/images/icons/plate_with_cutlery.png"); - assert.strictEqual(await imgAlt.jsonValue(), "sample 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(), "sample name"); - assert.strictEqual(await comment_text.jsonValue(), "sample comment"); - assert.strictEqual(await restaurant_text.jsonValue(), "sample 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(), `tag -${i}`); - } - - // Check stars - let stars = await page.$("#d-rating"); - let stars_src = await stars.getProperty("src"); - assert.strictEqual(await stars_src.jsonValue(), "http://localhost:8080/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(), "http://localhost:8080/assets/images/icons/plate_with_cutlery.png"); - 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(), "http://localhost:8080/assets/images/icons/1-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"); - 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("#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[i].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-select"); - await rating_select.click(); - - // 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 () => { - // 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(), "http://localhost:8080/assets/images/icons/plate_with_cutlery.png"); - 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(), "http://localhost:8080/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 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(), "http://localhost:8080/assets/images/icons/plate_with_cutlery.png"); - 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(), "http://localhost:8080/assets/images/icons/5-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(); - - page.on('dialog', async dialog => { - console.log(dialog.message()); - await dialog.accept(); + // Click the save button to save updates + let save_btn = await page.$("#save-btn"); + await save_btn.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(); + 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(); - // Check that the card was correctly removed (there should be no remaining cards) - review_card = await page.$("#review-card"); - assert.strictEqual(review_card, null); + // 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); + }); }); + + describe("test read 1 review after refresh", async () => { + it("refresh page", async () => { + // Reload the page + await page.reload({ waitUntil: ["networkidle0", "domcontentloaded"] }); + }); + + it("check details page", async () => { + // click review card + let review_card = await page.$("review-card"); + await review_card.click(); + await page.waitForNavigation(); + + // 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"); + + // 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); + }); + }); + + 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"); + 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(); + + // 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); + }); + + }); + + 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(); + + page.on('dialog', async dialog => { + console.log(dialog.message()); + await dialog.accept(); + }); + + // 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 () => { From 3b1b0cfd57643d3c1f2183c2411dd57221edb023 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Sun, 20 Nov 2022 13:39:52 -0800 Subject: [PATCH 6/7] quick async fix Signed-off-by: Arthur Lu --- source/assets/scripts/main.e2e.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/assets/scripts/main.e2e.test.js b/source/assets/scripts/main.e2e.test.js index 278ac22..ad177c9 100644 --- a/source/assets/scripts/main.e2e.test.js +++ b/source/assets/scripts/main.e2e.test.js @@ -218,7 +218,7 @@ describe("test App end to end", async () => { }); - describe("test delete 1 review", () => { + 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"); From 72e2f0fa030baa5f5b5aee1285c2c4bfe006d4a2 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Sun, 20 Nov 2022 13:43:42 -0800 Subject: [PATCH 7/7] comment appTestHelpers.js Signed-off-by: Arthur Lu --- source/assets/scripts/appTestHelpers.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/source/assets/scripts/appTestHelpers.js b/source/assets/scripts/appTestHelpers.js index 434d09f..82ade7a 100644 --- a/source/assets/scripts/appTestHelpers.js +++ b/source/assets/scripts/appTestHelpers.js @@ -1,5 +1,10 @@ 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 @@ -28,6 +33,12 @@ export async function setReviewForm(page, review) { 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`);