- Next.js 14+ with App Router and TypeScript - Tailwind CSS and ShadCN UI styling - Zustand state management - Dexie.js for IndexedDB (local-first data) - Auth.js v5 for authentication - BMAD framework integration Co-Authored-By: Claude <noreply@anthropic.com>
47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
test('Chat Flow with Mocked LLM', async ({ page }) => {
|
|
// 1. Setup Mock API - must be set before navigation
|
|
await page.route('**/v1/chat/completions', async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({
|
|
choices: [{
|
|
message: { content: "This is a mock AI response." }
|
|
}]
|
|
})
|
|
});
|
|
});
|
|
|
|
// 2. Configure Settings
|
|
await page.goto('/settings');
|
|
await page.getByLabel('API Key').fill('sk-test-key');
|
|
await page.getByLabel('Base URL').fill('https://api.mock.com/v1');
|
|
await page.getByLabel('Model Name').fill('gpt-mock');
|
|
|
|
// Wait for settings to be saved (Zustand persist uses localStorage)
|
|
await page.waitForTimeout(500);
|
|
|
|
// 3. Go to Chat
|
|
await page.goto('/chat');
|
|
|
|
// Wait for empty state to appear (indicates session is ready)
|
|
await expect(page.getByRole('heading', { name: /frustrating you/i })).toBeVisible({ timeout: 5000 });
|
|
|
|
// 4. Send Message
|
|
const input = page.getByRole('textbox');
|
|
await input.fill('I hate writing tests.');
|
|
|
|
// Wait for button to be enabled
|
|
const sendButton = page.getByRole('button').first();
|
|
await expect(sendButton).toBeEnabled({ timeout: 3000 });
|
|
await sendButton.click();
|
|
|
|
// 5. Verify User Message - wait for it to appear in the chat
|
|
await expect(page.getByText('I hate writing tests.')).toBeVisible({ timeout: 10000 });
|
|
|
|
// 6. Verify AI Response
|
|
await expect(page.getByText('This is a mock AI response.')).toBeVisible({ timeout: 15000 });
|
|
});
|