ortoni-report 1.1.3 → 1.1.5

package/dist/utils/modal.js

@@ -1,76 +1,16 @@
-const isOpenClass = "modal-is-open";
-const openingClass = "modal-is-opening";
-const closingClass = "modal-is-closing";
-const scrollbarWidthCssVar = "--pico-scrollbar-width";
-const animationDuration = 400; // ms
-let visibleModal = null;
-
-// Toggle modal
-function toggleModal(event) {
-  event.preventDefault();
-  const modal = document.getElementById(event.currentTarget.dataset.target);
-  if (!modal) return;
-  if (modal) {
-    if (modal.open) {
-      closeModal(modal);
-    } else {
-      openModal(modal);
-    }
-  }
-}
-
-// Open modal
-function openModal(modal) {
-  const html = document.documentElement;
-  const scrollbarWidth = getScrollbarWidth();
-  if (scrollbarWidth) {
-    html.style.setProperty(scrollbarWidthCssVar, `${scrollbarWidth}px`);
-  }
-  html.classList.add(isOpenClass, openingClass);
-  setTimeout(function () {
-    visibleModal = modal;
-    html.classList.remove(openingClass);
-  }, animationDuration);
-  modal.showModal();
+// Functions to open and close a modal
+function openModal() {
+  let modal = document.getElementsByClassName("modal")[0];
+  modal.classList.add("is-active")
 }
 
-// Close modal
-function closeModal(modal) {
-  visibleModal = null;
-  const html = document.documentElement;
-  html.classList.add(closingClass);
-  setTimeout(function () {
-    html.classList.remove(closingClass, isOpenClass);
-    html.style.removeProperty(scrollbarWidthCssVar);
-    modal.close();
-  }, animationDuration);
+function closeModal() {
+  let modal = document.getElementsByClassName("modal")[0];
+  modal.classList.remove("is-active")
 }
-
-// Close with a click outside
-document.addEventListener("click", function (event) {
-  if (visibleModal === null) return;
-  const modalContent = visibleModal.querySelector("article");
-  const isClickInside = modalContent.contains(event.target);
-  if (!isClickInside) {
-    closeModal(visibleModal);
+// Add a keyboard event to close all modals
+document.addEventListener('keydown', (event) => {
+  if (event.key === "Escape") {
+    closeModal();
   }
-});
-
-// Close with Esc key
-document.addEventListener("keydown", function (event) {
-  if (event.key === "Escape" && visibleModal) {
-    closeModal(visibleModal);
-  }
-});
-
-// Get scrollbar width
-function getScrollbarWidth() {
-  const scrollbarWidth =
-    window.innerWidth - document.documentElement.clientWidth;
-  return scrollbarWidth;
-}
-
-// Is scrollbar visible
-function isScrollbarVisible() {
-  return document.body.scrollHeight > screen.height;
-}
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ortoni-report",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "Playwright Report By LetCode with Koushik",
   "scripts": {
     "test": "npx playwright test",

package/readme.md

@@ -4,81 +4,97 @@ We are excited to announce the release of OrtoniReport (Playwright report - unof
 
 [Click here to check the live Demo](https://ortoni.netlify.app/)
 
-
-![Ortoni Report](https://github.com/ortoniKC/ortoni-report/assets/58769833/88237970-b97f-4339-94cd-a1e4f3488b10)
+![Ortoni-Report](https://github.com/ortoniKC/ortoni-report/assets/58769833/e88f33d4-eb5c-41c7-b90a-f8a283af0058)
 
 ## Features
 
-1. **Hierarchical Grouping:** 
+1. **Hierarchical Grouping:**
+
    - Test results are now grouped hierarchically by file name, suite name, and project name, allowing for a clear and organized view of your test structure.
-  
+
 2. **Detailed Breakdown:**
+
    - Each suite displays a sub-category for project names, with individual test cases listed under their respective projects.
 
 3. **Test Result Display:**
-   - Display  results including status (passed, failed, skipped), duration, errors, logs, and screenshots.
+
+   - Display results including status (passed, failed, skipped), duration, errors, logs, and screenshots.
    - Organize test results by suite, project, and test script.
 
 4. **Summary Statistics:**
+
    - Provide summary statistics for total tests, passed tests, failed tests, skipped tests, and flaky tests.
    - Success Rate of test suite.
 
 5. **Chart Visualization:**
+
    - Visualize test results using a doughnut chart to represent the distribution of passed, failed, skipped and flaky tests.
 
 6. **Project Information:**
+
    - Include project name, author name, and test type information in the report.
 
 7. **Search Functionality:**
+
    - Search bar to filter and display specific tests based on user input.
 
 8. **Reset Functionality:**
+
    - Allow users to reset the search bar to show all tests when cleared.
 
 9. **Customization:**
+
    - Customize project name, author name, and test type displayed in the report.
-   - Dark/Light theme based on the user browser/system setting.
+   - Dark/Light theme based on the user toggle.
 
 10. **Responsive Design:**
+
     - Design the report layout to be responsive and adaptable to different screen sizes.
 
 11. **Accessibility:**
+
     - Ensure accessibility by providing appropriate HTML attributes and semantic structure.
 
 12. **Ease of Use:**
+
     - Enable easy navigation between test results and summary sections.
 
 13. **Success Rate**
     - The success rate in this project is calculated based on the outcomes of the tests executed using Playwright. The calculation considers tests that pass initially as well as tests that initially fail but pass upon retry
     - Success Rate Formula
-    The success rate (successRate) is calculated using the following formula:
+      The success rate (successRate) is calculated using the following formula:
     ```
     const successRate: string = (((passedTests + flakyTests) / totalTests) * 100).toFixed(2);
     ```
+14. **Project Filtering**: Implemented filtering of tests by projects (e.g., chromium, firefox) to streamline test result views.
 
-These features collectively enhance the readability, usability, and accessibility of the test report, providing valuable insights into test execution and results.
+15. **Screenshots**: Implemented screenshot attachment as base64 images for enhanced report details
+
+    These features collectively enhance the readability, usability, and accessibility of the test report, providing valuable insights into test execution and results.
 
 ### Configurable Report Generation
+
 - **Flexible Configuration:** The reporter can be easily configured within your Playwright configuration file. Example:
   ```JS/TS
-  reporter: [["ortoni-report",
-    {
-      projectName: 'LetCode Playwright Report',
-      authorName: 'Koushik',
-      testType: 'E2E'
-    }],
-  ["dot"]],
+  import {OrtoniReportConfig} from "ortoni-report";
+   const reportConfig: OrtoniReportConfig = {
+        projectName: "Ortoni",
+        testType: "Regression",
+        authorName: "Koushik",
+        preferredTheme: "light"
+   };
+
+  reporter: [["ortoni-report", reportConfig],
+             ["dot"]],
   ```
 
-### Screenshot Handling
-- **Screenshot Storage:** Screenshots are now saved in a structured directory within the root of your project, ensuring that visual evidence is easily accessible.
-- **Automatic Directory Creation:** The reporter automatically creates necessary directories for storing screenshots.
-
 ### Comprehensive Test Details
+
 - **Rich Test Information:** Each test result includes the test title, status, duration, errors, steps, logs, and screenshot paths.
 - **Color-coded Status:** Test statuses are color-coded (green for passed, red for failed, yellow for skipped) for quick visual identification.
 
 ### Handlebars Template Integration
+
 - **Customizable Reports:** The HTML report is generated using Handlebars templates, allowing for easy customization and styling.
 - **JSON Helper:** A custom Handlebars helper for JSON stringification is included to handle complex data structures.
 
@@ -94,17 +110,18 @@ npm install ortoni-report
 
 Configure OrtoniReport in your `playwright.config.ts`:
 
-``` javascript/typescript
+```javascript/typescript
 import { defineConfig } from '@playwright/test';
-
+import {OrtoniReportConfig} from "ortoni-report";
+   const reportConfig: OrtoniReportConfig = {
+        projectName: "Ortoni",
+        testType: "Regression",
+        authorName: "Koushik",
+        preferredTheme: "light"
+   };
 export default defineConfig({
-  reporter: [["ortoni-report",
-    {
-      projectName: 'LetCode Playwright Report',
-      authorName: 'Koushik',
-      testType: 'E2E'
-    }],
-  ["dot"]],
+  reporter: [["ortoni-report", reportConfig],
+             ["dot"]],
   // Other Playwright configurations
 });
 ```
@@ -120,9 +137,11 @@ export default defineConfig({
 - **Advanced Filtering:** Additional filtering options to allow users to focus on specific subsets of test results.
 
 ## Change Logs:
+
 [log](https://github.com/ortoniKC/ortoni-report/blob/main/changelog.md)
 
 ## License:
+
 [LICENSE](https://github.com/ortoniKC/ortoni-report/blob/main/LICENSE.md)
 
 ## Feedback and Contributions
@@ -133,4 +152,4 @@ Thank you for using OrtoniReport! We hope it significantly enhances your Playwri
 
 ---
 
-**LetCode with Koushik**
+**LetCode with Koushik**