fix issue with tag checking,

modularize frequent app opperations in appTestHelpers.js,
fix isue with tage count checking

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2022-11-20 13:39:21 -08:00
parent 1c1ac64c58
commit e7d8eaea59
2 changed files with 265 additions and 335 deletions

View File

@ -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);
}

View File

@ -1,7 +1,8 @@
import {strict as assert} from "node:assert"; import {strict as assert} from "node:assert";
import {describe, it, before, after} from "mocha"; import {describe, it, before, after} from "mocha";
import puppeteer from "puppeteer-core"; 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 () => { describe("test App end to end", async () => {
@ -17,6 +18,7 @@ describe("test App end to end", async () => {
root = false; root = false;
} }
//browser = await puppeteer.launch({headless: false, slowMo: 250, args: root ? ['--no-sandbox'] : undefined});
browser = await puppeteer.launch({args: root ? ['--no-sandbox'] : undefined}); browser = await puppeteer.launch({args: root ? ['--no-sandbox'] : undefined});
page = await browser.newPage(); page = await browser.newPage();
try{ try{
@ -35,29 +37,25 @@ describe("test App end to end", async () => {
}); });
}); });
describe("test CRUD on simple inputs and default image", () => {
describe("test create 1 new review", async () => { describe("test create 1 new review", async () => {
it("create 1 new review", async () => { it("create 1 new review", async () => {
// Click the button to show update form // Click the button to create a new review
let create_btn = await page.$("#create-btn"); let create_btn = await page.$("#create-btn");
await create_btn.click(); await create_btn.click();
await page.waitForNavigation(); await page.waitForNavigation();
// Set text fields // create a new review
await page.$eval("#imgAlt", el => el.value = "sample alt"); let review = {
await page.$eval("#mealName", el => el.value = "sample name"); imgAlt: "sample alt",
await page.$eval("#comments", el => el.value = "sample comment"); mealName: "sample name",
await page.$eval("#restaurant", el => el.value = "sample restaurant"); comments: "sample comment",
restaurant: "sample restaurant",
// Get the button needed to add new tags tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"],
let tag_btn = await page.$("#tag-add-btn"); rating: 1
for(let i = 0; i < 5; i++){
await page.$eval("#tag-form", (el, value) => el.value = `tag ${value}`, i);
await tag_btn.click();
} }
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 // Click the save button to save updates
let save_btn = await page.$("#save-btn"); let save_btn = await page.$("#save-btn");
@ -66,38 +64,17 @@ describe("test App end to end", async () => {
}); });
it("check details page", async () => { it("check details page", async () => {
// Get the review image and check src and alt // check the details page for correctness
let img = await page.$("#d-mealImg"); let expected = {
let imgSrc = await img.getProperty("src"); imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png",
let imgAlt = await img.getProperty("alt"); imgAlt: "sample alt",
// Check src and alt mealName: "sample name",
assert.strictEqual(await imgSrc.jsonValue(), "http://localhost:8080/assets/images/icons/plate_with_cutlery.png"); comments: "sample comment",
assert.strictEqual(await imgAlt.jsonValue(), "sample alt"); restaurant: "sample restaurant",
tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"],
// Get the title, comment, and restaurant rating: "http://localhost:8080/assets/images/icons/1-star.svg"
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}`);
} }
await checkCorrectness(page, "d", expected);
// 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 () => { it("check home page", async () => {
@ -110,37 +87,16 @@ describe("test App end to end", async () => {
let review_card = await page.$("review-card"); let review_card = await page.$("review-card");
let shadowRoot = await review_card.getProperty("shadowRoot"); let shadowRoot = await review_card.getProperty("shadowRoot");
// Get the review image and check src and alt let expected = {
let img = await shadowRoot.$("#a-mealImg"); imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png",
let imgSrc = await img.getProperty("src"); imgAlt: "sample alt",
let imgAlt = await img.getProperty("alt"); mealName: "sample name",
// Check src and alt comments: "sample comment",
assert.strictEqual(await imgSrc.jsonValue(), "http://localhost:8080/assets/images/icons/plate_with_cutlery.png"); restaurant: "sample restaurant",
assert.strictEqual(await imgAlt.jsonValue(), "sample alt"); tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"],
rating: "http://localhost:8080/assets/images/icons/1-star.svg"
// 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}`);
} }
await checkCorrectness(shadowRoot, "a", expected);
// 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");
}); });
}); });
@ -156,38 +112,17 @@ describe("test App end to end", async () => {
await review_card.click(); await review_card.click();
await page.waitForNavigation(); await page.waitForNavigation();
// Get the review image and check src and alt // check the details page for correctness
let img = await page.$("#d-mealImg"); let expected = {
let imgSrc = await img.getProperty("src"); imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png",
let imgAlt = await img.getProperty("alt"); imgAlt: "sample alt",
// Check src and alt mealName: "sample name",
assert.strictEqual(await imgSrc.jsonValue(), "http://localhost:8080/assets/images/icons/plate_with_cutlery.png"); comments: "sample comment",
assert.strictEqual(await imgAlt.jsonValue(), "sample alt"); restaurant: "sample restaurant",
tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"],
// Get the title, comment, and restaurant rating: "http://localhost:8080/assets/images/icons/1-star.svg"
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}`);
} }
await checkCorrectness(page, "d", expected);
// 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 () => { it("check home page", async () => {
@ -200,37 +135,17 @@ describe("test App end to end", async () => {
let review_card = await page.$("review-card"); let review_card = await page.$("review-card");
let shadowRoot = await review_card.getProperty("shadowRoot"); let shadowRoot = await review_card.getProperty("shadowRoot");
// Get the review image and check src and alt // check the details page for correctness
let img = await shadowRoot.$("#a-mealImg"); let expected = {
let imgSrc = await img.getProperty("src"); imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png",
let imgAlt = await img.getProperty("alt"); imgAlt: "sample alt",
// Check src and alt mealName: "sample name",
assert.strictEqual(await imgSrc.jsonValue(), "http://localhost:8080/assets/images/icons/plate_with_cutlery.png"); comments: "sample comment",
assert.strictEqual(await imgAlt.jsonValue(), "sample alt"); restaurant: "sample restaurant",
tags: ["tag 0", "tag 1", "tag 2", "tag 3", "tag 4"],
// Get the title, comment, and restaurant rating: "http://localhost:8080/assets/images/icons/1-star.svg"
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}`);
} }
await checkCorrectness(shadowRoot, "a", expected);
// 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");
}); });
}); });
@ -247,28 +162,16 @@ describe("test App end to end", async () => {
let update_btn = await page.$("#update-btn"); let update_btn = await page.$("#update-btn");
await update_btn.click(); await update_btn.click();
// Set text fields // create a new review
await page.$eval("#imgAlt", el => el.value = "updated alt"); let review = {
await page.$eval("#mealName", el => el.value = "updated name"); imgAlt: "updated alt",
await page.$eval("#comments", el => el.value = "updated comment"); mealName: "updated name",
await page.$eval("#restaurant", el => el.value = "updated restaurant"); comments: "updated comment",
restaurant: "updated restaurant",
// Get all tag elements and click them to delete them tags: ["tag -0", "tag -1", "tag -2", "tag -3", "tag -4", "tag -5"],
let tag_items = await page.$$(".tag"); rating: 5
for(let i = 0; i < tag_items.length; i++){
await tag_items[i].click();
} }
await setReviewForm(page, review);
// 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 // Click the save button to save updates
let save_btn = await page.$("#save-btn"); let save_btn = await page.$("#save-btn");
@ -277,37 +180,17 @@ describe("test App end to end", async () => {
}); });
it("check details page", async () => { it("check details page", async () => {
// Get the review image and check src and alt // check the details page for correctness
let img = await page.$("#d-mealImg"); let expected = {
let imgSrc = await img.getProperty("src"); imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png",
let imgAlt = await img.getProperty("alt"); imgAlt: "updated alt",
// Check src and alt mealName: "updated name",
assert.strictEqual(await imgSrc.jsonValue(), "http://localhost:8080/assets/images/icons/plate_with_cutlery.png"); comments: "updated comment",
assert.strictEqual(await imgAlt.jsonValue(), "updated alt"); restaurant: "updated restaurant",
tags: ["tag -0", "tag -1", "tag -2", "tag -3", "tag -4", "tag -5"],
// Get the title, comment, and restaurant rating: "http://localhost:8080/assets/images/icons/5-star.svg"
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}`);
} }
await checkCorrectness(page, "d", expected);
// 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 () => { it("check home page", async () => {
@ -320,37 +203,17 @@ describe("test App end to end", async () => {
let review_card = await page.$("review-card"); let review_card = await page.$("review-card");
let shadowRoot = await review_card.getProperty("shadowRoot"); let shadowRoot = await review_card.getProperty("shadowRoot");
// Get the review image and check src and alt // check the details page for correctness
let img = await shadowRoot.$("#a-mealImg"); let expected = {
let imgSrc = await img.getProperty("src"); imgSrc: "http://localhost:8080/assets/images/icons/plate_with_cutlery.png",
let imgAlt = await img.getProperty("alt"); imgAlt: "updated alt",
// Check src and alt mealName: "updated name",
assert.strictEqual(await imgSrc.jsonValue(), "http://localhost:8080/assets/images/icons/plate_with_cutlery.png"); comments: "updated comment",
assert.strictEqual(await imgAlt.jsonValue(), "updated alt"); restaurant: "updated restaurant",
tags: ["tag -0", "tag -1", "tag -2", "tag -3", "tag -4", "tag -5"],
// Get the title, comment, and restaurant rating: "http://localhost:8080/assets/images/icons/5-star.svg"
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}`);
} }
await checkCorrectness(shadowRoot, "a", expected);
// 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");
}); });
}); });
@ -378,6 +241,8 @@ describe("test App end to end", async () => {
}); });
}); });
});
after(async () => { after(async () => {
await page.close(); await page.close();
await browser.close(); await browser.close();