npm - norn-cli - Versions diffs - 1.2.4 → 1.2.5 - Mend

norn-cli 1.2.4 → 1.2.5

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/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,20 @@
 All notable changes to the "Norn" extension will be documented in this file.
+## [1.2.5] - 2026-02-07
+### Improved
+- **Rich HTML Reports**: Completely redesigned HTML report output for QA professionals
+  - **Pass rate badge**: Large visual indicator showing pass percentage (green/yellow/red)
+  - **Filter bar**: Search tests by name, filter by All/Passed/Failed
+  - **Clickable stat cards**: Click total/passed/failed to filter results
+  - **Expand/Collapse All**: Buttons to quickly expand or collapse all test details
+  - **Failures first**: Failed tests automatically sorted to top and expanded
+  - **Friendly assertion names**: Shows `user.body.status` instead of `$1.body.status`
+  - **JSON path context**: Failed assertions show the path that failed
+  - **Variable labels on requests**: Shows `user = GET /api/users` instead of `$1`
+  - **Environment display**: Shows which environment was used in report header
 ## [1.2.4] - 2026-02-07
 ### Improved

package/dist/cli.js CHANGED Viewed

@@ -22677,7 +22677,7 @@ function formatTimestamp() {
   return (/* @__PURE__ */ new Date()).toISOString().replace("T", " ").replace(/\.\d+Z$/, " UTC");
 }
 function generateHtmlReport(results, options) {
-  const { outputPath, redaction, title = "Norn Test Report" } = options;
+  const { outputPath, redaction, title = "Norn Test Report", environment } = options;
   const totalSequences = results.length;
   const passedSequences = results.filter((r) => r.success).length;
   const failedSequences = totalSequences - passedSequences;
@@ -22686,6 +22686,11 @@ function generateHtmlReport(results, options) {
   const failedAssertions = totalAssertions - passedAssertions;
   const totalRequests = results.reduce((sum, r) => sum + r.steps.filter((s) => s.type === "request").length, 0);
   const totalDuration = results.reduce((sum, r) => sum + r.duration, 0);
+  const sortedResults = [...results].sort((a, b) => {
+    if (a.success !== b.success) return a.success ? 1 : -1;
+    return a.name.localeCompare(b.name);
+  });
+  const passRate = totalSequences > 0 ? Math.round(passedSequences / totalSequences * 100) : 100;
   const html = `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -22700,23 +22705,32 @@ function generateHtmlReport(results, options) {
     <div class="container">
         <header>
             <h1>${escapeHtml(title)}</h1>
-            <p class="timestamp">Generated: ${formatTimestamp()}</p>
+            <div class="header-meta">
+                <span class="timestamp">Generated: ${formatTimestamp()}</span>
+                ${environment ? `<span class="environment">Environment: <strong>${escapeHtml(environment)}</strong></span>` : ""}
+            </div>
         </header>
         <section class="summary">
-            <h2>Summary</h2>
+            <div class="summary-header">
+                <h2>Summary</h2>
+                <div class="pass-rate ${passRate === 100 ? "perfect" : passRate >= 80 ? "good" : "poor"}">
+                    <span class="rate-value">${passRate}%</span>
+                    <span class="rate-label">Pass Rate</span>
+                </div>
+            </div>
             <div class="stats-grid">
-                <div class="stat-card ${failedSequences > 0 ? "has-failures" : "all-passed"}">
-                    <div class="stat-value">${passedSequences}/${totalSequences}</div>
-                    <div class="stat-label">Sequences Passed</div>
+                <div class="stat-card clickable ${failedSequences > 0 ? "has-failures" : "all-passed"}" onclick="filterByStatus('all')" data-filter="all">
+                    <div class="stat-value">${totalSequences}</div>
+                    <div class="stat-label">Total Tests</div>
                 </div>
-                <div class="stat-card ${failedAssertions > 0 ? "has-failures" : "all-passed"}">
-                    <div class="stat-value">${passedAssertions}/${totalAssertions}</div>
-                    <div class="stat-label">Assertions Passed</div>
+                <div class="stat-card clickable ${passedSequences > 0 ? "all-passed" : ""}" onclick="filterByStatus('passed')" data-filter="passed">
+                    <div class="stat-value">${passedSequences}</div>
+                    <div class="stat-label">Passed</div>
                 </div>
-                <div class="stat-card">
-                    <div class="stat-value">${totalRequests}</div>
-                    <div class="stat-label">Total Requests</div>
+                <div class="stat-card clickable ${failedSequences > 0 ? "has-failures" : ""}" onclick="filterByStatus('failed')" data-filter="failed">
+                    <div class="stat-value">${failedSequences}</div>
+                    <div class="stat-label">Failed</div>
                 </div>
                 <div class="stat-card">
                     <div class="stat-value">${formatDuration2(totalDuration)}</div>
@@ -22730,9 +22744,29 @@ function generateHtmlReport(results, options) {
             </div>
         </section>
+        <section class="controls">
+            <div class="filter-bar">
+                <input type="text" id="search-input" placeholder="Search tests..." onkeyup="filterTests()">
+                <div class="filter-buttons">
+                    <button class="filter-btn active" data-filter="all" onclick="setFilter('all')">All (${totalSequences})</button>
+                    <button class="filter-btn" data-filter="passed" onclick="setFilter('passed')">Passed (${passedSequences})</button>
+                    <button class="filter-btn" data-filter="failed" onclick="setFilter('failed')">Failed (${failedSequences})</button>
+                </div>
+            </div>
+            <div class="action-buttons">
+                <button class="action-btn" onclick="expandAll()">Expand All</button>
+                <button class="action-btn" onclick="collapseAll()">Collapse All</button>
+            </div>
+        </section>
         <section class="results">
             <h2>Test Results</h2>
-            ${results.map((r, i) => generateSequenceHtml(r, i, redaction)).join("\n")}
+            <div id="results-container">
+                ${sortedResults.map((r, i) => generateSequenceHtml(r, i, redaction)).join("\n")}
+            </div>
+            <div id="no-results" class="no-results" style="display: none;">
+                No tests match your filter criteria.
+            </div>
         </section>
     </div>
@@ -22797,11 +22831,13 @@ function generateRequestHtml(step, seqIndex, reqIndex, redaction) {
   const statusClass = isSuccess ? "passed" : "failed";
   const method = step.requestMethod || "REQUEST";
   const url2 = step.requestUrl ? redactUrl(step.requestUrl, redaction) : "unknown";
+  const varLabel = step.variableName ? `<span class="var-label">${escapeHtml(step.variableName)}</span><span class="var-equals">=</span>` : "";
   const bodyHtml = response.body ? generateBodyHtml(response.body, redaction) : "<em>No body</em>";
   const headersHtml = response.headers ? generateHeadersHtml(response.headers, redaction) : "";
   return `
         <div class="step request ${statusClass}">
             <div class="step-header" onclick="toggleStep('step-${seqIndex}-${reqIndex}')">
+                ${varLabel}
                 <span class="method">${escapeHtml(method)}</span>
                 <span class="url">${escapeHtml(url2)}</span>
                 <span class="status-code">${response.status} ${escapeHtml(response.statusText)}</span>
@@ -22840,20 +22876,32 @@ function generateAssertionHtml(step, redaction) {
   const assertion = step.assertion;
   const statusClass = assertion.passed ? "passed" : "failed";
   const statusIcon = assertion.passed ? "\u2713" : "\u2717";
-  const displayText = assertion.message || assertion.expression;
+  const displayText = assertion.friendlyName || assertion.message || assertion.expression;
   let detailsHtml = "";
   if (!assertion.passed) {
+    let actualDisplay = "";
+    if (assertion.leftValue === void 0) {
+      actualDisplay = "undefined";
+    } else if (assertion.leftValue === null) {
+      actualDisplay = "null";
+    } else if (typeof assertion.leftValue === "object") {
+      actualDisplay = JSON.stringify(assertion.leftValue, null, 2);
+    } else {
+      actualDisplay = String(assertion.leftValue);
+    }
+    const pathInfo = assertion.jsonPath ? `<div class="assertion-path"><strong>Path:</strong> <code>${escapeHtml(assertion.jsonPath)}</code></div>` : "";
     detailsHtml = `
             <div class="assertion-details">
-                <div><strong>Expected:</strong> ${escapeHtml(String(assertion.rightExpression || assertion.rightValue))}</div>
-                <div><strong>Actual:</strong> ${escapeHtml(JSON.stringify(assertion.leftValue))}</div>
+                ${pathInfo}
+                <div><strong>Expected:</strong> <code>${escapeHtml(String(assertion.rightExpression || assertion.rightValue))}</code></div>
+                <div><strong>Actual:</strong> <code>${escapeHtml(actualDisplay)}</code></div>
                 ${assertion.error ? `<div class="error"><strong>Error:</strong> ${escapeHtml(redactString(assertion.error, redaction))}</div>` : ""}
             </div>`;
   }
   return `
         <div class="step assertion ${statusClass}">
             <span class="status-icon">${statusIcon}</span>
-            <span class="assertion-text">assert ${escapeHtml(displayText)}</span>
+            <span class="assertion-text">${escapeHtml(displayText)}</span>
             ${detailsHtml}
         </div>`;
 }
@@ -22893,17 +22941,48 @@ function getEmbeddedCSS() {
         .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
         header { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #333; }
         header h1 { color: #fff; font-size: 2em; margin-bottom: 10px; }
+        .header-meta { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
         .timestamp { color: #888; font-size: 0.9em; }
+        .environment { color: #888; font-size: 0.9em; }
+        .environment strong { color: #569cd6; }
         h2 { color: #fff; margin-bottom: 15px; font-size: 1.4em; }
-        .summary { background: #252526; border-radius: 8px; padding: 20px; margin-bottom: 30px; }
+        .summary { background: #252526; border-radius: 8px; padding: 20px; margin-bottom: 20px; }
+        .summary-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
+        .pass-rate { text-align: center; padding: 10px 20px; border-radius: 8px; }
+        .pass-rate.perfect { background: #1e3a2f; }
+        .pass-rate.good { background: #2a3a1e; }
+        .pass-rate.poor { background: #3a1e1e; }
+        .rate-value { display: block; font-size: 2em; font-weight: bold; }
+        .pass-rate.perfect .rate-value { color: #4ec9b0; }
+        .pass-rate.good .rate-value { color: #b5cea8; }
+        .pass-rate.poor .rate-value { color: #f14c4c; }
+        .rate-label { font-size: 0.8em; color: #888; }
         .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 20px; }
-        .stat-card { background: #1e1e1e; border-radius: 6px; padding: 15px; text-align: center; }
+        .stat-card { background: #1e1e1e; border-radius: 6px; padding: 15px; text-align: center; transition: transform 0.2s, box-shadow 0.2s; }
+        .stat-card.clickable { cursor: pointer; }
+        .stat-card.clickable:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
         .stat-card.all-passed { border-left: 4px solid #4ec9b0; }
         .stat-card.has-failures { border-left: 4px solid #f14c4c; }
         .stat-value { font-size: 2em; font-weight: bold; color: #fff; }
         .stat-label { color: #888; font-size: 0.85em; margin-top: 5px; }
+        .controls { background: #252526; border-radius: 8px; padding: 15px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
+        .filter-bar { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; flex: 1; }
+        #search-input { background: #1e1e1e; border: 1px solid #333; border-radius: 4px; padding: 8px 12px; color: #d4d4d4; min-width: 200px; font-size: 0.9em; }
+        #search-input:focus { outline: none; border-color: #569cd6; }
+        #search-input::placeholder { color: #666; }
+        .filter-buttons { display: flex; gap: 5px; }
+        .filter-btn { background: #1e1e1e; border: 1px solid #333; border-radius: 4px; padding: 8px 16px; color: #888; cursor: pointer; font-size: 0.9em; transition: all 0.2s; }
+        .filter-btn:hover { border-color: #569cd6; color: #d4d4d4; }
+        .filter-btn.active { background: #264f78; border-color: #264f78; color: #fff; }
+        .action-buttons { display: flex; gap: 10px; }
+        .action-btn { background: transparent; border: 1px solid #444; border-radius: 4px; padding: 8px 16px; color: #888; cursor: pointer; font-size: 0.85em; transition: all 0.2s; }
+        .action-btn:hover { border-color: #666; color: #d4d4d4; }
+        .no-results { text-align: center; padding: 40px; color: #888; font-size: 1.1em; }
         .progress-bar { height: 8px; background: #333; border-radius: 4px; overflow: hidden; }
         .progress-fill { height: 100%; transition: width 0.3s; }
         .progress-fill.all-passed { background: #4ec9b0; }
@@ -22940,6 +23019,8 @@ function getEmbeddedCSS() {
         .step-header { display: flex; align-items: center; gap: 10px; cursor: pointer; }
         .step-header:hover { opacity: 0.9; }
+        .var-label { color: #4fc1ff; font-family: monospace; font-weight: 500; }
+        .var-equals { color: #d4d4d4; margin-right: 5px; }
         .method { background: #264f78; color: #fff; padding: 2px 6px; border-radius: 3px; font-size: 0.8em; font-weight: 600; }
         .url { flex: 1; color: #9cdcfe; font-family: monospace; font-size: 0.9em; word-break: break-all; }
         .status-code { font-weight: 600; }
@@ -22959,6 +23040,9 @@ function getEmbeddedCSS() {
         .assertion-text { font-family: monospace; }
         .assertion-details { width: 100%; margin-top: 8px; padding: 10px; background: #1a1a1a; border-radius: 4px; font-size: 0.9em; }
         .assertion-details div { margin-bottom: 5px; }
+        .assertion-details code { background: #2d2d2d; padding: 2px 6px; border-radius: 3px; font-family: monospace; color: #ce9178; }
+        .assertion-path { color: #888; }
+        .assertion-path code { color: #9cdcfe; }
         .print-icon { font-size: 1em; }
         .print-text { color: #dcdcaa; }
@@ -22975,6 +23059,8 @@ function getEmbeddedCSS() {
 }
 function getEmbeddedJS() {
   return `
+        let currentFilter = 'all';
         function toggleSequence(index) {
             const body = document.getElementById('sequence-body-' + index);
             const sequence = body.closest('.sequence');
@@ -23000,6 +23086,69 @@ function getEmbeddedJS() {
             }
         }
+        function setFilter(filter) {
+            currentFilter = filter;
+            document.querySelectorAll('.filter-btn').forEach(btn => {
+                btn.classList.toggle('active', btn.dataset.filter === filter);
+            });
+            filterTests();
+        }
+        function filterByStatus(filter) {
+            setFilter(filter);
+        }
+        function filterTests() {
+            const searchTerm = document.getElementById('search-input').value.toLowerCase();
+            const sequences = document.querySelectorAll('.sequence');
+            let visibleCount = 0;
+            sequences.forEach(seq => {
+                const name = seq.querySelector('.sequence-name').textContent.toLowerCase();
+                const isPassed = seq.classList.contains('passed');
+                const isFailed = seq.classList.contains('failed');
+                let matchesFilter = currentFilter === 'all' ||
+                    (currentFilter === 'passed' && isPassed) ||
+                    (currentFilter === 'failed' && isFailed);
+                let matchesSearch = !searchTerm || name.includes(searchTerm);
+                if (matchesFilter && matchesSearch) {
+                    seq.style.display = 'block';
+                    visibleCount++;
+                } else {
+                    seq.style.display = 'none';
+                }
+            });
+            document.getElementById('no-results').style.display = visibleCount === 0 ? 'block' : 'none';
+        }
+        function expandAll() {
+            document.querySelectorAll('.sequence').forEach(seq => {
+                if (seq.style.display !== 'none') {
+                    const index = seq.dataset.sequence;
+                    const body = document.getElementById('sequence-body-' + index);
+                    if (body) {
+                        body.style.display = 'block';
+                        seq.classList.add('open');
+                    }
+                }
+            });
+        }
+        function collapseAll() {
+            document.querySelectorAll('.sequence').forEach(seq => {
+                const index = seq.dataset.sequence;
+                const body = document.getElementById('sequence-body-' + index);
+                if (body) {
+                    body.style.display = 'none';
+                    seq.classList.remove('open');
+                }
+            });
+        }
         // Expand all failed sequences by default
         document.querySelectorAll('.sequence.failed').forEach((seq, i) => {
             const index = seq.dataset.sequence;

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "norn-cli",
   "displayName": "Norn - REST Client",
   "description": "A powerful REST client for making HTTP requests with sequences, variables, scripts, and cookie support",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "publisher": "Norn-PeterKrustanov",
   "author": {
     "name": "Peter Krastanov"