Increase timeout for explore.e2e.spec test (#1844)

* Increase timeout for explore.e2e.spec test

* fix: test cases and timeout

---------

Co-authored-by: Hien To <tominhhien97@gmail.com>
Co-authored-by: Louis <louis@jan.ai>

electron/playwright.config.ts

@@ -1,9 +1,9 @@
-import { PlaywrightTestConfig } from "@playwright/test";
+import { PlaywrightTestConfig } from '@playwright/test'
 
 const config: PlaywrightTestConfig = {
-  testDir: "./tests",
+  testDir: './tests',
   retries: 0,
-  timeout: 120000,
+  globalTimeout: 300000,
-};
+}
 
-export default config;
+export default config

electron/tests/hub.e2e.spec.ts

@@ -9,6 +9,7 @@ import {
 
 let electronApp: ElectronApplication
 let page: Page
+const TIMEOUT: number = parseInt(process.env.TEST_TIMEOUT || '300000')
 
 test.beforeAll(async () => {
   process.env.CI = 'e2e'
@@ -26,7 +27,9 @@ test.beforeAll(async () => {
   })
   await stubDialog(electronApp, 'showMessageBox', { response: 1 })
 
-  page = await electronApp.firstWindow()
+  page = await electronApp.firstWindow({
+    timeout: TIMEOUT,
+  })
 })
 
 test.afterAll(async () => {
@@ -34,8 +37,13 @@ test.afterAll(async () => {
   await page.close()
 })
 
-test('explores models', async () => {
+test('explores hub', async () => {
-  await page.getByTestId('Hub').first().click()
+  // Set the timeout for this test to 60 seconds
-  await page.getByTestId('testid-explore-models').isVisible()
+  test.setTimeout(TIMEOUT)
-  //   More test cases here...
+  await page.getByTestId('Hub').first().click({
+    timeout: TIMEOUT,
+  })
+  await page.getByTestId('hub-container-test-id').isVisible({
+    timeout: TIMEOUT,
+  })
 })

electron/tests/main.e2e.spec.ts

@@ -1,55 +0,0 @@
-import { _electron as electron } from 'playwright'
-import { ElectronApplication, Page, expect, test } from '@playwright/test'
-
-import {
-  findLatestBuild,
-  parseElectronApp,
-  stubDialog,
-} from 'electron-playwright-helpers'
-
-let electronApp: ElectronApplication
-let page: Page
-
-test.beforeAll(async () => {
-  process.env.CI = 'e2e'
-
-  const latestBuild = findLatestBuild('dist')
-  expect(latestBuild).toBeTruthy()
-
-  // parse the packaged Electron app and find paths and other info
-  const appInfo = parseElectronApp(latestBuild)
-  expect(appInfo).toBeTruthy()
-  expect(appInfo.asar).toBe(true)
-  expect(appInfo.executable).toBeTruthy()
-  expect(appInfo.main).toBeTruthy()
-  expect(appInfo.name).toBe('jan')
-  expect(appInfo.packageJson).toBeTruthy()
-  expect(appInfo.packageJson.name).toBe('jan')
-  expect(appInfo.platform).toBeTruthy()
-  expect(appInfo.platform).toBe(process.platform)
-  expect(appInfo.resourcesDir).toBeTruthy()
-
-  electronApp = await electron.launch({
-    args: [appInfo.main], // main file from package.json
-    executablePath: appInfo.executable, // path to the Electron executable
-  })
-  await stubDialog(electronApp, 'showMessageBox', { response: 1 })
-
-  page = await electronApp.firstWindow()
-})
-
-test.afterAll(async () => {
-  await electronApp.close()
-  await page.close()
-})
-
-test('renders the home page', async () => {
-  expect(page).toBeDefined()
-
-  // Welcome text is available
-  const welcomeText = await page
-    .getByTestId('testid-welcome-title')
-    .first()
-    .isVisible()
-  expect(welcomeText).toBe(false)
-})

electron/tests/navigation.e2e.spec.ts

@@ -9,6 +9,7 @@ import {
 
 let electronApp: ElectronApplication
 let page: Page
+const TIMEOUT: number = parseInt(process.env.TEST_TIMEOUT || '300000')
 
 test.beforeAll(async () => {
   process.env.CI = 'e2e'
@@ -26,7 +27,9 @@ test.beforeAll(async () => {
   })
   await stubDialog(electronApp, 'showMessageBox', { response: 1 })
 
-  page = await electronApp.firstWindow()
+  page = await electronApp.firstWindow({
+    timeout: TIMEOUT,
+  })
 })
 
 test.afterAll(async () => {
@@ -35,20 +38,20 @@ test.afterAll(async () => {
 })
 
 test('renders left navigation panel', async () => {
-  // Chat section should be there
-  const chatSection = await page.getByTestId('Chat').first().isVisible()
-  expect(chatSection).toBe(false)
-
-  // Home actions
-  /* Disable unstable feature tests
-   ** const botBtn = await page.getByTestId("Bot").first().isEnabled();
-   ** Enable back when it is whitelisted
-   */
-
   const systemMonitorBtn = await page
     .getByTestId('System Monitor')
     .first()
-    .isEnabled()
+    .isEnabled({
-  const settingsBtn = await page.getByTestId('Settings').first().isEnabled()
+      timeout: TIMEOUT,
+    })
+  const settingsBtn = await page
+    .getByTestId('Thread')
+    .first()
+    .isEnabled({ timeout: TIMEOUT })
   expect([systemMonitorBtn, settingsBtn].filter((e) => !e).length).toBe(0)
+  // Chat section should be there
+  const apiServer = await page.getByTestId('Local API Server').first()
+  expect(apiServer).toBeVisible({
+    timeout: TIMEOUT,
+  })
 })

electron/tests/settings.e2e.spec.ts

@@ -9,6 +9,7 @@ import {
 
 let electronApp: ElectronApplication
 let page: Page
+const TIMEOUT: number = parseInt(process.env.TEST_TIMEOUT || '300000')
 
 test.beforeAll(async () => {
   process.env.CI = 'e2e'
@@ -26,7 +27,9 @@ test.beforeAll(async () => {
   })
   await stubDialog(electronApp, 'showMessageBox', { response: 1 })
 
-  page = await electronApp.firstWindow()
+  page = await electronApp.firstWindow({
+    timeout: TIMEOUT,
+  })
 })
 
 test.afterAll(async () => {
@@ -35,6 +38,7 @@ test.afterAll(async () => {
 })
 
 test('shows settings', async () => {
-  await page.getByTestId('Settings').first().click()
+  await page.getByTestId('Settings').first().click({ timeout: TIMEOUT })
-  await page.getByTestId('testid-setting-description').isVisible()
+  const settingDescription = page.getByTestId('testid-setting-description')
+  expect(settingDescription).toBeVisible({ timeout: TIMEOUT })
 })

electron/tests/system-monitor.e2e.spec.ts

@@ -1,41 +0,0 @@
-import { _electron as electron } from 'playwright'
-import { ElectronApplication, Page, expect, test } from '@playwright/test'
-
-import {
-  findLatestBuild,
-  parseElectronApp,
-  stubDialog,
-} from 'electron-playwright-helpers'
-
-let electronApp: ElectronApplication
-let page: Page
-
-test.beforeAll(async () => {
-  process.env.CI = 'e2e'
-
-  const latestBuild = findLatestBuild('dist')
-  expect(latestBuild).toBeTruthy()
-
-  // parse the packaged Electron app and find paths and other info
-  const appInfo = parseElectronApp(latestBuild)
-  expect(appInfo).toBeTruthy()
-
-  electronApp = await electron.launch({
-    args: [appInfo.main], // main file from package.json
-    executablePath: appInfo.executable, // path to the Electron executable
-  })
-  await stubDialog(electronApp, 'showMessageBox', { response: 1 })
-
-  page = await electronApp.firstWindow()
-})
-
-test.afterAll(async () => {
-  await electronApp.close()
-  await page.close()
-})
-
-test('shows system monitor', async () => {
-  await page.getByTestId('System Monitor').first().click()
-  await page.getByTestId('testid-system-monitor').isVisible()
-  //   More test cases here...
-})

web/screens/ExploreModels/index.tsx

@@ -52,9 +52,12 @@ const ExploreModelsScreen = () => {
   if (loading) return <Loader description="loading ..." />
 
   return (
-    <div className="flex h-full w-full overflow-y-auto bg-background">
+    <div
+      className="flex h-full w-full overflow-y-auto bg-background"
+      data-testid="hub-container-test-id"
+    >
       <div className="h-full w-full p-4">
-        <div className="h-full" data-test-id="testid-explore-models">
+        <div className="h-full">
           <ScrollArea>
             <div className="relative">
               <img

web/screens/Settings/index.tsx

@@ -54,7 +54,10 @@ const SettingsScreen = () => {
   }, [])
 
   return (
-    <div className="flex h-full bg-background">
+    <div
+      className="flex h-full bg-background"
+      data-testid="testid-setting-description"
+    >
       <div className="flex h-full w-64 flex-shrink-0 flex-col overflow-y-auto border-r border-border">
         <ScrollArea className="h-full w-full">
           <div className="px-6 py-4">

web/screens/SystemMonitor/index.tsx

@@ -35,7 +35,7 @@ export default function SystemMonitorScreen() {
   return (
     <div className="flex h-full w-full bg-background dark:bg-background">
       <ScrollArea className="h-full w-full">
-        <div className="h-full p-8" data-test-id="testid-system-monitor">
+        <div className="h-full p-8" data-testid="testid-system-monitor">
           <div className="grid grid-cols-2 gap-8 lg:grid-cols-3">
             <div className="rounded-xl border border-border p-4">
               <div className="flex items-center justify-between">