From 988581cb056c686c0cb4c3175183dfdd6c484f54 Mon Sep 17 00:00:00 2001
From: WenjiaoYue <wenjiao.yue@intel.com>
Date: Thu, 16 May 2024 10:47:43 +0800
Subject: [PATCH] Add UI test for ChatQnA (#134)

Signed-off-by: Yue, Wenjiao <wenjiao.yue@intel.com>
---
 .gitignore                                    |   1 +
 ChatQnA/ui/svelte/playwright.config.ts        |   2 +-
 .../components/upload/PasteKnowledge.svelte   |   3 +
 .../components/upload/upload-knowledge.svelte |   1 +
 ChatQnA/ui/svelte/src/routes/+page.svelte     |   3 +-
 ChatQnA/ui/svelte/tests/chatQnA.spec.ts       |  63 +++++++++--
 ChatQnA/ui/svelte/tests/test_file.txt         | 104 ++++++++++++++++++
 7 files changed, 166 insertions(+), 11 deletions(-)
 create mode 100644 ChatQnA/ui/svelte/tests/test_file.txt

diff --git a/.gitignore b/.gitignore
index d4f57bcc..3a5650d2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,5 +3,6 @@
 **/package-lock.json
 **/playwright-report/
 **/playwright/.cache/
+**/test-results/
 
 __pycache__/
\ No newline at end of file
diff --git a/ChatQnA/ui/svelte/playwright.config.ts b/ChatQnA/ui/svelte/playwright.config.ts
index b574e3b4..49d09fa8 100644
--- a/ChatQnA/ui/svelte/playwright.config.ts
+++ b/ChatQnA/ui/svelte/playwright.config.ts
@@ -38,7 +38,7 @@ export default defineConfig({
 		/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
 		actionTimeout: 0,
 		/* Base URL to use in actions like `await page.goto('/')`. */
-		baseURL: "http://localhost:80",
+		baseURL: "http://localhost:5173",
 
 		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
 		trace: "on-first-retry",
diff --git a/ChatQnA/ui/svelte/src/lib/shared/components/upload/PasteKnowledge.svelte b/ChatQnA/ui/svelte/src/lib/shared/components/upload/PasteKnowledge.svelte
index c4a55aa4..d0758e77 100644
--- a/ChatQnA/ui/svelte/src/lib/shared/components/upload/PasteKnowledge.svelte
+++ b/ChatQnA/ui/svelte/src/lib/shared/components/upload/PasteKnowledge.svelte
@@ -37,10 +37,13 @@
 			name="text"
 			placeholder="URL"
 			bind:value={urlValue}
+			data-testid="paste-link"
 		/>
 		<Button
 			type="submit"
 			class="w-full rounded-none rounded-r-lg bg-blue-700"
+			data-testid="paste-click"
+
 			on:click={() => handelPasteURL()}>Confirm</Button
 		>
 	</div>
diff --git a/ChatQnA/ui/svelte/src/lib/shared/components/upload/upload-knowledge.svelte b/ChatQnA/ui/svelte/src/lib/shared/components/upload/upload-knowledge.svelte
index d1eb1356..b1be9770 100644
--- a/ChatQnA/ui/svelte/src/lib/shared/components/upload/upload-knowledge.svelte
+++ b/ChatQnA/ui/svelte/src/lib/shared/components/upload/upload-knowledge.svelte
@@ -42,6 +42,7 @@
 		bind:value
 		on:change={handleInput}
 		class="focus:border-blue-700 focus:ring-0"
+		data-testid="file-upload"
 	  />
 	</Label>
   </div>
diff --git a/ChatQnA/ui/svelte/src/routes/+page.svelte b/ChatQnA/ui/svelte/src/routes/+page.svelte
index 77c37a9b..e66871e5 100644
--- a/ChatQnA/ui/svelte/src/routes/+page.svelte
+++ b/ChatQnA/ui/svelte/src/routes/+page.svelte
@@ -177,7 +177,7 @@
 						class="text-md block w-full border-0 border-b-2 border-gray-300 px-1 py-4
 						text-gray-900 focus:border-gray-300 focus:ring-0 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
 						type="text"
-						id="chat-input"
+						data-testid="chat-input"
 						placeholder="Enter prompt here"
 						disabled={loading}
 						maxlength="1200"
@@ -211,6 +211,7 @@
 					<button
 						class="bg-primary text-primary-foreground hover:bg-primary/90 group flex items-center justify-center space-x-2 p-2"
 						type="button"
+						data-testid='clear-chat'
 						on:click={() => handelClearHistory()}
 						><svg
 							xmlns="http://www.w3.org/2000/svg"
diff --git a/ChatQnA/ui/svelte/tests/chatQnA.spec.ts b/ChatQnA/ui/svelte/tests/chatQnA.spec.ts
index 6a320a95..ee52e802 100644
--- a/ChatQnA/ui/svelte/tests/chatQnA.spec.ts
+++ b/ChatQnA/ui/svelte/tests/chatQnA.spec.ts
@@ -8,20 +8,65 @@ test.beforeEach(async ({ page }) => {
 });
 
 const CHAT_ITEMS = ["What is the total revenue of Nike in 2023?"];
+const UPLOAD_LINK = ["https://www.ces.tech/"];
+const FILE_PATH = "./test_file.txt";
+
+// Helper function to check notification text
+async function checkNotificationText(page, expectedText) {
+	const notificationText = await page.textContent(".notification");
+	expect(notificationText).toContain(expectedText);
+}
+
+// Helper function to enter message to chat
+async function enterMessageToChat(page, message) {
+	const newChat = page.getByTestId("chat-input");
+	await newChat.fill(message);
+	await newChat.press("Enter");
+	await expect(page.getByTestId("msg-time")).toBeVisible();
+}
+
+// Helper function to upload a file
+async function uploadFile(page, filePath) {
+	const fileUpload = page.getByTestId("file-upload");
+	await fileUpload.setInputFiles(filePath);
+	await checkNotificationText(page, "Uploaded successfully");
+}
+
+// Helper function to paste link
+async function pasteLink(page, link) {
+	const pasteLink = page.getByTestId("paste-link");
+	await pasteLink.fill(link);
+	const pasteClick = page.getByTestId("paste-click");
+	await pasteClick.click();
+	await checkNotificationText(page, "Uploaded successfully");
+}
 
 test.describe("New Chat", () => {
+	// chat
 	test("should enter message to chat", async ({ page }) => {
-		const newChat = page.getByPlaceholder("Enter prompt here");
-		console.log("newChat", newChat);
+		await enterMessageToChat(page, CHAT_ITEMS[0]);
+	});
 
-		await newChat.fill(CHAT_ITEMS[0]);
-		await newChat.press("Enter");
+	// clear chat
+	test("should clear chat", async ({ page }) => {
+		const clearChat = page.getByTestId("clear-chat");
+		await clearChat.click();
+	});
+});
 
-		// Wait for the result to appear on the page
-		//  await page.waitForSelector('#msg-time', { timeout: 60000 });
+test.describe("Upload file and create new Chat", () => {
+	// upload file
+	test("should upload a file", async ({ page }) => {
+		await uploadFile(page, FILE_PATH);
+	});
+
+	// paste link
+	test("should paste link", async ({ page }) => {
+		await pasteLink(page, UPLOAD_LINK[0]);
+	});
 
-		//  // Make sure the result is displayed as expected
-		//  const msgContent = await page.$eval('#msg-time', (element) => element.textContent);
-		//  expect(msgContent).toBeTruthy();
+	// chat with uploaded file and link
+	test("should test uploaded chat", async ({ page }) => {
+		await enterMessageToChat(page, CHAT_ITEMS[0]);
 	});
 });
diff --git a/ChatQnA/ui/svelte/tests/test_file.txt b/ChatQnA/ui/svelte/tests/test_file.txt
new file mode 100644
index 00000000..93fc5da9
--- /dev/null
+++ b/ChatQnA/ui/svelte/tests/test_file.txt
@@ -0,0 +1,104 @@
+Follow CES
+EXHIBIT
+REGISTER
+All together. All ON.
+Registration is now open for CES® 2024 — taking place Jan. 9-12, in Las Vegas.
+Flip the switch on global business opportunity with CES, where you can meet with partners, customers, media, investors, and policymakers from across the industry and the world all in one place.
+Don't miss your chance to be a part of the most powerful tech event in the world.
+KEYNOTE ANNOUNCEMENT
+Qualcomm CEO to Keynote CES 2024
+ Cristiano Amon
+ President and CEO, Qualcomm
+Anticipated Numbers for CES 2024
+130K+
+attendees
+1000+
+startups within Eureka Park 
+3500+
+exhibitors and a sold-out West Hall 
+ Learn more
+ arrow-black
+Featured Podcast
+Li-Fi Unleashes the Future of Esports
+Listen Nowarrow-black
+Featured Event
+Apply Today for CTA Match
+Learn Morearrow-black
+CES 2024 is ALL ON
+×
+Vehicle Technology
+With features like adaptive cruise control, collision prevention and lane guidance, technology is paving the way to safer roads. Discover what’s driving the innovations behind concept cars, connected vehicles and autonomous mobility. 
+Learn Morearrow-black
+ 
+Featured Podcast
+On the Fast Track to Autonomous Driving: Mobileye
+Read Morearrow-black
+Brunswick Boating Tech Smooths Rough Waters
+Register for CES 2024
+See the next generation of innovation at CES 2024.
+ Register Now
+Featured Exhibitors
+See the companies from across the globe that will be showcasing the latest in digital health, food tech, automotive tech, NFTs, gaming, smart home and more.
+ 
+ 
+ 
+ View 2024 Featured Exhibitors
+ arrow-black
+Apply for Eureka Park™️
+Eureka Park is the buzzworthy startup arena that provides a unique opportunity to launch a new product, service or idea. If you’re looking for your big break in the tech industry, Eureka Park is the place for you.
+ Apply Now
+Exhibit at CES
+CES is where business gets done.
+CASE STUDY
+VW
+Over a busy four days in Las Vegas, Volkswagen showed the world and media that its accomplishments transcend the legacy auto sector. It’s ID.7 sedan promises stellar performance and efficiency with a 435-mile range plus impressive features.
+Read Morearrow-black
+600K
+interactions on social media
+CES is a great opportunity, both from a business perspective in the networking sense and seeing what's going on in the tech field, and also it's a great opportunity from a media perspective because we see massive media attendance and we see a great deal of coverage.
+MARK GILLIES
+DIRECTOR OF PUBLIC RELATIONS AND REPUTATION, VOLKSWAGEN
+CES Success Stories 2023: Volkswagon
+×
+Want to Exhibit at CES 2024?
+Showcase your brand, launch your latest products and win business at the ultimate platform for innovation.
+ Contact Us
+Latest Articles
+ CES 2024 Sector Trends: Digital Health
+Read more
+arrow-black
+Nasdaq Keynote, CES 2024: Finance Taps Tech for Humanity
+Read more
+arrow-black
+Walmart Keynote at CES 2024: Disruptive Retail Tech
+Read more
+arrow-black
+Press Releases
+Qualcomm CEO Cristiano Amon to Highlight How We Will Interact with Our Devices in the AI Age During CES 2024 Keynote
+HD Hyundai to Keynote CES 2024 
+Elevance Health’s Gail Boudreaux to Keynote CES 2024
+ View all press releases
+ arrow-black
+CES is owned and produced by the Consumer Technology Association, which provides the ultimate platform for technology leaders to connect, collaborate, and propel consumer technology forward.
+ Become a CTA Member
+About CES
+CES Events
+Innovation Awards
+CES Tech Talk Podcast
+Promote Your Brand
+Topics
+Articles
+CES Success Stories
+Schedule
+Our Partners
+Information for:
+Exhibitors
+Media
+International
+Follow CES
+Code of Conduct
+Terms of Use
+Privacy
+Sitemap
+Copyright © 2003 - 2023. All rights reserved.
+CTATECH-PROD2
\ No newline at end of file