feat: add new test for the Use model button from Hub

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,
+  })
 })

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,
   })
 })

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

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"

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>