142 lines
6.8 KiB
TypeScript
142 lines
6.8 KiB
TypeScript
import { expect, test } from '@playwright/test'
|
|
import { authenticate, mockChatSocket, mockHermesApi, TEST_ACCESS_KEY } from './fixtures'
|
|
|
|
const sampleSession = {
|
|
id: 'sess-1',
|
|
title: 'First session',
|
|
source: 'cli',
|
|
created_at: 1760000000000,
|
|
updated_at: 1760000000000,
|
|
message_count: 2,
|
|
input_tokens: 0,
|
|
output_tokens: 0,
|
|
reasoning_tokens: 0,
|
|
}
|
|
|
|
// Arco 的 a-dropdown 没有 droplist prop：菜单内容必须走 #content 插槽 + a-doption。
|
|
// 传 :droplist 会被静默忽略，弹层能打开但列表是空的（历史上就是这么坏的）。
|
|
test('reasoning effort dropdown renders its options and applies the selection', async ({ page }) => {
|
|
await authenticate(page, TEST_ACCESS_KEY, 'research')
|
|
await mockHermesApi(page, { sessions: [sampleSession] })
|
|
await mockChatSocket(page)
|
|
|
|
await page.goto('/#/hermes/chat')
|
|
|
|
await page.locator('.reasoning-effort-button').click()
|
|
const popup = page.locator('.arco-trigger-popup').filter({ hasText: 'Minimal' })
|
|
await expect(popup).toBeVisible()
|
|
await expect(popup.locator('.arco-dropdown-option')).toHaveCount(7)
|
|
|
|
await popup.locator('.arco-dropdown-option', { hasText: 'High' }).first().click()
|
|
await expect(page.locator('.reasoning-effort-label')).toHaveText('High')
|
|
})
|
|
|
|
test('input settings dropdown renders its options and toggles auto play voice', async ({ page }) => {
|
|
await authenticate(page, TEST_ACCESS_KEY, 'research')
|
|
await mockHermesApi(page, { sessions: [sampleSession] })
|
|
await mockChatSocket(page)
|
|
|
|
await page.goto('/#/hermes/chat')
|
|
|
|
await page.locator('.input-settings-button').click()
|
|
const popup = page.locator('.arco-trigger-popup').filter({ hasText: 'Auto-play voice' })
|
|
await expect(popup).toBeVisible()
|
|
await expect(popup.locator('.arco-dropdown-option')).toHaveCount(2)
|
|
|
|
await popup.locator('.arco-dropdown-option').first().click()
|
|
await expect(page.locator('.settings-check').first()).toHaveText('✓')
|
|
})
|
|
|
|
test('session context menu renders flat items and its export submenu', async ({ page }) => {
|
|
await authenticate(page, TEST_ACCESS_KEY, 'research')
|
|
await mockHermesApi(page, { sessions: [sampleSession] })
|
|
await mockChatSocket(page)
|
|
|
|
await page.goto('/#/hermes/chat')
|
|
|
|
await page.locator('.session-item').first().click({ button: 'right' })
|
|
const popup = page.locator('.arco-trigger-popup').filter({ hasText: 'Rename' })
|
|
await expect(popup).toBeVisible()
|
|
// pin / rename / archive / workspace / model / export(submenu) / open-link / copy-link / copy-id
|
|
await expect(popup.locator('.arco-dropdown-option')).toHaveCount(9)
|
|
|
|
await popup.locator('.arco-dropdown-option', { hasText: 'Export' }).click()
|
|
await expect(page.locator('.arco-trigger-popup').filter({ hasText: 'Compressed' })).toBeVisible()
|
|
})
|
|
|
|
test('new chat selectors stay open after clicking their field and allow selection', async ({ page }) => {
|
|
await authenticate(page, TEST_ACCESS_KEY, 'research')
|
|
await mockHermesApi(page)
|
|
await page.route('**/api/hermes/available-models**', async route => {
|
|
const group = { provider: 'test-provider', label: 'Test Provider', models: ['test-model', 'other-model'] }
|
|
await route.fulfill({ json: {
|
|
default: 'test-model', default_provider: 'test-provider', groups: [group], allProviders: [group],
|
|
profiles: ['default', 'research'].map(profile => ({
|
|
profile, default: 'test-model', default_provider: 'test-provider', groups: [group],
|
|
})),
|
|
} })
|
|
})
|
|
await mockChatSocket(page)
|
|
await page.goto('/#/hermes/chat')
|
|
await page.getByRole('button', { name: 'New Chat', exact: true }).click()
|
|
const drawer = page.locator('.new-chat-drawer')
|
|
const selects = drawer.locator('.new-chat-field > .arco-select')
|
|
await expect(selects).toHaveCount(3)
|
|
await expect(selects.nth(1)).not.toHaveClass(/arco-select-disabled/)
|
|
|
|
for (const index of [0, 1, 2]) {
|
|
// Click the field chrome, not the internal input: a wrapping HTML label
|
|
// forwards this click to its input and can toggle the popup a second time.
|
|
await selects.nth(index).click({ position: { x: 8, y: 16 } })
|
|
const popup = page.locator('.arco-select-dropdown:visible')
|
|
await expect(popup).toBeVisible()
|
|
await page.waitForTimeout(300)
|
|
await expect(popup).toBeVisible()
|
|
const option = index === 0
|
|
? popup.locator('.arco-select-option', { hasText: 'research' })
|
|
: popup.locator('.arco-select-option').first()
|
|
await option.click()
|
|
await expect(popup).toHaveCount(0)
|
|
await expect(drawer).toBeVisible()
|
|
}
|
|
})
|
|
|
|
|
|
for (const viewport of [{ width: 1440, height: 900 }, { width: 390, height: 844 }, { width: 844, height: 390 }]) {
|
|
test(`Agent selector shows more profiles and supports searching at ${viewport.width}x${viewport.height}`, async ({ page }, testInfo) => {
|
|
await page.setViewportSize(viewport)
|
|
await authenticate(page, TEST_ACCESS_KEY, 'research')
|
|
await mockHermesApi(page)
|
|
await page.route(url => url.pathname === '/api/hermes/profiles', route => route.fulfill({
|
|
json: { profiles: ['research', ...Array.from({ length: 19 }, (_, index) => `profile-${String(index + 1).padStart(2, '0')}`)].map(name => ({ name, model: 'test-model', alias: '', active: name === 'research' })) },
|
|
}))
|
|
await mockChatSocket(page)
|
|
await page.goto('/#/hermes/chat')
|
|
if (viewport.width <= 768) await page.locator('.hamburger-btn').click()
|
|
await page.getByRole('button', { name: 'New Chat', exact: true }).click()
|
|
const selector = page.locator('.new-chat-drawer .new-chat-field > .arco-select').first()
|
|
await selector.click({ position: { x: 8, y: 16 } })
|
|
const popup = page.locator('.new-chat-profile-popup')
|
|
await expect(popup).toBeVisible()
|
|
const list = popup.locator('.arco-select-dropdown-list-wrapper')
|
|
await expect.poll(() => list.evaluate(element => element.clientHeight)).toBeGreaterThan(viewport.height > 600 ? 350 : 200)
|
|
const bounds = (await popup.boundingBox())!
|
|
expect(bounds.y).toBeGreaterThanOrEqual(0)
|
|
expect(bounds.y + bounds.height).toBeLessThanOrEqual(viewport.height)
|
|
const visibleOptions = await list.evaluate(element => {
|
|
const bounds = element.getBoundingClientRect()
|
|
return [...element.querySelectorAll('.arco-select-option')].filter(option => {
|
|
const rect = option.getBoundingClientRect()
|
|
return rect.top >= bounds.top && rect.bottom <= bounds.bottom
|
|
}).length
|
|
})
|
|
expect(visibleOptions).toBeGreaterThanOrEqual(viewport.height > 600 ? 10 : 5)
|
|
if (viewport.width === 390) await page.screenshot({ path: testInfo.outputPath('agent-profile-picker-mobile.png'), animations: 'disabled' })
|
|
await selector.locator('input').fill('profile-19')
|
|
await expect(popup.locator('.arco-select-option')).toHaveCount(1)
|
|
await popup.locator('.arco-select-option', { hasText: 'profile-19' }).click()
|
|
await expect(selector).toContainText('profile-19')
|
|
await expect(popup).toBeHidden()
|
|
})
|
|
}
|