9b79856827
- Add 'Twilight Velvet' color palette to globals.css with OKLCH values - Update SettingsPage headers, cards, and dialogs to use semantic theme variables - Update HistoryCard, HistoryFeed, and DraftContent to support dark mode - Update ProviderSelector and ProviderList to use custom card background (#2A2A3D) - Add ThemeToggle component with improved visibility - Ensure consistent use of 'bg-card', 'text-foreground', and 'text-muted-foreground'
104 lines
4.1 KiB
TypeScript
104 lines
4.1 KiB
TypeScript
import { test, expect } from '../support/fixtures';
|
|
import { faker } from '@faker-js/faker';
|
|
|
|
test.describe('Chat Interface (Story 1.2)', () => {
|
|
test.beforeEach(async ({ page, context }) => {
|
|
// GIVEN: User has a configured provider (injected via localStorage)
|
|
await context.addInitScript(() => {
|
|
window.localStorage.setItem('test01-settings-storage', JSON.stringify({
|
|
state: {
|
|
savedProviders: [{
|
|
id: 'test-provider',
|
|
name: 'Test Provider',
|
|
baseUrl: 'https://api.openai.com/v1',
|
|
apiKey: 'dGVzdC1rZXk=', // 'test-key' encoded
|
|
modelName: 'gpt-4o',
|
|
createdAt: new Date().toISOString(),
|
|
updatedAt: new Date().toISOString()
|
|
}],
|
|
activeProviderId: 'test-provider',
|
|
providerMigrationState: { hasMigrated: true }
|
|
},
|
|
version: 0
|
|
}));
|
|
});
|
|
|
|
// Mock LLM API response to be deterministic
|
|
await page.route('/api/llm', async route => {
|
|
await new Promise(r => setTimeout(r, 1000)); // Add delay for typing indicator
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({
|
|
success: true,
|
|
data: { text: 'This is a mocked AI response.' },
|
|
timestamp: new Date().toISOString(),
|
|
}),
|
|
});
|
|
});
|
|
|
|
// GIVEN: User is on the homepage
|
|
await page.goto('/');
|
|
});
|
|
|
|
test('[P0] should allow user to send a message', async ({ page }) => {
|
|
// GIVEN: Input field is visible
|
|
const input = page.getByTestId('chat-input');
|
|
const sendButton = page.getByTestId('send-button');
|
|
|
|
// WHEN: User types a random message and clicks send
|
|
const message = faker.lorem.sentence();
|
|
await input.fill(message);
|
|
await sendButton.click();
|
|
|
|
// THEN: Input should be cleared
|
|
await expect(input).toHaveValue('');
|
|
|
|
// THEN: Message should appear in the chat
|
|
await expect(page.getByTestId('chat-bubble-user').last()).toContainText(message);
|
|
});
|
|
|
|
test('[P0] should display AI typing indicator', async ({ page }) => {
|
|
// WHEN: User sends a message
|
|
await page.getByTestId('chat-input').fill('Tell me a story');
|
|
await page.getByTestId('send-button').click();
|
|
|
|
// THEN: AI response should appear (mocked response is fast, so indicator might flicker too fast to catch without slowing it down)
|
|
// But we check for response visibility primarily
|
|
await expect(page.getByTestId('chat-bubble-ai').last()).toBeVisible();
|
|
await expect(page.getByTestId('chat-bubble-ai').last()).toContainText('This is a mocked AI response.');
|
|
});
|
|
|
|
test('[P0] should persist messages across reload', async ({ page }) => {
|
|
// GIVEN: User sends a message
|
|
const uniqueMessage = `Persistence Test ${faker.string.uuid()}`;
|
|
await page.getByTestId('chat-input').fill(uniqueMessage);
|
|
await page.getByTestId('send-button').click();
|
|
|
|
// Wait for message to appear
|
|
await expect(page.getByText(uniqueMessage)).toBeVisible();
|
|
|
|
// WHEN: Page is reloaded
|
|
await page.reload();
|
|
|
|
// THEN: Message should still be visible
|
|
await expect(page.getByText(uniqueMessage)).toBeVisible();
|
|
});
|
|
|
|
test('[P1] should adapt to mobile viewport', async ({ page }) => {
|
|
// GIVEN: Mobile viewport
|
|
await page.setViewportSize({ width: 375, height: 667 });
|
|
|
|
// WHEN: Page loads
|
|
await page.goto('/');
|
|
|
|
// THEN: Important elements are visible
|
|
await expect(page.getByTestId('chat-input')).toBeVisible();
|
|
await expect(page.getByTestId('send-button')).toBeVisible();
|
|
|
|
// Check elements fit within width (approximate check)
|
|
const inputBox = await page.getByTestId('chat-input').boundingBox();
|
|
expect(inputBox?.width).toBeLessThan(375); // Should have padding
|
|
});
|
|
});
|