ortoni-report 2.0.2 → 2.0.3

package/changelog.md

@@ -1,5 +1,22 @@
 # 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

package/dist/ortoni-report.d.ts

@@ -53,6 +53,11 @@ interface OrtoniReportConfig {
     * @example "index.html"
     */
     filename?: string;
+    /**
+    * The folder name.
+    * @example "playwright-report"
+    */
+    folderPath?: string;
 }
 
 interface Steps {
@@ -76,6 +81,7 @@ interface TestResultData {
     steps: Steps[];
     logs: string;
     screenshotPath?: string | null | undefined;
+    screenshots?: string[];
     filePath: string;
     filters: Set<string>;
     tracePath?: string;
@@ -90,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) {
   }
@@ -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) {
@@ -6727,17 +6729,36 @@ var OrtoniReport = class {
         "eq",
         (actualStatus, expectedStatus) => actualStatus === expectedStatus
       );
+      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"
       );
-      const html = this.generateHTML(filteredResults, totalDuration);
-      const outputPath = import_path2.default.resolve(process.cwd(), outputFilename);
+      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() {
     if (this.config.showProject) {
       this.groupedResults = this.results.reduce((acc, result, index) => {
@@ -6758,7 +6779,7 @@ var OrtoniReport = class {
       }, {});
     }
   }
-  generateHTML(filteredResults, totalDuration) {
+  generateHTML(filteredResults, totalDuration, cssContent) {
     try {
       const totalTests = filteredResults.length;
       const passedTests = this.results.filter(
@@ -6770,14 +6791,13 @@ 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.suiteTags.forEach((tag) => allTags.add(tag));
         result.testTags.forEach((tag) => allTags.add(tag));
       });
       const data = {
@@ -6803,7 +6823,7 @@ var OrtoniReport = class {
         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) {
   }
@@ -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) {
@@ -6723,17 +6725,36 @@ var OrtoniReport = class {
         "eq",
         (actualStatus, expectedStatus) => actualStatus === expectedStatus
       );
+      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"
       );
-      const html = this.generateHTML(filteredResults, totalDuration);
-      const outputPath = path2.resolve(process.cwd(), outputFilename);
+      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() {
     if (this.config.showProject) {
       this.groupedResults = this.results.reduce((acc, result, index) => {
@@ -6754,7 +6775,7 @@ var OrtoniReport = class {
       }, {});
     }
   }
-  generateHTML(filteredResults, totalDuration) {
+  generateHTML(filteredResults, totalDuration, cssContent) {
     try {
       const totalTests = filteredResults.length;
       const passedTests = this.results.filter(
@@ -6766,14 +6787,13 @@ 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.suiteTags.forEach((tag) => allTags.add(tag));
         result.testTags.forEach((tag) => allTags.add(tag));
       });
       const data = {
@@ -6799,7 +6819,7 @@ var OrtoniReport = class {
         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>`;