npm - @aimeloic/monkey-tester - Versions diffs - 1.0.0 - Mend

@aimeloic/monkey-tester 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/htmlTemplate.js ADDED Viewed

@@ -0,0 +1,295 @@
+export function getHtmlTemplate(endpoints) {
+  return `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Endtester — API Environment</title>
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg: #0e0c09;
+    --surface: #181510;
+    --surface2: #221d14;
+    --border: #3a3020;
+    --accent: #e8a838;
+    --accent2: #c47a1e;
+    --text: #f0e8d8;
+    --text-dim: #9a8c78;
+    --red: #d45c3c;
+    --green: #6ba05a;
+    --blue: #5a86c0;
+    --radius: 8px;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 14px; min-height: 100vh;
+    background-image: radial-gradient(ellipse 80% 60% at 50% -20%, #3a2a0a22 0%, transparent 70%);
+  }
+  header {
+    border-bottom: 1px solid var(--border); padding: 20px 32px; display: flex; align-items: center; gap: 20px;
+    background: #0e0c09ee; backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 100;
+  }
+  .logo { font-family: 'Playfair Display', serif; font-size: 22px; color: var(--accent); letter-spacing: 0.02em; }
+  .logo span { color: var(--text-dim); font-size: 13px; font-family: 'DM Mono', monospace; display: block; font-weight: 400; }
+  .header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
+  .jwt-wrap, .base-url-wrap { display: flex; align-items: center; gap: 8px; }
+  .jwt-wrap label, .base-url-wrap label { color: var(--text-dim); font-size: 12px; font-family: 'DM Mono', monospace; }
+  #jwt-input, #base-url {
+    background: var(--surface2); border: 1px solid var(--border); color: var(--text);
+    font-family: 'DM Mono', monospace; font-size: 11px; padding: 6px 10px; border-radius: var(--radius); width: 220px; outline: none;
+  }
+  .layout { display: grid; grid-template-columns: 260px 1fr 400px; height: calc(100vh - 65px); }
+  aside { border-right: 1px solid var(--border); overflow-y: auto; padding: 16px 0; }
+  .section-label { font-size: 10px; font-family: 'DM Mono', monospace; color: var(--text-dim); letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 18px 6px; }
+  .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 18px; cursor: pointer; border-left: 2px solid transparent; color: var(--text-dim); }
+  .nav-item:hover { background: var(--surface); color: var(--text); }
+  .nav-item.active { border-left-color: var(--accent); background: var(--surface); color: var(--accent); }
+  .method-badge { font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 500; padding: 2px 5px; border-radius: 3px; min-width: 45px; text-align: center; }
+  .GET { background: #1a3a22; color: #6ba05a; }
+  .POST { background: #1a2e3a; color: #5a86c0; }
+  .PUT, .PATCH { background: #3a2e10; color: #e8a838; }
+  .DELETE { background: #3a1a14; color: #d45c3c; }
+  .nav-label { font-size: 11px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  main { overflow-y: auto; padding: 24px; }
+  .endpoint-title { font-family: 'Playfair Display', serif; font-size: 20px; color: var(--accent); margin-bottom: 6px; }
+  .endpoint-path { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text-dim); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
+  .endpoint-desc { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin-bottom: 24px; border-left: 2px solid var(--border); padding-left: 12px; }
+  .form-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
+  .form-section-title { font-size: 11px; font-family: 'DM Mono', monospace; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; }
+  .field-row { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 10px; margin-bottom: 10px; }
+  .field-label { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-dim); text-align: right; }
+  input[type=text], input[type=number], select { background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-family: 'DM Mono', monospace; font-size: 12px; padding: 7px 10px; border-radius: var(--radius); width: 100%; outline: none; }
+  .btn { background: var(--accent); color: #0e0c09; border: none; padding: 10px 22px; border-radius: var(--radius); font-size: 13px; font-weight: 500; cursor: pointer; }
+  .btn-secondary { background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); margin-left: 8px;}
+  .response-panel { border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
+  .response-header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; background: var(--surface); }
+  .response-header-title { font-size: 11px; font-family: 'DM Mono', monospace; color: var(--text-dim); text-transform: uppercase; }
+  .status-badge { font-family: 'DM Mono', monospace; font-size: 12px; margin-left: auto; padding: 2px 8px; border-radius: 4px; }
+  .status-ok { background: #1a3a22; color: #6ba05a; }
+  .status-err { background: #3a1a14; color: #d45c3c; }
+  .status-idle { background: var(--surface2); color: var(--text-dim); }
+  .response-body { flex: 1; overflow-y: auto; padding: 16px; font-family: 'DM Mono', monospace; font-size: 12px; white-space: pre-wrap; word-break: break-all; }
+  .response-body.empty { color: var(--text-dim); display: flex; align-items: center; justify-content: center; }
+  .json-key { color: #e8a838; } .json-str { color: #9ab878; } .json-num { color: #5a86c0; }
+  #toast { position: fixed; bottom: 24px; right: 24px; background: var(--surface2); border: 1px solid var(--border); padding: 10px 18px; border-radius: var(--radius); opacity: 0; transition: all .25s; }
+  #toast.show { opacity: 1; }
+</style>
+</head>
+<body>
+<header>
+  <div class="logo">Endtester <span>Application Runtime Sandbox</span></div>
+  <div class="header-right">
+    <div class="base-url-wrap">
+      <label>TARGET HOST</label>
+      <input id="base-url" type="text" value="">
+    </div>
+    <div class="jwt-wrap">
+      <label>BEARER AUTH</label>
+      <input id="jwt-input" type="text" placeholder="Token value...">
+    </div>
+  </div>
+</header>
+<div class="layout">
+  <aside id="sidebar-nav">
+    <div class="section-label">Discovered Endpoints</div>
+    </aside>
+  <main id="main-panel"></main>
+  <div class="response-panel">
+    <div class="response-header">
+      <span class="response-header-title">Response Output</span>
+      <span id="status-badge" class="status-badge status-idle">—</span>
+    </div>
+    <div class="response-body empty" id="response-body">Execute a request row to generate feedback data</div>
+  </div>
+</div>
+<div id="toast"></div>
+<script>
+// The backend server automatically stringifies the runtime mapping straight into here!
+const ENDPOINTS = ${JSON.stringify(endpoints, null, 2)};
+let currentEp = '';
+// Setup host variables contextually on layout initialization
+document.getElementById('base-url').value = window.location.origin;
+function getBase() { return document.getElementById('base-url').value.replace(/\/$/, ''); }
+function getJwt()  { return document.getElementById('jwt-input').value.trim(); }
+function buildSidebar() {
+  const sidebar = document.getElementById('sidebar-nav');
+  const keys = Object.keys(ENDPOINTS);
+  if(keys.length === 0) {
+    sidebar.innerHTML += '<div style="padding:15px; color:var(--text-dim)">No active application endpoints discovered.</div>';
+    return;
+  }
+  keys.forEach((key, index) => {
+    const ep = ENDPOINTS[key];
+    const div = document.createElement('div');
+    div.className = \`nav-item \${index === 0 ? 'active' : ''}\`;
+    div.setAttribute('data-ep', key);
+    div.innerHTML = \`<span class="method-badge \${ep.method}">\${ep.method}</span><span class="nav-label">\${ep.path}</span>\`;
+    div.addEventListener('click', () => {
+      document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+      div.classList.add('active');
+      clearResponse();
+      renderPanel(key);
+    });
+    sidebar.appendChild(div);
+  });
+  // Render first item initially
+  if(keys.length > 0) renderPanel(keys[0]);
+}
+function renderPanel(epKey) {
+  currentEp = epKey;
+  const ep = ENDPOINTS[epKey];
+  const main = document.getElementById('main-panel');
+  if(!ep) return;
+  let html = \`
+    <div class="endpoint-title">\${ep.title}</div>
+    <div class="endpoint-path">
+      <span class="method-badge \${ep.method}">\${ep.method}</span>
+      <span>\${ep.path}</span>
+    </div>
+    <div class="endpoint-desc">\${ep.desc}</div>
+  \`;
+  if (ep.params?.length) {
+    html += \`<div class="form-section"><div class="form-section-title">Path Parameters</div>\`;
+    ep.params.forEach(p => {
+      html += \`<div class="field-row">
+        <label class="field-label">\${p.label}</label>
+        <input type="text" id="param-\${p.name}" placeholder="\${p.placeholder}" />
+      </div>\`;
+    });
+    html += \`</div>\`;
+  }
+  if (ep.fields?.length) {
+    html += \`<div class="form-section"><div class="form-section-title">JSON Request Body Raw Payload</div>\`;
+    ep.fields.forEach(f => {
+      html += \`<div class="field-row">
+        <label class="field-label">\${f.label}</label>
+        <input type="text" id="field-\${f.name}" value='{"key": "value"}' />
+      </div>\`;
+    });
+    html += \`</div>\`;
+  }
+  html += \`<div class="btn-row">
+    <button class="btn" onclick="sendRequest()">Execute Route</button>
+    <button class="btn btn-secondary" onclick="clearResponse()">Clear Context</button>
+  </div>\`;
+  main.innerHTML = html;
+}
+async function sendRequest() {
+  const ep = ENDPOINTS[currentEp];
+  let path = ep.path;
+  if (ep.params) {
+    for (const p of ep.params) {
+      const val = document.getElementById(\`param-\${p.name}\`)?.value.trim();
+      if (!val) { showToast(\`⚠ Parameter \${p.label} required\`); return; }
+      path = path.replace(\`:\${p.name}\`, encodeURIComponent(val));
+    }
+  }
+  const url = getBase() + path;
+  const headers = { 'Content-Type': 'application/json' };
+  const jwt = getJwt();
+  if (jwt) headers['Authorization'] = \`Bearer \${jwt}\`;
+  let body = undefined;
+  if (ep.fields?.length && ['POST','PUT','PATCH'].includes(ep.method)) {
+    const rawVal = document.getElementById(\`field-\${ep.fields[0].name}\`).value.trim();
+    try {
+      JSON.parse(rawVal);
+      body = rawVal;
+    } catch(e) {
+      showToast('❌ Malformed JSON Body structure provided.');
+      return;
+    }
+  }
+  setResponse(null, 'loading');
+  const start = Date.now();
+  try {
+    const res = await fetch(url, { method: ep.method, headers, body });
+    const ms = Date.now() - start;
+    const text = await res.text();
+    let json;
+    try { json = JSON.parse(text); } catch { json = text; }
+    setResponse(json, res.ok ? 'ok' : 'err', res.status, ms);
+  } catch (err) {
+    setResponse({ error: err.message }, 'err', 'FAIL', 0);
+  }
+}
+function setResponse(data, state, status, ms) {
+  const badge = document.getElementById('status-badge');
+  const body  = document.getElementById('response-body');
+  if (state === 'loading') {
+    badge.className = 'status-badge status-idle';
+    badge.textContent = '…';
+    body.innerHTML = 'Executing transmission...';
+    return;
+  }
+  badge.className = \`status-badge \${state === 'ok' ? 'status-ok' : 'status-err'}\`;
+  badge.textContent = \`\${status} · \${ms}ms\`;
+  body.innerHTML = highlightJson(typeof data === 'string' ? data : JSON.stringify(data, null, 2));
+}
+function clearResponse() {
+  const badge = document.getElementById('status-badge');
+  const body  = document.getElementById('response-body');
+  badge.className = 'status-badge status-idle';
+  badge.textContent = '—';
+  body.className = 'response-body empty';
+  body.textContent = 'Execute a request row to generate feedback data';
+}
+function highlightJson(str) {
+  return str
+    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => {
+      if (/^"/.test(match)) {
+        if (/:$/.test(match)) return \`<span class="json-key">\${match}</span>\`;
+        return \`<span class="json-str">\${match}</span>\`;
+      }
+      return \`<span class="json-num">\${match}</span>\`;
+    });
+}
+function showToast(msg) {
+  const t = document.getElementById('toast');
+  t.textContent = msg; t.classList.add('show');
+  setTimeout(() => t.classList.remove('show'), 2500);
+}
+// Initial fire
+buildSidebar();
+</script>
+</body>
+</html>
+`;
+}

package/index.js ADDED Viewed

@@ -0,0 +1,83 @@
+import { getHtmlTemplate } from './htmlTemplate.js';
+/**
+ * Express middleware to automatically map routes and serve the endtester UI
+ */
+export function endtesterExpress() {
+  return (req, res, next) => {
+    // We only intercept requests hitting the tester path
+    if (req.path !== '/api/tester' && req.path !== '/api/tester/') {
+      return next();
+    }
+    // 1. Inspect the Express app to extract all registered routes
+    const expressApp = req.app;
+    const routesStack = expressApp._router.stack;
+    const detectedEndpoints = {};
+    routesStack.forEach((middleware) => {
+      if (middleware.route) {
+        // Simple top-level routes
+        processRoute(middleware.route, detectedEndpoints);
+      } else if (middleware.name === 'router') {
+        // Nested router stacks (e.g., app.use('/api', apiRouter))
+        const baseUrl = middleware.regexp.source
+          .replace('^\\', '')
+          .replace('\\/?(?=\\/|$)', '')
+          .replace('\\', '');
+        middleware.handle.stack.forEach((nestedHandler) => {
+          if (nestedHandler.route) {
+            processRoute(nestedHandler.route, detectedEndpoints, baseUrl);
+          }
+        });
+      }
+    });
+    // 2. Generate the HTML template injecting our found endpoints
+    const fullHtml = getHtmlTemplate(detectedEndpoints);
+    // 3. Serve the interactive tester page
+    res.setHeader('Content-Type', 'text/html');
+    return res.send(fullHtml);
+  };
+}
+/**
+ * Formats Express route data into the shape your UI script expects
+ */
+function processRoute(route, targetObject, prefix = '') {
+  const fullPath = `${prefix}${route.path}`.replace(/\/+/g, '/');
+  // Skip the tester endpoint itself to avoid recursion confusion
+  if (fullPath.includes('/api/tester')) return;
+  // Extract path parameters (e.g., :id)
+  const pathParams = route.keys ? route.keys.map(k => ({
+    name: k.name,
+    label: k.name.toUpperCase(),
+    placeholder: 'value'
+  })) : [];
+  Object.keys(route.methods).forEach((method) => {
+    if (!route.methods[method]) return;
+    const httpMethod = method.toUpperCase();
+    // Unique key for your UI state
+    const key = `${httpMethod.toLowerCase()}-${fullPath.replace(/[^a-zA-Z0-9]/g, '-')}`;
+    // Infer basic structure based on request types
+    const needsBody = ['POST', 'PUT', 'PATCH'].includes(httpMethod);
+    targetObject[key] = {
+      method: httpMethod,
+      path: fullPath,
+      auth: true, // Default to true, users can toggle or override
+      title: `${httpMethod} ${fullPath}`,
+      desc: `Auto-generated tester for ${fullPath}`,
+      params: pathParams,
+      queryParams: httpMethod === 'GET' ? [{ name: 'limit', label: 'Limit', placeholder: '10' }] : [],
+      fields: needsBody ? [{ name: 'payload', label: 'JSON Body Field', type: 'text', placeholder: 'Data string' }] : []
+    };
+  });
+}

package/package.json ADDED Viewed

@@ -0,0 +1,13 @@
+{
+  "name": "@aimeloic/monkey-tester",
+  "version": "1.0.0",
+  "description": "Embedded interactive API testing UI for Node.js backends",
+  "main": "index.js",
+  "type":"module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}