ortoni-report 2.0.1 → 2.0.3

package/changelog.md

@@ -1,5 +1,59 @@
 # Change Log:
 
+## Version 2.0.3
+
+#### 🚀 New Features
+- **Add screenshot attachment as pagination**: Now supports adding screenshot attachments for easier navigation and pagination.
+- **Bulma Inline CSS**: Integrated Bulma inline CSS for improved styling.
+- **Show card if the count has value**: Cards will now appear only when a valid count is present.
+- **Folder Path**: Introduced a new feature to store the result in the folder path.
+
+#### ✨ Improvements
+- **Chart JS as CDN**: Enhanced performance by switching Chart.js to be served via CDN.
+- **Theme icon, navbar & summary icons**: Refined the design of theme icons, navbar, and summary icons for a better user experience.
+- **User meta icons**: Updated and improved the appearance of user meta icons.
+- **Show selected filter on nav-end**: Filters now appear on the nav-end when selected.
+- **Filter logic**: Improved filter functionality by only displaying the filtered items, avoiding the use of the `includes` method.
+- **Logo link to page**: Clicking on the logo now navigates to the corresponding page.
+- **Minor tweaks**: Enhanced overall UI experience
+
+## Version 2.0.2
+
+#### 🚀 New Features
+
+- **Show or Hide Projects in Test List**
+  - You can now show or hide specific projects in the test list.
+  - ```showProject: true``` from config
+  
+- **Document Title from Config**
+  - The document title is now configurable via the configuration file, allowing you to customize it to your preference.
+
+- **Display Tags in Test Section**
+  - Tags associated with tests are now displayed within the test section, giving you a clearer overview of test categories.
+
+- **Project and Tags Added to Filter**
+  - We've added the ability to filter tests by both project and tags, enhancing the granularity of your test views.
+  
+- **Display Selected Status on UI**
+  - The selected status filter is now visible on the UI, making it easier to track the current filter settings.
+
+#### 🛠 Fixes
+
+- **Project Drop-down Z-Index on Screenshot**
+  - Resolved an issue where the project drop-down menu was being overlapped by screenshots. The z-index has been adjusted for proper layering.
+
+- **Project Filter Hide Test Steps**
+  - Fixed a bug where applying the project filter would inadvertently hide test steps. Test steps are now correctly displayed based on the filter.
+
+#### ✨ Improvements
+
+- **Hide Skipped Tests on All Tests Filter**
+  - Skipped tests are now hidden by default when using the "All Tests" filter, providing a cleaner and more focused view of relevant tests.
+
+- **Colorful Dashboard**
+  - We've enhanced the visual appeal of the dashboard with more vibrant and intuitive colors, making it easier to navigate and interpret results.
+
+
 ## Version 2.0.1
 - Fixed local and root path issue of Parcel bundler.
 - Local config issue

package/dist/cli/cli.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 "use strict";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };

package/dist/ortoni-report.d.ts

@@ -4,6 +4,16 @@ import { Reporter, FullConfig, Suite, TestCase, TestResult, FullResult } from '@
  * Configuration options for OrtoniReport.
  */
 interface OrtoniReportConfig {
+    /**
+     * The title of the HTML report.
+     * @example "Ortoni Playwright Test Report"
+     */
+    title?: string;
+    /**
+    * Add project on the list of the tests? (Filtering projects still works if hidden)
+    * @example true to display, false to hide.
+    */
+    showProject?: boolean;
     /**
      * The name of the project.
      * @example "Ortoni Project"
@@ -43,6 +53,11 @@ interface OrtoniReportConfig {
     * @example "index.html"
     */
     filename?: string;
+    /**
+    * The folder name.
+    * @example "playwright-report"
+    */
+    folderPath?: string;
 }
 
 interface Steps {
@@ -66,8 +81,9 @@ interface TestResultData {
     steps: Steps[];
     logs: string;
     screenshotPath?: string | null | undefined;
+    screenshots?: string[];
     filePath: string;
-    projects: Set<string>;
+    filters: Set<string>;
     tracePath?: string;
     videoPath?: string;
     base64Image: boolean | undefined;
@@ -80,15 +96,16 @@ declare class OrtoniReport implements Reporter {
     private suiteName;
     private config;
     private projectSet;
-    private tagsSet;
+    private folderPath;
     constructor(config?: OrtoniReportConfig);
     onBegin(config: FullConfig, suite: Suite): void;
     onTestBegin(test: TestCase, result: TestResult): void;
     onTestEnd(test: TestCase, result: TestResult): void;
     private attachFiles;
     onEnd(result: FullResult): void;
+    private registerPartial;
     private groupResults;
-    generateHTML(filteredResults: TestResultData[], totalDuration: string): string;
+    generateHTML(filteredResults: TestResultData[], totalDuration: string, cssContent: string): string;
 }
 
 export { OrtoniReportConfig, OrtoniReport as default };

package/dist/ortoni-report.js

@@ -6623,12 +6623,15 @@ var OrtoniReport = class {
     this.results = [];
     this.groupedResults = {};
     this.projectSet = /* @__PURE__ */ new Set();
-    this.tagsSet = /* @__PURE__ */ new Set();
     this.config = config;
+    this.folderPath = config.folderPath || "playwright-report";
   }
   onBegin(config, suite) {
     this.results = [];
     this.projectRoot = config.rootDir;
+    if (!import_fs.default.existsSync(this.folderPath)) {
+      import_fs.default.mkdirSync(this.folderPath, { recursive: true });
+    }
   }
   onTestBegin(test, result) {
   }
@@ -6671,7 +6674,7 @@ var OrtoniReport = class {
           result.stdout.concat(result.stderr).map((log) => log).join("\n")
         ),
         filePath,
-        projects: this.projectSet,
+        filters: this.projectSet,
         base64Image: this.config.base64Image
       };
       this.attachFiles(result, testResult);
@@ -6683,35 +6686,34 @@ var OrtoniReport = class {
   attachFiles(result, testResult) {
     if (result.attachments) {
       const { base64Image } = this.config;
-      const screenshot = result.attachments.find(
-        (attachment) => attachment.name === "screenshot"
-      );
-      if (screenshot && screenshot.path) {
-        try {
-          const screenshotContent = import_fs.default.readFileSync(
-            screenshot.path,
-            base64Image ? "base64" : void 0
-          );
-          testResult.screenshotPath = base64Image ? `data:image/png;base64,${screenshotContent}` : import_path2.default.resolve(screenshot.path);
-        } catch (error) {
-          console.error(
-            `OrtoniReport: Failed to read screenshot file: ${screenshot.path}`,
-            error
-          );
+      testResult.screenshots = [];
+      result.attachments.forEach((attachment) => {
+        if (attachment.contentType === "image/png") {
+          let screenshotPath = "";
+          if (attachment.path) {
+            try {
+              const screenshotContent = import_fs.default.readFileSync(
+                attachment.path,
+                base64Image ? "base64" : void 0
+              );
+              screenshotPath = base64Image ? `data:image/png;base64,${screenshotContent}` : import_path2.default.resolve(attachment.path);
+            } catch (error) {
+              console.error(
+                `OrtoniReport: Failed to read screenshot file: ${attachment.path}`,
+                error
+              );
+            }
+          } else if (attachment.body) {
+            screenshotPath = `data:image/png;base64,${attachment.body.toString("base64")}`;
+          }
+          if (screenshotPath) {
+            testResult.screenshots?.push(screenshotPath);
+          }
         }
-      }
-      const tracePath = result.attachments.find(
-        (attachment) => attachment.name === "trace"
-      );
-      if (tracePath?.path) {
-        testResult.tracePath = import_path2.default.resolve(__dirname, tracePath.path);
-      }
-      const videoPath = result.attachments.find(
-        (attachment) => attachment.name === "video"
-      );
-      if (videoPath?.path) {
-        testResult.videoPath = import_path2.default.resolve(__dirname, videoPath.path);
-      }
+        if (attachment.name === "video" && attachment.path) {
+          testResult.videoPath = import_path2.default.resolve(__dirname, attachment.path);
+        }
+      });
     }
   }
   onEnd(result) {
@@ -6721,31 +6723,63 @@ var OrtoniReport = class {
       );
       const totalDuration = msToTime(result.duration);
       this.groupResults();
+      import_handlebars.default.registerHelper("joinWithSpace", (array) => array.join(" "));
       import_handlebars.default.registerHelper("json", (context) => safeStringify(context));
       import_handlebars.default.registerHelper(
         "eq",
         (actualStatus, expectedStatus) => actualStatus === expectedStatus
       );
-      const outputFilename = ensureHtmlExtension(this.config.filename || "ortoni-report.html");
-      const html = this.generateHTML(filteredResults, totalDuration);
-      const outputPath = import_path2.default.resolve(process.cwd(), outputFilename);
+      import_handlebars.default.registerHelper("gr", (count) => count > 0);
+      const cssContent = import_fs.default.readFileSync(
+        import_path2.default.resolve(__dirname, "style", "main.css"),
+        "utf-8"
+      );
+      this.registerPartial("navbar");
+      this.registerPartial("testStatus");
+      this.registerPartial("testPanel");
+      this.registerPartial("summaryCard");
+      this.registerPartial("userInfo");
+      const outputFilename = ensureHtmlExtension(
+        this.config.filename || "ortoni-report.html"
+      );
+      if (!import_fs.default.existsSync(this.folderPath)) {
+        import_fs.default.mkdirSync(this.folderPath, { recursive: true });
+      }
+      const html = this.generateHTML(filteredResults, totalDuration, cssContent);
+      const outputPath = import_path2.default.join(process.cwd(), this.folderPath, outputFilename);
       import_fs.default.writeFileSync(outputPath, html);
       console.log(`Ortoni HTML report generated at ${outputPath}`);
     } catch (error) {
       console.error("OrtoniReport: Error generating report:", error);
     }
   }
+  registerPartial(name) {
+    import_handlebars.default.registerPartial(name, import_fs.default.readFileSync(
+      import_path2.default.resolve(__dirname, "views", name + ".hbs"),
+      "utf-8"
+    ));
+  }
   groupResults() {
-    this.groupedResults = this.results.reduce((acc, result, index) => {
-      const { filePath, suite, projectName } = result;
-      acc[filePath] = acc[filePath] || {};
-      acc[filePath][suite] = acc[filePath][suite] || {};
-      acc[filePath][suite][projectName] = acc[filePath][suite][projectName] || [];
-      acc[filePath][suite][projectName].push({ ...result, index });
-      return acc;
-    }, {});
+    if (this.config.showProject) {
+      this.groupedResults = this.results.reduce((acc, result, index) => {
+        const { filePath, suite, projectName } = result;
+        acc[filePath] = acc[filePath] || {};
+        acc[filePath][suite] = acc[filePath][suite] || {};
+        acc[filePath][suite][projectName] = acc[filePath][suite][projectName] || [];
+        acc[filePath][suite][projectName].push({ ...result, index });
+        return acc;
+      }, {});
+    } else {
+      this.groupedResults = this.results.reduce((acc, result, index) => {
+        const { filePath, suite } = result;
+        acc[filePath] = acc[filePath] || {};
+        acc[filePath][suite] = acc[filePath][suite] || [];
+        acc[filePath][suite].push({ ...result, index });
+        return acc;
+      }, {});
+    }
   }
-  generateHTML(filteredResults, totalDuration) {
+  generateHTML(filteredResults, totalDuration, cssContent) {
     try {
       const totalTests = filteredResults.length;
       const passedTests = this.results.filter(
@@ -6757,11 +6791,15 @@ var OrtoniReport = class {
       ).length;
       const successRate = ((passedTests + flakyTests) / totalTests * 100).toFixed(2);
       const templateSource = import_fs.default.readFileSync(
-        import_path2.default.resolve(__dirname, "report-template.hbs"),
+        import_path2.default.resolve(__dirname, "views", "main.hbs"),
         "utf-8"
       );
       const template = import_handlebars.default.compile(templateSource);
       const logo = this.config.logo ? import_path2.default.resolve(this.config.logo) : void 0;
+      const allTags = /* @__PURE__ */ new Set();
+      this.results.forEach((result) => {
+        result.testTags.forEach((tag) => allTags.add(tag));
+      });
       const data = {
         logo,
         totalDuration,
@@ -6780,9 +6818,12 @@ var OrtoniReport = class {
         preferredTheme: this.config.preferredTheme,
         successRate,
         lastRunDate: formatDate(/* @__PURE__ */ new Date()),
-        projects: this.projectSet
+        projects: this.projectSet,
+        allTags: Array.from(allTags),
+        showProject: this.config.showProject || false,
+        title: this.config.title || "Ortoni Playwright Test Report"
       };
-      return template(data);
+      return template({ ...data, inlineCss: cssContent });
     } catch (error) {
       console.error("OrtoniReport: Error generating HTML:", error);
       return `<html><body><h1>Report generation failed</h1><pre>${error.stack}</pre></body></html>`;

package/dist/ortoni-report.mjs

@@ -6619,12 +6619,15 @@ var OrtoniReport = class {
     this.results = [];
     this.groupedResults = {};
     this.projectSet = /* @__PURE__ */ new Set();
-    this.tagsSet = /* @__PURE__ */ new Set();
     this.config = config;
+    this.folderPath = config.folderPath || "playwright-report";
   }
   onBegin(config, suite) {
     this.results = [];
     this.projectRoot = config.rootDir;
+    if (!fs.existsSync(this.folderPath)) {
+      fs.mkdirSync(this.folderPath, { recursive: true });
+    }
   }
   onTestBegin(test, result) {
   }
@@ -6667,7 +6670,7 @@ var OrtoniReport = class {
           result.stdout.concat(result.stderr).map((log) => log).join("\n")
         ),
         filePath,
-        projects: this.projectSet,
+        filters: this.projectSet,
         base64Image: this.config.base64Image
       };
       this.attachFiles(result, testResult);
@@ -6679,35 +6682,34 @@ var OrtoniReport = class {
   attachFiles(result, testResult) {
     if (result.attachments) {
       const { base64Image } = this.config;
-      const screenshot = result.attachments.find(
-        (attachment) => attachment.name === "screenshot"
-      );
-      if (screenshot && screenshot.path) {
-        try {
-          const screenshotContent = fs.readFileSync(
-            screenshot.path,
-            base64Image ? "base64" : void 0
-          );
-          testResult.screenshotPath = base64Image ? `data:image/png;base64,${screenshotContent}` : path2.resolve(screenshot.path);
-        } catch (error) {
-          console.error(
-            `OrtoniReport: Failed to read screenshot file: ${screenshot.path}`,
-            error
-          );
+      testResult.screenshots = [];
+      result.attachments.forEach((attachment) => {
+        if (attachment.contentType === "image/png") {
+          let screenshotPath = "";
+          if (attachment.path) {
+            try {
+              const screenshotContent = fs.readFileSync(
+                attachment.path,
+                base64Image ? "base64" : void 0
+              );
+              screenshotPath = base64Image ? `data:image/png;base64,${screenshotContent}` : path2.resolve(attachment.path);
+            } catch (error) {
+              console.error(
+                `OrtoniReport: Failed to read screenshot file: ${attachment.path}`,
+                error
+              );
+            }
+          } else if (attachment.body) {
+            screenshotPath = `data:image/png;base64,${attachment.body.toString("base64")}`;
+          }
+          if (screenshotPath) {
+            testResult.screenshots?.push(screenshotPath);
+          }
         }
-      }
-      const tracePath = result.attachments.find(
-        (attachment) => attachment.name === "trace"
-      );
-      if (tracePath?.path) {
-        testResult.tracePath = path2.resolve(__dirname, tracePath.path);
-      }
-      const videoPath = result.attachments.find(
-        (attachment) => attachment.name === "video"
-      );
-      if (videoPath?.path) {
-        testResult.videoPath = path2.resolve(__dirname, videoPath.path);
-      }
+        if (attachment.name === "video" && attachment.path) {
+          testResult.videoPath = path2.resolve(__dirname, attachment.path);
+        }
+      });
     }
   }
   onEnd(result) {
@@ -6717,31 +6719,63 @@ var OrtoniReport = class {
       );
       const totalDuration = msToTime(result.duration);
       this.groupResults();
+      import_handlebars.default.registerHelper("joinWithSpace", (array) => array.join(" "));
       import_handlebars.default.registerHelper("json", (context) => safeStringify(context));
       import_handlebars.default.registerHelper(
         "eq",
         (actualStatus, expectedStatus) => actualStatus === expectedStatus
       );
-      const outputFilename = ensureHtmlExtension(this.config.filename || "ortoni-report.html");
-      const html = this.generateHTML(filteredResults, totalDuration);
-      const outputPath = path2.resolve(process.cwd(), outputFilename);
+      import_handlebars.default.registerHelper("gr", (count) => count > 0);
+      const cssContent = fs.readFileSync(
+        path2.resolve(__dirname, "style", "main.css"),
+        "utf-8"
+      );
+      this.registerPartial("navbar");
+      this.registerPartial("testStatus");
+      this.registerPartial("testPanel");
+      this.registerPartial("summaryCard");
+      this.registerPartial("userInfo");
+      const outputFilename = ensureHtmlExtension(
+        this.config.filename || "ortoni-report.html"
+      );
+      if (!fs.existsSync(this.folderPath)) {
+        fs.mkdirSync(this.folderPath, { recursive: true });
+      }
+      const html = this.generateHTML(filteredResults, totalDuration, cssContent);
+      const outputPath = path2.join(process.cwd(), this.folderPath, outputFilename);
       fs.writeFileSync(outputPath, html);
       console.log(`Ortoni HTML report generated at ${outputPath}`);
     } catch (error) {
       console.error("OrtoniReport: Error generating report:", error);
     }
   }
+  registerPartial(name) {
+    import_handlebars.default.registerPartial(name, fs.readFileSync(
+      path2.resolve(__dirname, "views", name + ".hbs"),
+      "utf-8"
+    ));
+  }
   groupResults() {
-    this.groupedResults = this.results.reduce((acc, result, index) => {
-      const { filePath, suite, projectName } = result;
-      acc[filePath] = acc[filePath] || {};
-      acc[filePath][suite] = acc[filePath][suite] || {};
-      acc[filePath][suite][projectName] = acc[filePath][suite][projectName] || [];
-      acc[filePath][suite][projectName].push({ ...result, index });
-      return acc;
-    }, {});
+    if (this.config.showProject) {
+      this.groupedResults = this.results.reduce((acc, result, index) => {
+        const { filePath, suite, projectName } = result;
+        acc[filePath] = acc[filePath] || {};
+        acc[filePath][suite] = acc[filePath][suite] || {};
+        acc[filePath][suite][projectName] = acc[filePath][suite][projectName] || [];
+        acc[filePath][suite][projectName].push({ ...result, index });
+        return acc;
+      }, {});
+    } else {
+      this.groupedResults = this.results.reduce((acc, result, index) => {
+        const { filePath, suite } = result;
+        acc[filePath] = acc[filePath] || {};
+        acc[filePath][suite] = acc[filePath][suite] || [];
+        acc[filePath][suite].push({ ...result, index });
+        return acc;
+      }, {});
+    }
   }
-  generateHTML(filteredResults, totalDuration) {
+  generateHTML(filteredResults, totalDuration, cssContent) {
     try {
       const totalTests = filteredResults.length;
       const passedTests = this.results.filter(
@@ -6753,11 +6787,15 @@ var OrtoniReport = class {
       ).length;
       const successRate = ((passedTests + flakyTests) / totalTests * 100).toFixed(2);
       const templateSource = fs.readFileSync(
-        path2.resolve(__dirname, "report-template.hbs"),
+        path2.resolve(__dirname, "views", "main.hbs"),
         "utf-8"
       );
       const template = import_handlebars.default.compile(templateSource);
       const logo = this.config.logo ? path2.resolve(this.config.logo) : void 0;
+      const allTags = /* @__PURE__ */ new Set();
+      this.results.forEach((result) => {
+        result.testTags.forEach((tag) => allTags.add(tag));
+      });
       const data = {
         logo,
         totalDuration,
@@ -6776,9 +6814,12 @@ var OrtoniReport = class {
         preferredTheme: this.config.preferredTheme,
         successRate,
         lastRunDate: formatDate(/* @__PURE__ */ new Date()),
-        projects: this.projectSet
+        projects: this.projectSet,
+        allTags: Array.from(allTags),
+        showProject: this.config.showProject || false,
+        title: this.config.title || "Ortoni Playwright Test Report"
       };
-      return template(data);
+      return template({ ...data, inlineCss: cssContent });
     } catch (error) {
       console.error("OrtoniReport: Error generating HTML:", error);
       return `<html><body><h1>Report generation failed</h1><pre>${error.stack}</pre></body></html>`;