monocart-reporter 1.6.33 → 1.6.35

package/README.md

@@ -159,7 +159,11 @@ Separated metadata file (Already included in the above HTML and compressed, it c
 ## 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
+# serve and open report
 npx monocart show-report <your-outputFile-path>
+
+# serve report
+npx monocart serve-report <your-outputFile-path>
 ```
 Or customize your own trace viewer url with option `traceViewerUrl` defaults to  `https://trace.playwright.dev/?trace={traceUrl}`
 
@@ -627,6 +631,7 @@ Attach a code coverage report with API `attachCoverageReport(data, testInfo, opt
     - 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`
+    - `sourcePath` (Function) source path handler, return a new source path
     - V8 only:
     - `toIstanbul` (Boolean) Whether to convert to Istanbul report
     - `watermarks` (Array) Defaults to `[50, 80]` 
@@ -642,30 +647,27 @@ Attach a code coverage report with API `attachCoverageReport(data, testInfo, opt
 ```js
 import { test, expect } from '@playwright/test';
 import { attachCoverageReport } from 'monocart-reporter';
-test.describe.configure({
-    mode: 'serial'
-});
-let page;
-test.describe('take Istanbul coverage', () => {
-    test('first, open page', async ({ browser }) => {
-        page = await browser.newPage();
-        await page.goto(pageUrl);
-    });
 
-    test('next, run test cases', async () => {
-        await new Promise((resolve) => {
-            setTimeout(resolve, 500);
-        });
+test('Take Istanbul coverage report', async ({ page }) => {
+
+    await page.goto('http://localhost:8090/coverage/istanbul.html');
+
+    // delay for mock code execution
+    await new Promise((resolve) => {
+        setTimeout(resolve, 500);
     });
 
-    test('finally, take coverage', async () => {
-        // take Istanbul coverage
-        const coverageData = await page.evaluate(() => window.__coverage__);
-        expect(coverageData, 'expect found Istanbul data: __coverage__').toBeTruthy();
-        // coverage report
-        const report = await attachCoverageReport(coverageData, test.info());
-        console.log(report.summary);
+    // take Istanbul coverage
+    const coverageData = await page.evaluate(() => window.__coverage__);
+    await page.close();
+    expect(coverageData, 'expect found Istanbul data: __coverage__').toBeTruthy();
+
+    // coverage report
+    const report = await attachCoverageReport(coverageData, test.info(), {
+        lcov: true
     });
+    console.log(report.summary);
+
 });
 ```
 
@@ -675,43 +677,38 @@ test.describe('take Istanbul coverage', () => {
 ```js
 import { test, expect } from '@playwright/test';
 import { attachCoverageReport } from 'monocart-reporter';
-test.describe.configure({
-    mode: 'serial'
-});
-let page;
-test.describe('take V8 coverage', () => {
-    test('first, open page', async ({ browser }) => {
-        page = await browser.newPage();
-        await Promise.all([
-            page.coverage.startJSCoverage(),
-            page.coverage.startCSSCoverage()
-        ]);
-        await page.goto(pageUrl);
-    });
 
-    test('next, run test cases', async () => {
-        await new Promise((resolve) => {
-            setTimeout(resolve, 500);
-        });
+test('Take V8 and Istanbul coverage report', async ({ page }) => {
+
+    await Promise.all([
+        page.coverage.startJSCoverage({
+            resetOnNavigation: false
+        }),
+        page.coverage.startCSSCoverage({
+            resetOnNavigation: false
+        })
+    ]);
+
+    await page.goto('http://localhost:8090/coverage/v8.html');
+
+    // delay for mock code execution
+    await new Promise((resolve) => {
+        setTimeout(resolve, 500);
     });
 
-    test('finally, take coverage', async () => {
-        const [jsCoverage, cssCoverage] = await Promise.all([
-            page.coverage.stopJSCoverage(),
-            page.coverage.stopCSSCoverage()
-        ]);
-        const coverageList = [... jsCoverage, ... cssCoverage];
-        // filter file list
-        // coverageList = coverageList.filter((item) => {
-        //     if (item.url.endsWith('.js') || item.url.endsWith('.css')) {
-        //         return true;
-        //     }
-        // });
-        expect(coverageList.length).toBeGreaterThan(0);
-        // coverage report
-        const report = await attachCoverageReport(coverageList, test.info());
-        console.log(report.summary);
+    const [jsCoverage, cssCoverage] = await Promise.all([
+        page.coverage.stopJSCoverage(),
+        page.coverage.stopCSSCoverage()
+    ]);
+    await page.close();
+
+    const coverageList = [... jsCoverage, ... cssCoverage];
+
+    const v8 = await attachCoverageReport(coverageList, test.info(), {
+        excludeDistFile: false
     });
+    console.log(v8.summary);
+
 });
 ```
 

package/lib/cli.js

@@ -35,7 +35,7 @@ const openUrl = async (p) => {
 };
 
 
-const showReport = async (list) => {
+const serveReport = async (list, openReport) => {
     if (!list.length) {
         list.push(defaultOptions.outputFile);
     }
@@ -83,7 +83,9 @@ const showReport = async (list) => {
 
     server.listen(port, function() {
         EC.logCyan(`${new Date().toLocaleString()} server listening on ${url}`);
-        openUrl(url);
+        if (openReport) {
+            openUrl(url);
+        }
     });
 
 };
@@ -93,7 +95,12 @@ const start = function() {
     const command = args.shift();
     // console.log(command, args);
     if (command === 'show-report') {
-        showReport(args);
+        serveReport(args, true);
+        return;
+    }
+
+    if (command === 'serve-report') {
+        serveReport(args, false);
     }
 };
 

package/lib/generate-data.js

@@ -4,8 +4,9 @@ const Util = require('./utils/util.js');
 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 { generateGlobalCoverageReport } = require('./plugins/coverage/coverage.js');
+const { generateGlobalNetworkReport } = require('./plugins/network/network.js');
+const version = require('../package.json').version;
 
 const getReportName = (options, config, metadata) => {
     const reportName = options.name || config.name || metadata.name;
@@ -20,11 +21,11 @@ const artifactsHandler = async (visitor, options) => {
     // global artifacts
     const { coverage, network } = visitor.artifactDataMap;
     if (coverage) {
-        const report = await generateCoverageReport(coverage, options);
+        const report = await generateGlobalCoverageReport(coverage, options);
         artifacts.push(report);
     }
     if (network) {
-        const report = await generateNetworkReport(coverage, options);
+        const report = await generateGlobalNetworkReport(coverage, options);
         artifacts.push(report);
     }
     return artifacts;
@@ -92,6 +93,8 @@ const generateData = async (results) => {
     system.configFile = Util.relativePath(config.configFile);
     // playwright version
     system.playwright = config.version;
+    // monocart version
+    system.monocart = version;
 
     // test root dir
     system.testDir = Util.relativePath(config.rootDir);

package/lib/plugins/audit/audit.js

@@ -70,13 +70,10 @@ const attachAuditReport = async (runnerResult, testInfo, options = {}) => {
         return;
     }
 
-    const title = options.title || `Lighthouse Report - ${testInfo.title}`;
-
     options = {
-        title,
+        title: `Lighthouse Report - ${testInfo.title}`,
         outputDir: Util.resolveOutputDir(testInfo),
-        outputName: `audit-${Util.shortTestId(testInfo.testId)}`,
-
+        outputName: `audit-${Util.resolveTestIdWithRetry(testInfo)}`,
         ... options
     };
 
@@ -90,7 +87,7 @@ const attachAuditReport = async (runnerResult, testInfo, options = {}) => {
 
     // `.lhr` is the Lighthouse Result as a JS object
     const report = {
-        title,
+        title: options.title,
         ... getSummaryReport(runnerResult.lhr)
     };
 

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

@@ -1,6 +1,4 @@
 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) => {
@@ -67,6 +65,8 @@ const getSourcePath = (url, index = '', type = '') => {
     return filterPath(relPath);
 };
 
+// ========================================================================================================
+
 const mergeSourceRoot = (sourceRoot, sourceName) => {
     if (sourceName.startsWith(sourceRoot)) {
         return sourceName;
@@ -74,89 +74,51 @@ const mergeSourceRoot = (sourceRoot, sourceName) => {
     return sourceRoot + sourceName;
 };
 
-// ================================================================================================
-
-const request = async (options) => {
-    if (typeof options === 'string') {
-        options = {
-            url: options
-        };
-    }
-    let err;
-    const res = await axios(options).catch((e) => {
-        err = e;
+const initSourceMapRootAndUrl = (sourceMap, fileUrls, fileSources) => {
+    // reset sourceRoot
+    const sourceRoot = sourceMap.sourceRoot || '';
+    sourceMap.sourceRoot = '';
+
+    sourceMap.sources = sourceMap.sources.map((sourceName, i) => {
+        const sourceUrl = mergeSourceRoot(sourceRoot, sourceName);
+        const sourcePath = getSourcePath(sourceUrl, i + 1);
+        fileUrls[sourcePath] = sourceUrl;
+        fileSources[sourcePath] = sourceMap.sourcesContent[i];
+        return sourcePath;
     });
-    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;
+const convertFunctionsToRanges = (functions) => {
 
-    try {
-        mapUrl = new URL(filename, url);
-    } catch (e) {
-        // console.log(e)
-    }
-    if (mapUrl) {
-        return mapUrl.toString();
+    if (!Util.isList(functions)) {
+        return [];
     }
-};
 
-const resolveSourceMap = (data) => {
-    if (data) {
-        const { sources, sourcesContent } = data;
-        if (!sources || !sourcesContent) {
-            return;
+    const ranges = [];
+    for (const fun of functions) {
+        if (fun.ranges) {
+            for (const range of fun.ranges) {
+                // rename startOffset/endOffset to start/end, keep count
+                ranges.push({
+                    start: range.startOffset,
+                    end: range.endOffset,
+                    count: range.count
+                });
+            }
         }
-        return data;
     }
-};
 
-const collectSourceMaps = async (v8list) => {
-    const concurrency = new Concurrency();
-    for (const item of v8list) {
-        // useless for css
-        if (item.type === 'css') {
-            continue;
-        }
+    sortRanges(ranges);
 
-        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);
-        }
-    });
+    return ranges;
 };
 
-
 module.exports = {
     sortRanges,
     getSourcePath,
-    mergeSourceRoot,
-    collectSourceMaps
+    initSourceMapRootAndUrl,
+    convertFunctionsToRanges
 };

package/lib/plugins/coverage/coverage.js

@@ -3,13 +3,9 @@ const path = require('path');
 const EC = require('eight-colors');
 
 const Util = require('../../utils/util.js');
-
-const {
-    convertV8ToIstanbul, mergeIstanbulList, saveIstanbulReport
-} = require('./istanbul/istanbul.js');
-
+const { convertV8ToIstanbul, saveIstanbulReport } = require('./istanbul/istanbul.js');
 const {
-    initV8List, mergeV8List, saveV8Report
+    initV8ListAndSourcemap, unpackV8List, mergeV8Coverage, saveV8Report
 } = require('./v8/v8.js');
 
 // ========================================================================================================
@@ -48,6 +44,9 @@ const defaultIstanbulOptions = {
     unpackSourceMap: true,
     sourceFilter: null,
 
+    // source path handler
+    sourcePath: null,
+
     // (usually not used) source finder for Istanbul HTML report
     sourceFinder: null,
 
@@ -101,6 +100,10 @@ const generateV8Coverage = async (v8list, testInfo, options) => {
         ... options
     };
 
+    // init v8list and unpack sourcemap
+    const inlineSourceMap = true;
+    v8list = await initV8ListAndSourcemap(v8list, options, inlineSourceMap);
+
     // ================================================================
 
     if (options.toIstanbul) {
@@ -120,7 +123,8 @@ const generateV8Coverage = async (v8list, testInfo, options) => {
 
     // ================================================================
 
-    v8list = await initV8List(v8list, options);
+    // functions to ranges, and unpack source maps
+    await unpackV8List(v8list, options);
 
     const report = await saveV8Report(v8list, options);
 
@@ -136,21 +140,26 @@ const attachCoverageReport = (coverageInput, testInfo, options = {}) => {
         return;
     }
 
-    const title = options.title || `Coverage Report - ${testInfo.title}`;
-
     options = {
-        title,
+        // default title
+        title: `Coverage Report - ${testInfo.title}`,
         outputDir: Util.resolveOutputDir(testInfo),
-        outputName: `coverage-${Util.shortTestId(testInfo.testId)}`,
+        outputName: `coverage-${Util.resolveTestIdWithRetry(testInfo)}`,
         ... options
     };
 
-    const htmlDir = path.resolve(options.outputDir, options.outputName);
-    if (!fs.existsSync(htmlDir)) {
-        fs.mkdirSync(htmlDir, {
-            recursive: true
-        });
+    // support multiple calls
+    let htmlDir = path.resolve(options.outputDir, options.outputName);
+    let i = 1;
+    while (fs.existsSync(htmlDir)) {
+        const outputName = `${options.outputName}-${i}`;
+        htmlDir = path.resolve(options.outputDir, outputName);
+        i += 1;
     }
+
+    fs.mkdirSync(htmlDir, {
+        recursive: true
+    });
     options.htmlDir = htmlDir;
 
     if (Array.isArray(coverageInput)) {
@@ -162,26 +171,11 @@ const attachCoverageReport = (coverageInput, testInfo, options = {}) => {
 
 // ========================================================================================================
 
-const generateArtifactData = (v8list, options) => {
-    options = {
-        ... defaultV8Options,
-        ... options
-    };
-    if (options.toIstanbul) {
-        options = {
-            ... defaultIstanbulOptions,
-            ... options
-        };
-        return convertV8ToIstanbul(v8list, options);
-    }
-    return initV8List(v8list, options);
-};
-
 //  add coverage report to global, v8list only
-const addCoverageReport = async (coverageInput, testInfo) => {
+const addCoverageReport = async (v8list, testInfo) => {
 
-    if (!coverageInput) {
-        EC.logRed('[MCR] invalid coverage input');
+    if (!Util.isList(v8list)) {
+        EC.logRed(`[MCR] invalid v8 list for test: ${testInfo.title}`);
         return;
     }
 
@@ -193,25 +187,33 @@ const addCoverageReport = async (coverageInput, testInfo) => {
     const outputDir = path.dirname(outputFile);
 
     const options = {
+        ... defaultV8Options,
         // use reporter dir as output dir, NOT test output dir
         outputDir,
         outputName: 'coverage',
         ... coverageOptions
     };
 
-    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 reportDir = path.resolve(options.outputDir, options.outputName);
+
+    // artifactsDir for temp artifact files
+    const artifactsDir = path.resolve(reportDir, '.artifacts');
+    options.artifactsDir = artifactsDir;
 
-    const data = await generateArtifactData(coverageInput, options);
+    const filename = `coverage-${Util.resolveTestIdWithRetry(testInfo)}.json`;
+    const jsonPath = path.resolve(artifactsDir, filename);
 
-    // console.log('addCoverageReport keys', Object.keys(data.coverageData));
+    // init v8list and unpack sourcemap
+    const inlineSourceMap = false;
+    v8list = await initV8ListAndSourcemap(v8list, options, inlineSourceMap);
+
+    // console.log('addCoverageReport', coverageInput.map((it) => it.url));
 
     const report = {
-        id,
-        outputFile: Util.relativePath(jsonPath),
-        data
+        // title for debug
+        title: testInfo.title,
+        // merge with data
+        data: v8list
     };
 
     const artifactContent = JSON.stringify({
@@ -233,34 +235,43 @@ const addCoverageReport = async (coverageInput, testInfo) => {
 
 // ========================================================================================================
 
-const generateGlobalCoverageReport = async (dataList, options) => {
+const getGlobalCoverageData = async (dataList, options) => {
 
     options = {
         ... defaultV8Options,
         ... options
     };
 
+    // merge v8list first
+    const v8list = await mergeV8Coverage(dataList, options);
+    // console.log('after merge', v8list.map((it) => it.url));
+
     if (options.toIstanbul) {
+
         options = {
             ... defaultIstanbulOptions,
             ... options
         };
-        const istanbulList = dataList.map((it) => it.data);
-        const { coverageData, fileSources } = mergeIstanbulList(istanbulList);
-        return saveIstanbulReport(coverageData, fileSources, options);
+
+        const { coverageData, fileSources } = await convertV8ToIstanbul(v8list, options);
+
+        const report = await saveIstanbulReport(coverageData, fileSources, options);
+
+        // console.log(report);
+
+        return report;
     }
 
-    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);
+    // functions to ranges, and unpack source maps
+    await unpackV8List(v8list, options);
+
+    const report = await saveV8Report(v8list, options);
+
+    return report;
 };
 
 // global coverage report, run different process with addCoverageReport
-const generateCoverageReport = async (dataList, reporterOptions) => {
+const generateGlobalCoverageReport = async (dataList, reporterOptions) => {
 
     // reporter outputFile
     const outputFile = await Util.resolveOutputFile(reporterOptions.outputFile);
@@ -274,15 +285,27 @@ const generateCoverageReport = async (dataList, reporterOptions) => {
         ... coverageOptions
     };
 
-    const htmlDir = path.resolve(options.outputDir, options.outputName);
-    if (!fs.existsSync(htmlDir)) {
-        fs.mkdirSync(htmlDir, {
+    const reportDir = path.resolve(options.outputDir, options.outputName);
+    if (!fs.existsSync(reportDir)) {
+        fs.mkdirSync(reportDir, {
             recursive: true
         });
     }
-    options.htmlDir = htmlDir;
+    options.htmlDir = reportDir;
+
+    // artifactsDir for temp artifact files
+    const artifactsDir = path.resolve(reportDir, '.artifacts');
+    options.artifactsDir = artifactsDir;
 
-    const report = await generateGlobalCoverageReport(dataList, options);
+    const report = await getGlobalCoverageData(dataList, options);
+    // console.log(report);
+
+    // =============================================================
+    // remove artifacts dir after report generated
+    if (!options.debug) {
+        Util.rmSync(artifactsDir);
+    }
+    // =============================================================
 
     return {
         global: true,
@@ -295,6 +318,6 @@ const generateCoverageReport = async (dataList, reporterOptions) => {
 
 module.exports = {
     addCoverageReport,
-    generateCoverageReport,
+    generateGlobalCoverageReport,
     attachCoverageReport
 };