test(dashboard): add e2e script CRUD + editor spec (B3)
Seven tests covering script creation via the Scripts tab, the source editor (CodeMirror typing + save + reload), Format-button error surfaces for both Rhai and the test-invoke JSON body, the test-invoke happy path, settings input validation, and an infinite-loop adversarial that asserts the sandbox timeout reports cleanly and the editor stays interactive. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
203
dashboard/tests/e2e/scripts/scripts.spec.ts
Normal file
203
dashboard/tests/e2e/scripts/scripts.spec.ts
Normal file
@@ -0,0 +1,203 @@
|
||||
import { expect, type Page } from '@playwright/test';
|
||||
import { test } from '../fixtures/ids';
|
||||
import { CleanupRegistry } from '../fixtures/cleanup';
|
||||
import { adminApi } from '../fixtures/api';
|
||||
|
||||
// Phase B3 — Scripts CRUD + Editor. The script editor lives at
|
||||
// /admin/scripts/{id}. Setup uses the API to create the app (and
|
||||
// sometimes a baseline script) so each test can focus on the editor
|
||||
// flow it actually covers.
|
||||
|
||||
const HELLO_RHAI = `return #{ statusCode: 200, body: #{ ok: true } };`;
|
||||
|
||||
const cleanup = new CleanupRegistry();
|
||||
test.afterEach(async () => {
|
||||
await cleanup.run();
|
||||
});
|
||||
|
||||
async function createAppViaApi(slug: string): Promise<string> {
|
||||
const api = await adminApi();
|
||||
try {
|
||||
const res = await api.post('/api/v1/admin/apps', {
|
||||
data: { slug, name: slug }
|
||||
});
|
||||
expect(res.ok()).toBe(true);
|
||||
const body = (await res.json()) as { id: string };
|
||||
return body.id;
|
||||
} finally {
|
||||
await api.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
async function createScriptViaApi(
|
||||
appId: string,
|
||||
name: string,
|
||||
source = HELLO_RHAI
|
||||
): Promise<string> {
|
||||
const api = await adminApi();
|
||||
try {
|
||||
const res = await api.post('/api/v1/admin/scripts', {
|
||||
data: { app_id: appId, name, source }
|
||||
});
|
||||
expect(res.ok()).toBe(true);
|
||||
const body = (await res.json()) as { id: string };
|
||||
return body.id;
|
||||
} finally {
|
||||
await api.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
async function fillCodeMirror(page: Page, locator: string, text: string): Promise<void> {
|
||||
const cm = page.locator(locator).first();
|
||||
await cm.click();
|
||||
await page.keyboard.press('ControlOrMeta+A');
|
||||
await page.keyboard.press('Delete');
|
||||
await page.keyboard.type(text);
|
||||
}
|
||||
|
||||
test.describe('B3 scripts CRUD', () => {
|
||||
test('create script via UI navigates to scripts list with the new entry', async ({
|
||||
page,
|
||||
uniqueSlug
|
||||
}) => {
|
||||
const slug = uniqueSlug('cscr');
|
||||
await createAppViaApi(slug);
|
||||
cleanup.app(slug);
|
||||
|
||||
await page.goto(`/admin/apps/${slug}`);
|
||||
await page.getByRole('button', { name: /^New script$/ }).click();
|
||||
await page.getByLabel('Name').fill('echo');
|
||||
// The CodeMirror editor starts empty in create mode; type a
|
||||
// minimal valid script.
|
||||
await fillCodeMirror(page, '.cm-content', HELLO_RHAI);
|
||||
await page.getByRole('button', { name: 'Create script' }).click();
|
||||
|
||||
await expect(page.getByRole('link', { name: /echo/i })).toBeVisible();
|
||||
});
|
||||
|
||||
test('edit + save Rhai source persists across reload', async ({ page, uniqueSlug }) => {
|
||||
const slug = uniqueSlug('edit');
|
||||
const appId = await createAppViaApi(slug);
|
||||
const scriptId = await createScriptViaApi(appId, 'edit-target');
|
||||
cleanup.app(slug);
|
||||
|
||||
await page.goto(`/admin/scripts/${scriptId}`);
|
||||
await expect(page.locator('.cm-content').first()).toContainText('statusCode');
|
||||
|
||||
const updated = `// edited by e2e\nreturn #{ statusCode: 201, body: #{ edited: true } };`;
|
||||
await fillCodeMirror(page, '.cm-content', updated);
|
||||
await page.getByRole('button', { name: /^Save$/ }).click();
|
||||
// Save button becomes disabled once the buffer matches the
|
||||
// just-saved source — that's our settle signal.
|
||||
await expect(page.getByRole('button', { name: /^Save$/ })).toBeDisabled();
|
||||
|
||||
await page.reload();
|
||||
await expect(page.locator('.cm-content').first()).toContainText('edited by e2e');
|
||||
});
|
||||
|
||||
test('invalid Rhai source: Format shows a parse error', async ({ page, uniqueSlug }) => {
|
||||
const slug = uniqueSlug('invrhai');
|
||||
const appId = await createAppViaApi(slug);
|
||||
const scriptId = await createScriptViaApi(appId, 'bad-syntax');
|
||||
cleanup.app(slug);
|
||||
|
||||
await page.goto(`/admin/scripts/${scriptId}`);
|
||||
await fillCodeMirror(page, '.cm-content', 'this is not rhai @@@ {{{');
|
||||
await page
|
||||
.locator('.editor-header')
|
||||
.getByRole('button', { name: 'Format' })
|
||||
.click();
|
||||
|
||||
await expect(page.locator('.error.inline').first()).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('B3 test-invoke', () => {
|
||||
test('valid JSON body returns status + body in the result panel', async ({
|
||||
page,
|
||||
uniqueSlug
|
||||
}) => {
|
||||
const slug = uniqueSlug('inv-ok');
|
||||
const appId = await createAppViaApi(slug);
|
||||
const scriptId = await createScriptViaApi(appId, 'invoke-ok');
|
||||
cleanup.app(slug);
|
||||
|
||||
await page.goto(`/admin/scripts/${scriptId}`);
|
||||
// Body editor is the second .cm-content (source is first).
|
||||
const bodyEditor = page.locator('.cm-content').nth(1);
|
||||
await bodyEditor.click();
|
||||
await page.keyboard.press('ControlOrMeta+A');
|
||||
await page.keyboard.press('Delete');
|
||||
await page.keyboard.type('{"hello":"world"}');
|
||||
|
||||
await page.getByRole('button', { name: /^Send$/ }).click();
|
||||
await expect(page.locator('.status')).toContainText('HTTP 200');
|
||||
await expect(page.locator('.result pre')).toContainText('ok');
|
||||
});
|
||||
|
||||
test('malformed JSON body: Format surfaces the parse error', async ({ page, uniqueSlug }) => {
|
||||
const slug = uniqueSlug('inv-bad');
|
||||
const appId = await createAppViaApi(slug);
|
||||
const scriptId = await createScriptViaApi(appId, 'invoke-bad');
|
||||
cleanup.app(slug);
|
||||
|
||||
await page.goto(`/admin/scripts/${scriptId}`);
|
||||
const bodyEditor = page.locator('.cm-content').nth(1);
|
||||
await bodyEditor.click();
|
||||
await page.keyboard.press('ControlOrMeta+A');
|
||||
await page.keyboard.press('Delete');
|
||||
await page.keyboard.type('{not valid json,');
|
||||
|
||||
// The Format button for the request body sits inside the
|
||||
// Test-invoke card next to the body editor.
|
||||
await page
|
||||
.locator('.json-block')
|
||||
.first()
|
||||
.getByRole('button', { name: 'Format' })
|
||||
.click();
|
||||
await expect(page.locator('.error.inline').first()).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('B3 settings', () => {
|
||||
test('timeout input rejects zero and non-positive values', async ({ page, uniqueSlug }) => {
|
||||
const slug = uniqueSlug('settz');
|
||||
const appId = await createAppViaApi(slug);
|
||||
const scriptId = await createScriptViaApi(appId, 'settings-target');
|
||||
cleanup.app(slug);
|
||||
|
||||
await page.goto(`/admin/scripts/${scriptId}`);
|
||||
await page.getByRole('button', { name: 'Settings' }).click();
|
||||
const timeout = page.getByLabel(/Timeout/);
|
||||
await timeout.fill('0');
|
||||
const invalid = await timeout.evaluate((el: HTMLInputElement) => !el.validity.valid);
|
||||
expect(invalid).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('B3 adversarial', () => {
|
||||
test('infinite loop script hits the sandbox timeout', async ({ page, uniqueSlug }) => {
|
||||
const slug = uniqueSlug('loop');
|
||||
const appId = await createAppViaApi(slug);
|
||||
const scriptId = await createScriptViaApi(
|
||||
appId,
|
||||
'inf-loop',
|
||||
'loop { let x = 1; }'
|
||||
);
|
||||
cleanup.app(slug);
|
||||
|
||||
await page.goto(`/admin/scripts/${scriptId}`);
|
||||
await page.getByRole('button', { name: /^Send$/ }).click();
|
||||
|
||||
// Either the status renders with a 5xx code, or an error
|
||||
// banner shows up. Either way, the page recovers.
|
||||
await Promise.race([
|
||||
expect(page.locator('.status')).toBeVisible({ timeout: 30_000 }),
|
||||
expect(page.locator('.error.inline').last()).toBeVisible({ timeout: 30_000 })
|
||||
]);
|
||||
|
||||
// The dashboard must remain interactive after the timeout.
|
||||
await page.getByRole('button', { name: 'Settings' }).click();
|
||||
await expect(page.getByLabel(/Timeout/)).toBeVisible();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user