219 lines
7.6 KiB
TypeScript
219 lines
7.6 KiB
TypeScript
/**
|
|
* Legacy Visual Regression suite for the current AppShell.
|
|
*
|
|
* Keeps the original 7-view snapshot names, but routes directly to the modern
|
|
* surfaces instead of clicking retired positional sidebar items.
|
|
*/
|
|
|
|
import { test, expect, type Page } from '@playwright/test';
|
|
|
|
const SKIP_PARAMS = 'skipOnboarding=true&skipBoot=true&skipBriefing=true&tier=power';
|
|
|
|
const VIEWS = [
|
|
{ name: 'chat', route: 'chat' },
|
|
{ name: 'memory', route: '/memory' },
|
|
{ name: 'events', route: '/settings/events' },
|
|
{ name: 'capabilities', route: '/skills' },
|
|
{ name: 'cockpit', route: '/home' },
|
|
{ name: 'mission-control', route: '/settings/mission-control' },
|
|
{ name: 'settings', route: '/settings?tab=models' },
|
|
] as const;
|
|
|
|
const THEME_LABELS = {
|
|
dark: 'Dark Mode',
|
|
light: 'Light Mode',
|
|
} as const;
|
|
|
|
const VISUAL_MODEL = 'openai/visual-fixture-model';
|
|
const VISUAL_PROVIDER_META = [
|
|
['anthropic', 'Anthropic'],
|
|
['openai', 'OpenAI'],
|
|
['google', 'Google'],
|
|
['deepseek', 'DeepSeek'],
|
|
['xai', 'xAI'],
|
|
['mistral', 'Mistral'],
|
|
['alibaba', 'Alibaba / Qwen'],
|
|
['minimax', 'MiniMax'],
|
|
['zhipu', 'GLM / Zhipu'],
|
|
['moonshot', 'Kimi / Moonshot'],
|
|
['perplexity', 'Perplexity'],
|
|
['openrouter', 'OpenRouter'],
|
|
['ollama', 'Local / Ollama'],
|
|
] as const;
|
|
|
|
function routeWithSkip(route: string) {
|
|
const sep = route.includes('?') ? '&' : '?';
|
|
return `${route}${sep}${SKIP_PARAMS}`;
|
|
}
|
|
|
|
async function firstWorkspaceChatRoute(page: Page) {
|
|
const res = await page.request.get('/api/workspaces');
|
|
const workspaces = await res.json();
|
|
const workspaceId = Array.isArray(workspaces) ? workspaces[0]?.id : null;
|
|
return workspaceId ? `/workspaces/${workspaceId}/chat` : '/home';
|
|
}
|
|
|
|
async function applyTheme(page: Page, theme: 'dark' | 'light') {
|
|
await page.addInitScript((mode) => {
|
|
localStorage.setItem('waggle-theme', mode);
|
|
localStorage.setItem('waggle:onboarding', JSON.stringify({
|
|
completed: true,
|
|
step: 7,
|
|
tier: 'power',
|
|
tooltipsDismissed: true,
|
|
}));
|
|
if (mode === 'light') document.documentElement.setAttribute('data-theme', 'light');
|
|
else document.documentElement.removeAttribute('data-theme');
|
|
}, theme);
|
|
}
|
|
|
|
async function stubDynamicRuntime(page: Page) {
|
|
const json = (body: unknown) => ({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify(body),
|
|
});
|
|
const providers = VISUAL_PROVIDER_META.map(([id, name]) => ({
|
|
id,
|
|
name,
|
|
hasKey: id === 'openai',
|
|
badge: null,
|
|
keyUrl: null,
|
|
requiresKey: id !== 'ollama',
|
|
models: id === 'openai'
|
|
? [{ id: VISUAL_MODEL, name: 'Visual Fixture Model', cost: '$$', speed: 'medium', source: 'provider-api' }]
|
|
: [],
|
|
modelsSource: id === 'openai' ? 'provider-api' : id === 'ollama' ? 'local-runtime' : 'requires-key',
|
|
...(id === 'ollama' ? { reachable: false } : {}),
|
|
}));
|
|
|
|
await page.route('**/api/providers', route => route.fulfill(json({
|
|
providers,
|
|
search: [],
|
|
activeSearch: 'duckduckgo',
|
|
})));
|
|
await page.route('**/api/agent/status', route => route.fulfill(json({
|
|
model: VISUAL_MODEL,
|
|
tokensUsed: 0,
|
|
costUsd: 0,
|
|
isActive: false,
|
|
})));
|
|
await page.route('**/api/agent/model', route => route.fulfill(json({ model: VISUAL_MODEL })));
|
|
await page.route('**/api/litellm/models', route => route.fulfill(json({ models: [VISUAL_MODEL] })));
|
|
await page.route('**/api/local-inference/status', route => route.fulfill(json({
|
|
servers: [],
|
|
ollamaInstalled: false,
|
|
totalLocalModels: 0,
|
|
})));
|
|
await page.route('**/api/settings/probe-model', route => route.fulfill(json({
|
|
model: VISUAL_MODEL,
|
|
configured: true,
|
|
verified: true,
|
|
})));
|
|
await page.route('**/api/settings', route => {
|
|
if (route.request().method() === 'GET') return route.fulfill(json({ defaultModel: VISUAL_MODEL }));
|
|
return route.continue();
|
|
});
|
|
}
|
|
|
|
async function gotoVisualView(page: Page, view: typeof VIEWS[number], theme: 'dark' | 'light') {
|
|
await stubDynamicRuntime(page);
|
|
await applyTheme(page, theme);
|
|
const route = view.route === 'chat' ? await firstWorkspaceChatRoute(page) : view.route;
|
|
await page.goto(routeWithSkip(route), { waitUntil: 'domcontentloaded' });
|
|
await page.waitForSelector('.waggle-sidebar, [role="navigation"], main', { timeout: 15_000 });
|
|
await page.waitForLoadState('domcontentloaded');
|
|
await waitForVisualReady(page, view.name);
|
|
await page.evaluate((mode) => {
|
|
localStorage.setItem('waggle-theme', mode);
|
|
if (mode === 'light') document.documentElement.setAttribute('data-theme', 'light');
|
|
else document.documentElement.removeAttribute('data-theme');
|
|
}, theme);
|
|
await page.waitForTimeout(800);
|
|
await stabilizeVisuals(page);
|
|
}
|
|
|
|
async function waitForVisualReady(page: Page, viewName: typeof VIEWS[number]['name']) {
|
|
await page.waitForFunction(() => !document.body.innerText.includes('Loading workspace'), null, { timeout: 15_000 }).catch(() => {});
|
|
|
|
if (viewName === 'chat') {
|
|
await expect(page.locator('textarea').first()).toBeVisible({ timeout: 15_000 });
|
|
return;
|
|
}
|
|
if (viewName === 'memory') {
|
|
await expect(page.getByTestId('memory-center-app')).toBeVisible({ timeout: 15_000 });
|
|
return;
|
|
}
|
|
if (viewName === 'cockpit') {
|
|
await expect(page.locator('[data-testid="home-cockpit"], [data-testid="home-cockpit-empty"]').first()).toBeVisible({ timeout: 15_000 });
|
|
return;
|
|
}
|
|
if (viewName === 'settings') {
|
|
await expect(page.getByRole('tablist', { name: 'Settings sections' })).toBeVisible({ timeout: 15_000 });
|
|
return;
|
|
}
|
|
if (viewName === 'capabilities') {
|
|
await expect(page.locator('body')).toContainText(/skill|capabilit|marketplace/i, { timeout: 15_000 });
|
|
return;
|
|
}
|
|
if (viewName === 'events') {
|
|
await expect(page.locator('body')).toContainText(/event|timeline|agent/i, { timeout: 15_000 });
|
|
return;
|
|
}
|
|
if (viewName === 'mission-control') {
|
|
await expect(page.locator('body')).toContainText(/cockpit|health|cost/i, { timeout: 15_000 });
|
|
}
|
|
}
|
|
|
|
async function stabilizeVisuals(page: Page) {
|
|
await page.addStyleTag({
|
|
content: `
|
|
[aria-label="Notifications"],
|
|
[data-testid="statusbar-memory-count"],
|
|
[data-testid="statusbar-tokens"],
|
|
[data-testid="statusbar-cost"],
|
|
[data-testid="import-reminder-banner"],
|
|
[data-testid="import-reminder-banner-cc"],
|
|
[data-testid="home-cockpit-facts"],
|
|
[data-testid="home-cockpit-start-here"] h2,
|
|
[data-testid="home-cockpit-start-here"] h2 ~ p,
|
|
[data-testid^="home-cockpit-ws-"] .truncate,
|
|
[data-testid^="home-cockpit-ws-"] p,
|
|
[data-testid^="home-cockpit-continue-"] {
|
|
visibility: hidden !important;
|
|
}
|
|
`,
|
|
});
|
|
await page.evaluate(() => {
|
|
const dynamicText = [
|
|
/^(Mon|Tue|Wed|Thu|Fri|Sat|Sun),\s/i,
|
|
/^\d{1,2}:\d{2}$/,
|
|
/^Last active:/i,
|
|
/^just now$/i,
|
|
/^\d+[mhdw] ago$/i,
|
|
/\b(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\s+\d{1,2}\b/i,
|
|
/^Upcoming:/i,
|
|
];
|
|
for (const el of Array.from(document.querySelectorAll('span, p, button, time, div'))) {
|
|
const text = (el.textContent ?? '').trim();
|
|
if (dynamicText.some(pattern => pattern.test(text)) && (el.children.length === 0 || el.tagName === 'BUTTON')) {
|
|
(el as HTMLElement).style.visibility = 'hidden';
|
|
}
|
|
}
|
|
});
|
|
await page.waitForTimeout(200);
|
|
}
|
|
|
|
for (const theme of ['dark', 'light'] as const) {
|
|
test.describe(`Visual Regression - ${THEME_LABELS[theme]}`, () => {
|
|
for (const view of VIEWS) {
|
|
test(`${view.name} view - ${theme}`, async ({ page }) => {
|
|
await gotoVisualView(page, view, theme);
|
|
await expect(page).toHaveScreenshot(`${view.name}-${theme}.png`, {
|
|
fullPage: false,
|
|
});
|
|
});
|
|
}
|
|
});
|
|
}
|