- 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>
74 lines
2.9 KiB
TypeScript
74 lines
2.9 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
import { createProviderConfig } from '../support/factories/provider.factory';
|
|
|
|
test.describe('Settings - API Provider Configuration', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
// Clear local storage to start fresh
|
|
await page.goto('/settings'); // Navigate first to access localStorage
|
|
await page.evaluate(() => localStorage.clear());
|
|
await page.reload();
|
|
});
|
|
|
|
test('should allow user to enter and save provider credentials', async ({ page }) => {
|
|
const providerData = createProviderConfig();
|
|
|
|
// GIVEN: User is on settings page
|
|
await page.goto('/settings');
|
|
|
|
// WHEN: User enters API Key and Base URL
|
|
await page.getByLabel('API Key').fill(providerData.apiKey);
|
|
await page.getByLabel('Base URL').fill(providerData.baseUrl);
|
|
await page.getByLabel('Model Name').fill(providerData.modelId);
|
|
|
|
// AND: User clicks Save
|
|
await page.getByRole('button', { name: 'Save' }).click();
|
|
|
|
// THEN: Success feedback is shown
|
|
await expect(page.getByText('Settings saved')).toBeVisible();
|
|
|
|
// AND: Values are persisted after reload
|
|
await page.reload();
|
|
await expect(page.getByLabel('API Key')).toHaveValue(providerData.apiKey);
|
|
await expect(page.getByLabel('Base URL')).toHaveValue(providerData.baseUrl);
|
|
await expect(page.getByLabel('Model Name')).toHaveValue(providerData.modelId);
|
|
});
|
|
|
|
test('should verify connection with valid credentials', async ({ page }) => {
|
|
const providerData = createProviderConfig();
|
|
|
|
// Setup network mock for "Hello" check
|
|
await page.route('**/models', async route => {
|
|
await route.fulfill({ status: 200, json: { data: [] } });
|
|
});
|
|
|
|
await page.goto('/settings');
|
|
await page.getByLabel('API Key').fill(providerData.apiKey);
|
|
await page.getByLabel('Base URL').fill(providerData.baseUrl);
|
|
|
|
// WHEN: User clicks "Test Connection"
|
|
await page.getByRole('button', { name: 'Test Connection' }).click();
|
|
|
|
// THEN: User sees success message
|
|
await expect(page.getByText('Connected ✅')).toBeVisible();
|
|
});
|
|
|
|
test('should show error for invalid connection', async ({ page }) => {
|
|
const providerData = createProviderConfig();
|
|
|
|
// Setup network mock for failure
|
|
await page.route('**/models', async route => {
|
|
await route.fulfill({ status: 401, json: { error: 'Invalid API Key' } });
|
|
});
|
|
|
|
await page.goto('/settings');
|
|
await page.getByLabel('API Key').fill(providerData.apiKey);
|
|
await page.getByLabel('Base URL').fill(providerData.baseUrl);
|
|
|
|
// WHEN: User clicks "Test Connection"
|
|
await page.getByRole('button', { name: 'Test Connection' }).click();
|
|
|
|
// THEN: User sees error message
|
|
await expect(page.getByText('Connection failed')).toBeVisible();
|
|
});
|
|
});
|