ortoni-report 1.0.8 → 1.1.0

package/dist/ortoni-report.d.ts

@@ -1,10 +1,17 @@
 import { Reporter, FullConfig, Suite, TestCase, TestResult, FullResult } from '@playwright/test/reporter';
 
+interface ReporterConfig {
+    projectName?: string;
+    authorName?: string;
+    testType?: string;
+}
+
 declare class OrtoniReport implements Reporter {
     private results;
     private groupedResults;
     private suiteName;
-    constructor();
+    private config;
+    constructor(config?: ReporterConfig);
     onBegin(config: FullConfig, suite: Suite): void;
     onTestBegin(test: TestCase, result: TestResult): void;
     onTestEnd(test: TestCase, result: TestResult): void;

package/dist/ortoni-report.js

@@ -34,31 +34,57 @@ __export(ortoni_report_exports, {
 });
 module.exports = __toCommonJS(ortoni_report_exports);
 var import_fs = __toESM(require("fs"));
-var import_path = __toESM(require("path"));
+var import_path2 = __toESM(require("path"));
 var import_handlebars = __toESM(require("handlebars"));
 var import_safe = __toESM(require("colors/safe"));
+
+// src/utils/time.ts
+var import_path = __toESM(require("path"));
+function msToTime(duration) {
+  const seconds = Math.floor(duration / 1e3 % 60);
+  const minutes = Math.floor(duration / (1e3 * 60) % 60);
+  const hours = Math.floor(duration / (1e3 * 60 * 60) % 24);
+  const parts = [];
+  if (hours > 0)
+    parts.push(hours + "h");
+  if (minutes > 0)
+    parts.push(minutes + "m");
+  if (seconds > 0 || parts.length === 0)
+    parts.push(seconds + "s");
+  return parts.join(" ");
+}
+function normalizeFilePath(filePath) {
+  const normalizedPath = import_path.default.normalize(filePath);
+  return import_path.default.basename(normalizedPath);
+}
+
+// src/ortoni-report.ts
 var OrtoniReport = class {
-  constructor() {
+  constructor(config = {}) {
     this.results = [];
+    this.config = config;
   }
   onBegin(config, suite) {
     this.results = [];
-    const screenshotsDir = import_path.default.join(process.cwd(), "screenshots");
-    if (!import_fs.default.existsSync(screenshotsDir)) {
-      import_fs.default.mkdirSync(screenshotsDir);
+    const screenshotsDir = import_path2.default.resolve(process.cwd(), "screenshots");
+    if (import_fs.default.existsSync(screenshotsDir)) {
+      import_fs.default.rmSync(screenshotsDir, { recursive: true, force: true });
     }
+    import_fs.default.mkdirSync(screenshotsDir, { recursive: true });
   }
   onTestBegin(test, result) {
   }
   onTestEnd(test, result) {
     const testResult = {
+      totalDuration: "",
       projectName: test.titlePath()[1],
       // Get the project name
       suite: test.titlePath()[3],
       // Adjust the index based on your suite hierarchy
       title: test.title,
       status: result.status,
-      duration: result.duration,
+      flaky: test.outcome(),
+      duration: msToTime(result.duration),
       errors: result.errors.map((e) => import_safe.default.strip(e.message || e.toString())),
       steps: result.steps.map((step) => ({
         title: step.title,
@@ -68,24 +94,25 @@ var OrtoniReport = class {
       })),
       logs: import_safe.default.strip(result.stdout.concat(result.stderr).map((log) => log).join("\n")),
       screenshotPath: null,
-      filePath: test.titlePath()[2]
+      filePath: normalizeFilePath(test.titlePath()[2])
     };
     if (result.attachments) {
-      const screenshotsDir = import_path.default.join(process.cwd(), "screenshots\\" + test.id);
+      const screenshotsDir = import_path2.default.resolve(process.cwd(), "screenshots", test.id);
       if (!import_fs.default.existsSync(screenshotsDir)) {
-        import_fs.default.mkdirSync(screenshotsDir);
+        import_fs.default.mkdirSync(screenshotsDir, { recursive: true });
       }
       const screenshot = result.attachments.find((attachment) => attachment.name === "screenshot");
       if (screenshot && screenshot.path) {
         const screenshotContent = import_fs.default.readFileSync(screenshot.path, "base64");
-        const screenshotFileName = `screenshots/${test.id}/${import_path.default.basename(screenshot.path)}`;
-        import_fs.default.writeFileSync(import_path.default.join(process.cwd(), screenshotFileName), screenshotContent, "base64");
+        const screenshotFileName = import_path2.default.join("screenshots", test.id, import_path2.default.basename(screenshot.path));
+        import_fs.default.writeFileSync(import_path2.default.resolve(process.cwd(), screenshotFileName), screenshotContent, "base64");
         testResult.screenshotPath = screenshotFileName;
       }
     }
     this.results.push(testResult);
   }
   onEnd(result) {
+    this.results[0].totalDuration = msToTime(result.duration);
     this.groupedResults = this.results.reduce((acc, result2, index) => {
       const filePath = result2.filePath;
       const suiteName = result2.suite;
@@ -105,26 +132,30 @@ var OrtoniReport = class {
     import_handlebars.default.registerHelper("json", function(context) {
       return safeStringify(context);
     });
-    import_handlebars.default.registerHelper("splitSuiteName", function(suiteName) {
-      return suiteName.split(" - ");
-    });
     const html = this.generateHTML();
-    const outputPath = import_path.default.join(process.cwd(), "ortoni-report.html");
+    const outputPath = import_path2.default.resolve(process.cwd(), "ortoni-report.html");
     import_fs.default.writeFileSync(outputPath, html);
     console.log(`Ortoni HTML report generated at ${outputPath}`);
   }
   generateHTML() {
-    const templateSource = import_fs.default.readFileSync(import_path.default.join(__dirname, "report-template.hbs"), "utf-8");
+    const templateSource = import_fs.default.readFileSync(import_path2.default.resolve(__dirname, "report-template.hbs"), "utf-8");
     const template = import_handlebars.default.compile(templateSource);
     const data = {
+      totalDuration: this.results[0].totalDuration,
       suiteName: this.suiteName,
       results: this.results,
       passCount: this.results.filter((r) => r.status === "passed").length,
-      failCount: this.results.filter((r) => r.status === "failed").length,
+      failCount: this.results.filter((r) => r.status === "failed" || r.status === "timedOut").length,
       skipCount: this.results.filter((r) => r.status === "skipped").length,
-      retryCount: this.results.filter((r) => r.status === "retry").length,
+      flakyCount: this.results.filter((r) => r.flaky === "flaky").length,
       totalCount: this.results.length,
-      groupedResults: this.groupedResults
+      groupedResults: this.groupedResults,
+      projectName: this.config.projectName,
+      // Include project name
+      authorName: this.config.authorName,
+      // Include author name
+      testType: this.config.testType
+      // Include test type
     };
     return template(data);
   }

package/dist/ortoni-report.mjs

@@ -1,30 +1,56 @@
 // src/ortoni-report.ts
 import fs from "fs";
-import path from "path";
+import path2 from "path";
 import Handlebars from "handlebars";
 import colors from "colors/safe";
+
+// src/utils/time.ts
+import path from "path";
+function msToTime(duration) {
+  const seconds = Math.floor(duration / 1e3 % 60);
+  const minutes = Math.floor(duration / (1e3 * 60) % 60);
+  const hours = Math.floor(duration / (1e3 * 60 * 60) % 24);
+  const parts = [];
+  if (hours > 0)
+    parts.push(hours + "h");
+  if (minutes > 0)
+    parts.push(minutes + "m");
+  if (seconds > 0 || parts.length === 0)
+    parts.push(seconds + "s");
+  return parts.join(" ");
+}
+function normalizeFilePath(filePath) {
+  const normalizedPath = path.normalize(filePath);
+  return path.basename(normalizedPath);
+}
+
+// src/ortoni-report.ts
 var OrtoniReport = class {
-  constructor() {
+  constructor(config = {}) {
     this.results = [];
+    this.config = config;
   }
   onBegin(config, suite) {
     this.results = [];
-    const screenshotsDir = path.join(process.cwd(), "screenshots");
-    if (!fs.existsSync(screenshotsDir)) {
-      fs.mkdirSync(screenshotsDir);
+    const screenshotsDir = path2.resolve(process.cwd(), "screenshots");
+    if (fs.existsSync(screenshotsDir)) {
+      fs.rmSync(screenshotsDir, { recursive: true, force: true });
     }
+    fs.mkdirSync(screenshotsDir, { recursive: true });
   }
   onTestBegin(test, result) {
   }
   onTestEnd(test, result) {
     const testResult = {
+      totalDuration: "",
       projectName: test.titlePath()[1],
       // Get the project name
       suite: test.titlePath()[3],
       // Adjust the index based on your suite hierarchy
       title: test.title,
       status: result.status,
-      duration: result.duration,
+      flaky: test.outcome(),
+      duration: msToTime(result.duration),
       errors: result.errors.map((e) => colors.strip(e.message || e.toString())),
       steps: result.steps.map((step) => ({
         title: step.title,
@@ -34,24 +60,25 @@ var OrtoniReport = class {
       })),
       logs: colors.strip(result.stdout.concat(result.stderr).map((log) => log).join("\n")),
       screenshotPath: null,
-      filePath: test.titlePath()[2]
+      filePath: normalizeFilePath(test.titlePath()[2])
     };
     if (result.attachments) {
-      const screenshotsDir = path.join(process.cwd(), "screenshots\\" + test.id);
+      const screenshotsDir = path2.resolve(process.cwd(), "screenshots", test.id);
       if (!fs.existsSync(screenshotsDir)) {
-        fs.mkdirSync(screenshotsDir);
+        fs.mkdirSync(screenshotsDir, { recursive: true });
       }
       const screenshot = result.attachments.find((attachment) => attachment.name === "screenshot");
       if (screenshot && screenshot.path) {
         const screenshotContent = fs.readFileSync(screenshot.path, "base64");
-        const screenshotFileName = `screenshots/${test.id}/${path.basename(screenshot.path)}`;
-        fs.writeFileSync(path.join(process.cwd(), screenshotFileName), screenshotContent, "base64");
+        const screenshotFileName = path2.join("screenshots", test.id, path2.basename(screenshot.path));
+        fs.writeFileSync(path2.resolve(process.cwd(), screenshotFileName), screenshotContent, "base64");
         testResult.screenshotPath = screenshotFileName;
       }
     }
     this.results.push(testResult);
   }
   onEnd(result) {
+    this.results[0].totalDuration = msToTime(result.duration);
     this.groupedResults = this.results.reduce((acc, result2, index) => {
       const filePath = result2.filePath;
       const suiteName = result2.suite;
@@ -71,26 +98,30 @@ var OrtoniReport = class {
     Handlebars.registerHelper("json", function(context) {
       return safeStringify(context);
     });
-    Handlebars.registerHelper("splitSuiteName", function(suiteName) {
-      return suiteName.split(" - ");
-    });
     const html = this.generateHTML();
-    const outputPath = path.join(process.cwd(), "ortoni-report.html");
+    const outputPath = path2.resolve(process.cwd(), "ortoni-report.html");
     fs.writeFileSync(outputPath, html);
     console.log(`Ortoni HTML report generated at ${outputPath}`);
   }
   generateHTML() {
-    const templateSource = fs.readFileSync(path.join(__dirname, "report-template.hbs"), "utf-8");
+    const templateSource = fs.readFileSync(path2.resolve(__dirname, "report-template.hbs"), "utf-8");
     const template = Handlebars.compile(templateSource);
     const data = {
+      totalDuration: this.results[0].totalDuration,
       suiteName: this.suiteName,
       results: this.results,
       passCount: this.results.filter((r) => r.status === "passed").length,
-      failCount: this.results.filter((r) => r.status === "failed").length,
+      failCount: this.results.filter((r) => r.status === "failed" || r.status === "timedOut").length,
       skipCount: this.results.filter((r) => r.status === "skipped").length,
-      retryCount: this.results.filter((r) => r.status === "retry").length,
+      flakyCount: this.results.filter((r) => r.flaky === "flaky").length,
       totalCount: this.results.length,
-      groupedResults: this.groupedResults
+      groupedResults: this.groupedResults,
+      projectName: this.config.projectName,
+      // Include project name
+      authorName: this.config.authorName,
+      // Include author name
+      testType: this.config.testType
+      // Include test type
     };
     return template(data);
   }

package/dist/report-template.hbs

@@ -5,9 +5,13 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Playwright Test Report</title>
-    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.css">
+    <link rel="icon" href="node_modules\ortoni-report\src\icon\32.png" type="image/x-icon">
+    <link rel="stylesheet" href="node_modules\ortoni-report\src\css\pico.css">
     <style>
+        body {
+            zoom: 0.9;
+        }
+
         main.container {
             display: grid;
             grid-template-columns: 1fr 2fr;
@@ -24,27 +28,31 @@
             justify-content: space-evenly;
         }
 
+        .highlight {
+            background-color: var(--pico-primary-background);
+        }
+
         .text-success {
             color: #28a745;
         }
 
-        .text-danger {
+        .text-failure {
             color: #dc3545;
         }
 
+        .text-skip {
+            color: #d5d4a1;
+        }
+
+        .text-flaky {
+            color: #d5d4a1;
+        }
+
         .sidebar {
             border-right: 1px solid #ddd;
             padding-right: 10px;
         }
 
-        .card {
-            padding: 1rem;
-            border: 1px solid #ddd;
-            border-radius: 0.5rem;
-            background-color: #fff;
-            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
-        }
-
         pre {
             background-color: #f8f9fa;
             padding: 1rem;
@@ -62,21 +70,21 @@
 <body>
     <header class="container">
         <div class="header">
+            {{!-- Custom Project Name --}}
             <div>
-                <h1>Playwright Test Report</h1>
+                {{#if projectName}}<h1>{{projectName}}</h1>{{/if}}
             </div>
+            {{!-- Dummy for now --}}
             <div>
-                <form role="search">
-                    <input name="search" type="search" placeholder="Search" />
-                    <input type="submit" value="Search" />
-                </form>
+                <input name="search" type="search" placeholder="Search by test title" />
             </div>
         </div>
     </header>
     <main class="container">
+        {{!-- Test Scripts --}}
         <aside class="sidebar">
             <h2>Tests</h2>
-            <div class="">
+            <div>
                 {{#each groupedResults}}
                 <details>
                     <summary>{{@key}}</summary>
@@ -104,15 +112,13 @@
                 {{/each}}
             </div>
         </aside>
-
-
-
         <section>
+            {{!-- Overall summar --}}
             <div id="summary">
                 <section class="grid">
                     <div>
                         <article>
-                            <header>Total Tests</header>
+                            <header>All Tests</header>
                             <p>{{totalCount}}</p>
                         </article>
                     </div>
@@ -125,7 +131,7 @@
                     <div>
                         <article>
                             <header>Failed</header>
-                            <p class="text-danger">{{failCount}}</p>
+                            <p class="text-failure">{{failCount}}</p>
                         </article>
                     </div>
                 </section>
@@ -133,24 +139,34 @@
                     <div>
                         <article>
                             <header>Skipped</header>
-                            <p>{{skipCount}}</p>
+                            <p class="text-skip">{{skipCount}}</p>
                         </article>
                     </div>
                     <div>
                         <article>
-                            <header>Retry</header>
-                            <p class="text-success">{{retryCount}}</p>
+                            <header>Flaky</header>
+                            <p class="text-flaky">{{flakyCount}}</p>
                         </article>
                     </div>
                 </section>
+                {{!-- Suite details with chart --}}
                 <section>
-                    <h2>Test Results</h2>
-                    <div class="chart-container">
-                        <canvas id="testChart"></canvas>
-                    </div>
+                    <article>
+                        <header>Suite</header>
+                        <div class="grid">
+                            <div>
+                                {{#if authorName}}<h4>Author: {{authorName}}</h4>{{/if}}
+                                {{#if testType}}<h4>Test Type: {{testType}}</h4>{{/if}}
+                                {{#if totalDuration}}<h4>Duration: {{totalDuration}}</h4>{{/if}}
+                            </div>
+                            <div class="chart-container">
+                                <canvas id="testChart"></canvas>
+                            </div>
+                        </div>
+                    </article>
                 </section>
             </div>
-
+            {{!-- Test details --}}
             <div id="testDetails" style="display: none;">
                 <!-- Back button should be outside the dynamic content -->
                 <button class="back-button" onclick="showSummary()">Back to Summary</button>
@@ -161,16 +177,33 @@
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
     <script>
+        function escapeHtml(unsafe) {
+            return unsafe.replace(/[&<"']/g, function (match) {
+                const escapeMap = {
+                    '&': '&amp;',
+                    '<': '&lt;',
+                    '>': '&gt;',
+                    '"': '&quot;',
+                    "'": '&#039;'
+                };
+                return escapeMap[match];
+            });
+        }
+
         document.addEventListener('DOMContentLoaded', () => {
-        const testData = {{{ json results }}};
+            const testData = {{{ json results }}};
         const testDetails = document.getElementById('testDetails');
         const summary = document.getElementById('summary');
         const backButton = document.querySelector('.back-button');
+        let highlightedItem = null;
 
         function showSummary() {
             summary.style.display = 'block';
             testDetails.style.display = 'none';
             backButton.style.display = 'none';
+            if (highlightedItem) {
+                highlightedItem.classList.remove('highlight');
+            }
         }
 
         window.showSummary = showSummary;
@@ -181,39 +214,94 @@
             backButton.style.display = 'block';
             testDetails.innerHTML = `
                     <button class="back-button" style="display: block" onclick="showSummary()">Back to Summary</button>
-                    <h2>${test.title}</h2>
+                    <h3>${test.title}</h3>
                     <div class="grid">
                         <div>
-                            <h3>Status</h3>
-                            <p class="${test.status === 'passed' ? 'text-success' : 'text-danger'}">${test.status}</p>
-                            <h3>Duration</h3>
-                            <p>${test.duration}ms</p>
-                            ${test.errors.length ? `
-                            <h3>Errors</h3>
-                            <pre>${test.errors.join('\n')}</pre>
-                            ` : ''}
+                            <h4>Status</h4>
+                            <p class="${test.status === 'passed' ? 'text-success' : 'text-failure'}">${test.status.toUpperCase()}</p>
+                            ${test.duration != '0s' ? `
+                            <h4>Duration</h4>
+                            <p>${test.duration}</p>` : ""}
                         </div>
                         <div>
                             ${test.screenshotPath ? `
-                            <h3>Screenshot</h3>
+                            <h4>Screenshot</h4>
                             <img src="${test.screenshotPath}" alt="Screenshot">
                             ` : ''}
-                            ${test.logs ? `
-                            <h3>Logs</h3>
-                            <pre>${test.logs}</pre>
-                            ` : ''}
                         </div>
                     </div>
+                    <div>
+                    ${test.errors.length ? `
+                            <h4>Errors</h4>
+                            <div class="grid">
+                            <pre>${escapeHtml(test.errors.join('\n'))}</pre></div>
+                            ` : ''}
+                    </div>
+                    <div>
+                    ${test.logs ? `
+                            <h4>Logs</h4>
+                            <div class="grid">
+                            <pre>${escapeHtml(test.logs)}</pre></div>
+                            ` : ''}
+                    </div>
                 `;
         }
 
-        const testItems = document.querySelectorAll('[data-test-id]');
-        testItems.forEach(item => {
-            item.addEventListener('click', () => {
-                const testId = item.getAttribute('data-test-id');
-                const test = testData[testId];
-                displayTestDetails(test);
+        function attachEventListeners() {
+            const testItems = document.querySelectorAll('[data-test-id]');
+            testItems.forEach(item => {
+                item.addEventListener('click', () => {
+                    const testId = item.getAttribute('data-test-id');
+                    const test = testData[testId];
+                    displayTestDetails(test);
+                    if (highlightedItem) {
+                        highlightedItem.classList.remove('highlight');
+                    }
+                    item.classList.add('highlight');
+                    highlightedItem = item;
+                });
             });
+        }
+
+        attachEventListeners(); // Attach event listeners initially
+
+        const searchInput = document.querySelector('input[name="search"]');
+        const detailsElements = document.querySelectorAll('details');
+
+        searchInput.addEventListener('input', () => {
+            const searchTerm = searchInput.value.toLowerCase();
+            const testItems = document.querySelectorAll('[data-test-id]');
+
+            if (searchTerm) {
+                detailsElements.forEach(detail => {
+                    detail.open = false; // Collapse all details initially
+                });
+
+                testItems.forEach(item => {
+                    const testTitle = item.textContent.toLowerCase();
+                    if (testTitle.includes(searchTerm)) {
+                        item.style.display = 'block'; // Show matching test item
+
+                        let parent = item.parentElement;
+                        while (parent && parent.tagName !== 'ASIDE') {
+                            if (parent.tagName === 'DETAILS') {
+                                parent.open = true; // Expand parent details elements
+                            }
+                            parent = parent.parentElement;
+                        }
+                    } else {
+                        item.style.display = 'none'; // Hide non-matching test item
+                    }
+                });
+            } else {
+                testItems.forEach(item => {
+                    item.style.display = 'block'; // Show all test items
+                });
+                detailsElements.forEach(detail => {
+                    detail.open = false; // Collapse all details elements
+                });
+            }
+            attachEventListeners(); // Reattach event listeners after filtering
         });
 
         const ctx = document.getElementById('testChart').getContext('2d');
@@ -223,23 +311,15 @@
                 labels: ['Passed', 'Failed', 'Skipped'],
                 datasets: [{
                     data: [{{ passCount }}, {{ failCount }}, {{ skipCount }}],
-            backgroundColor: ['#28a745', '#dc3545', '#f0f662']
+            backgroundColor: ['#28a745', '#dc3545', '#d5d4a1']
                     }]
                 },
             options: {
             responsive: true,
             maintainAspectRatio: false,
             plugins: {
-                title: {
-                    display: true,
-                    text: 'Overall',
-                    font: {
-                        size: 18,
-                        weight: 'bold'
-                    }
-                },
                 legend: {
-                    position: 'right'
+                    position: 'bottom'
                 }
             }
         }

package/package.json

@@ -1,12 +1,18 @@
 {
   "name": "ortoni-report",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "Playwright Report By LetCode with Koushik",
   "scripts": {
+    "test": "npx playwright test",
     "build": "tsup",
     "release": "npm publish",
     "lint": "tsc"
   },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ortoniKC/ortoni-report"
@@ -19,20 +25,21 @@
     "ortoni"
   ],
   "author": "Koushik Chatterjee (LetCode with Koushik)",
-  "license": "ISC",
+  "license": "GPL-3.0-only",
   "bugs": {
     "url": "https://github.com/ortoniKC/ortoni-report/issues"
   },
   "homepage": "https://github.com/ortoniKC/ortoni-report#readme",
- "dependencies": {
-    "hiq": "^4.2.3",
+  "dependencies": {
     "colors": "^1.4.0",
-    "handlebars": "^4.7.8"
+    "handlebars": "^4.7.8",
+    "hiq": "^4.2.3",
+    "rimraf": "^5.0.7"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.26.0",
     "@playwright/test": "^1.44.1",
     "@types/node": "^20.14.2",
-    "@changesets/cli": "^2.26.0",
     "tsup": "^6.5.0",
     "typescript": "^4.9.4"
   },