feat: add frontend e2e coverage

This commit is contained in:
a.tolmachev
2026-04-05 22:22:44 +03:00
parent d33c52d51d
commit 0bd47d9944
18 changed files with 623 additions and 7 deletions
+116
View File
@@ -0,0 +1,116 @@
#!/usr/bin/env bash
set -euo pipefail
ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/../../.." && pwd)"
TMP_DIR="$ROOT_DIR/.tmp/ui-e2e"
LOG_DIR="$TMP_DIR/logs"
POSTGRES_CONTAINER="crank-e2e-postgres"
POSTGRES_PORT="${CRANK_E2E_POSTGRES_PORT:-55433}"
ADMIN_PORT="${CRANK_E2E_ADMIN_PORT:-3301}"
MCP_PORT="${CRANK_E2E_MCP_PORT:-3302}"
UI_PORT="${CRANK_E2E_UI_PORT:-3300}"
POSTGRES_DB="${CRANK_E2E_POSTGRES_DB:-crank}"
POSTGRES_USER="${CRANK_E2E_POSTGRES_USER:-crank}"
POSTGRES_PASSWORD="${CRANK_E2E_POSTGRES_PASSWORD:-crank}"
ADMIN_EMAIL="${CRANK_E2E_ADMIN_EMAIL:-owner@crank.local}"
ADMIN_PASSWORD="${CRANK_E2E_ADMIN_PASSWORD:-change-me-admin-password}"
mkdir -p "$LOG_DIR"
kill_port_processes() {
local port="$1"
if command -v lsof >/dev/null 2>&1; then
lsof -ti "tcp:$port" | xargs -r kill >/dev/null 2>&1 || true
fi
}
cleanup() {
set +e
if [[ -f "$TMP_DIR/admin-api.pid" ]]; then
kill "$(cat "$TMP_DIR/admin-api.pid")" >/dev/null 2>&1 || true
rm -f "$TMP_DIR/admin-api.pid"
fi
if [[ -f "$TMP_DIR/mcp-server.pid" ]]; then
kill "$(cat "$TMP_DIR/mcp-server.pid")" >/dev/null 2>&1 || true
rm -f "$TMP_DIR/mcp-server.pid"
fi
if [[ -f "$TMP_DIR/ui-server.pid" ]]; then
kill "$(cat "$TMP_DIR/ui-server.pid")" >/dev/null 2>&1 || true
rm -f "$TMP_DIR/ui-server.pid"
fi
docker rm -f "$POSTGRES_CONTAINER" >/dev/null 2>&1 || true
kill_port_processes "$UI_PORT"
kill_port_processes "$ADMIN_PORT"
kill_port_processes "$MCP_PORT"
}
trap cleanup EXIT INT TERM
cleanup
docker run -d --rm \
--name "$POSTGRES_CONTAINER" \
-e POSTGRES_DB="$POSTGRES_DB" \
-e POSTGRES_USER="$POSTGRES_USER" \
-e POSTGRES_PASSWORD="$POSTGRES_PASSWORD" \
-p "$POSTGRES_PORT:5432" \
postgres:16-alpine >/dev/null
until docker exec "$POSTGRES_CONTAINER" pg_isready -U "$POSTGRES_USER" -d "$POSTGRES_DB" >/dev/null 2>&1; do
sleep 1
done
export CRANK_DATABASE_URL="postgres://$POSTGRES_USER:$POSTGRES_PASSWORD@127.0.0.1:$POSTGRES_PORT/$POSTGRES_DB"
export CRANK_STORAGE_ROOT="$TMP_DIR/storage"
export CRANK_ADMIN_BIND="0.0.0.0:$ADMIN_PORT"
export CRANK_MCP_BIND="0.0.0.0:$MCP_PORT"
export CRANK_MCP_REFRESH_MS="1000"
export CRANK_LOG_LEVEL="info"
export CRANK_SECRET_PROVIDER="env"
export CRANK_SESSION_SECRET="e2e-session-secret"
export CRANK_PASSWORD_PEPPER="e2e-password-pepper"
export CRANK_SESSION_TTL_HOURS="24"
export CRANK_BOOTSTRAP_ADMIN_EMAIL="$ADMIN_EMAIL"
export CRANK_BOOTSTRAP_ADMIN_PASSWORD="$ADMIN_PASSWORD"
export CRANK_BOOTSTRAP_ADMIN_DISPLAY_NAME="Crank E2E"
export CRANK_DEMO_SEED="true"
export CRANK_PUBLIC_BASE_URL="http://127.0.0.1:$UI_PORT"
export CRANK_MCP_PUBLIC_URL="http://127.0.0.1:$MCP_PORT"
mkdir -p "$CRANK_STORAGE_ROOT"
(
cd "$ROOT_DIR"
cargo run -p admin-api >"$LOG_DIR/admin-api.log" 2>&1
) &
echo $! > "$TMP_DIR/admin-api.pid"
until curl -fsS "http://127.0.0.1:$ADMIN_PORT/health" >/dev/null 2>&1; do
sleep 1
done
(
cd "$ROOT_DIR"
cargo run -p mcp-server >"$LOG_DIR/mcp-server.log" 2>&1
) &
echo $! > "$TMP_DIR/mcp-server.pid"
until curl -fsS "http://127.0.0.1:$MCP_PORT/health" >/dev/null 2>&1; do
sleep 1
done
(
cd "$ROOT_DIR/apps/ui"
node scripts/playwright-ui-server.js >"$LOG_DIR/ui-server.log" 2>&1
) &
echo $! > "$TMP_DIR/ui-server.pid"
until curl -fsS "http://127.0.0.1:$UI_PORT/login" >/dev/null 2>&1; do
sleep 1
done
echo "Crank UI e2e stack is ready on http://127.0.0.1:$UI_PORT"
while true; do
sleep 1
done
+190
View File
@@ -0,0 +1,190 @@
const fs = require('fs');
const path = require('path');
const http = require('http');
const { pipeline } = require('stream');
const { URL } = require('url');
const ROOT_DIR = path.resolve(__dirname, '..');
const UI_PORT = Number(process.env.CRANK_E2E_UI_PORT || 3300);
const ADMIN_PORT = Number(process.env.CRANK_E2E_ADMIN_PORT || 3301);
const ADMIN_BASE = new URL(`http://127.0.0.1:${ADMIN_PORT}`);
const MIME_TYPES = {
'.css': 'text/css; charset=utf-8',
'.html': 'text/html; charset=utf-8',
'.js': 'application/javascript; charset=utf-8',
'.json': 'application/json; charset=utf-8',
'.png': 'image/png',
'.svg': 'image/svg+xml',
'.ico': 'image/x-icon',
'.woff2': 'font/woff2',
'.txt': 'text/plain; charset=utf-8',
};
function sendNotFound(response) {
response.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
response.end('Not Found');
}
function redirect(response, location) {
response.writeHead(302, { Location: location });
response.end();
}
function mapRoute(urlPath) {
if (urlPath === '/' || urlPath === '/index.html') {
return path.join(ROOT_DIR, 'index.html');
}
if (urlPath === '/login' || urlPath === '/login.html') {
return path.join(ROOT_DIR, 'html', 'login.html');
}
if (urlPath === '/agents') {
return path.join(ROOT_DIR, 'html', 'agents.html');
}
if (urlPath === '/api-keys') {
return path.join(ROOT_DIR, 'html', 'api-keys.html');
}
if (urlPath === '/logs') {
return path.join(ROOT_DIR, 'html', 'logs.html');
}
if (urlPath === '/usage') {
return path.join(ROOT_DIR, 'html', 'usage.html');
}
if (urlPath === '/settings') {
return path.join(ROOT_DIR, 'html', 'settings.html');
}
if (urlPath === '/workspace-setup') {
return path.join(ROOT_DIR, 'html', 'workspace-setup.html');
}
if (urlPath === '/wizard/') {
return path.join(ROOT_DIR, 'html', 'wizard', 'index.html');
}
if (urlPath.startsWith('/wizard/')) {
return path.join(ROOT_DIR, 'html', 'wizard', urlPath.slice('/wizard/'.length));
}
if (urlPath.startsWith('/css/')) {
return path.join(ROOT_DIR, urlPath.slice(1));
}
if (urlPath.startsWith('/js/')) {
return path.join(ROOT_DIR, urlPath.slice(1));
}
if (urlPath.startsWith('/icons/')) {
return path.join(ROOT_DIR, urlPath.slice(1));
}
if (urlPath.startsWith('/data/')) {
return path.join(ROOT_DIR, urlPath.slice(1));
}
if (urlPath === '/Crank.png') {
return path.resolve(ROOT_DIR, '..', '..', 'Crank.png');
}
return null;
}
function serveFile(filePath, response) {
const normalized = path.normalize(filePath);
if (!normalized.startsWith(ROOT_DIR) && !normalized.endsWith(path.sep + 'Crank.png')) {
sendNotFound(response);
return;
}
fs.stat(normalized, (error, stats) => {
if (error || !stats.isFile()) {
sendNotFound(response);
return;
}
const extension = path.extname(normalized).toLowerCase();
response.writeHead(200, {
'Content-Length': stats.size,
'Content-Type': MIME_TYPES[extension] || 'application/octet-stream',
'Cache-Control': 'no-store',
});
pipeline(fs.createReadStream(normalized), response, () => {});
});
}
function proxyRequest(request, response) {
const target = new URL(request.url, ADMIN_BASE);
const proxy = http.request(
target,
{
method: request.method,
headers: {
...request.headers,
host: `127.0.0.1:${ADMIN_PORT}`,
},
},
(proxyResponse) => {
response.writeHead(proxyResponse.statusCode || 502, proxyResponse.headers);
pipeline(proxyResponse, response, () => {});
},
);
proxy.on('error', () => {
response.writeHead(502, { 'Content-Type': 'text/plain; charset=utf-8' });
response.end('Bad Gateway');
});
pipeline(request, proxy, () => {});
}
const server = http.createServer((request, response) => {
const requestUrl = new URL(request.url, `http://127.0.0.1:${UI_PORT}`);
const urlPath = requestUrl.pathname;
if (urlPath === '/wizard') {
redirect(response, '/wizard/');
return;
}
if (urlPath === '/html/login.html') {
redirect(response, '/login');
return;
}
if (urlPath === '/html/agents.html') {
redirect(response, '/agents');
return;
}
if (urlPath === '/html/api-keys.html') {
redirect(response, '/api-keys');
return;
}
if (urlPath === '/html/logs.html') {
redirect(response, '/logs');
return;
}
if (urlPath === '/html/usage.html') {
redirect(response, '/usage');
return;
}
if (urlPath === '/html/settings.html') {
redirect(response, '/settings');
return;
}
if (urlPath === '/html/workspace-setup.html') {
redirect(response, '/workspace-setup');
return;
}
if (urlPath === '/html/wizard' || urlPath === '/html/wizard/') {
redirect(response, '/wizard/');
return;
}
if (urlPath.startsWith('/api/auth/') || urlPath.startsWith('/api/admin/')) {
proxyRequest(request, response);
return;
}
const filePath = mapRoute(urlPath);
if (!filePath) {
sendNotFound(response);
return;
}
serveFile(filePath, response);
});
server.listen(UI_PORT, '127.0.0.1', () => {
console.log(`Playwright UI server listening on http://127.0.0.1:${UI_PORT}`);
});