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.
##Features
- All-new redesigned and streamlined report
- At-a-glance stats including pass percentage
- Beautiful charts
- Support for nested
describes - Supports pending tests
- Filter view by test type
- Quick navigation menu
- Review test code inline
- Stack trace for failed tests
- Inline diffs for actual vs expected results
- Responsive and mobile-friendly
- Supports displaying additional test context
- Custom report options
- Offline viewing
- CLI for generating reports independent of mochawesome
##Browser Support Tested to work in Chrome. Should work in any modern web browser including IE9+. marge generates a self-contained report that can be viewed offline.
##Sample Report
##Usage
via CLI
Install mochawesome-report-generator package
npm install -g mochawesome-report-generatorRun the command
marge [test-output.json] <options>via Mochawesome reporter
See mochawesome docs.
##Output 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
##CLI Options
marge can be configured via command line flags
| Flag | Type | Default | Description |
|---|---|---|---|
| -f, --reportFilename | string | mochawesome | Filename of saved report |
| -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) |
| --charts | boolean | true | Display Suite charts |
| --code | boolean | true | Display test code |
| --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.