monocart-reporter 1.6.24 → 1.6.26

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)
@@ -105,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
 {
@@ -124,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: {
+    //     entryFilter: (entry) => true,
+    //     unpackSourceMap: true,
+    //     excludeDistFile: true,
+    //     sourceFilter: (sourceName) => sourceName.search(/\/src\/.+/) !== -1,
+    // },
+
     // trend data handler
     trend: null,
     // trend: () => './test-results/report.json',
@@ -153,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)
@@ -624,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]` 
+    - `entryFilter` (Function) A filter function to execute for each element in the V8 list.
+    - `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.
+    - `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))
 
@@ -737,10 +758,10 @@ module.exports = {
             outputFile: './test-results/report.html',
             // global coverage report options
             coverage: {
+                entryFilter: (entry) => true,
                 unpackSourceMap: true,
                 excludeDistFile: true,
                 sourceFilter: (sourceName) => sourceName.search(/\/src\/.+/) !== -1,
-                entryFilter: (entry) => {}
             }
         }]
     ]

package/lib/default/options.js

@@ -9,12 +9,15 @@ 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: {
+    //     entryFilter: (entry) => true,
     //     unpackSourceMap: true,
+    //     excludeDistFile: true,
     //     sourceFilter: (sourceName) => sourceName.search(/\/src\/.+/) !== -1,
-    //     entryFilter: (entry) => {}
     // },
 
     // trend data handler

package/lib/default/template.html

@@ -2,11 +2,46 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" href="data:,">
     <title>{title}</title>
+    <style>
+    @keyframes fs-loading-animation {
+        0% {
+            transform: rotate(0deg);
+        }
+
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    .fs-loading {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        z-index: 100;
+        width: 50px;
+        height: 50px;
+        margin-top: -25px;
+        margin-left: -25px;
+        animation: 0.382s fs-loading-animation linear infinite;
+    }
+
+    .fs-loading svg {
+        display: block;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+    }
+    </style>
 </head>
 <body>
+<div class="fs-loading">
+    <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 16 16">
+        <path d="M1,8 A7 7 0 1 1 8 15" stroke="#999" stroke-width="2" stroke-linecap="round" fill="none"/>
+    </svg>
+</div>
 {content}
 </body>
 </html>

package/lib/generate-data.js

@@ -74,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/platform/share.js

@@ -158,30 +158,6 @@ const Util = {
         return info;
     },
 
-    getFlatRanges: (functions) => {
-        const flatRanges = [];
-        if (functions && functions.length) {
-            functions.forEach((fun) => {
-                const ranges = fun.ranges;
-                if (ranges && ranges.length) {
-                    ranges.forEach((range) => {
-                        flatRanges.push(range);
-                    });
-                }
-            });
-            flatRanges.sort((a, b) => {
-                if (a.startOffset === b.startOffset) {
-                    if (a.endOffset === b.endOffset) {
-                        return a.count - b.count;
-                    }
-                    return a.endOffset - b.endOffset;
-                }
-                return a.startOffset - b.startOffset;
-            });
-        }
-        return flatRanges;
-    },
-
     isTagItem: (item) => {
         if (item.type === 'case' || (item.type === 'suite' && item.suiteType === 'describe')) {
             return true;

package/lib/plugins/comments.js

@@ -6,10 +6,14 @@ const Util = require('../utils/util.js');
 const cacheMap = new Map();
 
 function getEmptyLines(lines) {
-    return lines.map((line, i) => ({
-        code: line.trim(),
-        num: i + 1
-    })).filter((line) => !line.code).map((line) => line.num);
+    const emptyLines = [];
+    const reg = /\S/;
+    lines.forEach((text, i) => {
+        if (!reg.test(text)) {
+            emptyLines.push(i + 1);
+        }
+    });
+    return emptyLines;
 }
 
 const getFileComments = (filePath, parserOptions = {}) => {

package/lib/plugins/coverage/coverage-utils.js

@@ -0,0 +1,154 @@
+const Util = require('../../utils/util.js');
+const Concurrency = require('../../platform/concurrency.js');
+const { convertSourceMap, axios } = require('../../runtime/monocart-coverage.js');
+
+const sortRanges = (ranges) => {
+    ranges.sort((a, b) => {
+        if (a.start === b.start) {
+            return a.end - b.end;
+        }
+        return a.start - b.start;
+    });
+};
+
+const resolveUrl = (input) => {
+    let url;
+    try {
+        url = new URL(input);
+    } catch (e) {
+        // console.error('error url', input);
+        return;
+    }
+    return url;
+};
+
+const filterPath = (str) => {
+    str = decodeURI(str);
+    // remove / of start, end or double, ./ ../
+    const ls = str.split('/').map((it) => {
+        it = it.trim();
+        // remove illegal characters except /
+        it = it.replace(/[\\:*?"<>|]/g, '');
+        // space
+        it = it.replace(/\s+/g, '-');
+        return it;
+    }).filter((item) => {
+        if (!item || item === '.' || item === '..') {
+            return false;
+        }
+        return true;
+    });
+    return ls.join('/');
+};
+
+const getSourcePath = (url, index = '', type = '') => {
+
+    if (!url) {
+        // anonymous scripts will have __playwright_evaluation_script__ as their URL.
+        url = ['file://anonymous', index ? `-${index}` : '', type ? `.${type}` : ''].join('');
+    }
+
+    const u = resolveUrl(url);
+    if (u) {
+        const host = [u.hostname, u.port].filter((it) => it).join('-');
+        // always start with '/'
+        const pathname = u.pathname;
+
+        let p = host + pathname;
+        // webpack://monocart-v8/packages/v8/src/app.vue?5cc4
+        if (u.search) {
+            p += `/${u.search}`;
+        }
+
+        return filterPath(p);
+    }
+
+    const relPath = Util.relativePath(url);
+    return filterPath(relPath);
+};
+
+// ================================================================================================
+
+const request = async (options) => {
+    if (typeof options === 'string') {
+        options = {
+            url: options
+        };
+    }
+    let err;
+    const res = await axios(options).catch((e) => {
+        err = e;
+    });
+    return [err, res];
+};
+
+const getSourceMapUrl = (content, url) => {
+
+    const m = content.match(convertSourceMap.mapFileCommentRegex);
+    if (!m) {
+        return;
+    }
+
+    const comment = m.pop();
+    const r = convertSourceMap.mapFileCommentRegex.exec(comment);
+    // for some odd reason //# .. captures in 1 and /* .. */ in 2
+    const filename = r[1] || r[2];
+
+    let mapUrl;
+
+    try {
+        mapUrl = new URL(filename, url);
+    } catch (e) {
+        // console.log(e)
+    }
+    if (mapUrl) {
+        return mapUrl.toString();
+    }
+};
+
+const resolveSourceMap = (data) => {
+    if (data) {
+        const { sources, sourcesContent } = data;
+        if (!sources || !sourcesContent) {
+            return;
+        }
+        return data;
+    }
+};
+
+const collectSourceMaps = async (v8list) => {
+    const concurrency = new Concurrency();
+    for (const item of v8list) {
+        // useless for css
+        if (item.type === 'css') {
+            continue;
+        }
+
+        const source = item.source;
+        const converter = convertSourceMap.fromSource(source);
+        if (converter) {
+            item.sourceMap = resolveSourceMap(converter.sourcemap);
+            continue;
+        }
+        const sourceMapUrl = getSourceMapUrl(source, item.url);
+        if (sourceMapUrl) {
+            item.sourceMapUrl = sourceMapUrl;
+            concurrency.addItem(item);
+        }
+    }
+    await concurrency.start(async (item) => {
+        const [err, res] = await request({
+            url: item.sourceMapUrl
+        });
+        if (!err && res) {
+            item.sourceMap = resolveSourceMap(res.data);
+        }
+    });
+};
+
+
+module.exports = {
+    sortRanges,
+    getSourcePath,
+    collectSourceMaps
+};

package/lib/plugins/coverage/coverage.js

@@ -4,7 +4,9 @@ const EC = require('eight-colors');
 
 const Util = require('../../utils/util.js');
 
-const { saveIstanbulReport, saveV8ToIstanbulReport } = require('./istanbul/istanbul.js');
+const {
+    convertV8ToIstanbul, mergeIstanbulList, saveIstanbulReport
+} = require('./istanbul/istanbul.js');
 
 const {
     initV8List, mergeV8List, saveV8Report
@@ -12,31 +14,40 @@ const {
 
 // ========================================================================================================
 
-// high performance
-// str.search(reg) -> index
-// reg.test(str) -> boolean
-const defaultSourceFilter = (sourceName) => {
-    // sourceName.search(/\/src\/.+/) !== -1
-    return true;
-};
-
 const defaultV8Options = {
+    // (Boolean) Whether to convert to Istanbul report
     toIstanbul: false,
 
+    // (Function) A filter function to execute for each element in the V8 list.
+    entryFilter: null,
+    // (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,
-    sourceFilter: defaultSourceFilter,
-    entryFilter: null
+    // (Function) A filter function to execute for each element in the sources which unpacked from the source map.
+    sourceFilter: null
 
+    // (Array) Defaults to `[50, 80]`
     // watermarks: [50, 80],
+
+    // (Boolean) Whether inline all scripts to the single HTML file.
     // inline: false
 };
 
 const defaultIstanbulOptions = {
+
+    // when toIstanbul = true
     entryFilter: null,
+    unpackSourceMap: true,
+    sourceFilter: 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: {},
 };
 
@@ -58,42 +69,51 @@ const saveReportAttachment = (testInfo, report, htmlDir) => {
 
 // ========================================================================================================
 
-const generateIstanbulReport = (istanbulCoverage, testInfo, options) => {
+const generateIstanbulReport = (coverageData, testInfo, options) => {
 
     options = {
         ... defaultIstanbulOptions,
         ... options
     };
 
-    const report = saveIstanbulReport(istanbulCoverage, options);
+    const report = saveIstanbulReport(coverageData, options.fileSources, options);
 
     saveReportAttachment(testInfo, report, options.htmlDir);
 
     return report;
 };
 
+
 // ========================================================================================================
 
-const toIstanbulReport = async (v8list, testInfo, options) => {
+const generateV8Coverage = async (v8list, testInfo, options) => {
 
+    // v8list options, also for init / source map handler
     options = {
-        ... defaultIstanbulOptions,
+        ... defaultV8Options,
         ... options
     };
 
-    const report = await saveV8ToIstanbulReport(v8list, options);
+    // ================================================================
 
-    saveReportAttachment(testInfo, report, options.htmlDir);
+    if (options.toIstanbul) {
+        options = {
+            ... defaultIstanbulOptions,
+            ... options
+        };
 
-    return report;
-};
+        const { coverageData, fileSources } = await convertV8ToIstanbul(v8list, options);
 
-// ========================================================================================================
+        const report = await saveIstanbulReport(coverageData, fileSources, options);
 
+        saveReportAttachment(testInfo, report, options.htmlDir);
 
-const generateV8Report = async (v8list, testInfo, options) => {
+        return report;
+    }
 
-    options.title = `Coverage Report - ${testInfo.title}`;
+    // ================================================================
+
+    v8list = await initV8List(v8list, options);
 
     const report = await saveV8Report(v8list, options);
 
@@ -102,31 +122,6 @@ const generateV8Report = async (v8list, testInfo, options) => {
     return report;
 };
 
-// ========================================================================================================
-
-const generateV8Coverage = async (v8list, testInfo, options) => {
-
-    // v8list options, also for init / source map handler
-    options = {
-        ... defaultV8Options,
-        ... options
-    };
-
-    v8list = await initV8List(v8list, options);
-
-    if (options.toIstanbul) {
-        return toIstanbulReport(v8list, testInfo, options);
-    }
-
-    return generateV8Report(v8list, testInfo, options);
-};
-
-/**
- * @parameters
- * (@input istanbul.__coverage__: Object, testInfo, options: { watermarks: {} }) -> @output istanbul report
- * (@input v8list: Array, testInfo, options: { toIstanbul: true, watermarks: {} }) -> @output istanbul report (without css supported)
- * (@input v8list: Array, testInfo, options: { watermarks: [], inline: Boolean }) -> @output v8 report (css supported and minified code formatting)
- */
 const attachCoverageReport = (coverageInput, testInfo, options = {}) => {
 
     if (!coverageInput) {
@@ -135,6 +130,7 @@ const attachCoverageReport = (coverageInput, testInfo, options = {}) => {
     }
 
     options = {
+        title: `Coverage Report - ${testInfo.title}`,
         outputDir: Util.resolveOutputDir(testInfo),
         outputName: `coverage-${Util.shortTestId(testInfo.testId)}`,
         ... options
@@ -157,10 +153,25 @@ const attachCoverageReport = (coverageInput, testInfo, options = {}) => {
 
 // ========================================================================================================
 
-//  add coverage report to global
-const addCoverageReport = async (v8list, testInfo) => {
+const generateArtifactData = (v8list, options) => {
+    options = {
+        ... defaultV8Options,
+        ... options
+    };
+    if (options.toIstanbul) {
+        options = {
+            ... defaultIstanbulOptions,
+            ... options
+        };
+        return convertV8ToIstanbul(v8list, options);
+    }
+    return initV8List(v8list, options);
+};
 
-    if (!Util.isList(v8list)) {
+//  add coverage report to global, v8list only
+const addCoverageReport = async (coverageInput, testInfo) => {
+
+    if (!coverageInput) {
         EC.logRed('[MCR] invalid coverage input');
         return;
     }
@@ -176,33 +187,29 @@ const addCoverageReport = async (v8list, testInfo) => {
         // use reporter dir as output dir, NOT test output dir
         outputDir,
         outputName: 'coverage',
-
-        ... defaultV8Options,
         ... coverageOptions
     };
 
-    // The source map must be fetched before page closed
-    // or it may be deleted
-    v8list = await initV8List(v8list, options);
-
     const id = Util.shortTestId(testInfo.testId);
     const filename = `artifact-${id}.json`;
     const jsonDir = path.resolve(options.outputDir, options.outputName);
     const jsonPath = path.resolve(jsonDir, filename);
 
+    const data = await generateArtifactData(coverageInput, options);
+
+    // console.log('addCoverageReport keys', Object.keys(data.coverageData));
+
     const report = {
         id,
-        title: testInfo.title,
         outputFile: Util.relativePath(jsonPath),
-        // current v8 only
-        type: 'v8',
-        data: v8list
+        data
     };
 
     const artifactContent = JSON.stringify({
         type: 'coverage',
         data: report
     });
+
     await Util.writeFile(jsonPath, artifactContent);
 
     const definition = Util.attachments.artifact;
@@ -215,6 +222,34 @@ const addCoverageReport = async (v8list, testInfo) => {
     return report;
 };
 
+// ========================================================================================================
+
+const generateGlobalCoverageReport = async (dataList, options) => {
+
+    options = {
+        ... defaultV8Options,
+        ... options
+    };
+
+    if (options.toIstanbul) {
+        options = {
+            ... defaultIstanbulOptions,
+            ... options
+        };
+        const istanbulList = dataList.map((it) => it.data);
+        const { coverageData, fileSources } = mergeIstanbulList(istanbulList);
+        return saveIstanbulReport(coverageData, fileSources, options);
+    }
+
+    let v8list = [];
+    dataList.forEach((item) => {
+        v8list = v8list.concat(item.data);
+    });
+    // merge list again for multiple v8list, maybe collected multiple times
+    v8list = await mergeV8List(v8list, options);
+    return saveV8Report(v8list, options);
+};
+
 // global coverage report, run different process with addCoverageReport
 const generateCoverageReport = async (dataList, reporterOptions) => {
 
@@ -224,6 +259,7 @@ const generateCoverageReport = async (dataList, reporterOptions) => {
 
     const coverageOptions = reporterOptions.coverage || {};
     const options = {
+        title: `Coverage Report - ${reporterOptions.name}`,
         outputDir,
         outputName: 'coverage',
         ... coverageOptions
@@ -237,21 +273,7 @@ const generateCoverageReport = async (dataList, reporterOptions) => {
     }
     options.htmlDir = htmlDir;
 
-    let v8list = [];
-    dataList.forEach((item) => {
-        v8list = v8list.concat(item.data);
-    });
-
-    // merge list again for multiple v8list, maybe collected multiple times
-    v8list = await mergeV8List(v8list, options);
-
-    // const v8Path = path.resolve(__dirname, '../../.temp/v8-data.js');
-    // const v8Data = `module.exports = ${JSON.stringify(v8list, null, 4)};`;
-    // fs.writeFileSync(v8Path, v8Data);
-
-    options.title = `Coverage Report - ${reporterOptions.name}`;
-
-    const report = await saveV8Report(v8list, options);
+    const report = await generateGlobalCoverageReport(dataList, options);
 
     return {
         type: 'coverage',