monocart-reporter 1.6.23 → 1.6.25

package/README.md

@@ -18,8 +18,8 @@
 * [Playwright Config](#playwright-config)
 * [Examples](#examples)
 * [Output](#output) HTML and JSON
-* [View Trace Online](#view-trace-online)
 * [Reporter Options](#reporter-options)
+* [View Trace Online](#view-trace-online)
 * [Custom Columns](#custom-columns) (Extra properties for suite/case/step)
     - [Custom Formatter](#custom-formatter)
     - [Searchable Fields](#searchable-fields)
@@ -34,6 +34,7 @@
 * [Attach Lighthouse Audit Report](#attach-lighthouse-audit-report)
 * [Attach Code Coverage Report](#attach-code-coverage-report)
     - [Compare Istanbul, V8 and V8 to Istanbul](#compare-istanbul-v8-and-v8-to-istanbul)
+    - [Global Coverage Report](#global-coverage-report) for Component Testing
 * [Attach Network Report](#attach-network-report)
 * [Merge Shard Reports](#merge-shard-reports)
 * [onEnd hook](#onend-hook)
@@ -104,12 +105,6 @@ module.exports = {
 - path-to/your-filename.json  
 Separated metadata file (Already included in the above HTML and compressed, it can be deleted). Can be used for debugging or custom data collection.
 
-## View Trace Online 
-> The [Trace Viewer](https://trace.playwright.dev/) requires that the trace file must be loaded over the http:// or https:// protocols without [CORS](https://developer.mozilla.org/en-US/docs/Glossary/CORS) issue, try following start a local web server:
-```sh
-npx monocart show-report <your-outputFile-path>
-```
-
 ## Reporter Options
 ```js
 {
@@ -123,6 +118,17 @@ npx monocart show-report <your-outputFile-path>
     attachmentPath: null,
     // attachmentPath: (currentPath, extras) => `https://another-path/${currentPath}`,
 
+    traceViewerUrl: 'https://trace.playwright.dev/?trace={traceUrl}',
+
+    // global coverage settings for addCoverageReport API
+    coverage: null,
+    // coverage: {
+    //     unpackSourceMap: true,
+    //     excludeDistFile: true,
+    //     sourceFilter: (sourceName) => sourceName.search(/\/src\/.+/) !== -1,
+    //     entryFilter: (entry) => {}
+    // },
+
     // trend data handler
     trend: null,
     // trend: () => './test-results/report.json',
@@ -152,6 +158,13 @@ npx monocart show-report <your-outputFile-path>
 }
 ```
 
+## View Trace Online 
+> The [Trace Viewer](https://trace.playwright.dev/) requires that the trace file must be loaded over the http:// or https:// protocols without [CORS](https://developer.mozilla.org/en-US/docs/Glossary/CORS) issue, try following start a local web server:
+```sh
+npx monocart show-report <your-outputFile-path>
+```
+Or customize your own trace viewer url with option `traceViewerUrl` defaults to  `https://trace.playwright.dev/?trace={traceUrl}`
+
 ## Custom Columns
 The report will be displayed in a `Tree Grid`. The `columns` function is used to customize the grid columns. The column properties following:
 - `id` (String) Column id (required)
@@ -623,8 +636,17 @@ Attach a code coverage report with API `attachCoverageReport(data, testInfo, opt
 - `data` There are two supported data inputs `Istanbul` (Object) or `V8` (Array)
 - `testInfo` see [TestInfo](https://playwright.dev/docs/api/class-testinfo)
 - `options` (Object)
-    - `watermarks` By default, watermarks of Istanbul see [here](https://github.com/istanbuljs/istanbuljs/tree/master/packages/istanbul-lib-report) (Object), watermarks of V8 is `[50, 80]` (Array)
-    - `toIstanbul` (Boolean) for V8 data conversion
+    - Istanbul only:
+    - `watermarks` (Object) Istanbul watermarks, see [here](https://github.com/istanbuljs/istanbuljs/tree/master/packages/istanbul-lib-report)
+    - `lcov` (Boolean) Whether to create `lcov.info`
+    - V8 only:
+    - `toIstanbul` (Boolean) Whether to convert to Istanbul report
+    - `watermarks` (Array) Defaults to `[50, 80]` 
+    - `unpackSourceMap` (Boolean) Whether to unpack all sources from the source map if a related source map file is found.
+    - `excludeDistFile` (Boolean) Whether to exclude the dist file (usually minified) if the sources are successfully unpacked from the source map.
+    - `sourceFilter` (Function) A filter function to execute for each element in the sources which unpacked from the source map.
+    - `entryFilter` (Function) A filter function to execute for each element in the V8 list.
+    - `inline` (Boolean) Whether inline all scripts to the single HTML file.
 
  (see example: [report-coverage.spec.js](https://github.com/cenfun/monocart-reporter/blob/main/tests/report-coverage/report-coverage.spec.js))
 
@@ -725,7 +747,7 @@ const report = await attachCoverageReport(coverageList, test.info(), {
 | Minified code | N/A | ✅ | ❌ |
 | Code formatting | N/A | ✅ | ❌ |
 
-## Global Coverage Report
+### Global Coverage Report
 If you want to generate a global coverage report, you can use the API `addCoverageReport(v8list, testInfo)`. When all the tests are finished, all added reports will be automatically merged into a global report. Currently supported `V8` only. Here is an example for Playwright Component Testing [playwright-ct-vue](https://github.com/cenfun/playwright-ct-vue).
 ```js
 // playwright.config.js

package/lib/default/options.js

@@ -9,10 +9,13 @@ module.exports = {
     attachmentPath: null,
     // attachmentPath: (currentPath, extras) => `https://cenfun.github.io/monocart-reporter/${currentPath}`,
 
+    traceViewerUrl: 'https://trace.playwright.dev/?trace={traceUrl}',
+
     // global coverage settings for addCoverageReport API
     coverage: null,
     // coverage: {
     //     unpackSourceMap: true,
+    //     excludeDistFile: true,
     //     sourceFilter: (sourceName) => sourceName.search(/\/src\/.+/) !== -1,
     //     entryFilter: (entry) => {}
     // },

package/lib/generate-data.js

@@ -5,6 +5,7 @@ const { getTickInfo } = require('./utils/system.js');
 const Visitor = require('./visitor.js');
 const { calculateSummary } = require('./common.js');
 const { generateCoverageReport } = require('./plugins/coverage/coverage.js');
+const { generateNetworkReport } = require('./plugins/network/network.js');
 
 const getReportName = (options, config, metadata) => {
     const reportName = options.name || config.name || metadata.name;
@@ -16,11 +17,14 @@ const getReportName = (options, config, metadata) => {
 
 const artifactsHandler = async (visitor, options) => {
     const artifacts = [];
-    const { coverage } = visitor.artifacts;
+    const { coverage, network } = visitor.artifacts;
     visitor.artifacts = null;
     if (coverage) {
         const report = await generateCoverageReport(coverage, options);
-        report.name = 'coverage';
+        artifacts.push(report);
+    }
+    if (network) {
+        const report = await generateNetworkReport(coverage, options);
         artifacts.push(report);
     }
     return artifacts;
@@ -70,6 +74,7 @@ const generateData = async (results) => {
     // suite and case types
     data.suiteTypes = ['project', 'file', 'describe', 'shard'];
     data.caseTypes = ['passed', 'flaky', 'skipped', 'failed'];
+    data.traceViewerUrl = options.traceViewerUrl;
 
     calculateSummary(data, options);
 

package/lib/generate-report.js

@@ -144,17 +144,19 @@ const showTestResults = (reportData) => {
 const generateReport = (reportData, onEnd) => {
 
     console.log('[MCR] generating test report ...');
-
     showTestResults(reportData);
 
-    // console.log(config);
     const {
         outputFile, outputDir, artifacts
     } = reportData;
 
     if (artifacts) {
         artifacts.forEach((report) => {
-            console.log(`[MCR] ${report.name} report: ${EC.cyan(report.htmlPath)}`);
+            console.log(`[MCR] ${report.type} report: ${EC.cyan(report.htmlPath)}`);
+
+            // convert htmlPath to relative reporter
+            report.htmlPath = Util.relativePath(report.htmlPath, outputDir);
+
         });
     }
 

package/lib/plugins/coverage/coverage.js

@@ -21,22 +21,34 @@ const defaultSourceFilter = (sourceName) => {
 };
 
 const defaultV8Options = {
+    // (Boolean) Whether to convert to Istanbul report
     toIstanbul: false,
 
+    // (Boolean) Whether to unpack all sources from the source map if a related source map file is found.
     unpackSourceMap: true,
+    // (Boolean) Whether to exclude the dist file (usually minified) if the sources are successfully unpacked from the source map.
     excludeDistFile: true,
+    // (Function) A filter function to execute for each element in the sources which unpacked from the source map.
     sourceFilter: defaultSourceFilter,
+    // (Function) A filter function to execute for each element in the V8 list.
     entryFilter: null
 
+    // (Array) Defaults to `[50, 80]`
     // watermarks: [50, 80],
+
+    // (Boolean) Whether inline all scripts to the single HTML file.
     // inline: false
 };
 
 const defaultIstanbulOptions = {
-    entryFilter: null,
+
+    // (usually not used) source finder for Istanbul HTML report
     sourceFinder: null,
+
+    // (Boolean) Whether to create `lcov.info`
     lcov: false
 
+    // (Object) Istanbul watermarks, see [here](https://github.com/istanbuljs/istanbuljs/tree/master/packages/istanbul-lib-report)
     // watermarks: {},
 };
 
@@ -242,7 +254,7 @@ const generateCoverageReport = async (dataList, reporterOptions) => {
         v8list = v8list.concat(item.data);
     });
 
-    // merge list, maybe collected multiple times
+    // merge list again for multiple v8list, maybe collected multiple times
     v8list = await mergeV8List(v8list, options);
 
     // const v8Path = path.resolve(__dirname, '../../.temp/v8-data.js');
@@ -254,7 +266,8 @@ const generateCoverageReport = async (dataList, reporterOptions) => {
     const report = await saveV8Report(v8list, options);
 
     return {
-        type: report.type,
+        type: 'coverage',
+        name: 'Coverage',
         htmlPath: report.htmlPath,
         summary: report.summary
     };

package/lib/plugins/coverage/v8/v8.js

@@ -91,11 +91,12 @@ const initV8List = async (v8list, options) => {
         const filename = path.basename(sourcePath);
         item.filename = filename;
         item.sourcePath = sourcePath;
-
+        item.id = Util.calculateSha1(item.url + item.source);
         // console.log(sourcePath);
-
     });
 
+    v8list = await mergeV8List(v8list, options);
+
     return v8list;
 };
 
@@ -142,27 +143,14 @@ const mergeV8Item = async (lastItem, item) => {
 
 const mergeV8List = async (v8list, options) => {
 
-    // sort by url
+    // sort by id, id is hash from url and source
     v8list.sort((a, b) => {
-        if (a.url === b.url) {
-            if (a.source === b.source) {
-                return 0;
-            }
-            return a.source > b.source ? 1 : -1;
-        }
-        return a.url > b.url ? 1 : -1;
+        return a.id > b.id ? 1 : -1;
     });
 
-    // console.log(v8list.map((it) => {
-    //     return {
-    //         url: it.url,
-    //         source: it.source.slice(0, 30)
-    //     };
-    // }));
-
     let lastItem = {};
     for (const item of v8list) {
-        if (item.url === lastItem.url && item.source === lastItem.source) {
+        if (item.id === lastItem.id) {
             item.dedupe = true;
             lastItem = await mergeV8Item(lastItem, item);
             continue;

package/lib/plugins/network/network.js

@@ -161,7 +161,17 @@ const attachNetworkReport = async (har, testInfo, options = {}) => {
     return report;
 };
 
+// TODO
+const addNetworkReport = async () => {
+
+};
+
+const generateNetworkReport = async () => {
+
+};
 
 module.exports = {
+    addNetworkReport,
+    generateNetworkReport,
     attachNetworkReport
 };