157 lines
7.1 KiB
TypeScript
157 lines
7.1 KiB
TypeScript
import { test, expect, type Page } from '@playwright/test';
|
|
|
|
// ── Pieces editor (custom piece CRUD via the UI) E2E ──────────────────────────
|
|
//
|
|
// REQUIRES `npm run test:e2e` + a running server (ui/playwright.config.ts boots
|
|
// the real orchestrator with auth OFF → synthetic 'local' user). This does NOT
|
|
// run in the sandbox — there is no live server here.
|
|
//
|
|
// The Pieces page (page=pieces) is NOT auth-gated (NAV_ITEMS: pieces
|
|
// requiresAuth:false). The published-tested `splitPieces` lib covers the
|
|
// custom/default split; this proves the actual editor wiring that has no e2e:
|
|
// create a custom piece from the sidebar, then edit + save it through the editor.
|
|
//
|
|
// Selector grounding (read from the real components):
|
|
// - PiecesPage.tsx: the "+" button next to the "Custom Pieces" section opens an
|
|
// inline input with placeholder="piece-name"; Enter creates the piece via
|
|
// POST /api/pieces and selects it.
|
|
// - PieceEditor.tsx: a Visual/YAML mode toggle ("Visual" / "YAML" literal
|
|
// buttons), a <textarea> for the YAML, and a footer "Save" button (enabled
|
|
// only when dirty). These are English literals, not i18n keys.
|
|
// Backend state is verified through GET /api/pieces?source=custom — the same
|
|
// endpoint the page reads.
|
|
|
|
// With auth disabled the /api/auth/me probe 404s on purpose; the pieces page
|
|
// reads /api/pieces (200). Personal-space probes may 404 on an empty tree.
|
|
const BENIGN_PATHS = new Set([
|
|
'/api/auth/me',
|
|
'/api/users/me/orgs',
|
|
'/api/mcp/connections',
|
|
'/api/mcp/servers',
|
|
'/api/mcp/user-servers',
|
|
'/api/ssh/connections',
|
|
]);
|
|
const BENIGN_ASSET = /\.(ico|png|svg|map|webmanifest|json)$/i;
|
|
|
|
function trackFatalErrors(page: Page): string[] {
|
|
const fatalErrors: string[] = [];
|
|
page.on('pageerror', (err) => fatalErrors.push(`pageerror: ${err.message}`));
|
|
page.on('response', (res) => {
|
|
if (res.status() >= 400) {
|
|
const { pathname } = new URL(res.url());
|
|
if (!BENIGN_ASSET.test(pathname) && !BENIGN_PATHS.has(pathname)) {
|
|
fatalErrors.push(`HTTP ${res.status()} ${res.url()}`);
|
|
}
|
|
}
|
|
});
|
|
return fatalErrors;
|
|
}
|
|
|
|
// Unique name per run so reruns against the same throwaway DB never collide.
|
|
const pieceName = `e2e-custom-${Date.now()}`;
|
|
|
|
test('create a custom piece from the sidebar, then edit + save it via the editor', async ({ page }) => {
|
|
const fatalErrors = trackFatalErrors(page);
|
|
|
|
await page.goto('/ui?page=pieces');
|
|
await expect(page).toHaveURL(/[?&]page=pieces(&|$)/);
|
|
|
|
// The "Custom Pieces" section + its "+" create affordance render. The "+" is
|
|
// the only button in that section header (title=newPieceTitle).
|
|
await expect(page.getByText('Custom Pieces', { exact: true })).toBeVisible({ timeout: 15_000 });
|
|
const createToggle = page.locator('button[title]').filter({ hasText: '+' }).first();
|
|
await createToggle.click();
|
|
|
|
// The inline name input appears (placeholder="piece-name"); type the name and
|
|
// submit with Enter → POST /api/pieces, then the new piece is selected.
|
|
const nameInput = page.getByPlaceholder('piece-name');
|
|
await expect(nameInput).toBeVisible();
|
|
await nameInput.fill(pieceName);
|
|
await nameInput.press('Enter');
|
|
|
|
// The new custom piece appears in the sidebar list AND is auto-selected, so
|
|
// its name also shows in the editor header (PieceEditor.tsx's <h2>) —
|
|
// scope to the sidebar row button to avoid a strict-mode double match.
|
|
await expect(page.getByRole('button', { name: pieceName })).toBeVisible({ timeout: 15_000 });
|
|
|
|
// It was persisted as a custom piece (the endpoint the page reads returns
|
|
// { pieces: [...] } with custom:true on user pieces).
|
|
await expect
|
|
.poll(async () => {
|
|
const res = await page.request.get('/api/pieces');
|
|
if (!res.ok()) return [];
|
|
const data = (await res.json()) as { pieces?: Array<{ name: string; custom?: boolean }> };
|
|
return (data.pieces ?? []).filter((p) => p.custom).map((p) => p.name);
|
|
}, { timeout: 15_000 })
|
|
.toContain(pieceName);
|
|
|
|
// Edit the piece through the YAML editor. Switch to YAML mode, set a new
|
|
// description, and Save (footer button is enabled only once dirty).
|
|
await page.getByRole('button', { name: 'YAML' }).click();
|
|
const yaml = page.locator('textarea').first();
|
|
await expect(yaml).toBeVisible({ timeout: 15_000 });
|
|
// Terminal moves go through the `complete` tool, not rules[].next (which
|
|
// only accepts other movement names / WAIT_SUBTASKS — see
|
|
// docs/movement-control-flow-tools.md). Tool/edit access is a workspace tool
|
|
// policy setting now, not a piece field (allowed_tools/edit are removed).
|
|
const edited = [
|
|
`name: ${pieceName}`,
|
|
'description: edited by e2e',
|
|
'max_movements: 25',
|
|
'initial_movement: execute',
|
|
'movements:',
|
|
' - name: execute',
|
|
' persona: worker',
|
|
" instruction: 'do the thing'",
|
|
' default_next: COMPLETE',
|
|
' rules: []',
|
|
'',
|
|
].join('\n');
|
|
await yaml.fill(edited);
|
|
|
|
const saveBtn = page.getByRole('button', { name: 'Save' });
|
|
await expect(saveBtn).toBeEnabled({ timeout: 15_000 });
|
|
await saveBtn.click();
|
|
|
|
// The save persists to PUT /api/pieces/:name — verify the new description via
|
|
// the single-piece read endpoint (source=user-custom; response = { piece }).
|
|
await expect
|
|
.poll(async () => {
|
|
const res = await page.request.get(`/api/pieces/${encodeURIComponent(pieceName)}?source=user-custom`);
|
|
if (!res.ok()) return '';
|
|
const data = (await res.json()) as { piece?: { description?: string } };
|
|
return data.piece?.description ?? '';
|
|
}, { timeout: 15_000 })
|
|
.toContain('edited by e2e');
|
|
|
|
expect(fatalErrors, `fatal errors:\n${fatalErrors.join('\n')}`).toEqual([]);
|
|
});
|
|
|
|
// Negative/visibility: built-in pieces are never deletable, by anyone
|
|
// (PieceEditor.tsx: Delete is gated on effectiveSource !== 'builtin', with no
|
|
// admin exception). The readonly badge/footer gate, by contrast, is
|
|
// `!isAdmin && (builtin || global-custom)` — and with auth disabled the E2E
|
|
// synthetic user is always admin (App.tsx: isAdmin = auth.mode ===
|
|
// 'authenticated' ? user.role === 'admin' : true), so admins CAN edit
|
|
// (Save) built-in pieces here; only non-admins get the true read-only view.
|
|
// 'chat' is a built-in piece always present.
|
|
test('a built-in piece opens editable for admin (no Delete, Save appears once dirty)', async ({ page }) => {
|
|
const fatalErrors = trackFatalErrors(page);
|
|
|
|
await page.goto('/ui?page=pieces');
|
|
await expect(page.getByText('Default Pieces', { exact: false })).toBeVisible({ timeout: 15_000 });
|
|
|
|
// Open the built-in 'chat' piece from the Default Pieces section.
|
|
await page.getByRole('button', { name: /chat/i }).first().click();
|
|
|
|
// No readonly badge (this session is admin) and no Delete (built-ins are
|
|
// never deletable), but the editable footer with Save is present.
|
|
const saveBtn = page.getByRole('button', { name: 'Save' });
|
|
await expect(saveBtn).toBeVisible({ timeout: 15_000 });
|
|
await expect(page.getByText(/read-?only/i)).toHaveCount(0);
|
|
await expect(page.getByRole('button', { name: 'Delete' })).toHaveCount(0);
|
|
await expect(saveBtn).toBeDisabled();
|
|
|
|
expect(fatalErrors, `fatal errors:\n${fatalErrors.join('\n')}`).toEqual([]);
|
|
});
|