Add 'aiui/' from commit 'e30ac1d1069532fb6d652d87e2d4a2fe9d1b4773'
git-subtree-dir: aiui git-subtree-mainline:0c4826f8ccgit-subtree-split:e30ac1d106
This commit is contained in:
archipelago
@@ -0,0 +1,208 @@
|
||||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test.describe('Content surfaces', () => {
|
||||
test('empty state shows when no conversation selected', async ({ page }) => {
|
||||
await page.goto('/')
|
||||
const main = page.locator('main.path-glass-card')
|
||||
await expect(main).toBeVisible()
|
||||
})
|
||||
|
||||
test('chat can receive input', async ({ page }) => {
|
||||
await page.goto('/')
|
||||
await page.waitForLoadState('networkidle')
|
||||
const input = page.getByPlaceholder(/Message AIUI/)
|
||||
await input.click()
|
||||
await input.pressSequentially('Recommend some films')
|
||||
await expect(input).toHaveValue('Recommend some films', { timeout: 3000 })
|
||||
})
|
||||
|
||||
test('films surface: films conversation loads and shows film cards', async ({ page }) => {
|
||||
await Promise.all([
|
||||
page.waitForResponse((res) => res.url().includes('dev-chats') && res.status() === 200, { timeout: 15000 }),
|
||||
page.goto('/'),
|
||||
])
|
||||
await expect(page.getByText('Recommend some sci-fi films')).toBeVisible({ timeout: 10000 })
|
||||
await page.getByRole('button', { name: /View all \d+ films/i }).click()
|
||||
await expect(page.locator('main').getByText('Blade Runner 2049').first()).toBeVisible({ timeout: 5000 })
|
||||
})
|
||||
|
||||
test('films surface: clicking assistant bubble opens panel', async ({ page }) => {
|
||||
await Promise.all([
|
||||
page.waitForResponse((res) => res.url().includes('dev-chats') && res.status() === 200, { timeout: 15000 }),
|
||||
page.goto('/'),
|
||||
])
|
||||
await expect(page.getByText('Recommend some sci-fi films')).toBeVisible({ timeout: 10000 })
|
||||
await page.locator('.path-glass-bubble').filter({ hasText: /Blade Runner|Arrival|Dune/ }).first().click()
|
||||
await expect(page.locator('main').getByText('Blade Runner 2049').first()).toBeVisible({ timeout: 5000 })
|
||||
})
|
||||
|
||||
test('magazine surface: BIP brief shows sections', async ({ page }) => {
|
||||
await Promise.all([
|
||||
page.waitForResponse((res) => res.url().includes('dev-chats') && res.status() === 200, { timeout: 15000 }),
|
||||
page.goto('/'),
|
||||
])
|
||||
await page.locator('aside button').filter({ has: page.locator('h2') }).first().click()
|
||||
await page.getByRole('button', { name: 'BIP 110 brief' }).click()
|
||||
await expect(page.getByText(/BIP 110|Pro camp|Summary/i).first()).toBeVisible({ timeout: 8000 })
|
||||
await page.getByRole('button', { name: 'View brief' }).click()
|
||||
await expect(page.getByText(/AI Brief|Summary|Pro camp/i).first()).toBeVisible({ timeout: 5000 })
|
||||
})
|
||||
|
||||
test('songs surface: songs conversation shows song cards', async ({ page }) => {
|
||||
await Promise.all([
|
||||
page.waitForResponse((res) => res.url().includes('dev-chats') && res.status() === 200, { timeout: 15000 }),
|
||||
page.goto('/'),
|
||||
])
|
||||
await page.locator('aside button').filter({ has: page.locator('h2') }).first().click()
|
||||
await page.getByRole('button', { name: 'Music recommendations' }).click()
|
||||
await expect(page.getByText('Never Meant').first()).toBeVisible({ timeout: 8000 })
|
||||
await page.getByRole('button', { name: /View all \d+ songs/i }).click()
|
||||
await expect(page.locator('main').getByText('Never Meant').first()).toBeVisible({ timeout: 5000 })
|
||||
})
|
||||
|
||||
test('podcasts surface: podcasts conversation shows podcast cards', async ({ page }) => {
|
||||
await Promise.all([
|
||||
page.waitForResponse((res) => res.url().includes('dev-chats') && res.status() === 200, { timeout: 15000 }),
|
||||
page.goto('/'),
|
||||
])
|
||||
await page.locator('aside button').filter({ has: page.locator('h2') }).first().click()
|
||||
await page.getByRole('button', { name: 'Bitcoin podcasts' }).click()
|
||||
await expect(page.getByText('What Bitcoin Did').first()).toBeVisible({ timeout: 8000 })
|
||||
await page.getByRole('button', { name: /View all \d+ podcasts/i }).click()
|
||||
await expect(page.locator('main').getByText('What Bitcoin Did').first()).toBeVisible({ timeout: 5000 })
|
||||
})
|
||||
|
||||
test('websites surface: websites tab shows link cards', async ({ page }) => {
|
||||
await Promise.all([
|
||||
page.waitForResponse((res) => res.url().includes('dev-chats') && res.status() === 200, { timeout: 15000 }),
|
||||
page.goto('/'),
|
||||
])
|
||||
await page.locator('aside button').filter({ has: page.locator('h2') }).first().click()
|
||||
await page.getByRole('button', { name: 'Bitcoin resources' }).click()
|
||||
await expect(page.getByText('Bitcoin Magazine').first()).toBeVisible({ timeout: 8000 })
|
||||
await page.getByRole('button', { name: /View all \d+ websites/i }).click()
|
||||
await expect(page.locator('main').getByText('Bitcoin Magazine').first()).toBeVisible({ timeout: 5000 })
|
||||
})
|
||||
|
||||
test('news surface: news conversation shows articles', async ({ page }) => {
|
||||
await Promise.all([
|
||||
page.waitForResponse((res) => res.url().includes('dev-chats') && res.status() === 200, { timeout: 15000 }),
|
||||
page.goto('/'),
|
||||
])
|
||||
await page.locator('aside button').filter({ has: page.locator('h2') }).first().click()
|
||||
await page.getByRole('button', { name: 'Latest Bitcoin news' }).click()
|
||||
await expect(page.getByText(/Bitcoin hits|ETF inflows/i).first()).toBeVisible({ timeout: 8000 })
|
||||
await page.getByRole('button', { name: /View all \d+ articles/i }).click()
|
||||
await expect(page.locator('main').getByText(/Bitcoin hits|ETF inflows/i).first()).toBeVisible({ timeout: 5000 })
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('Chat interactions', () => {
|
||||
test('sends a message and receives streaming response', async ({ page }) => {
|
||||
await Promise.all([
|
||||
page.waitForResponse((res) => res.url().includes('dev-chats') && res.status() === 200, { timeout: 15000 }),
|
||||
page.goto('/'),
|
||||
])
|
||||
await page.waitForLoadState('networkidle')
|
||||
const input = page.getByPlaceholder(/Message AIUI/)
|
||||
await input.click()
|
||||
await input.fill('Hello')
|
||||
await input.press('Enter')
|
||||
// User message should appear in chat
|
||||
await expect(page.getByText('Hello').first()).toBeVisible({ timeout: 5000 })
|
||||
})
|
||||
|
||||
test('content panel shows film cards when AI mentions films', async ({ page }) => {
|
||||
await Promise.all([
|
||||
page.waitForResponse((res) => res.url().includes('dev-chats') && res.status() === 200, { timeout: 15000 }),
|
||||
page.goto('/'),
|
||||
])
|
||||
await expect(page.getByText('Recommend some sci-fi films')).toBeVisible({ timeout: 10000 })
|
||||
// Film cards should be visible inline in assistant message
|
||||
await expect(page.getByText('Blade Runner 2049').first()).toBeVisible({ timeout: 5000 })
|
||||
// Open panel via "View all" button
|
||||
await page.getByRole('button', { name: /View all \d+ films/i }).click()
|
||||
await expect(page.locator('main').getByText('Blade Runner 2049').first()).toBeVisible({ timeout: 5000 })
|
||||
})
|
||||
|
||||
test('clicking a film card opens detail view', async ({ page }) => {
|
||||
await Promise.all([
|
||||
page.waitForResponse((res) => res.url().includes('dev-chats') && res.status() === 200, { timeout: 15000 }),
|
||||
page.goto('/'),
|
||||
])
|
||||
await expect(page.getByText('Recommend some sci-fi films')).toBeVisible({ timeout: 10000 })
|
||||
// Open panel
|
||||
await page.locator('.path-glass-bubble').filter({ hasText: /Blade Runner|Arrival|Dune/ }).first().click()
|
||||
const filmCard = page.locator('main').getByText('Blade Runner 2049').first()
|
||||
await expect(filmCard).toBeVisible({ timeout: 5000 })
|
||||
// Click film card to open detail
|
||||
await filmCard.click()
|
||||
// Detail view should show film metadata
|
||||
await expect(page.getByText(/Denis Villeneuve|2017|Sci-Fi/i).first()).toBeVisible({ timeout: 5000 })
|
||||
})
|
||||
|
||||
test('mobile viewport shows full-screen overlay for content', async ({ page }) => {
|
||||
await page.setViewportSize({ width: 375, height: 812 })
|
||||
await Promise.all([
|
||||
page.waitForResponse((res) => res.url().includes('dev-chats') && res.status() === 200, { timeout: 15000 }),
|
||||
page.goto('/'),
|
||||
])
|
||||
await expect(page.getByText('Recommend some sci-fi films')).toBeVisible({ timeout: 10000 })
|
||||
// Open panel on mobile
|
||||
await page.locator('.path-glass-bubble').filter({ hasText: /Blade Runner|Arrival|Dune/ }).first().click()
|
||||
// Content should be visible as overlay on mobile
|
||||
await expect(page.locator('main').getByText('Blade Runner 2049').first()).toBeVisible({ timeout: 5000 })
|
||||
})
|
||||
|
||||
test('stop button halts generation', async ({ page }) => {
|
||||
await page.goto('/')
|
||||
await page.waitForLoadState('networkidle')
|
||||
// When not streaming, stop button should not be visible
|
||||
const stopButton = page.getByRole('button', { name: 'Stop generation' })
|
||||
await expect(stopButton).toBeHidden({ timeout: 3000 })
|
||||
// Chat input should be available instead
|
||||
const input = page.getByPlaceholder(/Message AIUI/)
|
||||
await expect(input).toBeVisible({ timeout: 3000 })
|
||||
})
|
||||
|
||||
test('web search toggle works', async ({ page }) => {
|
||||
await page.goto('/')
|
||||
await page.waitForLoadState('networkidle')
|
||||
const toggle = page.getByRole('button', { name: 'Toggle web search' })
|
||||
await expect(toggle).toBeVisible({ timeout: 5000 })
|
||||
// Click to toggle web search on
|
||||
await toggle.click()
|
||||
// The button styling should change (it gains accent color when active)
|
||||
await expect(toggle).toBeVisible()
|
||||
// Click again to toggle off
|
||||
await toggle.click()
|
||||
await expect(toggle).toBeVisible()
|
||||
})
|
||||
|
||||
test('new conversation clears messages', async ({ page }) => {
|
||||
await Promise.all([
|
||||
page.waitForResponse((res) => res.url().includes('dev-chats') && res.status() === 200, { timeout: 15000 }),
|
||||
page.goto('/'),
|
||||
])
|
||||
await expect(page.getByText('Recommend some sci-fi films')).toBeVisible({ timeout: 10000 })
|
||||
// Click "New conversation" button
|
||||
await page.getByRole('button', { name: 'New conversation' }).click()
|
||||
// Previous messages should be cleared
|
||||
await expect(page.getByText('Recommend some sci-fi films')).toBeHidden({ timeout: 5000 })
|
||||
})
|
||||
|
||||
test('panel side toggle switches layout', async ({ page }) => {
|
||||
await page.setViewportSize({ width: 1280, height: 800 })
|
||||
await Promise.all([
|
||||
page.waitForResponse((res) => res.url().includes('dev-chats') && res.status() === 200, { timeout: 15000 }),
|
||||
page.goto('/'),
|
||||
])
|
||||
await expect(page.getByText('Recommend some sci-fi films')).toBeVisible({ timeout: 10000 })
|
||||
// Open the panel
|
||||
await page.locator('.path-glass-bubble').filter({ hasText: /Blade Runner|Arrival|Dune/ }).first().click()
|
||||
await expect(page.locator('main').getByText('Blade Runner 2049').first()).toBeVisible({ timeout: 5000 })
|
||||
// Both chat and panel sections should be visible on desktop
|
||||
const chatSection = page.locator('section').first()
|
||||
await expect(chatSection).toBeVisible()
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user