Translate UT for UI (opea-project#423)

Signed-off-by: Yue, Wenjiao <wenjiao.yue@intel.com>

Author: WenjiaoYue

Translation/docker/ui/svelte/package.json

@@ -14,7 +14,7 @@
     "svelte": "^4.0.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.44.1",
+    "@playwright/test": "^1.45.2",
     "@sveltejs/adapter-auto": "^3.0.0",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/package": "^2.0.0",

Translation/docker/ui/svelte/playwright.config.ts

@@ -0,0 +1,54 @@
+// 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:5173",
+
+    /* 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: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+  ],
+});

Translation/docker/ui/svelte/src/routes/+page.svelte

@@ -128,6 +128,8 @@
           rows="25"
           placeholder="Input"
           bind:value={input}
+          data-testid="translate-input"
+
         />
         <textarea
           readonly
@@ -137,6 +139,7 @@
           rows="25"
           placeholder="Translation"
           bind:value={output}
+          data-testid="translate-output"
         />
       </div>
     </div>

Translation/docker/ui/svelte/tests/Translation.spec.ts

@@ -0,0 +1,30 @@
+// Copyright (C) 2024 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { test, expect, type Page } from "@playwright/test";
+
+// Initialization before each test
+test.beforeEach(async ({ page }) => {
+  await page.goto("/");
+});
+
+// Constants definition
+const TRANSLATE_ITEMS = ["hello"];
+
+// Helper function: Enter message to chat
+async function enterMessageToChat(page: Page, message: string) {
+  await page.getByTestId("translate-input").click();
+  await page.getByTestId("translate-input").fill(message);
+  await page.waitForTimeout(10000);
+  const outputText = await page.getByTestId("translate-output").inputValue();
+  console.log("Actual text:", outputText);
+  await expect(page.getByTestId("translate-output")).not.toHaveValue("");
+}
+
+// Test description: New Doc Summary
+test.describe("New Translation", () => {
+  // Test: Enter message to summary
+  test("should enter message to translate", async ({ page }) => {
+    await enterMessageToChat(page, TRANSLATE_ITEMS[0]);
+  });
+});

Translation/tests/test_translation_on_gaudi.sh

@@ -35,6 +35,8 @@ function start_services() {
     export LLM_SERVICE_HOST_IP=${ip_address}
     export BACKEND_SERVICE_ENDPOINT="http://${ip_address}:8888/v1/translation"
 
+    sed -i "s/backend_address/$ip_address/g" $WORKPATH/docker/ui/svelte/.env
+
     if [[ "$IMAGE_REPO" != "" ]]; then
         # Replace the container name with a test-specific name
         echo "using image repository $IMAGE_REPO and image tag $IMAGE_TAG"
@@ -151,6 +153,7 @@ function main() {
 
     validate_microservices
     validate_megaservice
+    validate_frontend
 
     stop_docker
     echo y | docker system prune

Translation/tests/test_translation_on_xeon.sh

@@ -12,13 +12,15 @@ function build_docker_images() {
     cd $WORKPATH
     git clone https://github.com/opea-project/GenAIComps.git
     cd GenAIComps
+
     docker build --no-cache -t opea/llm-tgi:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f comps/llms/text-generation/tgi/Dockerfile .
 
     cd $WORKPATH/docker
     docker build --no-cache -t opea/translation:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f Dockerfile .
 
     cd $WORKPATH/docker/ui
     docker build --no-cache -t opea/translation-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f docker/Dockerfile .
+
     docker images
 }
 
@@ -32,6 +34,8 @@ function start_services() {
     export LLM_SERVICE_HOST_IP=${ip_address}
     export BACKEND_SERVICE_ENDPOINT="http://${ip_address}:8888/v1/translation"
 
+    sed -i "s/backend_address/$ip_address/g" $WORKPATH/docker/ui/svelte/.env
+
     if [[ "$IMAGE_REPO" != "" ]]; then
         # Replace the container name with a test-specific name
         echo "using image repository $IMAGE_REPO and image tag $IMAGE_TAG"
@@ -146,6 +150,7 @@ function main() {
 
     validate_microservices
     validate_megaservice
+    validate_frontend
 
     stop_docker
     echo y | docker system prune