Add UI test for ChatQnA (#134)

Signed-off-by: Yue, Wenjiao <[email protected]>

.gitignore

@@ -3,5 +3,6 @@
 **/package-lock.json
 **/playwright-report/
 **/playwright/.cache/
+**/test-results/
 
 __pycache__/

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",

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>

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>

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"

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

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