ortoni-report 2.0.1 → 2.0.3

package/dist/views/summaryCard.hbs

@@ -0,0 +1,14 @@
+{{#if (gr statusCount) }}
+<div class="column is-one-third">
+    <div class="card is-clickable has-background-{{bg}} filter" data-status="{{status}}">
+        <header class="card-header has-text-centered">
+            <p class="card-header-title has-text-white">{{statusHeader}}</p>
+        </header>
+        <div class="card-content">
+            <div class="content">
+                <p class="has-text-centered has-text-white">{{statusCount}}</p>
+            </div>
+        </div>
+    </div>
+</div>
+{{/if}}

package/dist/views/testPanel.hbs

@@ -0,0 +1,37 @@
+<div class="columns is-mobile is-vcentered">
+    <div class="column">
+        <h2 class="title is-4">Tests</h2>
+    </div>
+    <div class="column">
+        <div id="project-filter" class="dropdown is-right is-hoverable is-pulled-right">
+            <div class="dropdown-trigger">
+                <button class="button" aria-haspopup="true" aria-controls="select-filter">
+                    <span>Filters</span>
+                    <span class="icon is-small">
+                        <i class="fas fa-angle-down" aria-hidden="true"></i>
+                    </span>
+                </button>
+            </div>
+            <div class="dropdown-menu" id="select-filter" role="menu">
+                <div class="dropdown-content">
+                    {{#each projects}}
+                    <div class="dropdown-item">
+                        <label class="checkbox is-capitalized">
+                            <input type="checkbox" data-filter-type="project" value="{{this}}"> {{this}}
+                        </label>
+                    </div>
+                    {{/each}}
+                    <hr class="dropdown-divider" />
+                    {{#each allTags}}
+                    <div class="dropdown-item">
+                        <label class="checkbox">
+                            <input type="checkbox" data-filter-type="test-tags" value="{{this}}"> {{this}}
+                        </label>
+                    </div>
+                    {{/each}}
+                    <hr class="dropdown-divider" />
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

package/dist/views/testStatus.hbs

@@ -0,0 +1,33 @@
+<div class="icon-text">
+    {{#if isRetry}}
+    <span class="icon has-text-info">
+        <svg class="image is-16x16" id="Layer_1" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><circle cx="256" cy="256" fill="#00ab5e" r="256"/><path d="m387.823 256.136c0 72.688-59.135 131.823-131.823 131.823s-131.824-59.135-131.824-131.823a132.14 132.14 0 0 1 77.501-120.136 16 16 0 1 1 13.2 29.15 99.852 99.852 0 1 0 103.749 13.25v25.833a16 16 0 0 1 -32 0v-64.192a16 16 0 0 1 16-16h64.192a16 16 0 0 1 0 32h-25.066a132.143 132.143 0 0 1 46.071 100.095z" fill="#fff"/></svg>
+    </span>
+    {{else}}
+    <span class="icon has-text-info">
+        {{#if (eq status "passed")}}
+        <svg class="image is-16x16" height="512" viewBox="0 0 520 520" width="512" xmlns="http://www.w3.org/2000/svg">
+            <g id="_15-Checked" data-name="15-Checked">
+                <circle cx="208.52" cy="288.5" fill="#b0ef8f" r="176.52" />
+                <path
+                    d="m210.516 424.937-2.239-3.815c-34.2-58.27-125.082-181.928-126-183.17l-1.311-1.781 30.963-30.6 98.012 68.439c61.711-80.079 119.283-135.081 156.837-167.2 41.081-35.135 67.822-51.31 68.092-51.465l.608-.364h52.522l-5.017 4.468c-129.029 114.926-268.883 359.19-270.276 361.644z"
+                    fill="#009045" />
+            </g>
+        </svg>
+        {{/if}}
+        {{#if (eq status "failed")}}
+        <svg class="image is-16x16" height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m256 0c-141.164062 0-256 114.835938-256 256s114.835938 256 256 256 256-114.835938 256-256-114.835938-256-256-256zm0 0" fill="#f44336"/><path d="m350.273438 320.105469c8.339843 8.34375 8.339843 21.824219 0 30.167969-4.160157 4.160156-9.621094 6.25-15.085938 6.25-5.460938 0-10.921875-2.089844-15.082031-6.25l-64.105469-64.109376-64.105469 64.109376c-4.160156 4.160156-9.621093 6.25-15.082031 6.25-5.464844 0-10.925781-2.089844-15.085938-6.25-8.339843-8.34375-8.339843-21.824219 0-30.167969l64.109376-64.105469-64.109376-64.105469c-8.339843-8.34375-8.339843-21.824219 0-30.167969 8.34375-8.339843 21.824219-8.339843 30.167969 0l64.105469 64.109376 64.105469-64.109376c8.34375-8.339843 21.824219-8.339843 30.167969 0 8.339843 8.34375 8.339843 21.824219 0 30.167969l-64.109376 64.105469zm0 0" fill="#fafafa"/></svg>
+        {{/if}}
+        {{#if (eq status "skipped")}}
+        <svg class="image is-16x16" id="Layer_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill-rule="evenodd"><path d="m256 0c-141.2 0-256 114.8-256 256s114.8 256 256 256 256-114.8 256-256-114.8-256-256-256z" fill="#fec006"/><path d="m379 244.8c6.3 6.3 6.3 16.4 0 22.7l-112.7 112.5c-3.1 3.1-7.2 4.7-11.3 4.7s-8.2-1.6-11.3-4.7c-6.3-6.3-6.3-16.4 0-22.6l101.3-101.3-101.3-101.3c-6.3-6.3-6.3-16.4 0-22.7s16.4-6.3 22.7 0zm-110.8 22.6-112.5 112.5c-3.1 3.1-7.2 4.7-11.3 4.7s-8.2-1.6-11.3-4.7c-6.2-6.2-6.2-16.4 0-22.6l101.1-101.2-101.2-101.2c-6.2-6.2-6.2-16.4 0-22.6 6.3-6.2 16.4-6.2 22.6 0l112.5 112.5c6.3 6.2 6.3 16.4.1 22.6z" fill="#fff"/></g></svg>
+        {{/if}}
+        {{#if (eq status "timedOut")}}
+        <svg class="image is-16x16" id="Date__x26__Time_-_Flat" enable-background="new 0 0 64 64" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><g><g><g><path d="m46.12 16.71h-.43c-1.427 0-2.769-.555-3.777-1.562-1.008-1.009-1.563-2.347-1.563-3.769 0-1.842-1.494-3.34-3.33-3.34h-.7c-1.836 0-3.33 1.498-3.33 3.34v3.33c0 .553-.447 1-1 1s-1-.447-1-1v-3.33c0-2.944 2.391-5.34 5.33-5.34h.699c2.939 0 5.33 2.396 5.33 5.34 0 .888.348 1.723.978 2.354.631.63 1.47.977 2.363.977h.43c1.842 0 3.34-1.494 3.34-3.33 0-.553.447-1 1-1s1 .447 1 1c0 2.939-2.396 5.33-5.34 5.33z" fill="#565662"/></g><g><path d="m50.46 8.651c-.553 0-1-.447-1-1v-2.892c0-.553.447-1 1-1s1 .447 1 1v2.893c0 .552-.447.999-1 .999z" fill="#fb7088"/></g><g><path d="m47.824 9.744c-.256 0-.512-.098-.707-.293l-2.046-2.046c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l2.046 2.046c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293z" fill="#fb7088"/></g><g><path d="m55.142 17.062c-.256 0-.512-.098-.707-.293l-2.045-2.045c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l2.045 2.045c.391.391.391 1.023 0 1.414-.196.195-.452.293-.707.293z" fill="#fb7088"/></g><g><path d="m57.081 12.38h-2.893c-.553 0-1-.447-1-1s.447-1 1-1h2.893c.553 0 1 .447 1 1s-.447 1-1 1z" fill="#fb7088"/></g><g><path d="m53.097 9.744c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l2.045-2.046c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-2.045 2.046c-.196.195-.451.293-.707.293z" fill="#fb7088"/></g><path d="m36.48 18.96v-4.25h-8.96v4.25c-9.04 2.03-15.79 10.11-15.79 19.76 0 11.2 9.08 20.27 20.27 20.27s20.27-9.07 20.27-20.27c0-9.65-6.75-17.73-15.79-19.76z" fill="#565662"/><path d="m32 54.489c-8.694 0-15.767-7.073-15.767-15.767s7.073-15.767 15.767-15.767 15.767 7.073 15.767 15.767c0 8.693-7.073 15.767-15.767 15.767z" fill="#faf8f9"/><path d="m18.233 40.721c0-8.694 7.073-15.767 15.767-15.767 3.839 0 7.359 1.382 10.096 3.671-2.895-3.462-7.241-5.671-12.096-5.671-8.694 0-15.767 7.073-15.767 15.767 0 4.855 2.209 9.201 5.671 12.096-2.289-2.737-3.671-6.257-3.671-10.096z" fill="#e0cad6"/><g><path d="m31.991 26.758c-.553 0-1-.447-1-1v-3.999c0-.553.447-1 1-1s1 .447 1 1v3.999c0 .553-.447 1-1 1z" fill="#565662"/></g><g><path d="m22.827 30.562c-.256 0-.512-.098-.707-.293l-2.828-2.828c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l2.828 2.828c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293z" fill="#565662"/></g><g><path d="m19.036 39.73h-3.998c-.553 0-1-.447-1-1s.447-1 1-1h3.998c.553 0 1 .447 1 1s-.447 1-1 1z" fill="#565662"/></g><g><path d="m20.012 51.722c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l2.828-2.827c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-2.828 2.827c-.196.195-.451.293-.707.293z" fill="#565662"/></g><g><path d="m32.009 56.684c-.553 0-1-.447-1-1v-3.999c0-.553.447-1 1-1s1 .447 1 1v3.999c0 .552-.447 1-1 1z" fill="#565662"/></g><g><path d="m44.001 51.709c-.256 0-.512-.098-.707-.293l-2.828-2.827c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l2.828 2.827c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293z" fill="#565662"/></g><g><path d="m48.962 39.712h-3.998c-.553 0-1-.447-1-1s.447-1 1-1h3.998c.553 0 1 .447 1 1s-.447 1-1 1z" fill="#565662"/></g><g><path d="m41.16 30.549c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l2.828-2.828c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-2.828 2.828c-.195.195-.451.293-.707.293z" fill="#565662"/></g><g><path d="m32 38.228c-.553 0-1-.447-1-1v-7.819c0-.553.447-1 1-1s1 .447 1 1v7.819c0 .552-.447 1-1 1z" fill="#565662"/></g><g><path d="m26.047 45.675c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.024 0-1.414l4.558-4.555c.391-.391 1.023-.391 1.414 0s.391 1.024 0 1.414l-4.558 4.555c-.195.195-.451.293-.707.293z" fill="#565662"/></g><circle cx="32" cy="38.721" fill="#ffc361" r="2.54"/></g></g></svg>
+        {{/if}}
+        {{#if (eq status "flaky")}}
+        <svg class="image is-16x16" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><g id="Layer_35" data-name="Layer 35"><path d="m32 3.4a28.59 28.59 0 0 0 -28.6 28.6 28.59 28.59 0 0 0 28.6 28.6 28.59 28.59 0 0 0 28.6-28.6 28.59 28.59 0 0 0 -28.6-28.6zm0 49.2a4.32 4.32 0 1 1 4.31-4.31 4.32 4.32 0 0 1 -4.31 4.31zm5.23-35.6-1.63 22a.6.6 0 0 1 -.6.56h-6a.6.6 0 0 1 -.6-.56l-1.63-22a5.24 5.24 0 1 1 10.46 0z" fill="#ffc048"/></g></svg>
+        {{/if}}
+    </span>
+    {{/if}}
+    <span>{{title}}</span>
+</div>

package/dist/views/userInfo.hbs

@@ -0,0 +1,46 @@
+<header class="has-text-centered title is-4">Suite</header>
+<div class="columns">
+    <div class="column is-half">
+        <div class="content">
+            {{#if authorName}}
+            <p class="is-flex is-align-items-center mb-2">
+                <span class="icon has-text-link is-small mr-2">
+                    <i class="fa-solid fa-user-tie"></i>
+                </span>
+                <span class="is-size-6">{{authorName}}</span>
+            </p>
+            {{/if}}
+            {{#if testType}}
+            <p class="is-flex is-align-items-center mb-2">
+                <span class="icon has-text-primary is-small mr-2">
+                    <i class="fas fa-code-branch" style="color: thistle;"></i>
+                </span>
+                <span class="is-size-6">{{testType}}</span>
+            </p>
+            {{/if}}
+            <p class="is-flex is-align-items-center mb-2">
+                <span class="icon has-text-primary is-small mr-2">
+                    <i class="fas fa-stopwatch" style="color: peachpuff;"></i>
+                </span>
+                <span class="is-size-6">{{totalDuration}}</span>
+            </p>
+            <p class="is-flex is-align-items-center mb-2">
+                <span class="icon has-text-success is-small mr-2">
+                    <i class="fas fa-chart-pie"></i>
+                </span>
+                <span class="is-size-6 has-text-weight-bold">{{successRate}} %</span>
+            </p>
+            <p class="is-flex is-align-items-center mb-2">
+                <span class="icon has-text-info is-small mr-2">
+                    <i class="fas fa-calendar-alt"></i>
+                </span>
+                <span class="is-size-6">{{lastRunDate}}</span>
+            </p>
+        </div>
+    </div>
+    <div class="column is-half">
+        <div class="chart-container">
+            <canvas id="testChart"></canvas>
+        </div>
+    </div>
+</div>

package/package.json

@@ -1,17 +1,14 @@
 {
   "name": "ortoni-report",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Playwright Report By LetCode with Koushik",
   "bin": {
     "ortoni-report": "./dist/cli/cli.js"
   },
   "scripts": {
-    "buildparcel": "parcel build",
     "tsc": "tsc",
-    "test": "npx playwright test",
     "build": "tsup",
-    "release": "npm publish",
-    "lint": "tsc"
+    "release": "npm publish"
   },
   "files": [
     "dist",
@@ -43,9 +40,7 @@
     "commander": "^12.1.0",
     "handlebars": "^4.7.8",
     "tsup": "^6.5.0",
-    "typescript": "^4.9.4"
-  },
-  "dependencies": {
+    "typescript": "^4.9.4",
     "parcel": "^2.12.0"
   },
   "main": "dist/ortoni-report.js",

package/readme.md

@@ -1,10 +1,10 @@
-# Playwright Report by Koushik
+# Ortoni Report by Koushik (LetCode with Koushik)
 
-Welcome to Ortoni Report (Playwright report - unofficial), a robust HTML report generator tailored for Playwright tests. Ortoni Report introduces powerful features to enhance test reporting, making it easier to visualize and manage test results.
+Welcome to **Ortoni Report**, a robust HTML report generator tailored for Playwright tests. Ortoni Report introduces powerful features to enhance test reporting, making it easier to visualize and manage test results.
 
-Explore the live demo: [OrtoniReport Demo](https://ortoni.netlify.app/)
+Experience the live report: [Ortoni Report](https://ortoni.netlify.app/)
 
-![alt text](Ortoni-Report.png)
+![Ortoni Report Preview](https://raw.githubusercontent.com/ortoniKC/ortoni-report/refs/heads/V2.0.3/ortoni-report.PNG)
 
 ## Key Features
 
@@ -15,7 +15,7 @@ Explore the live demo: [OrtoniReport Demo](https://ortoni.netlify.app/)
    - Each suite includes categorized tests under respective projects, providing clear organization.
 
 3. **Comprehensive Test Details**
-   - Display test status (passed, failed, skipped), duration, errors, logs, and screenshots.
+   - Display test status (passed, failed, skipped), duration, tags, errors, logs, and screenshots.
    - Sort and filter tests by suite, project, and script for detailed insights.
 
 4. **Summary Statistics**
@@ -31,8 +31,8 @@ Explore the live demo: [OrtoniReport Demo](https://ortoni.netlify.app/)
 
 7. **Customization and Themes**
    - Customize project details, author name, test types, and toggle between dark/light themes.
-   - Option to choose between Base64 images or file path for screenshots.
-   - User can set the report file name
+   - Option to choose between Base64 images or file paths for screenshots.
+   - Users can set the report file name.
 
 8. **Responsive Design**
    - Optimized layout that adapts seamlessly to different screen sizes for accessibility.
@@ -40,53 +40,54 @@ Explore the live demo: [OrtoniReport Demo](https://ortoni.netlify.app/)
 9. **Integration and Configuration**
    - Easily integrate with Playwright configurations using TypeScript/JavaScript.
    - Configure reporting preferences within your Playwright setup.
-   
-10. **Add logo to the report**
-      - Add relative or absolute path of the image to the config.
 
-11. **Share report**
-      - Generat the report and zip the folder and share.   
+10. **Add Logo to the Report**
+    - Add a relative or absolute path of the image to the config.
 
+11. **Share Report**
+    - Once report is generated it is ready to share
 
-### How to Use ortoni-report
+12. **Advanced Filtering**
+    - Filter tests by project, tags, and status simultaneously, with the ability to display only those tests matching the selected criteria.
 
-### Installation
+13. **Colorful Dashboard**
+    - Enhanced the visual appeal of the dashboard with vibrant and intuitive colors.
 
-1. **Install the ortoni-report package**:
+14. **Display Selected Status on UI**
+    - The selected status filter is now visible on the UI, making it easier to track the current filter settings.
 
-    ```sh
-    npm install -g ortoni-report
-    ```
+15. **Hide Skipped Tests by Default**
+    - Skipped tests are now hidden by default when using the "All Tests" filter, providing a cleaner and more focused view of relevant tests.
 
-### Generate and Bundle HTML Report
+### How to Use Ortoni Report
 
-2. **Generate and bundle the report** (Optional):
+#### Installation
+
+1. **Install the ortoni-report package**:
 
     ```sh
-    npx ortoni-report gr -f ortoni-report.html
+    npm install -g ortoni-report
     ```
 
-### Command Overview
-
-- `npx ortoni-report gr -f <filename>`: Bundle the specified report file.
-  - `-f, --filename <filename>`: Specify the filename for the generated report (default: `ortoni-report.html`).   
-
 ### Configurable Report Generation
 
 Configure OrtoniReport in your `playwright.config.ts`:
 
 ```typescript
 import { defineConfig } from '@playwright/test';
-import { OrtoniReportConfig } from 'ortoni-report';
+import { OrtoniReportConfig } from "ortoni-report";
 
 const reportConfig: OrtoniReportConfig = {
-  filename:"myawesomereport.html",
-  logo: "path/logo.png",
-  authorName: "LetCode Koushik",
-  base64Image: false,
-  preferredTheme: "dark",
-  projectName: "Ortoni Demo Report",
-  testType: "Smoke"
+  preferredTheme: "light",
+  filename: "index",
+  authorName: "Koushik (LetCode with Koushik)",
+  projectName: "Ortoni Report V2.0.3",
+  testType: "Release",
+  title: "Ortoni Report By LetCode Koushik",
+  logo: "logo.png",
+  base64Image: true,
+  folderPath: "report",
+  showProject: false
 }
 
 export default defineConfig({
@@ -94,32 +95,16 @@ export default defineConfig({
     // Other Playwright configurations
 });
 ```
-
-### Common Issue
-```
-Error: Command failed:
-@parcel/namer-default: Target "main" declares an     
-output file path of "index.js" which does not match  
-the compiled bundle type "html".
-```
-Solution:
-Remove "main" in the ```package.json``` file
-
 ### Comprehensive Test Details
 
-- **Rich Test Information:** Each test includes details like title, status, duration, tags, errors, steps, logs, video, and screenshot.
-- **Color-coded Status:** Status indicators (green for passed, red for failed, yellow for skipped) for quick identification.
-
-### Handlebars Template Integration
-
-- **Customizable Reports:** HTML reports are generated using Handlebars templates, offering flexibility in customization and styling.
-- **JSON Helper:** Includes a custom Handlebars helper for managing complex data structures.
+- **Rich Test Information**: Each test includes details like title, status, duration, tags, errors, steps, logs, video, and screenshot.
+- **Color-coded Status**: Status indicators (green for passed, red for failed, yellow for skipped) for quick identification.
+- **Static HTML Report**: Single file can be shared easily
 
 ### Future Plans
 
-- **Enhanced Customization:** Additional options for customizing report appearance and structure.
-- **CI/CD Integration:** Improved support for CI/CD environments.
-- **Advanced Filtering:** Expanded filtering capabilities to focus on specific test subsets.
+- **Enhanced Customization**: Additional options for customizing report appearance and structure.
+- **CI/CD Integration**: Improved support for CI/CD environments.
 
 ### Change Logs
 
@@ -133,10 +118,10 @@ View the [LICENSE](https://github.com/ortoniKC/ortoni-report/blob/main/LICENSE.m
 
 We value your feedback and contributions! For issues, suggestions, or contributions, visit our [GitHub repository](https://github.com/ortoniKC/ortoni-report).
 
-Thank you for choosing OrtoniReport. We're committed to enhancing your Playwright testing experience.
+Thank you for choosing Ortoni Report. We're committed to enhancing your Playwright testing experience.
 
 ---
 
 **LetCode with Koushik**
 
----
+---