From cdab762a6acd81230803030e1d6b706eeaa2c3b6 Mon Sep 17 00:00:00 2001
From: Van-QA <van@jan.ai>
Date: Wed, 10 Apr 2024 16:27:22 +0700
Subject: [PATCH] feat: add new test for the Use model button from Hub

---
 electron/tests/e2e/hub.e2e.spec.ts            |  7 +++++-
 electron/tests/e2e/thread.e2e.spec.ts         | 23 +++++++++++--------
 electron/tests/pages/basePage.ts              | 13 +++++++----
 web/screens/Chat/ErrorMessage/index.tsx       |  2 +-
 .../ExploreModelItemHeader/index.tsx          |  1 +
 5 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/electron/tests/e2e/hub.e2e.spec.ts b/electron/tests/e2e/hub.e2e.spec.ts
index d968e76419..23d4d0b6d7 100644
--- a/electron/tests/e2e/hub.e2e.spec.ts
+++ b/electron/tests/e2e/hub.e2e.spec.ts
@@ -1,4 +1,4 @@
-import { test, appInfo } from '../config/fixtures'
+import { test, appInfo, page, TIMEOUT } from '../config/fixtures'
 import { expect } from '@playwright/test'
 
 test.beforeAll(async () => {
@@ -16,4 +16,9 @@ test.beforeAll(async () => {
 test('explores hub', async ({ hubPage }) => {
   await hubPage.navigateByMenu()
   await hubPage.verifyContainerVisible()
+  const useModelBtn= page.getByTestId(/^use-model-btn-.*/).first()
+
+  await expect(useModelBtn).toBeVisible({
+    timeout: TIMEOUT,
+  })
 })
diff --git a/electron/tests/e2e/thread.e2e.spec.ts b/electron/tests/e2e/thread.e2e.spec.ts
index b03a6c81de..bc7acf2819 100644
--- a/electron/tests/e2e/thread.e2e.spec.ts
+++ b/electron/tests/e2e/thread.e2e.spec.ts
@@ -1,10 +1,20 @@
 import { expect } from '@playwright/test'
 import { page, test, TIMEOUT } from '../config/fixtures'
 
-test('create thread button', async () => {
-  const settingsBtn = await page
+test('Select GPT model for chat via Use model button from Jan Hub', async ({ hubPage }) => {
+  await hubPage.navigateByMenu()
+  await hubPage.verifyContainerVisible()
+
+  // Select the first GPT model
+  await page
+    .locator('[data-testid^="use-model-btn"][data-testid*="gpt"]')
+    .first().click()
+
+  // Attempt to create thread and chat in Thread page
+  await page
     .getByTestId('btn-create-thread')
     .click()
+
   await page
     .getByTestId('txt-input-chat')
     .fill('dummy value')
@@ -13,13 +23,8 @@ test('create thread button', async () => {
     .getByTestId('btn-send-chat')
     .click()
 
-  expect([settingsBtn].filter((e) => !e).length).toBe(0)
-  // Chat section should be there
-  await page.getByTestId('Local API Server').first().click({
-    timeout: TIMEOUT,
-  })
-  const localServer = page.getByTestId('local-server-testid').first()
-  await expect(localServer).toBeVisible({
+  const APIKeyError = page.getByTestId('invalid-API-key-error')
+  await expect(APIKeyError).toBeVisible({
     timeout: TIMEOUT,
   })
 })
diff --git a/electron/tests/pages/basePage.ts b/electron/tests/pages/basePage.ts
index 4e16a3c232..1817bc7316 100644
--- a/electron/tests/pages/basePage.ts
+++ b/electron/tests/pages/basePage.ts
@@ -8,8 +8,9 @@ export class BasePage {
   constructor(
     protected readonly page: Page,
     readonly action: CommonActions,
-    protected containerId: string
-  ) {}
+    protected containerId: string,
+  ) {
+  }
 
   public getValue(key: string) {
     return this.action.getValue(key)
@@ -24,7 +25,11 @@ export class BasePage {
   }
 
   async navigateByMenu() {
-    await this.page.getByTestId(this.menuId).first().click()
+    await this.clickFirstElement(this.menuId)
+  }
+
+  async clickFirstElement(testId: string) {
+    await this.page.getByTestId(testId).first().click()
   }
 
   async verifyContainerVisible() {
@@ -36,7 +41,7 @@ export class BasePage {
     await this.isElementVisible('img[alt="Jan - Logo"]')
   }
 
-  //wait and find a specific element with it's selector and return Visible
+  //wait and find a specific element with its selector and return Visible
   async isElementVisible(selector: any) {
     let isVisible = true
     await this.page
diff --git a/web/screens/Chat/ErrorMessage/index.tsx b/web/screens/Chat/ErrorMessage/index.tsx
index 60f4a9ada1..69f822dadc 100644
--- a/web/screens/Chat/ErrorMessage/index.tsx
+++ b/web/screens/Chat/ErrorMessage/index.tsx
@@ -43,7 +43,7 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
       case ErrorCode.InvalidApiKey:
       case ErrorCode.InvalidRequestError:
         return (
-          <span>
+          <span data-testid="invalid-API-key-error">
             Invalid API key. Please check your API key from{' '}
             <button
               className="font-medium text-primary dark:text-blue-400"
diff --git a/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx b/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
index 86af5e3dd1..59f47366ae 100644
--- a/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
+++ b/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
@@ -121,6 +121,7 @@ const ExploreModelItemHeader: React.FC<Props> = ({ model, onClick, open }) => {
             className="min-w-[98px]"
             onClick={onUseModelClick}
             disabled={serverEnabled}
+            data-testid={`use-model-btn-${model.id}`}
           >
             Use
           </Button>