Gathering detailed insights and metrics for mochawesome-report-generator
Gathering detailed insights and metrics for mochawesome-report-generator
Gathering detailed insights and metrics for mochawesome-report-generator
Gathering detailed insights and metrics for mochawesome-report-generator
Standalone mochawesome report generator. Just add test data.
npm install mochawesome-report-generator
Module System
Min. Node Version
Typescript Support
Node Version
NPM Version
234 Stars
307 Commits
89 Forks
8 Watching
19 Branches
5 Contributors
Updated on 01 Nov 2024
JavaScript (85.86%)
CSS (14.14%)
Cumulative downloads
Total Downloads
Last day
-5.1%
255,017
Compared to previous day
Last week
2.3%
1,427,929
Compared to previous week
Last month
5.6%
5,992,349
Compared to previous month
Last year
17.8%
66,452,900
Compared to previous year
12
76
marge (mochawesome-report-generator) is the counterpart to mochawesome, a custom reporter for use with the Javascript testing framework, mocha. Marge takes the JSON output from mochawesome and generates a full fledged HTML/CSS report that helps visualize your test suites.
npm install --save-dev mochawesome
mocha testfile.js --reporter mochawesome
1var mocha = new Mocha({
2 reporter: 'mochawesome'
3});
Install mochawesome-report-generator package
1npm install -g mochawesome-report-generator
Run the command
1marge [options] data_file [data_file2 ...]
marge generates the following inside your project directory:
mochawesome-report/
├── assets
│  ├── app.css
│  ├── app.js
│  ├── MaterialIcons-Regular.woff
│  ├── MaterialIcons-Regular.woff2
│  ├── roboto-light-webfont.woff
│  ├── roboto-light-webfont.woff2
│  ├── roboto-medium-webfont.woff
│  ├── roboto-medium-webfont.woff2
│  ├── roboto-regular-webfont.woff
│  └── roboto-regular-webfont.woff2
└── mochawesome.html
marge can be configured via the following command line flags:
Flag | Type | Default | Description |
---|---|---|---|
-f, --reportFilename | string | mochawesome | Filename of saved report. See notes for available token replacements. |
-o, --reportDir | string | [cwd]/mochawesome-report | Path to save report |
-t, --reportTitle | string | mochawesome | Report title |
-p, --reportPageTitle | string | mochawesome-report | Browser title |
-i, --inline | boolean | false | Inline report assets (scripts, styles) |
--cdn | boolean | false | Load report assets via CDN (unpkg.com) |
--assetsDir | string | [cwd]/mochawesome-report/assets | Path to save report assets (js/css) |
--charts | boolean | false | Display Suite charts |
--code | boolean | true | Display test code |
--autoOpen | boolean | false | Automatically open the report |
--overwrite | boolean | true | Overwrite existing report files. See notes. |
--timestamp, --ts | string | Append timestamp in specified format to report filename. See notes. | |
--showPassed | boolean | true | Set initial state of "Show Passed" filter |
--showFailed | boolean | true | Set initial state of "Show Failed" filter |
--showPending | boolean | true | Set initial state of "Show Pending" filter |
--showSkipped | boolean | false | Set initial state of "Show Skipped" filter |
--showHooks | string | failed | Set the default display mode for hooks • failed : show only failed hooks• always : show all hooks• never : hide all hooks• context : show only hooks that have context |
--saveJson | boolean | false | Should report data be saved to JSON file |
--saveHtml | boolean | true | Should report be saved to HTML file |
--dev | boolean | false | Enable dev mode (requires local webpack dev server) |
-h, --help | Show CLI help |
Boolean options can be negated by adding --no
before the option. For example: --no-code
would set code
to false
.
Using the following tokens it is possible to dynamically alter the filename of the generated report.
timestamp
option.For example, given the spec cypress/integration/sample.spec.js
and the following config:
{
reporter: "mochawesome",
reporterOptions: {
reportFilename: "[status]_[datetime]-[name]-report",
timestamp: "longDate"
}
}
The resulting report file will be named pass_February_23_2022-sample-report.html
Note: The [name]
replacement only occurs when mocha is running one spec file per process and outputting a separate report for each spec. The most common use-case is with Cypress.
By default, report files are overwritten by subsequent report generation. Passing --overwrite=false
will not replace existing files. Instead, if a duplicate filename is found, the report will be saved with a counter digit added to the filename. (ie. mochawesome_001.html
).
Note: overwrite
will always be false
when passing multiple files or using the timestamp
option.
The timestamp
option can be used to append a timestamp to the report filename. It uses dateformat to parse format strings so you can pass any valid string that dateformat accepts with a few exceptions. In order to produce valid filenames, the following
replacements are made:
Characters | Replacement | Example | Output |
---|---|---|---|
spaces, commas | underscore | Wed March 29, 2017 | Wed_March_29_2017 |
slashes | hyphen | 3/29/2017 | 3-29-2017 |
colons | null | 17:46:21 | 174621 |
If you pass true
as the format string, it will default to isoDateTime
.
reporter-options
The above CLI flags can be used as reporter-options
when using the mochawesome reporter.
Use them in a .mocharc.js
file:
1module.exports = { 2 reporter: 'node_modules/mochawesome', 3 'reporter-option': [ 4 'overwrite=true', 5 'reportTitle=My\ Custom\ Title', 6 'showPassed=false' 7 ], 8};
or as an object when using mocha programmatically:
1const mocha = new Mocha({
2 reporter: 'mochawesome',
3 reporterOptions: {
4 overwrite: true,
5 reportTitle: 'My Custom Title',
6 showPassed: false
7 }
8});
To develop locally, clone the repo and install dependencies. In order to test end-to-end you must also clone mochawesome into a directory at the same level as this repo.
You can start the dev server with npm run devserver
. If you are working on the CLI, use npm run dev:cli
to watch for changes and rebuild.
To run unit tests, simply use npm run test
. You can also run a single unit test with npm run test:single path/to/test.js
.
Functional tests allow you to run real-world test cases in order to debug the output report. First, start up the dev server in one terminal window with npm run devserver
. Then, in another window, run the tests with npm run test:functional
. This will generate a report that you can open in the browser and debug.
If you want to run a specific folder of functional tests:
npm run test:functional path/to/tests
Or if you want to run a single test:
npm run test:functional path/to/test.js
Or mix and match:
npm run test:functional path/to/some/tests path/to/another/test.js
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
dependency not pinned by hash detected -- score normalized to 2
Details
Reason
Found 0/15 approved changesets -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
Reason
security policy file not detected
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
130 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-11-25
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn Moremochawesome
A gorgeous reporter for Mocha.js
@squaredup/mochawesome-report-generator
Generates gorgeous HTML reports from mochawesome reporter.
mochawesome-merge
Merge several Mochawesome JSON reports
cypress-mochawesome-reporter
Zero config Mochawesome reporter for Cypress with screenshots