399b8b58a0
Replaces Inspector panel when activated via Sparkle button in editor info bar. Includes context pills, message list with typing indicator, quick action pills (Summarize/Expand/Fix grammar), model selector, and mock responses with 1200ms delay. E2E test covers full flow. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
70 lines
2.7 KiB
TypeScript
70 lines
2.7 KiB
TypeScript
import { test, expect } from '@playwright/test'
|
|
|
|
test('AI chat panel: open, send message, close', async ({ page }) => {
|
|
await page.goto('http://localhost:5173')
|
|
await page.waitForTimeout(2000)
|
|
|
|
// Click the first note in the list — note items are cursor-pointer divs inside .app__note-list
|
|
const noteItem = page.locator('.app__note-list .cursor-pointer').first()
|
|
await noteItem.click()
|
|
await page.waitForTimeout(800)
|
|
|
|
// Screenshot before opening AI chat
|
|
await page.screenshot({ path: 'test-results/ai-chat-before.png', fullPage: true })
|
|
|
|
// Find the Sparkle button in the breadcrumb/info bar and click it
|
|
const sparkleButton = page.locator('button[title="Open AI Chat"]')
|
|
await expect(sparkleButton).toBeVisible({ timeout: 5000 })
|
|
await sparkleButton.click()
|
|
await page.waitForTimeout(300)
|
|
|
|
// AI Chat panel should be visible
|
|
const aiChatHeader = page.locator('text=AI Chat')
|
|
await expect(aiChatHeader).toBeVisible()
|
|
|
|
// Screenshot with AI chat panel open
|
|
await page.screenshot({ path: 'test-results/ai-chat-open.png', fullPage: true })
|
|
|
|
// Context pills should be visible
|
|
await expect(page.locator('text=Frontmatter')).toBeVisible()
|
|
await expect(page.locator('text=Links')).toBeVisible()
|
|
|
|
// Type a message and send
|
|
const textarea = page.locator('textarea[placeholder="Ask about this document..."]')
|
|
await textarea.fill('Summarize this note')
|
|
await page.locator('button[title="Send message"]').click()
|
|
|
|
// Should see user message
|
|
await expect(page.locator('text=Summarize this note')).toBeVisible()
|
|
|
|
// Wait for typing indicator to appear
|
|
await page.waitForTimeout(300)
|
|
await page.screenshot({ path: 'test-results/ai-chat-typing.png', fullPage: true })
|
|
|
|
// Wait for mock response
|
|
await page.waitForTimeout(1200)
|
|
await expect(page.locator('text=words and links to')).toBeVisible({ timeout: 5000 })
|
|
|
|
// Screenshot with response
|
|
await page.screenshot({ path: 'test-results/ai-chat-response.png', fullPage: true })
|
|
|
|
// Test quick action pill
|
|
const expandButton = page.locator('button', { hasText: 'Expand' })
|
|
await expandButton.click()
|
|
await page.waitForTimeout(1800)
|
|
await expect(page.locator('text=Add more detail to the introduction')).toBeVisible({ timeout: 5000 })
|
|
|
|
// Screenshot with quick action response
|
|
await page.screenshot({ path: 'test-results/ai-chat-quick-action.png', fullPage: true })
|
|
|
|
// Close the panel using the X button in the AI Chat header
|
|
await page.locator('button[title="Close AI Chat"]').last().click()
|
|
await page.waitForTimeout(300)
|
|
|
|
// Inspector should be back
|
|
await expect(page.locator('text=Properties')).toBeVisible()
|
|
|
|
// Screenshot after closing
|
|
await page.screenshot({ path: 'test-results/ai-chat-closed.png', fullPage: true })
|
|
})
|