monocart-reporter 1.6.15 → 1.6.17

package/README.md

@@ -24,6 +24,7 @@
 * [Metadata](#metadata)
 * [Trend Chart](#trend-chart)
 * [Attach Code Coverage Report](#attach-code-coverage-report)
+* [Attach Network Report](#attach-network-report)
 * [Merge Shard Reports](#merge-shard-reports)
 * [onEnd hook](#onend-hook)
     - [Send Email](#send-email)
@@ -150,7 +151,7 @@ The report will be displayed in a `Tree Grid`. The `columns` function is used to
 - `width` (Number) Column width
 - `minWidth`, `maxWidth` (Number) Default to 81 ~ 300
 - `styleMap` (Object, String) Column style (css)
-- `formatter` (Function) [column formatter](#custom-formatter), arguments: value, rowItem, columnItem, cellNode
+- `formatter` (Function) [column formatter](#custom-formatter). Arguments: value, rowItem, columnItem, cellNode
 - `sortable` (Boolean) Column sortable when click column header name
 - `resizable` (Boolean) Column width resizable
 - `searchable` (Boolean) Specifies whether the column is searchable
@@ -254,7 +255,7 @@ module.exports = {
 ```
 
 ## Data Collection Visitor
-The `visitor` function will be executed for each row item (suite, case and step), the arguments are:
+The `visitor` function will be executed for each row item (suite, case and step). Arguments:
 - `data` data item (suite/case/step) for reporter, you can override some of its properties or add more
 - `metadata` original data object from Playwright test, could be one of [Suite](https://playwright.dev/docs/api/class-suite), [TestCase](https://playwright.dev/docs/api/class-testcase) or [TestStep](https://playwright.dev/docs/api/class-teststep)
 - `collect` only one self collection for now: `collect.comments(parserOptions)` and parser options following:
@@ -525,14 +526,26 @@ module.exports = {
 ```
 
 ## Attach Code Coverage Report
-Using `MonocartReporter.attachCoverageReport()` API to generate coverage report during the test. There are 2 supported data inputs: `V8` and `istanbul` (see example: [coverage.spec.js](https://github.com/cenfun/monocart-reporter-test/blob/main/tests/coverage/coverage.spec.js))
-- [V8](https://playwright.dev/docs/api/class-coverage) (Chromium-based only) Simply take V8 coverage with `startJSCoverage` and `stopJSCoverage`, then [converts](https://github.com/istanbuljs/v8-to-istanbul) from v8 coverage format to istanbul's coverage format, finally generate istanbul report. It works with any code format, but it will not be expected if your code is minified.
+Using `MonocartReporter.attachCoverageReport(data, testInfo, options)` API to generate coverage report during the test. Arguments:
+- `data` There are 2 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
+
+ (see example: [report-coverage.spec.js](https://github.com/cenfun/monocart-reporter/blob/main/tests/report-coverage/report-coverage.spec.js))
+
+- [Istanbul](https://github.com/istanbuljs) Requires your source code is instrumented. Usually we can use the tool [babel-plugin-istanbul](https://github.com/istanbuljs/babel-plugin-istanbul) to build instrumenting code. (see example: [webpack.config.js](https://github.com/cenfun/monocart-reporter-test/blob/main/packages/coverage/webpack.config.js)) The instrumented code will automatically generate coverage data and save it on `window.__coverage__`. The Istanbul HTML report will be generated and attached to the test report as an attachment.
 ```js
 import { test, expect } from '@playwright/test';
 import { attachCoverageReport } from 'monocart-reporter';
-test.describe('take v8 coverage', () => {
-    test('first, startJSCoverage and open page', async () => {
-        await page.coverage.startJSCoverage();
+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);
     });
 
@@ -542,29 +555,34 @@ test.describe('take v8 coverage', () => {
         });
     });
 
-    test('finally, stopJSCoverage and take coverage', async () => {
-        // take v8 coverage
-        const jsCoverage = await page.coverage.stopJSCoverage();
-        // filter file list
-        const coverageInput = jsCoverage.filter((item) => {
-            if (!item.url.endsWith('.js')) {
-                return false;
-            }
-            return true;
-        });
-        expect(coverageInput.length).toBeGreaterThan(0);
+    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(coverageInput, test.info());
-        console.log(report.lines);
+        const report = await attachCoverageReport(coverageData, test.info());
+        console.log(report.summary);
     });
 });
 ```
-- [istanbul](https://github.com/istanbuljs) Requires your source code is instrumented. Usually we can use the tool [babel-plugin-istanbul](https://github.com/istanbuljs/babel-plugin-istanbul) to build instrumenting code (see example: [webpack.config.js](https://github.com/cenfun/monocart-reporter-test/blob/main/packages/coverage/webpack.config.js)) The instrumented code will automatically generate coverage data and save it on `window.__coverage__`
+
+![](/docs/istanbul.png)
+
+- [V8](https://v8.dev/blog/javascript-code-coverage) ([Chromium-based only](https://chromedevtools.github.io/devtools-protocol/tot/Profiler/#type-ScriptCoverage)) Simply take coverage data with  [class-coverage](https://playwright.dev/docs/api/class-coverage) APIs, the V8 HTML report will be generated.
 ```js
 import { test, expect } from '@playwright/test';
 import { attachCoverageReport } from 'monocart-reporter';
-test.describe('take istanbul coverage', () => {
-    test('first, open page', async () => {
+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);
     });
 
@@ -575,12 +593,86 @@ test.describe('take istanbul coverage', () => {
     });
 
     test('finally, take coverage', async () => {
-        // take istanbul coverage
-        const coverageInput = await page.evaluate(() => window.__coverage__);
-        expect(coverageInput, 'expect found istanbul data: __coverage__').toBeTruthy();
+        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(coverageInput, test.info());
-        console.log(report.lines);
+        const report = await attachCoverageReport(coverageList, test.info());
+        console.log(report.summary);
+    });
+});
+```
+
+![](/docs/v8.gif)
+
+- [V8 to Istanbul](https://github.com/istanbuljs/v8-to-istanbul) Take V8 coverage data with  [class-coverage](https://playwright.dev/docs/api/class-coverage) APIs, then the V8 coverage format will be converted to Istanbul's coverage format. The Istanbul HTML report will be generated. 
+```js
+const report = await attachCoverageReport(coverageList, test.info(), {
+    toIstanbul: true
+});
+```
+
+### Compare Istanbul, V8 and V8 to Istanbul
+| | Istanbul | V8 | V8 to Istanbul |
+| :--------------| :------ | :------ | :----------------------  |
+| Input data format | Istanbul (Object) | V8 (Array) | V8 (Array) |
+| Options  | `watermarks: {}`  | `watermarks: [50, 80]` | `toIstanbul: true, watermarks: {}` |
+| Output report | [Istanbul HTML report](https://cenfun.github.io/monocart-reporter/report-coverage-report-coverage-take-Istanbul-coverage-report-finally-take-coverage-Desktop-Chromium/coverage/index.html) | [V8 HTML report](https://cenfun.github.io/monocart-reporter/report-coverage-report-coverage-take-V8-js-and-css-coverage-report-finally-take-coverage-Desktop-Chromium/coverage/index.html)  | [Istanbul HTML report](https://cenfun.github.io/monocart-reporter/report-coverage-report-coverage-take-V8-js-to-Istanbul-coverage-report-finally-take-coverage-Desktop-Chromium/coverage/index.html) |
+| Indicators | Covered Lines, Branches, Statements and Functions, Execution Counts | Covered Bytes, Execution Counts | Covered Lines, Branches, Statements and Functions, Execution Counts |
+| CSS coverage | ❌ | ✅ | ❌ |
+| Minified code | N/A | ✅ | ❌ |
+| Code formatting | N/A | ✅ | ❌ |
+
+## Attach Network Report
+Using `MonocartReporter.attachNetworkReport(har, testInfo)` API to generate network report during the test. 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)
+
+ (see example: [report-network.spec.js](https://github.com/cenfun/monocart-reporter/blob/main/tests/report-network/report-network.spec.js))
+
+```js
+const fs = require('fs');
+const path = require('path');
+const { test } = require('@playwright/test');
+const { attachNetworkReport } = require('monocart-reporter');
+let context;
+test.describe('attach network report 1', () => {
+
+    const harPath = path.resolve('.temp/network-report1.har');
+    if (fs.existsSync(harPath)) {
+        // remove previous
+        fs.rmSync(harPath);
+    }
+
+    test('first, open page', async ({ browser }) => {
+        context = await browser.newContext({
+            recordHar: {
+                path: harPath
+            }
+        });
+        const page = await context.newPage();
+        await page.goto('http://playwright.dev/', {
+            waitUntil: 'networkidle'
+        });
+    });
+
+    test('next, run test cases', async () => {
+        
+    });
+
+    test('finally, attach HAR', async () => {
+        // Close context to ensure HAR is saved to disk.
+        await context.close();
+        await attachNetworkReport(harPath, test.info());
     });
 });
 ```
@@ -619,7 +711,7 @@ await MonocartReporter.merge(reportDataList, {
 example: [merged report](https://cenfun.github.io/monocart-reporter-test/merged)
 
 ## onEnd hook
-The `onEnd` function will be executed after report generated. the arguments are:
+The `onEnd` function will be executed after report generated. Arguments:
 - `reportData` all report data, properties:
     - `name` (String) report name 
     - `date` (Number) start date in milliseconds 
@@ -735,11 +827,26 @@ Please create an [Incoming Webhooks](https://learn.microsoft.com/en-us/microsoft
 - [weixin-webhook.js](/tests/common/weixin-webhook.js)
 - [feishu-webhook.js](/tests/common/feishu-webhook.js)
 
-## Report UI [packages/app](packages/app)
- - Base on [Vue 3](https://github.com/vuejs/core)
+## Dependencies and Packages
+ - 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)
- - JSON compress/decompress with [lz-utils](https://github.com/cenfun/lz-utils)
+ - 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/istanbul` Istanbul report libs
+    - `packages/show-report` Monocart show-report CLI libs
+    - `packages/v8` V8 HTML report UI
+    - `packages/vendor` Third-party libs
+
 
+## Contributing
+```sh
+npm install starfall-cli -g
+npm install
+npm run test
+npm run build
+npm run dev
+```
 ## CHANGELOG
 - [CHANGELOG.md](CHANGELOG.md)

package/lib/common.js

@@ -1,7 +1,7 @@
 const EC = require('eight-colors');
 const Util = require('./utils/util.js');
 const defaultSummary = require('./default/summary.js');
-const { generatePieChart } = require('./utils/chart.js');
+const generatePieChart = require('./utils/pie.js');
 
 const caseHandler = (item, summary) => {
     summary.tests.value += 1;

package/lib/default/template.html

@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html>
-
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
@@ -8,6 +7,6 @@
     <title>{title}</title>
 </head>
 <body>
-    {content}
+{content}
 </body>
 </html>

package/lib/generate-report.js

@@ -23,7 +23,7 @@ const generateHtml = (outputDir, filename, reportData) => {
 
     let reportJs = `console.error("${errMsg}");`;
     if (fs.existsSync(reportDistPath)) {
-        reportJs = Util.readFileContentSync(reportDistPath);
+        reportJs = Util.readFileSync(reportDistPath);
     } else {
         EC.logRed(errMsg);
     }
@@ -39,7 +39,7 @@ const generateHtml = (outputDir, filename, reportData) => {
     });
 
     let htmlPath = path.resolve(outputDir, `${filename}.html`);
-    Util.writeFileContentSync(htmlPath, html);
+    Util.writeFileSync(htmlPath, html);
     htmlPath = Util.relativePath(htmlPath);
     console.log(`[MCR] html report: ${EC.cyan(htmlPath)}`);