monocart-reporter 1.6.26 → 1.6.28

package/README.md

@@ -748,7 +748,7 @@ const report = await attachCoverageReport(coverageList, test.info(), {
 | Code formatting | N/A | ✅ | ❌ |
 
 ### 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).
+The global coverage report will not be attached to any test case, but will merge all coverages into one global report after all the tests are finished. The API is `addCoverageReport(v8list, testInfo)`, 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
 module.exports = {
@@ -906,104 +906,60 @@ module.exports = {
             // async hook after report data generated
             onEnd: async (reportData, capability) => {
                 // console.log(reportData.summary);
-
-                // send email
-                // const sendEmail = require('./common/send-email.js');
-                // await sendEmail(reportData, capability);
-
-                // testrail integration
-                // const testrail = require('./common/testrail.js');
-                // await testrail(reportData, capability);
-
-                // jira + zephyr scale integration
-                // const zephyrScale = require('./common/zephyr-scale.js');
-                // await zephyrScale(reportData, capability);
-
-                // jira + xray integration
-                // const xray = require('./common/xray.js');
-                // await xray(reportData, capability);
-
-                // slack integration with webhook
-                // const slackWebhook = require('./common/slack-webhook.js');
-                // await slackWebhook(reportData, capability);
-
-                // slack integration with web api
-                // const slackWebApi = require('./common/slack-web-api.js');
-                // await slackWebApi(reportData, capability);
-
-                // discord integration with webhook
-                // const discordWebhook = require('./common/discord-webhook.js');
-                // await discordWebhook(reportData, capability);
-
-                // teams integration with webhook
-                // const teamsWebhook = require('./common/teams-webhook.js');
-                // await teamsWebhook(reportData, capability);
-
-                // html to pdf
-                // const toPdf = require('./common/to-pdf.js');
-                // await toPdf(reportData, capability);
             }
         }]
     ]
 };
 ```
 ## Send Email
-Simply send email with [nodemailer](https://nodemailer.com), check example: [send-email.js](/tests/common/send-email.js)
+Simply send email with [nodemailer](https://nodemailer.com), check example: [send-email](https://github.com/cenfun/monocart-reporter-test/tree/main/integrations/send-email)
 
 ![](/docs/email.png)
 
 
 ## Testrail Integration
-Send results to your Testrail with [testrail-api](https://github.com/rundef/node-testrail-api), check example: [testrail.js](/tests/common/testrail.js)
+Send test results to your Testrail, check example: [testrail](https://github.com/cenfun/monocart-reporter-test/tree/main/integrations/testrail)
 
 ![](/docs/testrail.png)
 
 ## Jira + Zephyr Scale Integration
-Create test cycle and executions with [zephyr-scale-api](https://support.smartbear.com/zephyr-scale-cloud/api-docs/), check example: [zephyr-scale.js](/tests/common/zephyr-scale.js)
+Create test cycle and executions with [zephyr-scale-api](https://support.smartbear.com/zephyr-scale-cloud/api-docs/), check example: [zephyr-scale](https://github.com/cenfun/monocart-reporter-test/tree/main/integrations/zephyr-scale)
 
 ![](/docs/zephyr.png)
 
 ## Jira + Xray Integration
-check example: [xray.js](/tests/common/xray.js)
 - Import test execution results with [Xray REST API](https://docs.getxray.app/display/XRAYCLOUD/REST+API)
 - Update Jira issue status with [Jira Transition API](https://developer.atlassian.com/cloud/jira/platform/rest/v3/api-group-issues/#api-rest-api-3-issue-issueidorkey-transitions-post)
+check example: [xray](https://github.com/cenfun/monocart-reporter-test/tree/main/integrations/xray)
 
 ![](/docs/xray.png)
 
-
 ## Slack Integration
-1. Simply send message with [@slack/webhook](https://github.com/slackapi/node-slack-sdk), example: [slack-webhook.js](/tests/common/slack-webhook.js)
-2. Recommended: Post chat message and upload image with [@slack/web-api](https://github.com/slackapi/node-slack-sdk), example: [slack-web-api.js](/tests/common/slack-web-api.js)
+1. Simply send message with [@slack/webhook](https://github.com/slackapi/node-slack-sdk), example: [slack-webhook](https://github.com/cenfun/monocart-reporter-test/tree/main/integrations/slack-webhook)
+2. Recommended: Post chat message and upload image with [@slack/web-api](https://github.com/slackapi/node-slack-sdk), example: [slack-web-api](https://github.com/cenfun/monocart-reporter-test/tree/main/integrations/slack-web-api)
 
 ![](/docs/slack.png)
 
 ## Discord Integration
-Using [Discord webhooks](https://discord.com/developers/docs/resources/webhook) to post messages to channels. example: [discord-webhook.js](/tests/common/discord-webhook.js)
+Using [Discord webhooks](https://discord.com/developers/docs/resources/webhook) to post messages to channels. example: [discord-webhook](https://github.com/cenfun/monocart-reporter-test/tree/main/integrations/discord-webhook)
 
 ![](/docs/discord.png)
 
 ## Teams Integration
-Please create an [Incoming Webhooks](https://learn.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook) for the channel first. example: [teams-webhook.js](/tests/common/teams-webhook.js)
+Please create an [Incoming Webhooks](https://learn.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook) for the channel first. example: [teams-webhook](https://github.com/cenfun/monocart-reporter-test/tree/main/integrations/teams-webhook)
 
 ![](/docs/teams.png)
 
 ## Dingtalk/Weixin/Feishu Integration
-- [dingtalk-webhook.js](/tests/common/dingtalk-webhook.js)
-- [weixin-webhook.js](/tests/common/weixin-webhook.js)
-- [feishu-webhook.js](/tests/common/feishu-webhook.js)
+- [dingtalk-webhook](https://github.com/cenfun/monocart-reporter-test/tree/main/integrations/dingtalk-webhook)
+- [weixin-webhook](https://github.com/cenfun/monocart-reporter-test/tree/main/integrations/weixin-webhook)
+- [feishu-webhook](https://github.com/cenfun/monocart-reporter-test/tree/main/integrations/feishu-webhook)
 
-## Dependencies and Packages
+## Dependencies
  - UI Framework [Vue 3](https://github.com/vuejs/core)
  - Lightweight UI Components [vine-ui](https://github.com/cenfun/vine-ui)
  - High Performance Grid [turbogrid](https://github.com/cenfun/turbogrid)
  - String compress/decompress [lz-utils](https://github.com/cenfun/lz-utils)
- - Packages
-    - `packages/app` Monocart report UI
-    - `packages/coverage` Coverage report libs
-    - `packages/network` Network HAR report libs
-    - `packages/v8` V8 HTML report UI
-    - `packages/vendor` Third-party libs
-
 
 ## Contributing
 ```sh

package/lib/generate-data.js

@@ -16,9 +16,9 @@ const getReportName = (options, config, metadata) => {
 };
 
 const artifactsHandler = async (visitor, options) => {
-    const artifacts = [];
-    const { coverage, network } = visitor.artifacts;
-    visitor.artifacts = null;
+    const artifacts = [].concat(visitor.artifacts);
+    // global artifacts
+    const { coverage, network } = visitor.artifactDataMap;
     if (coverage) {
         const report = await generateCoverageReport(coverage, options);
         artifacts.push(report);

package/lib/generate-report.js

@@ -1,15 +1,14 @@
-const fs = require('fs');
 const path = require('path');
 const EC = require('eight-colors');
 const CG = require('console-grid');
-const { deflateSync } = require('lz-utils');
 const { nodemailer } = require('./runtime/monocart-vendor.js');
 const Util = require('./utils/util.js');
 const emailPlugin = require('./plugins/email.js');
 
 // ===========================================================================
 
-const generateJson = (outputDir, filename, reportData) => {
+const generateJson = (outputDir, htmlFile, reportData) => {
+    const filename = path.basename(htmlFile, '.html');
     let jsonPath = path.resolve(outputDir, `${filename}.json`);
     Util.writeJSONSync(jsonPath, reportData);
     jsonPath = Util.relativePath(jsonPath);
@@ -17,30 +16,22 @@ const generateJson = (outputDir, filename, reportData) => {
     return jsonPath;
 };
 
-const generateHtml = (outputDir, filename, reportData) => {
-    const reportDistPath = path.resolve(__dirname, 'runtime/monocart-reporter.js');
-    const errMsg = `Not found runtime lib: ${Util.formatPath(reportDistPath)}`;
+const generateHtml = async (outputDir, htmlFile, reportData, inline) => {
 
-    let reportJs = `console.error("${errMsg}");`;
-    if (fs.existsSync(reportDistPath)) {
-        reportJs = Util.readFileSync(reportDistPath);
-    } else {
-        EC.logRed(errMsg);
-    }
-
-    const reportDataStr = deflateSync(JSON.stringify(reportData));
-    const content = `<script>\nwindow.reportData = '${reportDataStr}';\n${reportJs}\n</script>`;
+    const options = {
+        inline,
+        reportData,
+        jsFiles: ['monocart-common.js', 'monocart-reporter.js'],
+        htmlDir: outputDir,
+        htmlFile,
 
-    // replace template
-    let html = Util.getTemplate(path.resolve(__dirname, 'default/template.html'));
-    html = Util.replace(html, {
-        title: reportData.name,
-        content: content
-    });
+        outputDir,
+        reportDataFile: 'report-data.js',
+        assetsName: 'assets',
+        assetsRelative: ''
+    };
 
-    let htmlPath = path.resolve(outputDir, `${filename}.html`);
-    Util.writeFileSync(htmlPath, html);
-    htmlPath = Util.relativePath(htmlPath);
+    const htmlPath = await Util.saveHtmlReport(options);
     console.log(`[MCR] html report: ${EC.cyan(htmlPath)}`);
 
     const cmd = `npx monocart show-report ${htmlPath}`;
@@ -141,7 +132,7 @@ const showTestResults = (reportData) => {
 };
 
 
-const generateReport = (reportData, onEnd) => {
+const generateReport = async (reportData, options) => {
 
     console.log('[MCR] generating test report ...');
     showTestResults(reportData);
@@ -152,29 +143,34 @@ const generateReport = (reportData, onEnd) => {
 
     if (artifacts) {
         artifacts.forEach((report) => {
-            console.log(`[MCR] ${report.type} report: ${EC.cyan(report.htmlPath)}`);
-
-            // convert htmlPath to relative reporter
-            report.htmlPath = Util.relativePath(report.htmlPath, outputDir);
-
+            const g = report.global ? `${EC.magenta('(global)')}` : '';
+            console.log(`[MCR] ${report.name}: ${EC.cyan(report.path)} ${report.title} ${g}`);
+            // convert path to relative reporter
+            report.path = Util.relativePath(report.path, outputDir);
         });
     }
 
     // console.log(reportData);
-    const filename = path.basename(outputFile, '.html');
+    const htmlFile = path.basename(outputFile);
+
     // generate json
-    const jsonPath = generateJson(outputDir, filename, reportData);
+    const jsonPath = await generateJson(outputDir, htmlFile, reportData);
+
     // generate html
-    const htmlPath = generateHtml(outputDir, filename, reportData);
+    let inline = true;
+    if (typeof options.inline === 'boolean') {
+        inline = options.inline;
+    }
+    const htmlPath = await generateHtml(outputDir, htmlFile, reportData, inline);
 
     // onEnd callback
+    const onEnd = options.onEnd;
     if (typeof onEnd !== 'function') {
         return;
     }
 
     // for onEnd after saved
     Object.assign(reportData, {
-        filename,
         htmlPath,
         jsonPath
     });

package/lib/index.js

@@ -131,7 +131,7 @@ class Reporter {
             trends: this.trends
         });
 
-        return generateReport(reportData, this.options.onEnd);
+        return generateReport(reportData, this.options);
     }
 
 }

package/lib/merge-data.js

@@ -178,6 +178,6 @@ module.exports = async (reportDataList, userOptions = {}) => {
 
     const reportData = await mergeDataList(dataList, options);
 
-    return generateReport(reportData, options.onEnd);
+    return generateReport(reportData, options);
 
 };

package/lib/plugins/audit/audit.js

@@ -70,7 +70,10 @@ const attachAuditReport = async (runnerResult, testInfo, options = {}) => {
         return;
     }
 
+    const title = options.title || `Lighthouse Report - ${testInfo.title}`;
+
     options = {
+        title,
         outputDir: Util.resolveOutputDir(testInfo),
         outputName: `audit-${Util.shortTestId(testInfo.testId)}`,
 
@@ -86,7 +89,10 @@ const attachAuditReport = async (runnerResult, testInfo, options = {}) => {
     options.htmlDir = htmlDir;
 
     // `.lhr` is the Lighthouse Result as a JS object
-    const report = getSummaryReport(runnerResult.lhr);
+    const report = {
+        title,
+        ... getSummaryReport(runnerResult.lhr)
+    };
 
     const htmlPath = path.resolve(htmlDir, 'index.html');
     // `.report` is the HTML report as a string

package/lib/plugins/coverage/coverage.js

@@ -15,6 +15,10 @@ const {
 // ========================================================================================================
 
 const defaultV8Options = {
+
+    // Defaults to test title
+    // title: '',
+
     // (Boolean) Whether to convert to Istanbul report
     toIstanbul: false,
 
@@ -36,6 +40,9 @@ const defaultV8Options = {
 
 const defaultIstanbulOptions = {
 
+    // Defaults to test title
+    // title: '',
+
     // when toIstanbul = true
     entryFilter: null,
     unpackSourceMap: true,
@@ -129,8 +136,10 @@ const attachCoverageReport = (coverageInput, testInfo, options = {}) => {
         return;
     }
 
+    const title = options.title || `Coverage Report - ${testInfo.title}`;
+
     options = {
-        title: `Coverage Report - ${testInfo.title}`,
+        title,
         outputDir: Util.resolveOutputDir(testInfo),
         outputName: `coverage-${Util.shortTestId(testInfo.testId)}`,
         ... options
@@ -276,10 +285,11 @@ const generateCoverageReport = async (dataList, reporterOptions) => {
     const report = await generateGlobalCoverageReport(dataList, options);
 
     return {
-        type: 'coverage',
-        name: 'Coverage',
-        htmlPath: report.htmlPath,
-        summary: report.summary
+        global: true,
+        name: 'coverage',
+        path: report.htmlPath,
+        summary: report.summary,
+        title: options.title
     };
 };
 

package/lib/plugins/coverage/istanbul/istanbul.js

@@ -4,6 +4,7 @@ const EC = require('eight-colors');
 
 const istanbulReports = require('istanbul-reports');
 
+const Util = require('../../../utils/util.js');
 const IstanbulSummary = require('./istanbul-summary.js');
 
 const {
@@ -74,6 +75,8 @@ const saveIstanbulReport = (coverageData, fileSources, options) => {
     const htmlReport = istanbulReports.create('html', {});
     htmlReport.execute(context);
 
+    const htmlPath = Util.relativePath(path.resolve(options.htmlDir, 'index.html'));
+
     if (options.lcov) {
         const lcovReport = istanbulReports.create('lcovonly', {});
         lcovReport.execute(context);
@@ -82,7 +85,12 @@ const saveIstanbulReport = (coverageData, fileSources, options) => {
     // add watermarks and color
     const coverageReport = new IstanbulSummary();
     coverageReport.execute(context);
-    const report = coverageReport.getReport();
+    const report = {
+        title: options.title,
+        htmlPath,
+        watermarks: contextOptions.watermarks,
+        ... coverageReport.getReport()
+    };
 
     return report;
 };

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

@@ -132,12 +132,26 @@ const mergeV8List = async (v8list, options) => {
 
 // ============================================================
 
-const saveV8HtmlReport = async (reportData, options) => {
-
-    const reportDataFile = 'coverage-data.js';
-    const jsFiles = ['monocart-code-viewer.js', 'monocart-formatter.js', 'monocart-v8.js'];
+const saveV8HtmlReport = async (reportData, _options) => {
+
+    const {
+        htmlDir, outputDir, inline
+    } = _options;
+
+    const options = {
+        inline,
+        reportData,
+        jsFiles: ['monocart-code-viewer.js', 'monocart-formatter.js', 'monocart-common.js', 'monocart-v8.js'],
+        htmlDir,
+        htmlFile: 'index.html',
+
+        outputDir,
+        reportDataFile: 'coverage-data.js',
+        assetsName: 'assets',
+        assetsRelative: '../'
+    };
 
-    const htmlPath = await Util.saveAttachmentHtmlReport(reportData, options, reportDataFile, jsFiles);
+    const htmlPath = await Util.saveHtmlReport(options);
 
     return htmlPath;
 };
@@ -195,6 +209,7 @@ const saveV8Report = async (v8list, options) => {
     const htmlPath = await saveV8HtmlReport(htmlReport, options);
 
     const report = {
+        title: options.title,
         type: 'v8',
         htmlPath,
         watermarks,

package/lib/plugins/network/network.js

@@ -95,12 +95,26 @@ const getNetworkSummary = (log) => {
     return summary;
 };
 
-const saveNetworkHtmlReport = async (reportData, options) => {
-
-    const reportDataFile = 'network-data.js';
-    const jsFiles = ['monocart-code-viewer.js', 'monocart-formatter.js', 'monocart-network.js'];
+const saveNetworkHtmlReport = async (reportData, _options) => {
+
+    const {
+        htmlDir, outputDir, inline
+    } = _options;
+
+    const options = {
+        inline,
+        reportData,
+        jsFiles: ['monocart-code-viewer.js', 'monocart-formatter.js', 'monocart-common.js', 'monocart-network.js'],
+        htmlDir,
+        htmlFile: 'index.html',
+
+        outputDir,
+        reportDataFile: 'network-data.js',
+        assetsName: 'assets',
+        assetsRelative: '../'
+    };
 
-    const htmlPath = await Util.saveAttachmentHtmlReport(reportData, options, reportDataFile, jsFiles);
+    const htmlPath = await Util.saveHtmlReport(options);
 
     return htmlPath;
 };
@@ -120,6 +134,7 @@ const attachNetworkReport = async (har, testInfo, options = {}) => {
         ... options
     };
 
+    const title = options.title || `Network Report - ${testInfo.title}`;
 
     const htmlDir = path.resolve(options.outputDir, options.outputName);
     if (!fs.existsSync(htmlDir)) {
@@ -133,7 +148,7 @@ const attachNetworkReport = async (har, testInfo, options = {}) => {
 
     // save har
     const reportData = {
-        title: `Network Report - ${testInfo.title}`,
+        title,
         summary,
         ... harData
     };
@@ -141,6 +156,7 @@ const attachNetworkReport = async (har, testInfo, options = {}) => {
     const htmlPath = await saveNetworkHtmlReport(reportData, options);
 
     const report = {
+        title,
         ... harData.log,
         htmlPath,
         summary