# mochawesome-uirecorder

> A Gorgeous HTML/CSS Reporter for Mocha.js

Latest version **1.5.25** (published 2018-11-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install mochawesome-uirecorder
pnpm add mochawesome-uirecorder
yarn add mochawesome-uirecorder
bun add mochawesome-uirecorder
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.25 |
| Published | 2018-11-02 |
| First published | 2016-11-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 12 |
| Unpacked size | 943.2 KB |
| Known vulnerabilities | 0 (+11 in 3 direct dependencies) |
| Install scripts | no |
| Author | Adam Gruber |
| Maintainers | stngle, yaniswang |
| Keywords | mocha, reporter, json, handlebars |

## Links

- npm: https://www.npmjs.com/package/mochawesome-uirecorder
- Repository: https://github.com/stngle/mochawesome
- Homepage: https://github.com/stngle/mochawesome#readme
- Issues: https://github.com/stngle/mochawesome/issues
- npm.io page: https://npm.io/package/mochawesome-uirecorder

## Dependencies (12)

- [ncp](https://npm.io/package/ncp.md) ^1.0.1
- [xml](https://npm.io/package/xml.md) ^1.0.1
- [async](https://npm.io/package/async.md) ^0.9.0
- [chalk](https://npm.io/package/chalk.md) ^1.0.0
- [lodash](https://npm.io/package/lodash.md) ^3.1.0
- [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1
- [moment](https://npm.io/package/moment.md) ^2.9.0
- [opener](https://npm.io/package/opener.md) ^1.4.1
- [node-uuid](https://npm.io/package/node-uuid.md) ^1.4.1
- [handlebars](https://npm.io/package/handlebars.md) ^3.0.3
- [highlight.js](https://npm.io/package/highlight.js.md) ^8.5.0
- [json-stringify-safe](https://npm.io/package/json-stringify-safe.md) ^5.0.0

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.5.25 (latest) — 2018-11-02
- 1.5.22-b4 (beta) — 2017-10-25
- 1.5.8-b1 (beat) — 2016-11-22
- 1.5.24 — 2018-10-15
- 1.5.23 — 2018-10-15
- 1.5.22 — 2017-10-25
- 1.5.22-b3 — 2017-10-25
- 1.5.22-b2 — 2017-10-25
- 1.5.22-b1 — 2017-10-25
- 1.5.21 — 2017-06-12
- 1.5.21-b1 — 2017-06-09
- 1.5.20 — 2017-01-24
- 1.5.20-b2 — 2017-01-24
- 1.5.20-b1 — 2017-01-24
- 1.5.19 — 2017-01-23
- … 26 more at https://npm.io/package/mochawesome-uirecorder/versions

## README

mochawesome
===========
[![npm](https://img.shields.io/npm/v/mochawesome-uirecorder.svg?style=flat-square)](http://www.npmjs.com/package/mochawesome-uirecorder)

Mochawesome is a custom reporter for use with the Javascript testing framework, [mocha][1]. It generates a full fledged HTML/CSS report that helps visualize your test suites.

##New in 1.4.0
- Added a slide-over navigation menu. Save time by quickly jumping to a specific test suite. The menu also gives you a quick way to see which suites are passing or have failing, skipped, or pending tests.

##Features
- At-a-glance stats including pass percentage
- Beautiful charts
- Support for nested `describe`s
- Supports pending tests
- Filter view by test type
- Quick navigation menu
- Review test code inline
- Stack trace for failed tests
- Responsive and mobile-friendly
- Saves JSON output for further processing
- Custom report [options](#options)
- Offline viewing

##Browser Support
Tested to work in Chrome. *Should* work in any modern web browser including IE9+.
Mochawesome generates a self-contained report that can be viewed offline. 

##Sample Report

<img src="./docs/mochawesome-1_4.png" alt="Mochawesome Report" width="75%" />
<img src="./docs/mochawesome-menu-1_4.png" alt="Mochawesome Report Menu" width="75%" />


##Usage

1. Add Mochawesome to your project:

  `npm install --save-dev mochawesome`

2. Tell mocha to use the Mochawesome reporter:

  `mocha testfile.js --reporter mochawesome`

3. If using mocha programatically:

  ```js
  var mocha = new Mocha({
      reporter: 'mochawesome'
  });
  ```

##Output
Mochawesome generates the following inside your project directory:
```
mochawesome-reports/
├── css
│   └── mochawesome.css
├── fonts
│   ├── Roboto+Condensed_300_normal.ttf
│   ├── Roboto+Condensed_300_normal.woff
│   ├── Roboto+Condensed_400_normal.svg
│   ├── Roboto+Condensed_400_normal.ttf
│   ├── Roboto+Condensed_400_normal.woff
│   ├── Roboto+Condensed_700_normal.ttf
│   ├── Roboto+Condensed_700_normal.woff
│   ├── Roboto+Slab_400_normal.svg
│   ├── Roboto+Slab_400_normal.ttf
│   ├── Roboto+Slab_400_normal.woff
│   ├── mochawesome.eot
│   ├── mochawesome.svg
│   ├── mochawesome.ttf
│   └── mochawesome.woff
├── js
│   ├── mochawesome.js
│   └── vendor.js
├── mochawesome.html
└── mochawesome.json
```

The two main files to be aware of are:

**mochawesome.html** - The rendered report file

**mochawesome.json** - The raw json output used to render the report


##Options
Mochawesome supports options via environment variables or passed in to mocha via `--reporter-options`.

- `reportDir: {String}` - changes the name of the report directory
- `reportName: {String}` - changes the name of the report file
- `reportTitle: {Sring}` - changes the title of the report
- `inlineAssets: {Boolean}` - when `true` inlines all report assets into a self-contained report file

*Setting a custom filename will change both the report html and json files.*

**Options passed in will take precedence over environment variables.**


####Environment variables
```bash
$ export MOCHAWESOME_REPORTDIR=customReportDir
$ export MOCHAWESOME_REPORTNAME=customReportName
$ export MOCHAWESOME_REPORTTITLE=customReportTitle
$ export MOCHAWESOME_INLINEASSETS=true
```

####Mocha options
```bash
$ mocha test.js --reporter mochawesome --reporter-options reportDir=customReportDir,reportName=customReportName,reportTitle=customReportTitle,inlineAssets=true
```

```js
var mocha = new Mocha({
    reporter: 'mochawesome',
    reporterOptions: {
      reportDir: 'customReportDir',
      reportName: 'customReportName',
      reportTitle: 'customReportTitle',
      inlineAssets: true
    }
});
  ```


##Development
If you wish to make changes to the reporter you will need to clone the repo and build locally. Building requires you to have [gulp](https://github.com/gulpjs/gulp) installed.

###Installation
```sh
$ git clone https://github.dowjones.net/grubera/mochawesome
```
###Modifying
Reporter files are found in `/lib` directory.
Templates, styles, and client-side scripts are in the `/src` directory.

###Building
There are several gulp tasks available but the main ones to be aware of are:

####`gulp build` - Full Build
Runs jshint, parses LESS, compiles templates, concatenates and minifies scripts.
*Note: This task will fail if linting fails.*

####`gulp watch` - Watch Files
Watches for changes to JS, LESS, and MU and builds when a change is detected. If a change is detected in a JS file this will run jshint first before building and will fail on any lint errors.

####`gulp lint` - Lint JS
This will run jshint only, no building will occur.

####`gulp test` - Run Test
After building you can run this to test the reporter and see the output.
*Note: The default gulp task will run this task.*

####`gulp testOpts` - Run Test with Options
After building you can run this to test the reporter and see the output.

[1]: http://visionmedia.github.io/mocha/

---
_Source: https://npm.io/package/mochawesome-uirecorder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._