monocart-reporter 2.9.9 → 2.9.10

package/README.md

@@ -19,6 +19,7 @@
 * [Install](#install)
 * [Playwright Config](#playwright-config)
 * [Examples](#examples)
+* [Tutorial](#tutorial)
 * [Output](#output)
 * [Reporter Options](#reporter-options)
 * [View Trace Online](#view-trace-online)
@@ -88,6 +89,11 @@ Playwright Docs [https://playwright.dev/docs/test-reporters](https://playwright.
 - [monocart-reporter-examples](https://github.com/cenfun/monocart-reporter-examples)
 - [playwright-reporter-integrations](https://github.com/cenfun/playwright-reporter-integrations)
 
+## Tutorial
+- [Playwright + Monocart = Next-Level Custom Reports! | Step-by-Step Tutorial!](https://www.youtube.com/watch?v=8Ae-lkFAG5Q)
+- [Optimising Playwright Reporting Through Monocart](https://engineering.kablamo.com.au/posts/2024/optimising-playwright-reporting-through-monocart/)
+- [Leveraging Playwright's Powerful End-to-End Testing, MongoDB, Data Fixtures for Live Execution Insights](https://www.linkedin.com/pulse/leveraging-playwrights-powerful-end-to-end-testing-data-kandukuri-ak6ac/)
+
 ## Output
 - path-to/your-filename.html  
 Single HTML file (data compressed), easy to transfer/deploy or open directly anywhere   
@@ -846,7 +852,7 @@ Attach a network report with API `attachNetworkReport(har, testInfo)`. Arguments
 - `har` HAR path (String) or HAR file buffer (Buffer). see [HAR 1.2 Spec](http://www.softwareishard.com/blog/har-12-spec/)
 - `testInfo` see [TestInfo](https://playwright.dev/docs/api/class-testinfo)
 
- Generate HAR with `recordHar` option in browser.newContext() (see example: [report-network.spec.js](https://github.com/cenfun/monocart-reporter/blob/main/tests/report-network/report-network.spec.js) preview [report](https://cenfun.github.io/monocart-reporter/network-1a18723ee59b36867898/index.html))
+ Generate HAR with `recordHar` option in browser.newContext() (see example: [report-network.spec.js](https://github.com/cenfun/monocart-reporter/blob/main/tests/report-network/report-network.spec.js) preview [report](https://cenfun.github.io/monocart-reporter/#page=report))
 
 ```js
 const fs = require('fs');
@@ -912,7 +918,7 @@ test('finally, attach HAR', async () => {
     await attachNetworkReport(harPath, test.info());
 });
 ```
-Preview [Network HTML Report](https://cenfun.github.io/monocart-reporter/network-da7f5b4cceb1e6280782/index.html)
+Preview [Network HTML Report](https://cenfun.github.io/monocart-reporter/#page=report)
 
 ## Global State Management
 When tests are executed in [isolation](https://playwright.dev/docs/browser-contexts) mode, the reporter and each test may run in a different process, they cannot share data with each other. we can start a local WebSocket server to serve the global data, and read/write the global data with `useState` API from a test.
@@ -1149,10 +1155,19 @@ module.exports = {
 ## onData hook
 The `onData` function will be executed after report data generated (before `onEnd`).
 ```js
-onData: (reportData) => {
-    // console.log('onData', reportData);
-    reportData.name = 'My Report Name';
-}
+// playwright.config.js
+module.exports = {
+    reporter: [
+        ['monocart-reporter', {  
+            name: "My Test Report",
+            outputFile: './monocart-report/index.html',
+            onData: (reportData) => {
+                // console.log('onData', reportData);
+                reportData.name = 'My New Report Name';
+            }
+        }]
+    ]
+};
 ```
 
 ## Integration Examples

package/lib/common.js

@@ -230,8 +230,13 @@ const getTrends = async (input) => {
         return [];
     }
 
+    // filter with one year ago
+    const date = new Date();
+    const oneYearAgo = date.setFullYear(date.getFullYear() - 1);
+
     // copy previous trends
-    const trends = [].concat(data.trends || []);
+    const trends = [].concat(data.trends || []).filter((it) => it.date > oneYearAgo);
+
     trends.push(Util.getCurrentTrendInfo(data));
 
     return trends;

package/lib/default/summary.js

@@ -4,10 +4,10 @@ module.exports = () => ({
         value: 0,
         nav: true
     },
-    passed: {
-        name: 'Passed',
+    failed: {
+        name: 'Failed',
         value: 0,
-        color: 'green',
+        color: '#d00',
         nav: true
     },
     flaky: {
@@ -22,10 +22,10 @@ module.exports = () => ({
         color: 'gray',
         nav: true
     },
-    failed: {
-        name: 'Failed',
+    passed: {
+        name: 'Passed',
         value: 0,
-        color: '#d00',
+        color: 'green',
         nav: true
     },
 
@@ -60,21 +60,27 @@ module.exports = () => ({
         value: 0
     },
 
-    retries: {
-        name: 'Retries',
+    errors: {
+        name: 'Errors',
+        icon: 'error',
         value: 0
     },
 
-    errors: {
-        name: 'Errors',
+    retries: {
+        name: 'Retries',
+        icon: 'retry',
         value: 0
     },
+
     logs: {
         name: 'Logs',
+        icon: 'log',
         value: 0
     },
+
     attachments: {
         name: 'Attachments',
+        icon: 'attachment',
         value: 0
     }
 });

package/lib/generate-data.js

@@ -97,7 +97,7 @@ const generateData = async (results) => {
 
     // suite and case types
     data.suiteTypes = ['project', 'file', 'describe', 'shard'];
-    data.caseTypes = ['passed', 'flaky', 'skipped', 'failed'];
+    data.caseTypes = ['failed', 'flaky', 'skipped', 'passed'];
     data.traceViewerUrl = options.traceViewerUrl;
     data.mermaid = generateMermaid(options);
     data.groupOptions = options.groupOptions;