@aimeloic/monkey-tester 3.0.3 → 3.0.5

package/htmlTemplate.js

@@ -183,15 +183,14 @@ function getHtmlTemplate(endpoints) {
 <div id="toast"></div>
 
 <script>
-  const ENDPOINTS = JSON.parse(atob(document.getElementById('__monkey_data__').getAttribute('data-payload')));
-  let currentKey = null;
+  var ENDPOINTS = JSON.parse(atob(document.getElementById('__monkey_data__').getAttribute('data-payload')));
+  var currentKey = null;
 
   document.getElementById('base-url').value = window.location.origin;
 
-  // ── Sidebar ────────────────────────────────────────────────────────────────
   function buildSidebar() {
-    const sidebar = document.getElementById('sidebar-nav');
-    const keys = Object.keys(ENDPOINTS);
+    var sidebar = document.getElementById('sidebar-nav');
+    var keys = Object.keys(ENDPOINTS);
 
     if (keys.length === 0) {
       sidebar.innerHTML += '<div style="padding:18px;color:var(--text-dim);font-size:12px">No endpoints discovered.</div>';
@@ -199,16 +198,16 @@ function getHtmlTemplate(endpoints) {
       return;
     }
 
-    keys.forEach((key, i) => {
-      const ep = ENDPOINTS[key];
-      const item = document.createElement('div');
+    keys.forEach(function(key, i) {
+      var ep = ENDPOINTS[key];
+      var item = document.createElement('div');
       item.className = 'nav-item' + (i === 0 ? ' active' : '');
       item.setAttribute('data-key', key);
       item.innerHTML =
         '<span class="method-badge ' + ep.method + '">' + ep.method + '</span>' +
         '<span class="nav-label">' + ep.path + '</span>';
-      item.addEventListener('click', () => {
-        document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+      item.addEventListener('click', function() {
+        document.querySelectorAll('.nav-item').forEach(function(n) { n.classList.remove('active'); });
         item.classList.add('active');
         clearResponse();
         renderPanel(key);
@@ -219,20 +218,18 @@ function getHtmlTemplate(endpoints) {
     renderPanel(keys[0]);
   }
 
-  // ── Panel ──────────────────────────────────────────────────────────────────
   function renderPanel(key) {
     currentKey = key;
-    const ep = ENDPOINTS[key];
-    const main = document.getElementById('main-panel');
+    var ep = ENDPOINTS[key];
+    var main = document.getElementById('main-panel');
     if (!ep) return;
 
-    let html =
+    var 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>';
 
-    // Path params
     if (ep.params && ep.params.length) {
       html += '<div class="form-section"><div class="form-section-title">Path Parameters</div>';
       ep.params.forEach(function(p) {
@@ -245,7 +242,6 @@ function getHtmlTemplate(endpoints) {
       html += '</div>';
     }
 
-    // Body fields
     if (ep.fields && ep.fields.length) {
       html += '<div class="form-section"><div class="form-section-title">Request Body</div>';
       ep.fields.forEach(function(f) {
@@ -274,35 +270,35 @@ function getHtmlTemplate(endpoints) {
       '<p>Make sure <code>app.use(endtesterExpress())</code> is added after your routes.</p></div>';
   }
 
-  // ── Request ────────────────────────────────────────────────────────────────
   async function sendRequest() {
-    const ep = ENDPOINTS[currentKey];
-    let path = ep.path;
+    var ep = ENDPOINTS[currentKey];
+    var path = ep.path;
 
     if (ep.params && ep.params.length) {
-      for (const p of ep.params) {
-        const val = (document.getElementById('param-' + p.name) || {}).value || '';
+      for (var i = 0; i < ep.params.length; i++) {
+        var p = ep.params[i];
+        var val = (document.getElementById('param-' + p.name) || {}).value || '';
         if (!val.trim()) { showToast('⚠ Path param "' + p.label + '" is required'); return; }
         path = path.replace(':' + p.name, encodeURIComponent(val.trim()));
       }
     }
 
-    const baseUrl = document.getElementById('base-url').value.replace(/\/+$/, '');
-    const url = baseUrl + path;
-    const headers = { 'Content-Type': 'application/json' };
-    const jwt = document.getElementById('jwt-input').value.trim();
+    var baseUrl = document.getElementById('base-url').value.replace(/\/+$/, '');
+    var url = baseUrl + path;
+    var headers = { 'Content-Type': 'application/json' };
+    var jwt = document.getElementById('jwt-input').value.trim();
     if (jwt) headers['Authorization'] = 'Bearer ' + jwt;
 
-    let body = undefined;
+    var body = undefined;
     if (['POST', 'PUT', 'PATCH'].includes(ep.method) && ep.fields && ep.fields.length) {
-      const payload = {};
-      let hasData = false;
+      var payload = {};
+      var hasData = false;
       
       ep.fields.forEach(function(f) {
-        const el = document.getElementById('field-' + f.name);
+        var el = document.getElementById('field-' + f.name);
         if (!el) return;
-        let v = el.value.trim();
-        if (v === '') return; // Avoid submitting empty strings for unfilled fields
+        var v = el.value.trim();
+        if (v === '') return;
         
         if (f.type === 'number') v = Number(v);
         payload[f.name] = v;
@@ -313,24 +309,23 @@ function getHtmlTemplate(endpoints) {
     }
 
     setResponse(null, 'loading');
-    const t0 = Date.now();
+    var t0 = Date.now();
 
     try {
-      const res = await fetch(url, { method: ep.method, headers, body });
-      const ms = Date.now() - t0;
-      const text = await res.text();
-      let data;
-      try { data = JSON.parse(text); } catch { data = text; }
+      var res = await fetch(url, { method: ep.method, headers: headers, body: body });
+      var ms = Date.now() - t0;
+      var text = await res.text();
+      var data;
+      try { data = JSON.parse(text); } catch(e) { data = text; }
       setResponse(data, res.ok ? 'ok' : 'err', res.status, ms);
     } catch (err) {
       setResponse({ error: err.message }, 'err', 'FAIL', 0);
     }
   }
 
-  // ── Response ───────────────────────────────────────────────────────────────
   function setResponse(data, state, status, ms) {
-    const badge = document.getElementById('status-badge');
-    const body  = document.getElementById('response-body');
+    var badge = document.getElementById('status-badge');
+    var body  = document.getElementById('response-body');
 
     if (state === 'loading') {
       badge.className = 'status-badge status-idle';
@@ -343,14 +338,14 @@ function getHtmlTemplate(endpoints) {
     badge.className = 'status-badge ' + (state === 'ok' ? 'status-ok' : 'status-err');
     badge.textContent = status + ' · ' + ms + 'ms';
     body.className = 'response-body';
-    const str = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
+    var str = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
     body.innerHTML = '<pre class="json-render-block">' + highlight(str) + '</pre>';
   }
 
   function clearResponse() {
     document.getElementById('status-badge').className = 'status-badge status-idle';
     document.getElementById('status-badge').textContent = '—';
-    const body = document.getElementById('response-body');
+    var body = document.getElementById('response-body');
     body.className = 'response-body empty';
     body.textContent = 'Execute a request to see the response';
   }
@@ -369,10 +364,10 @@ function getHtmlTemplate(endpoints) {
   }
 
   function showToast(msg) {
-    const t = document.getElementById('toast');
+    var t = document.getElementById('toast');
     t.textContent = msg;
     t.classList.add('show');
-    setTimeout(() => t.classList.remove('show'), 2500);
+    setTimeout(function() { t.classList.remove('show'); }, 2500);
   }
 
   buildSidebar();

package/monkey.js

@@ -85,20 +85,27 @@ function fallbackFields(path) {
 
 // ─── Extract router prefix safely from Express layer ─────────────────────────
 function extractRouterPrefix(layer) {
+  // Prefer explicit path if available
+  if (layer.path && typeof layer.path === 'string') {
+    return layer.path === '/' ? '' : layer.path;
+  }
+
   if (!layer.regexp) return '';
-  if (layer.path) return layer.path; // If explicit paths exist
-
-  let src = layer.regexp.source;
-  
-  // Strip out boilerplate generated patterns from default express mounting structures
-  src = src
-    .replace('^\\/', '/')
-    .replace('\\/?(?=\\/|$)', '')
-    .replace('(?:\\/(?=$))?(?=\\/|$)', '')
-    .replace('\\/', '/');
-
-  const cleanPath = src.split('(?')[0].replace(/\\/g, '');
-  return cleanPath === '/' ? '' : cleanPath;
+
+  // Convert the regexp back to a path prefix by looking at the regexp source
+  // Express generates regexps like: /^\/api\/v1\/?(?=\/|$)/i
+  const src = layer.regexp.source;
+
+  // Extract the literal path segment before any optional/lookahead parts
+  // Match from start: ^\/ then literal segments
+  const match = src.match(/^\^((?:\\\/[^\\(?[*+{}|$^]+)+)/);
+  if (!match) return '';
+
+  // Unescape the extracted path
+  const raw = match[1].replace(/\\\//g, '/');
+
+  // Remove trailing slash if present
+  return raw.replace(/\/$/, '') || '';
 }
 
 // ─── Walk the Express router stack recursively ────────────────────────────────
@@ -114,6 +121,7 @@ function parseStack(stack, detectedEndpoints, prefix = '') {
 
       const fullPath = (prefix + rawPath).replace(/\/+/g, '/') || '/';
 
+      // Skip the tester route itself
       if (fullPath.startsWith('/api/tester')) continue;
 
       const methods = Object.keys(layer.route.methods || {});
@@ -122,7 +130,7 @@ function parseStack(stack, detectedEndpoints, prefix = '') {
         const httpMethod = method.toUpperCase();
         const key = `${httpMethod}::${fullPath}`;
 
-        // ── Path params (:id, :slug …) safely parsed using matchAll ─────────
+        // ── Path params (:id, :slug …) ────────────────────────────────────
         const pathParams = [];
         const paramRe = /:([a-zA-Z_$][a-zA-Z0-9_$]*)/g;
         const matches = [...fullPath.matchAll(paramRe)];
@@ -135,13 +143,14 @@ function parseStack(stack, detectedEndpoints, prefix = '') {
           });
         }
 
-        // ── Body fields ────────────────────────────────────────────────────
+        // ── Body fields ──────────────────────────────────────────────────
         let bodyFields = [];
         if (['POST', 'PUT', 'PATCH'].includes(httpMethod)) {
           const handlers = (layer.route.stack || []).map(sl => sl.handle).filter(Boolean);
           for (const handler of handlers) {
             bodyFields.push(...extractBodyFields(handler));
           }
+          // Deduplicate
           const seen = new Map();
           bodyFields = bodyFields.filter(f => {
             if (seen.has(f.name)) return false;
@@ -165,7 +174,7 @@ function parseStack(stack, detectedEndpoints, prefix = '') {
     }
 
     // ── Nested router (app.use('/prefix', router)) ───────────────────────────
-    else if (layer.name === 'router' && layer.handle && layer.handle.stack) {
+    else if (layer.handle && typeof layer.handle === 'function' && layer.handle.stack) {
       const routerPrefix = extractRouterPrefix(layer);
       parseStack(layer.handle.stack, detectedEndpoints, prefix + routerPrefix);
     }
@@ -173,19 +182,19 @@ function parseStack(stack, detectedEndpoints, prefix = '') {
 }
 
 // ─── Middleware ───────────────────────────────────────────────────────────────
-// ─── Middleware in monkey.js ──────────────────────────────────────────────────
 function endtesterExpress() {
   return function monkeyTesterMiddleware(req, res, next) {
-    // Standard structural path cleaning
-    const normalPath = req.path.replace(/\/$/, ''); // removes trailing slash
-    
-    if (normalPath !== '/api/tester') {
+    // Normalize path: strip trailing slash, handle both req.path and req.url
+    const rawPath = (req.path || req.url || '').split('?')[0].replace(/\/+$/, '');
+
+    if (rawPath !== '/api/tester') {
       return next();
     }
 
     const app = req.app;
-    
-    // CRITICAL FIX: Reset the detected endpoints on each call to prevent stale empty states
+
+    // Wait a tick to ensure all routes are registered before scanning
+    // (handles edge cases where middleware is mounted before some routes)
     const detectedEndpoints = {};
 
     const rootStack =
@@ -193,12 +202,10 @@ function endtesterExpress() {
       (app.router  && app.router.stack)  ||   // Express 5
       [];
 
-    // Scan the live compiled routing stack
     parseStack(rootStack, detectedEndpoints);
 
-    // Render page template
     const html = getHtmlTemplate(detectedEndpoints);
-    res.setHeader('Content-Type', 'text/html');
+    res.setHeader('Content-Type', 'text/html; charset=utf-8');
     return res.send(html);
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aimeloic/monkey-tester",
-  "version": "3.0.3",
+  "version": "3.0.5",
   "description": "Auto route scanning visual runner dashboard.",
   "main": "index.js",
   "type": "module",