mirror of
				https://github.com/cse110-fa22-group29/cse110-fa22-group29.git
				synced 2025-10-31 03:46:50 +00:00 
			
		
		
		
	update e2e test layout
This commit is contained in:
		| @@ -13,11 +13,11 @@ | |||||||
|   "devDependencies": { |   "devDependencies": { | ||||||
|     "eslint": "^8.27.0", |     "eslint": "^8.27.0", | ||||||
|     "htmlhint": "1.1.4", |     "htmlhint": "1.1.4", | ||||||
|  |     "http-server": "", | ||||||
|     "mocha": "10", |     "mocha": "10", | ||||||
|     "mock-local-storage": "^1.1.23", |     "mock-local-storage": "^1.1.23", | ||||||
|  |     "puppeteer": "^18.2.1", | ||||||
|     "stylelint": "14.14.1", |     "stylelint": "14.14.1", | ||||||
|     "stylelint-config-standard": "^29.0.0", |     "stylelint-config-standard": "^29.0.0" | ||||||
|     "puppeteer": "18", |  | ||||||
|     "http-server": "" |  | ||||||
|   } |   } | ||||||
| } | } | ||||||
|   | |||||||
| @@ -20,150 +20,172 @@ describe("test App end to end", async () => { | |||||||
| 		} | 		} | ||||||
| 	}); | 	}); | ||||||
|  |  | ||||||
| 	it("page should have correct title", async () => { | 	describe("test simple properties", async () => { | ||||||
| 		assert.strictEqual(await page.title(), "Food Journal"); | 		it("page should have correct title", async () => { | ||||||
|  | 			assert.strictEqual(await page.title(), "Food Journal"); | ||||||
|  | 		}); | ||||||
| 	}); | 	}); | ||||||
|  |  | ||||||
| 	it("test create review functionality on details page", async () => { | 	describe("test create 1 new review", async () => { | ||||||
|  | 		it("create 1 new review", async () => { | ||||||
|  |  | ||||||
|  | 		}); | ||||||
|  |  | ||||||
|  | 		it("check details page", async () => { | ||||||
|  | 		 | ||||||
|  | 		}); | ||||||
|  | 	 | ||||||
|  | 		it("check home page", async () => { | ||||||
|  | 			 | ||||||
|  | 		}); | ||||||
|  | 	}); | ||||||
|  |  | ||||||
|  | 	describe("test read 1 review after refresh", async () => { | ||||||
|  | 		it("refresh page", async () => { | ||||||
|  |  | ||||||
|  | 		}); | ||||||
|  |  | ||||||
|  | 		it("check details page", async () => { | ||||||
|  | 			 | ||||||
|  | 		}); | ||||||
|  |  | ||||||
|  | 		it("check home page", async () => { | ||||||
|  | 			 | ||||||
|  | 		}); | ||||||
|  | 	}); | ||||||
|  |  | ||||||
|  | 	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(); | ||||||
|  |  | ||||||
|  | 			// 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 = `tag -${value}`, i); | ||||||
|  | 				tag_btn.click(); | ||||||
|  | 			} | ||||||
|  |  | ||||||
|  | 			// Select a new rating of 1 star | ||||||
|  | 			let rating_select = await page.$("#s1"); | ||||||
|  | 			rating_select.click(); | ||||||
|  |  | ||||||
|  | 			// Click the save button to save updates | ||||||
|  | 			let save_btn = await page.$("#save-btn"); | ||||||
|  | 			save_btn.click(); | ||||||
|  | 		}); | ||||||
|  |  | ||||||
|  | 		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(), `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(); | ||||||
|  |  | ||||||
|  | 			// 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"); | ||||||
|  | 		}); | ||||||
|  |  | ||||||
| 	}); | 	}); | ||||||
|  |  | ||||||
| 	it("test create review functionality on home page", async () => { | 	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(); | ||||||
|  |  | ||||||
| 	}); | 			// Get the delete button and click it | ||||||
|  | 			let delete_btn = await page.$("#delete-btn"); | ||||||
|  | 			await delete_btn.click(); | ||||||
|  |  | ||||||
| 	it("test read review functionality on details page", async () => { | 			// 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("test read review functionality on home page", async () => { |  | ||||||
| 		 |  | ||||||
| 	}); |  | ||||||
|  |  | ||||||
| 	it("test update review functionality on details page", async () => { |  | ||||||
| 		// Get the only review card and click it |  | ||||||
| 		let review_card = await page.$("review-card"); |  | ||||||
| 		await review_card.click(); |  | ||||||
|  |  | ||||||
| 		// 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 = `tag -${value}`, i); |  | ||||||
| 			tag_btn.click(); |  | ||||||
| 		} |  | ||||||
|  |  | ||||||
| 		// Select a new rating of 1 star |  | ||||||
| 		let rating_select = await page.$("#s1"); |  | ||||||
| 		rating_select.click(); |  | ||||||
|  |  | ||||||
| 		// Click the save button to save updates |  | ||||||
| 		let save_btn = await page.$("#save-btn"); |  | ||||||
| 		save_btn.click(); |  | ||||||
|  |  | ||||||
| 		// 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(), `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("test update review funcionality on home page", async () => { |  | ||||||
| 		// Click the button to return to the home page |  | ||||||
| 		let home_btn = await page.$("#home-btn"); |  | ||||||
| 		home_btn.click(); |  | ||||||
|  |  | ||||||
| 		// 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"); |  | ||||||
| 	}); |  | ||||||
|  |  | ||||||
| 	it("test delete review functionality", async () => { |  | ||||||
| 		// Get the only review card and click it |  | ||||||
| 		let review_card = await page.$("review-card"); |  | ||||||
| 		await review_card.click(); |  | ||||||
|  |  | ||||||
| 		// Get the delete button and click it |  | ||||||
| 		let delete_btn = await page.$("#delete-btn"); |  | ||||||
| 		await delete_btn.click(); |  | ||||||
|  |  | ||||||
| 		// 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 () => { | 	after(async () => { | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user