spb/claude-remote

1import { expect, test } from '@playwright/test';2import { resetMock, waitTermOpen } from './helpers';3import { DEMO_OUTPUT, seed, setTheme, shot, THEMES } from './shot-helpers';45/** Desktop screenshot set in both themes (reviewed by hand; no pixel assertions). */6for (const theme of THEMES) {7  test(`screenshots: desktop ${theme}`, async ({ page }) => {8    await setTheme(page, theme);9    await resetMock(page);10    await page.goto('/login/');11    await expect(page.getByTestId('login-submit')).toBeVisible();12    await shot(page, `${theme}-desktop-login`);13    const ids = await seed(page);1415    await page.goto('/terminal/');16    await expect(page.getByTestId('start-view')).toBeVisible();17    await expect(page.getByTestId('session-card').first()).toBeVisible();18    await expect(page.getByTestId('host-strip')).toContainText('as of');19    await page.waitForTimeout(700);20    await shot(page, `${theme}-desktop-start`);2122    await page.goto(`/terminal/?s=${ids.shell}`);23    await waitTermOpen(page, ids.shell);24    await page.getByTestId('terminal').click();25    await page.keyboard.type(DEMO_OUTPUT);26    await page.waitForTimeout(700);27    await shot(page, `${theme}-desktop-terminal`);2829    for (const [route, name, ready] of [30      ['/cluster/', 'cluster', 'node-table'],31      ['/system/', 'system', 'audit-table'],32      ['/settings/', 'settings', 'settings'],33      ['/sessions/', 'sessions', 'sessions-list'],34      ['/tasks/', 'tasks', 'task-list'],35      ['/projects/', 'projects', 'project-list'],36    ] as const) {37      await page.goto(route);38      await expect(page.getByTestId(ready)).toBeVisible();39      await page.waitForTimeout(500);40      await shot(page, `${theme}-desktop-${name}`);41    }42    await page.goto('/cluster/');43    await page.getByTestId('view-topology').click();44    await expect(page.getByTestId('topology-node').first()).toBeVisible();45    await page.waitForTimeout(500);46    await shot(page, `${theme}-desktop-topology`);47    await page.goto(`/files/?p=${ids.pid}&path=${encodeURIComponent('src/index.ts')}`);48    await expect(page.locator('.monaco-editor').first()).toContainText('greet', { timeout: 20_000 });49    await shot(page, `${theme}-desktop-files`);50  });51}5253test('screenshots: dark terminal inside the light app is a screen card', async ({ page }) => {54  await setTheme(page, 'light');55  const ids = await seed(page);56  const csrf = (await (await page.request.get('/api/v1/auth/status')).json()).csrfToken as string;57  const settings = await (await page.request.get('/api/v1/settings')).json();58  await page.request.put('/api/v1/settings', { data: { ...settings, terminalTheme: 'dark' }, headers: { 'X-CSRF-Token': csrf } });59  await page.goto(`/terminal/?s=${ids.shell}`);60  await waitTermOpen(page, ids.shell);61  await expect(page.getByTestId('terminal')).toHaveAttribute('data-term-theme', 'dark');62  await page.getByTestId('terminal').click();63  await page.keyboard.type(DEMO_OUTPUT);64  await page.waitForTimeout(700);65  await shot(page, 'light-desktop-terminal-dark-screen');66});67