From 355d0b64de42b305ce99fb9e1aae2c8127ddc923 Mon Sep 17 00:00:00 2001 From: WenjiaoYue Date: Mon, 13 May 2024 11:51:04 +0800 Subject: [PATCH] ChatQnA UT Playwright (#121) Signed-off-by: Yue, Wenjiao --- .gitignore | 2 + AudioQnA/ui/svelte/package.json | 2 +- ChatQnA/ui/svelte/.env | 2 +- ChatQnA/ui/svelte/package.json | 4 +- ChatQnA/ui/svelte/playwright.config.ts | 83 +++++++++++++++++++ .../ui/svelte/src/lib/network/chat/Network.ts | 1 - ChatQnA/ui/svelte/src/routes/+page.svelte | 2 + ChatQnA/ui/svelte/tests/chatQnA.spec.ts | 27 ++++++ SearchQnA/ui/svelte/package.json | 2 +- .../src/lib/modules/chat/MessageTimer.svelte | 3 +- 10 files changed, 122 insertions(+), 6 deletions(-) create mode 100644 ChatQnA/ui/svelte/playwright.config.ts create mode 100644 ChatQnA/ui/svelte/tests/chatQnA.spec.ts diff --git a/.gitignore b/.gitignore index 76f7614a0..d4f57bcc0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,7 @@ **/node_modules **/.svelte-kit **/package-lock.json +**/playwright-report/ +**/playwright/.cache/ __pycache__/ \ No newline at end of file diff --git a/AudioQnA/ui/svelte/package.json b/AudioQnA/ui/svelte/package.json index c9a150a99..f71d3c53a 100644 --- a/AudioQnA/ui/svelte/package.json +++ b/AudioQnA/ui/svelte/package.json @@ -3,7 +3,7 @@ "version": "0.0.1", "private": true, "scripts": { - "dev": "vite dev --port 5175 --host 0.0.0.0", + "dev": "vite dev", "build": "vite build", "preview": "vite preview", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", diff --git a/ChatQnA/ui/svelte/.env b/ChatQnA/ui/svelte/.env index 48bf77994..a7587ef3e 100644 --- a/ChatQnA/ui/svelte/.env +++ b/ChatQnA/ui/svelte/.env @@ -1 +1 @@ -DOC_BASE_URL = 'http://localhost:8000/v1/rag' \ No newline at end of file +DOC_BASE_URL = 'http://10.7.4.144:8000/v1/rag' \ No newline at end of file diff --git a/ChatQnA/ui/svelte/package.json b/ChatQnA/ui/svelte/package.json index 8cae83ec9..3bcef3f8c 100644 --- a/ChatQnA/ui/svelte/package.json +++ b/ChatQnA/ui/svelte/package.json @@ -3,7 +3,7 @@ "version": "0.0.1", "private": true, "scripts": { - "dev": "vite dev --port 80 --host 0.0.0.0", + "dev": "vite dev", "build": "vite build", "preview": "vite preview", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", @@ -12,6 +12,7 @@ "format": "prettier --write ." }, "devDependencies": { + "@playwright/test": "^1.33.0", "@fortawesome/free-solid-svg-icons": "6.2.0", "@sveltejs/adapter-auto": "1.0.0-next.75", "@sveltejs/kit": "^1.30.4", @@ -53,6 +54,7 @@ "ramda": "^0.29.0", "sse.js": "^0.6.1", "svelte-notifications": "^0.9.98", + "playwright": "^1.44.0", "svrollbar": "^0.12.0" } } diff --git a/ChatQnA/ui/svelte/playwright.config.ts b/ChatQnA/ui/svelte/playwright.config.ts new file mode 100644 index 000000000..b574e3b40 --- /dev/null +++ b/ChatQnA/ui/svelte/playwright.config.ts @@ -0,0 +1,83 @@ +// Copyright (C) 2024 Intel Corporation +// SPDX-License-Identifier: Apache-2.0 + +import { defineConfig, devices } from "@playwright/test"; + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// require('dotenv').config(); + +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + testDir: "./tests", + /* Maximum time one test can run for. */ + timeout: 30 * 1000, + expect: { + /** + * Maximum time expect() should wait for the condition to be met. + * For example in `await expect(locator).toHaveText();` + */ + timeout: 5000, + }, + /* Run tests in files in parallel */ + fullyParallel: true, + /* Fail the build on CI if you accidentally left test.only in the source code. */ + forbidOnly: !!process.env.CI, + /* Retry on CI only */ + retries: process.env.CI ? 2 : 0, + /* Opt out of parallel tests on CI. */ + workers: process.env.CI ? 1 : undefined, + /* Reporter to use. See https://playwright.dev/docs/test-reporters */ + reporter: [["html", { open: "never" }]], + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + /* 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", + + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: "on-first-retry", + }, + + /* Configure projects for major browsers */ + projects: [ + { + name: "chromium", + use: { ...devices["Desktop Chrome"] }, + }, + + /* Test against mobile viewports. */ + // { + // name: 'Mobile Chrome', + // use: { ...devices['Pixel 5'] }, + // }, + // { + // name: 'Mobile Safari', + // use: { ...devices['iPhone 12'] }, + // }, + + /* Test against branded browsers. */ + // { + // name: 'Microsoft Edge', + // use: { channel: 'msedge' }, + // }, + // { + // name: 'Google Chrome', + // use: { channel: 'chrome' }, + // }, + ], + + /* Folder for test artifacts such as screenshots, videos, traces, etc. */ + // outputDir: 'test-results/', + + /* Run your local dev server before starting the tests */ + // webServer: { + // command: 'npm run start', + // port: 3000, + // }, +}); diff --git a/ChatQnA/ui/svelte/src/lib/network/chat/Network.ts b/ChatQnA/ui/svelte/src/lib/network/chat/Network.ts index b13d16ca9..8cfee47e0 100644 --- a/ChatQnA/ui/svelte/src/lib/network/chat/Network.ts +++ b/ChatQnA/ui/svelte/src/lib/network/chat/Network.ts @@ -23,7 +23,6 @@ export async function fetchTextStream(query: string, knowledge_base_id: string) payload = { query: query, - knowledge_base_id: knowledge_base_id, }; url = `${DOC_BASE_URL}/chat_stream`; diff --git a/ChatQnA/ui/svelte/src/routes/+page.svelte b/ChatQnA/ui/svelte/src/routes/+page.svelte index c3469a799..77c37a9b0 100644 --- a/ChatQnA/ui/svelte/src/routes/+page.svelte +++ b/ChatQnA/ui/svelte/src/routes/+page.svelte @@ -177,6 +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" placeholder="Enter prompt here" disabled={loading} maxlength="1200" @@ -195,6 +196,7 @@ } }} type="submit" + id="send" class="absolute bottom-2.5 end-2.5 px-4 py-2 text-sm font-medium text-white dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" > diff --git a/ChatQnA/ui/svelte/tests/chatQnA.spec.ts b/ChatQnA/ui/svelte/tests/chatQnA.spec.ts new file mode 100644 index 000000000..6a320a95a --- /dev/null +++ b/ChatQnA/ui/svelte/tests/chatQnA.spec.ts @@ -0,0 +1,27 @@ +// Copyright (C) 2024 Intel Corporation +// SPDX-License-Identifier: Apache-2.0 + +import { test, expect, type Page } from "@playwright/test"; + +test.beforeEach(async ({ page }) => { + await page.goto("/"); +}); + +const CHAT_ITEMS = ["What is the total revenue of Nike in 2023?"]; + +test.describe("New Chat", () => { + test("should enter message to chat", async ({ page }) => { + const newChat = page.getByPlaceholder("Enter prompt here"); + console.log("newChat", newChat); + + await newChat.fill(CHAT_ITEMS[0]); + await newChat.press("Enter"); + + // Wait for the result to appear on the page + // await page.waitForSelector('#msg-time', { timeout: 60000 }); + + // // Make sure the result is displayed as expected + // const msgContent = await page.$eval('#msg-time', (element) => element.textContent); + // expect(msgContent).toBeTruthy(); + }); +}); diff --git a/SearchQnA/ui/svelte/package.json b/SearchQnA/ui/svelte/package.json index 8320d8fbe..404e71a9f 100644 --- a/SearchQnA/ui/svelte/package.json +++ b/SearchQnA/ui/svelte/package.json @@ -3,7 +3,7 @@ "version": "0.0.1", "private": true, "scripts": { - "dev": "vite dev --port 5174 --host 0.0.0.0", + "dev": "vite dev", "build": "vite build", "preview": "vite preview", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", diff --git a/SearchQnA/ui/svelte/src/lib/modules/chat/MessageTimer.svelte b/SearchQnA/ui/svelte/src/lib/modules/chat/MessageTimer.svelte index 836758f02..9416cc879 100644 --- a/SearchQnA/ui/svelte/src/lib/modules/chat/MessageTimer.svelte +++ b/SearchQnA/ui/svelte/src/lib/modules/chat/MessageTimer.svelte @@ -58,7 +58,8 @@ /> -
+
End to End Time:

{time}s